Webデザイナーにとって、ポートフォリオは「自分の実力を証明する最も重要なツール」です。転職でもフリーランスの案件獲得でも、ポートフォリオの質が結果を大きく左右します。
優れたポートフォリオは「何が作れるか」だけでなく「どう考えて作ったか」が伝わるものです。作品を並べるだけでなく、制作の背景やプロセスまで見せることで、スキルと思考力の両方をアピールできます。
この記事では、ポートフォリオに載せるべき内容、形式の選び方、作品がないときの対処法、そして見せ方のコツまで、ポートフォリオ制作に必要な情報を網羅的に解説します。
ポートフォリオに載せるべきもの
ポートフォリオには、以下の4つの要素を含めるのが基本です。
- 作品5〜10点（量より質を重視して厳選する）
- 制作の背景（どんな課題を解決したか、ターゲットは誰か）
- 使用ツール・技術（Figma、HTML/CSS、JavaScript等）
- 自己紹介（経歴、スキル、得意分野）
作品は5〜10点を厳選する
数を揃えることよりも、質の高い作品を厳選することが重要です。20点載せるよりも5点を丁寧に見せるほうが、見る側にとって印象に残ります。
掲載する作品は、できるだけバリエーションを持たせましょう。たとえば「LP制作」「コーポレートサイト」「バナー」「アプリUI」のように、異なる種類の制作物があると対応力の幅を示せます。
制作の背景を言語化する
見た目の完成度だけでなく、「なぜこのデザインにしたのか」を言語化することが非常に大切です。具体的には以下の項目を記載しましょう。
- クライアントの課題・要望（架空の案件でもOK）
- ターゲットユーザーの設定
- デザインで工夫したポイント
- 成果（PVアップ、CVR改善など数値があればなお良い）
使用ツール・技術を明記する
各作品で使用したツールと技術を明記しましょう。「Figmaでデザイン → HTML/CSS/JavaScriptでコーディング → WordPressで実装」のように、制作フローがわかると採用担当者やクライアントにとって判断材料になります。Figmaの使い方については以下の記事で初心者向けに解説しています。
自己紹介は簡潔に
経歴、得意分野、スキルセット、連絡先をコンパクトにまとめます。長々と書く必要はありません。「この人に頼んだらどんなことができるか」が一目でわかるようにしましょう。
ポートフォリオの形式を選ぶ
ポートフォリオの形式は大きく2つあります。理想はWebサイト型をメインにして、PDF型をサブで用意する併用スタイルです。
Webサイト型（メインとしておすすめ）
| メリット | デメリット |
|---|---|
| サイト自体がスキルの証明になる | 制作に時間がかかる |
| URLを送るだけで見せられる | ホスティング費用がかかる場合がある |
| 更新・追加が容易 | 閲覧環境（ブラウザ等）による表示差異 |
自分でデザイン・コーディングしたWebサイトをポートフォリオにすれば、サイト自体がデザインスキルとコーディングスキルの証明になります。WordPress、STUDIO、Figmaの共有機能などを使って制作できます。
PDF型（サブとして用意）
印刷して面接に持参したり、メールに添付したりする場合に便利です。Webサイト型と併用するのがおすすめです。
PDF型を作る場合は、A4サイズ10〜15ページ程度にまとめるのが適切です。作品のスクリーンショット、制作背景、使用技術を1作品あたり1〜2ページで簡潔にまとめましょう。
作品がないときの対処法
未経験の方や転職を考え始めたばかりの方は、載せる作品がないという壁にぶつかります。以下の方法で作品を増やしましょう。
架空のクライアント案件を作る
「地元のカフェのWebサイト」「オンラインヨガスタジオのLP」など、架空のクライアントと案件を設定して制作します。ターゲットユーザー、課題、ゴールを自分で設定してから作ると、リアルな案件と同じプロセスで制作できます。
既存サイトのリデザイン
実在するWebサイトを「もっとこうしたら良くなるのでは？」という視点でリデザインします。ビフォーアフターを見せられるので、デザインの改善力をアピールできるのが強みです。
既存サイトのリデザインをポートフォリオに載せる場合は、「個人の練習作品です」と明記しましょう。元のサイトのオーナーに許可なく「自分の制作実績」として紹介するのはNGです。
知人のサイトを無料で作る
友人や知人で「Webサイトがほしい」という人がいれば、無料で制作させてもらいましょう。実際のクライアントとのやりとりを経験できるので、スキルアップにもつながります。未経験からの転職方法については以下の記事で詳しくまとめています。
コンペに参加する
クラウドソーシングのコンペ形式の案件に参加してみるのも良い方法です。採用されなくても、制作した作品はポートフォリオに活用できます（コンペの規約で許可されている場合）。
ポートフォリオの見せ方のコツ
ビフォーアフターを見せる
リデザインの案件や改善提案を含む作品では、ビフォーアフターの比較が効果的です。「何が問題だったか→どう改善したか」が視覚的に伝わります。
制作プロセスを見せる
ワイヤーフレーム → デザインカンプ → 完成品の流れを見せることで、デザイン思考のプロセスが伝わります。プロセスを見せられるデザイナーは「再現性がある」と評価されるため、採用や受注に有利に働きます。
数字で成果を示す
「リニューアル後にPVが30%アップ」「CVRが1.5倍に改善」など、数字で成果を示せると説得力が格段に上がります。実務経験がある方は、可能な範囲で数値データを盛り込みましょう。
レスポンシブ対応を見せる
PC版とスマートフォン版の両方のデザインを見せることで、レスポンシブデザインのスキルをアピールできます。記事執筆時点ではスマートフォンからのアクセスが全体の7割以上を占めるため、スマホ対応は必須スキルです。レスポンシブデザインのやり方については以下の記事で解説しています。
参考として、Awwwardsで受賞しているサイトはポートフォリオの参考になりますし、MDN Web Docsではレスポンシブデザインの技術的な実装方法を学べます。
ポートフォリオ制作でよくある失敗
| 失敗パターン | 問題点 | 改善策 |
|---|---|---|
| 作品を20点以上載せている | 見る側が疲れて印象に残らない | 5〜10点に厳選する |
| 作品の画像だけで説明がない | デザインの意図が伝わらない | 制作背景・プロセスを添える |
| 古い作品を載せ続けている | 現在のスキルレベルが判断できない | 定期的に入れ替える |
| ポートフォリオ自体のデザインが雑 | 「この人に頼んで大丈夫？」と思われる | ポートフォリオ自体にもこだわる |
よくある質問（Q&A）
Q. ポートフォリオは何作品あれば十分？
A. 5〜10作品が目安です。転職活動では5作品あれば最低限。案件獲得なら3〜5作品でも、質が高ければ十分に通用します。
Q. 会社で制作した作品はポートフォリオに載せていい？
A. NDA（秘密保持契約）や社内規定で制限されている場合があります。掲載する前に必ず会社に確認しましょう。掲載NGの場合は、デザインの一部をぼかしたり、制作プロセスのみを見せるなどの工夫ができます。
Q. ポートフォリオの制作ツールは何がおすすめ？
A. コーディングスキルがあれば自作がベストです。コーディングに自信がない場合は、STUDIO（ノーコードツール）やWordPressを活用するのがおすすめです。いずれの場合も、デザインの質にこだわることが最優先です。
Q. どのくらいの頻度で更新すべき？
A. 新しい作品ができたタイミングで随時更新するのが理想的です。少なくとも半年に1回は見直して、古い作品を新しい作品に入れ替えましょう。
Q. ポートフォリオのURLはどこに貼る？
A. 履歴書・職務経歴書、クラウドソーシングのプロフィール、SNSのプロフィール欄、名刺など、あらゆる場所にリンクを掲載しましょう。見てもらえる機会を最大化することが大切です。
まとめ：ポートフォリオはWebデザイナーの「名刺」であり「営業ツール」
- 作品は5〜10点を厳選し、制作背景とプロセスを添える
- Webサイト型をメインに、PDF型をサブで用意する
- 作品がなければ架空案件やリデザインで制作する
- ビフォーアフター、制作プロセス、数値データで説得力を高める
- ポートフォリオ自体のデザインの質にもこだわる
- 新しい作品ができるたびに随時更新する
ポートフォリオは、Webデザイナーとしてのキャリアを左右する重要なツールです。完璧を目指す必要はありませんが、「この人に頼みたい」と思わせるクオリティを目指して、丁寧に作り込んでいきましょう。
