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

きたしょー

前職は銀行で5年勤務、フリーランスエンジニアとして4年活動し、現在はWEB制作会社を経営しているきたしょーです。

X（旧Twitter）フォロワー2.5万人
最高月3,000万円

ポートフォリオサイトってなに？
ポートフォリオサイトの作り方が知りたい
ポートフォリオサイトに載せるべき情報は？

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

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

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

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

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

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

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

きたしょー公式サイトを見てみる

▼総制作費100万円超【豪華10大特典】プレゼント▼

ポートフォリオサイトとは？
ポートフォリオサイトの作り方９ステップ
ポートフォリオサイト制作を目標にプログラミング学習しよう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

１：目的を明確にする

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

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

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

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

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

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

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

２：参考サイトを決める

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

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

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

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

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

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

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

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

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

参考サイトが見つかるサイト

３：掲載したい情報を洗い出す

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

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

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

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

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

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

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

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