Webデザイナーとして転職やフリーランスでの案件獲得を目指すなら、ポートフォリオは避けて通れません。「実績がない状態でどうやって作ればいいの？」「何を載せれば評価されるの？」という疑問を持つ方は非常に多いです。
ポートフォリオは「作品の見た目」だけでなく「なぜそのデザインにしたのか」という思考プロセスまで伝えることで、未経験でも高く評価されるものに仕上がります。
この記事では、ポートフォリオの推奨構成、掲載すべきコンテンツ、未経験者が差をつけるためのコツを具体的に解説していきます。
ポートフォリオに必要な5つのページ構成
ポートフォリオサイトの構成は、以下の5つのページで組み立てるのが基本です。
1. トップページ
訪問者が最初に目にするページです。自分の名前（またはハンドルネーム）、キャッチコピー、代表的な作品のサムネイルを配置します。トップページの印象で「もっと見たい」と思わせられるかどうかが勝負です。
2. プロフィールページ
経歴、Webデザインを目指した理由、学習してきた内容、今後の目標を記載します。未経験の場合は「前職でどんな経験をしてきたか」「なぜキャリアチェンジを決意したか」を具体的に書くと、人物像が伝わりやすくなります。
3. 制作実績ページ
ポートフォリオの核となるページです。各作品について、以下の情報を必ず記載しましょう。
- 制作背景：誰のために、どんな目的で制作したか
- コンセプト：デザインの方向性やターゲットユーザー
- 使用ツール：Figma、Photoshop、HTML/CSSなど
- こだわったポイント：配色、レイアウト、UXの工夫
- 制作期間：どれくらいの時間をかけたか
4. スキルページ
使用可能なツール、言語、デザイン手法をまとめて記載します。習熟度をグラフや星評価で視覚的に示すと、一目でスキルレベルが伝わります。
5. お問い合わせページ
連絡先としてメールアドレス、SNSアカウント、問い合わせフォームを設置します。せっかく作品を見て興味を持ってもらえても、連絡手段がわかりにくいと機会損失になります。
ポートフォリオサイト自体が「あなたの作品」として評価されます。サイトのデザイン、使いやすさ、レスポンシブ対応の品質もチェックされるため、手を抜かずに仕上げましょう。
ページ構成や作品の見せ方に迷ったときは、ポートフォリオの作例を集めた本を参考にする方法もあります。
掲載する作品数と選び方
質の高い作品を3〜5点に厳選する
作品の数よりも質が重要です。初心者が陥りがちなミスは「とにかくたくさん載せよう」として中途半端な作品を並べてしまうこと。数が多くても、質が低い作品が含まれていると全体の評価を下げてしまいます。
3〜5点に厳選し、それぞれの作品について制作意図やこだわりを丁寧に説明できる状態にしておきましょう。
バリエーションを意識する
掲載する作品は、デザインの幅広さを示すためにバリエーションを持たせることが大切です。
- コーポレートサイト（ビジネス系のデザイン）
- LP（ランディングページ）のデザイン
- バナーデザイン
- モバイルアプリのUI設計
すべてのジャンルを揃える必要はありませんが、1種類だけではなく2〜3種類のデザインを含めるようにしましょう。
バナーは短時間で制作できるため、作品の種類を増やしたいときに取り組みやすいジャンルです。作例の多い本を眺めながら練習すると、構図の引き出しが増えていきます。
未経験でも作品を作る方法
架空クライアントを想定して制作する
実務経験がなくても、架空のクライアントを設定してWebサイトやLPを制作すれば、十分にポートフォリオに掲載できます。大切なのは「架空だから手を抜いていい」と考えないことです。
架空案件であっても、ターゲットユーザーの設定、競合サイトの調査、デザインコンセプトの策定を行い、実際の案件と同じプロセスで制作することが重要です。
模写からオリジナルへステップアップする
いきなりオリジナル作品を作るのが難しい場合は、まず既存のWebサイトを模写して技術を身につけ、その後にオリジナル作品の制作に取り組みましょう。模写した作品はポートフォリオに掲載しませんが、スキルアップの過程として面接で話題にすることはできます。
知人や地域の小規模ビジネスのサイトを制作する
友人の個人事業や地域の小さなお店など、リアルなクライアントのWebサイトを制作する機会があれば積極的に引き受けましょう。無料または低価格での制作であっても、「実際のクライアントワーク」という実績は、架空案件よりも説得力があります。
ポートフォリオ制作に使えるツールとサービス
自分でコーディングする場合
HTML/CSSでゼロからポートフォリオサイトを構築する方法です。コーディングスキルのアピールにもなるため、デザイナー兼コーダーとして転職したい場合は最も効果的です。GitHub Pagesを使えば、無料でサイトを公開できます。
WordPressを使う場合
WordPressの操作スキルもアピールしたい場合は、WordPressでポートフォリオサイトを構築するのが一石二鳥です。無料テーマをカスタマイズするか、自作テーマで作成すれば、さらに技術力の証明になります。
WordPressでの構築が初めての方は、画面の流れを図解した入門書を手元に置いておくと、設定で迷いにくくなります。
ポートフォリオ公開サービスを活用する場合
コーディングに自信がない場合は、RESUMEやforiioなどのポートフォリオ公開サービスを利用する方法もあります。テンプレートに沿って作品を登録するだけで、見栄えのいいポートフォリオが完成します。
ポートフォリオ公開サービスは手軽ですが、サービス自体のデザインに依存するため「自分のデザインスキル」として評価されにくい面があります。本気で転職を目指すなら、自作のポートフォリオサイトを用意するのが理想的です。
採用担当者に刺さるポートフォリオのコツ
「Why」を言語化する
採用担当者が最も重視するのは「なぜそのデザインにしたのか」という思考プロセスです。色の選定理由、レイアウトの根拠、ターゲットユーザーに合わせた工夫など、デザインの「Why」を言語化できるデザイナーは、未経験でも高く評価されます。
Before/Afterを見せる
リニューアル案件や改善提案の形で、Before（既存デザイン）とAfter（改善案）を並べて見せると、デザインの改善力が伝わります。架空のリデザイン案件として取り組むことも可能です。
レスポンシブ対応を必ず行う
ポートフォリオサイト自体がスマートフォンで崩れてしまうのは致命的です。採用担当者がスマホで閲覧するケースも多いため、レスポンシブ対応は必須です。
メディアクエリやFlexboxの使い方に不安がある方は、レスポンシブデザインに絞って解説した本で確認しておくと安心です。
よくある質問
Q. 模写した作品をポートフォリオに載せてもいいですか？
模写作品はそのまま掲載するのは避けましょう。著作権の問題があるだけでなく、オリジナリティが評価されないためです。模写で培った技術をもとに、オリジナル作品を制作してから掲載するのが正しい活用法です。
Q. ポートフォリオはいつ更新すべきですか？
新しい作品ができたタイミングで随時更新するのが理想です。古い作品を入れ替えることで、常に最新のスキルレベルを反映したポートフォリオを維持できます。最低でも3ヶ月に1回は見直しましょう。
Q. SNSのアカウントもポートフォリオに含めるべきですか？
デザイン関連の発信をしているSNSアカウントがあれば、掲載するメリットがあります。日常的にデザインについて考えている姿勢や、情報感度の高さをアピールできます。ただし、プライベートな投稿が多いアカウントは避けたほうが無難です。
まとめ
Webデザイナーのポートフォリオは、トップページ・プロフィール・制作実績・スキル・お問い合わせの5ページ構成で作るのが基本です。掲載作品は質の高いものを3〜5点に厳選し、それぞれに制作意図やデザインの根拠を丁寧に記述しましょう。
未経験であっても、架空クライアントを想定した制作物やリデザイン案件を通じて、十分に評価されるポートフォリオを作ることは可能です。「作品の見た目」だけでなく「デザインの思考プロセス」まで伝えることが、採用担当者の心をつかむ最大のポイントです。
