Webサイト制作実績をまとめたポートフォリオの作り方を徹底解説!


Webサイト実績をまとめたポートフォリオの作り方がわからない…
必要な項目やクオリティを高めるコツも具体的に知りたいな…

サイトのURLやコンセプトなどはメモしていても、魅力的に見せるポートフォリオを作っている方は意外と少ないです。転職時に必要なことはわかっていたけど、忙しくて手が出せなかった……という方もいるかもしれませんね。

こんにちは! フリーランスエンジニア兼テックライターのワキザカです。

この記事では、Webサイト制作実績をまとめたポートフォリオの作り方を解説します。

ポートフォリオに必要な項目だけでなく、クオリティを高めるコツについても解説しているので、ぜひ参考にしてみてくださいね。

この記事はこんな人のために書きました。

  • Webサイト制作実績をまとめたポートフォリオの作り方を知りたい
  • ポートフォリオに必要な項目やクオリティを高めるコツを知りたい
目次

Webサイトの実績をまとめたポートフォリオの作り方とは?

Webサイトの実績をまとめたポートフォリオの作り方は、大きく分けて以下の2つです。


ポートフォリオの作り方

  • 方法1:無料サービスを使って作る
  • 方法2:自分で設計・コーディングして作る


ひとつずつ詳しく解説しますね。

①無料サービスを使って作る

ポートフォリオと聞くと身構える人もいるかもしれませんが、無料サービスを使えば簡単に作れます。たとえば以下のようなサービスがあります。

サービス名特徴
WIX(ウィックス)・誰でも簡単にホームページが作れるWebサービス
・ドラッグ&ドロップで簡単かつ自由に作れる
・簡単な質問に答えるだけで、サイトの元を作れる
RESUME(レジュメ)・おしゃれなポートフォリオ作成に特化したWEBサービス
・作ったアプリのポートフォリオだけでなく、Web版の履歴書も載せれる
・開発時のストーリーを載せるページを作れる

『WIX』は無料でホームページが作れるWebサービスです。ポートフォリオサイトのような簡単なWebサイトであれば、簡単に作れます。

また、『RESUME』はウェブデザインメディア『サルワカ』の管理人が作った、ポートフォリオ作成サービスです。デザインがおしゃれなので、ポートフォリオの作成に打ってつけです。

また、実績ごとに子ページを作れるため、より詳細な作成過程も残せます。

転職でポートフォリオを活用するときは、「出来上がったサイト + 作った経緯」が重要です。作った経緯を残せるサービスは少ないので、最初からあるのは便利ですよね。

②自分で設計・コーディングして作る

事前にある型をつかって作るWIXやRESUMEは、オリジナリティが出しづらいです。ポートフォリオサイトも実績として活用するなら、自分で設計・コーティングすることもひとつの手です。

たとえば、『STUDIO』を使えば、設計したデザインから自動でコードを出力できます。以下はフリーランスデザイナーの方のポートフォリオですが、STUDIOで作成されています。

参考:奥貫あずさポートフォリオ

オリジナリティのあるサイトを作れるため、ポートフォリオサイトも一つの実績として訴えやすくなりますね。

ポートフォリオサイトには何を載せればいいの?


ポートフォリオの作り方はわかったけど、
具体的に何を載せればいいんだろう……

と思っている方もいるのではないでしょうか。ポートフォリオは、大きく分けて以下の2つを載せることが重要です。


ポートフォリオで必須の項目

  • 本人のスキルが可視化されたページを用意する
  • 今まで作った実績を載せる


「当たり前じゃないか」と思った方もいるかもしれませんが、作った実績と一口に言っても色々見せ方はあります。ひとつずつ詳しく解説しますね。

①本人のスキルが可視化されたページを用意する

ポートフォリオの実績がいかに優れていても、誰が作ったのかわからないサイトは信頼できないですよね。

たとえば以下の2人だと、同じ実績が載っていても印象が変わってきます。


ベテランエンジニアの例


フロントエンジニア歴5年で、HTML、CSS、JavaScript、jQueryなど言語全般使えます。

また、Sketchでデザインモックを作ってから、コーディングに落とし込むこともできるので、デザイナーとのコミュニケーションコストも抑えられます。

PhotoshopやIllustratorもひと通り使えるため、画像加工なども自分で用意できます。



駆け出しエンジニアの例


フロントエンジニア歴半年です。HTML、CSS、JavaScriptを使って、Webサイトが作れます。

Bootstrapのテンプレートを使ったサイト制作であれば、3日程度で納品も可能です。低価格&スピード重視で依頼したい方に、おすすめです。


ベテランエンジニアの場合は、Webサイト制作スキルが「コーディング」だけでなく「デザイン」もあることが伝わりますよね。そのため、実績を見ても自分でデザインもしたことが伝わりやすいです。

また、駆け出しエンジニアの場合でも、自分のスキルに合わせてサイト制作ができるスキルが伝わります。何かを依頼したときに、自分でできる/できないの判断ができるため、コミュニケーションの取りやすいです。

ただ、何も書いていない場合は、上記どちらか判断できません。実績以上のスキルを伝えたり、成長意欲をくみ取ってもらえなくなってしまいます。

正しく自分のスキルを伝えるためにも、スキルを可視化したページは必要なのです。

②今まで作った実績を載せる

ポートフォリオで重要なのは、「今までどのぐらいの実績があるか?」「サイト制作実績のスキルとして何を持っているか?」です。

