ポートフォリオサイトの作り方!プログラミング初心者向けに徹底解説

きたしょー
前職は銀行で5年勤務、現在はフリーランスエンジニアのきたしょーです。

  • Twitter:フォロワー1.2万人
  • プログラミング:最高月商120万円
まさる
  • ポートフォリオサイトってなに? 
  • ポートフォリオサイトの作り方が知りたい
  • ポートフォリオサイトに載せるべき情報は?

と疑問を抱えている方の悩みを解決できる記事を書きました。

 

本記事を読めば、プログラミング初心者向けのポートフォリオサイトの作り方が完璧に理解できます。

 

記事を書いてるぼくはWEB制作上場企業に常駐勤務しながら、WEB制作で月100万円以上稼いだ経験がある現役フリーランスエンジニアです

実際にぼくは本記事で解説している作成手順に沿ってポートフォリオサイトを制作し、お客様に営業して案件を獲得してきました。

 

本記事では、実際にぼくが作ったポートフォリオサイトの制作過程を解説しながら、初心者向けにポートフォリオサイトの作り方を解説していきます

 

これからポートフォリオサイトを作ろうと思っているプログラミング初心者の方はぜひ最後まで読んでみてください。

 

▼本記事で解説するポートフォリオサイト▼

 

ポートフォリオサイトとは?

ポートフォリオサイトとは、自分自身のプロフィールや制作実績を掲載したサイトのことを指します。

 

断言しますが、ポートフォリオサイトは絶対に作っておいた方がいいです

なぜなら、エンジニアにとってポートフォリオサイトはスキル証明書の役割を果たすから

 

例えば、あなたが仕事を発注するお客様だとして、以下の1と2ではどっちに仕事を依頼したいと思いますか?

 

  1. 「プログラミング毎日10時間勉強してます!仕事ください!」とお願いしてくる人
  2. 「私の制作実績はこちらです。これくらいなら1ヶ月で作れます」とだけ言う人

 

おそらく、ほとんどの人が2に仕事を依頼すると思います。

 

つまり、エンジニアがプログラミングを知らない人からの信頼を勝ち取るためには、過去の制作実績を見せるしかないんですよね

ゆえに、これからプログラミングを仕事にしたい方にとって、ポートフォリオサイトは必要不可欠なのです。

 

ポートフォリオサイトの作り方9ステップ

では、早速プログラミング初心者向けにポートフォリオサイトの作り方を解説していきます。

今回は実際にぼくが制作したポートフォリオサイトを例に説明していきますね。

 

ポートフォリオサイトの作り方9ステップ

  1. 目的を明確にする
  2. 参考サイトを決める
  3. 掲載したい情報を洗い出す
  4. サイトマップを作る
  5. ワイヤーフレームを作る
  6. デザインカンプを作る
  7. コーディングする
  8. システムを構築する
  9. サーバーにアップロードする

1:目的を明確にする

まずはポートフォリオサイトを作る目的を明確にします。

目的によってサイトの作り込み具合いや内容が変わります

 

例えば、以下のイメージです。

  • WEB制作会社に転職したい
     →コーディングの精度やJavaScriptの実装にこだわる
  • 自社開発企業や受託開発企業に転職したい
    →モダンな技術を利用しサーバーサイドの機能面にこだわる
  • 副業やフリーランスで稼ぎたい
    →素人向けに見た目や制作実績の見せ方にこだわる

 

今回、ぼくがポートフォリオサイトを制作した背景は以下です。

  • 目的:ポートフォリオサイトから商品やサービスが売れる仕組みを作りたい
  • 動機:当ブログでは、WEB制作実績の閲覧数が多いことから、初心者の方がぼくの制作実績を参考にサイト制作してる可能性が高い。ゆえに、商品やサービスが売れる仕組みを持つポートフォリオサイトを作れば、売上が増加するのではないかと予想した。

 

目的次第でサイトの構成や載せるべき情報は変わりますので、まずは何のためにポートフォリオサイトを作るのかを明確にしてくださいね

 

2:参考サイトを決める

ポートフォリオサイトを作る目的が決まったら、次は参考にするサイトを決めます。

正直、プログラミング初心者がゼロからサイトを作るのは至難の技です

 

仮にコーディングができたとしても、デザインに関してはこれまでに経験がなければ、手も足も出ません。

デザイン素人は潔く「こんなサイトが作りたい…!」と思えるサイトを真似した方が早いです

 

「えぇ、他人が作ったサイトを真似してもいいの?」と思われるかもしれません。

ですが、多くの現役デザイナーやエンジニアは参考サイトを決めてからサイト制作しています。

 

当然ですが、丸パクリはダメですよ。

 

  • 配色を真似する
  • 構成を参考にする
  • 配置を真似する

 

こんな感じで要所要所を参考にしながらサイトを作る分には全然OKです。

 

3:掲載したい情報を洗い出す

参考にしたいサイトが決まったら、次はポートフォリオサイトに掲載する情報を洗い出します。

 

ポートフォリオサイトのよくある構成

  • ファーストビュー(トップ画像)
  • About(自己紹介)
  • Skill(保有スキル)
  • Works(制作実績)
  • Contact(お問い合わせ)

 

上記5つがあれば、内容としては十分ですね。

 

今回、ぼくが制作したポートフォリオサイトは商品やサービスの販売が最大の目的だったので、上記5つに加えてService(自社の商品やサービス)を追加しました

 

本ポートフォリオサイトについては後ほど解説するワイヤーフレーム工程からデザイナーに外注しました。

デザインの仕事をお願いするにあたり必要な情報として以下をデザイナーに伝えました。

  • 目的:同上
  • 動機
