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

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

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

この記事では、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サイト制作実績一覧ページができたら、制作過程や詳細がわかるページを用意します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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