そのため、以下の2つのページを用意しておくのがおすすめです。

  • Webサイト制作一覧が見れるページ
  • Webサイト制作実績ごとの詳細ページ

それぞれ詳しく解説しますね。

Webサイト制作一覧が見れるページ

Webサイト制作一覧が見れるページは必須です。

ポートフォリオサイトを見る人は、「今までどんな実績があるの?」と疑問に思っていますよね。その疑問を解消するページです。

以下のような項目を載せた実績を、作った分だけ載せるイメージです。


Webサイト制作実績一覧ページで載せる項目一覧

  • 実績のイメージ画像
  • サイト名
  • 使用言語
  • コンセプト
  • 詳細ページへのリンク



Webサイト制作実績一覧ページの例

画像で成果物の実績をわかりやすく見せて、使った言語やコンセプトを併せて載せます。「どんなジャンルに強いのか?」「今までどんな実績があるのか?」がパッと見てわかりますよね。

また、実績ごとの詳細ページに移動するボタンも、用意しておくのがおすすめです。

Webサイト制作一覧実績ごとの詳細ページ

Webサイト制作実績一覧ページができたら、制作過程や詳細がわかるページを用意します。

以下を参考に、詳細ページを用意しましょう。


詳細ページに用意しておくとおすすめの項目一覧

  • どんな言語で作ったか
  • どのぐらいの期間で作ったか
  • 工夫点
  • 制作ストーリー
  • GitHubの情報


どんなスキルがあるのか?作るにあたって工夫したポイントなどを、詳細に載せていきます。また、GitHubの情報も載せておくと、「コードレベルでスキルを見たい人」に正確に情報を伝えることができます。

いくらWebサイトの見た目が綺麗に見えても、コードの書き方を見ればレベルは伝わるものです。

面接で質問されたときにあたふたするよりも、今の自分の実力を見せたほうが、転職活動も進めやすいですよ!

ポートフォリオサイトのクオリティを高めるコツ

ここまで、ポートフォリオ作成方法や具体的な作り方について解説しました。ただ、同じようにポートフォリオサイトを作ったつもりでも、人によってクオリティに差は出てきます。

そこで次に、ポートフォリオのクオリティを高めるコツについて解説します。クオリティを高めるコツは、大きく分けて以下の3つです。

  • コツ1:企業の人事が知りたいことを載せる
  • コツ2:自身で試行錯誤して作った経緯を載せる
  • コツ3:ポートフォリオ作成実績のある人に相談する

①企業の人事が知りたいことを載せる

ポートフォリオは、転職活動で使うことが多いですよね。そのため、見せる人(企業の人事)が欲しい情報を載せると、クオリティが上がります。

たとえば「スキル」を伝えるときも、以下のように書き方によって伝わり方が変わってきます。

  • Aさん:HTML、CSS、JavaScriptなどの言語全般使えます
  • Bさん:デザインデータからサイトを作った経験が10つあります
  • Cさん:毎月10件、累計50件以上のサイト作成実績があります。全てデザインデータから、サイト作成しています。

伝える内容によって、スキルの伝わり方は変わってきます。

また、採用担当側からすると、コミュニケーションスキルも重要です。「スキルは高いけど、意思疎通が取りづらい人」は採用したくないですよね。

このように、採用者目線で必要なスキルが伝わるように、ポートフォリオを用意しておくとクオリティがグッと上がります。

たとえば、以下の項目に応えるような、内容です。


採用者が知りたいことの例

  • 採用しても、うちで仕事出来る人かな?
  • 自分の役割をこなすためのスキルは持っているかな?
  • 自分でスキルを高めていくような意欲のある人かな?


②自身で試行錯誤して作った経緯を載せる

「①企業の人事が知りたいことを載せる」に近いですが、熱意を持って試行錯誤した痕跡がポートフォリオに載っていることは、とても重要です。

目的を満たすだけのコンテンツは、時間をかければ誰でも作れますよね。ただ、熱意をもって細部まで妥協せず、コンテンツを作り上げられる人は少ないです。

Webサイト制作のテンプレを使いまわして作っている人を除き、何かしらこだわりがあるはずです。その過程を残しておくと、ポートフォリオが実績を見せるだけのサイトではなく、作り手の意図も読み取れるようになるのです。

「どんな人が作ったか?」がより伝わりやすくなるので、試行錯誤の過程は残しておきましょう。

③ポートフォリオ作成実績のある人に相談する

今まで解説した方法を意識しても、慣れないうちはクオリティを上げることが難しいです。

なぜなら、「クオリティの高さ」の判断が難しいからです。また、自分で作った時は、ダメな点を見極めづらいです。

そのため、ポートフォリオ作成実績のある人に相談することがおすすめです。

侍エンジニアでは、Webサイト制作の実績を作るだけでなく、ポートフォリオサイトの作り方も相談することができます。転職時に採用担当が見ている視点もより詳しく相談ができるので、転職活動も捗ります。

以下から無料レッスンが受けられるので、予定を合わせて相談してみてはいかがでしょうか。

侍エンジニア
無料カウンセリングを受ける

まとめ

今回は、Webサイト制作実績をまとめたポートフォリオの作り方について解説しました。

せっかくサイト制作実績があるなら、魅力的にまとめたポートフォリオを作りたいですよね。

デザインが苦手ならWIX、RESUMEなどの無料サービスでまずは作ってみて、デザインもできるようになったらSTUDIOを使ってオリジナルデザインのポートフォリオを作るのがおすすめです。

ぜひ、ポートフォリオサイトを作ってみてくださいね!

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次