:同上
  • ターゲット:プログラミング初心者
  • コンセプト:Change your life with Programming
  • サイト制作後に期待する効果
:商品やサービスの売り上げ増加
  • デザインの希望:コーディングしやすいデザイン、画像や文章を入れ替えるだけでだれでも利用できる汎用性の高いデザイン
  • サイトに必要な内容・情報・ページ
    1:ヘッダー
    2:トップ(キャッチコピー)
    3:自己紹介(名前・顔写真・生年月日・経歴・自己紹介文・スキルセット・各種SNSへのリンクなど)
    4:制作実績の紹介(制作実績のFV画像・簡単な説明文・HPへのリンク)
    5:商品やサービスの紹介(商品やサービスのFV画像・簡単な説明文・当該サイトへのリンク/個人ブログのFV画像・簡単な説明文・当該サイトへのリンク)
    6:お問い合わせフォーム
    7:フッター
  • 納期の希望:約10日間

 

ポートフォリオサイトを作る段階でデザインを外注する人はほぼいないと思いますが、参考までにどうぞ。

 

4:サイトマップを作る

ポートフォリオサイトに載せる情報を洗い出したら、次はサイトマップを作ります。

サイトマップとは?
ホームページのページ数やページ内の情報が一目で分かるサイトの全体構造を表すもの。
サイトマップ参考例

サイトマップ参考例(画像をタップするとWeb幹事のサイトマップダウンロードページに飛びます)

 

サイトマップで記載すべきこと

  • サイトの階層構造
  • ページタイトル
  • URL
  • キーワード
  • ディスクリプション

 

ページ数が複数になるサイトの場合はできるだけサイトマップを作った方がいいです

おそらく、初心者の方が最初に作るのはLPような1枚もののサイトだと思いますので、本工程は省略してOKですよ。

 

5:ワイヤーフレームを作る

サイトマップができたら、次はワイヤーフレームを作ります。

ワイヤーフレームとは?
サイトのレイアウトを定める設計図のこと。

 

現役のデザイナーやエンジニアは制作ツールを利用してワイヤーフレームを作る人が多いですが、デザイン未経験者であれば、まずは紙に手書きすればOK。

 

今回、ぼくのポートフォリオサイトのワイヤーフレームはデザイナーが作ってくれました。

きたしょー公式サイトのワイヤーフレーム

 

ポートフォリオサイトのワイヤーフレームはお客様に見せるものではありません。

なので、完成後のサイトがどんなレイアウトになるのか自分なりにイメージできれば、ザザザーっと紙に殴り書きする感じでも大丈夫です

 

おすすめのワイヤーフレーム制作ツール

6:デザインカンプを作る

ワイヤーフレームが出来上がったら、次はPhotoshopやIllustratorなどのAdobeツールでデザインカンプを作ります。

デザインカンプとは?
主にお客様に提示するデザイン案のこと。

 

正直、デザイン素人がAdobeでデザインカンプを作るのは難易度が相当高いので、本工程は省略してOKです

 

ぼくのポートフォリオサイトのデザインカンプはこちらです。

きたしょー公式サイトのデザインカンプPC版

デザインカンプPC版

きたしょー公式サイトのデザインカンプSP版

デザインカンプSP版

 

デザイン未経験者は紙に手書きしたワイヤーフレームを見ながら、そのままコーディングしちゃってください。

 

Adobeツールの使い方が学べる学習サイト

7:コーディングする

デザインが完成したら、コーディングしていきます。

ポートフォリオサイトのデザインカンプがない人がほとんどだと思いますので、ワイヤーフレームを見ながら自由気ままにコーディングしていく感じでOKです

 

今回、ぼくのポートフォリオサイトでは、お問い合わせフォームはPHPとJavaScriptで、ハンバーガーメニューはCSSとJavaScriptで実装しています。

お問い合わせフォームの実装が難しい場合は、Googleフォームなどを利用するといいでしょう。

 

コードに絶対的な正解はありませんので、最初は分からなくてもいいので、必死にググりながらコードを書いてみてください

 

8:システムを構築する

コーディングが終わったら、次はWordPressでシステムを構築していきます。

ほぼ機能がない1枚もののポートフォリオサイトの場合は、WordPressを使う必要はないので、本工程も省略してOKです

 

ぼくのポートフォリオサイトもWordPressは使用せずに静的サイトとしてサーバーにそのままアップしています。

 

9:サーバーにアップロードする

コーディングやWordPressでのシステム構築が終わったら、ポートフォリオサイトをサーバーにアップロードします。

具体的には、サイトのネット上の住所となるドメインを取得し、サイトを表示するために必要な情報を格納しておくサーバーを取得します

 

そして、FTPソフトを使用してサーバーにサイトのファイル群をアップロードすれば、ポートフォリオサイトの完成です。

 

▼本記事で解説したポートフォリオサイト▼

 

おすすめFTPソフト

File Zilla

ポートフォリオサイト制作を目標にプログラミング学習しよう

ポートフォリオサイトを作る際には、ぜひ本記事を参考にしてみてください。

 

プログラミングはサイトを作ることを目標に学習した方が圧倒的にスキルアップが早いです。

ぼくの経験上、分からないながらも必死にググりながらコードを書いていく過程が一番成長するんですよね。

 

プログラミング初心者はまずポートフォリオサイトを作ることを目標に学習していきましょう

ポートフォリオサイトを作る際には、また本記事を読み返してもらえると嬉しいです。

 

  • プログラミングに関する人気記事

プログラミング未経験者が月収100万円稼ぐまでの過程を実況する!

2019-02-06

プログラミング初心者が月15万円稼ぐまでの全ステップ【完全保存版】

2019-09-21

本気でおすすめできるプログラミングスクール5選【現役エンジニア厳選】

2019-02-24