Webデザイナーとして就職・転職活動をする際、履歴書や職務経歴書と同じくらい、あるいはそれ以上に重要なのがポートフォリオです。企業はポートフォリオを見て応募者のスキルレベルやデザインの方向性を判断するため、ポートフォリオの出来が選考結果を左右すると言っても過言ではありません。
「未経験だから載せる作品がない」「何をどう見せればいいか分からない」という悩みを持つ方は多いですが、未経験でもポートフォリオは作れます。この記事では、ポートフォリオに何を載せるべきか、どう構成すればいいか、制作の具体的な手順を解説します。
作品の数より「1つ1つの作品をどれだけ丁寧に見せるか」が重要です。その具体的な方法も詳しく紹介するので、これからポートフォリオを作る方はぜひ参考にしてください。
ポートフォリオに載せるべき内容
必須コンテンツ
ポートフォリオには、最低限以下の要素を含めましょう。
- 自己紹介・プロフィール：名前（またはハンドルネーム）、経歴、スキルセット、使えるツールなど
- 作品一覧：制作したWebサイトやデザインの一覧。サムネイルとタイトルで視覚的に見せる
- 作品の詳細説明：各作品のコンセプト、ターゲット、使用ツール、制作期間、工夫した点
- 連絡先：メールアドレスや問い合わせフォーム
差がつく追加コンテンツ
基本要素に加えて、以下のコンテンツがあると他の応募者と差別化できます。
- 制作プロセスの紹介：ワイヤーフレーム → デザインカンプ → 完成品 の流れを画像付きで見せる
- Before/After：リデザインの事例があれば、改善前後を並べて「なぜこう変えたのか」を説明する
- スキルの証明：各スキルのレベルを可視化（グラフなど）。ただし「自称」にならないよう具体的な成果物で裏付ける
- ブログ・学習記録：日頃の学習姿勢や考え方が伝わるコンテンツ
作品数は3〜5点が理想的です。10点以上の作品を詰め込むよりも、自信のある作品を厳選して1つ1つの説明を充実させる方が、採用担当者に好印象を与えます。質が高い作品を少数見せることで「選ぶ力がある」という評価にもつながります。
未経験者が作品を用意する方法
架空のクライアントワーク
実務経験がない場合、架空のクライアントを設定して制作する方法が有効です。「地元のカフェのリニューアルサイト」「架空のスタートアップのコーポレートサイト」など、リアルな設定で制作すれば、実務に近いプロセスを経験しながら作品を作れます。
重要なのは、ただデザインを作るだけでなく「誰に向けて・何のために・どうデザインしたか」を言語化することです。この思考プロセスが伝わるポートフォリオは、未経験でも評価されます。
既存サイトのリデザイン
既存のWebサイトを自分なりにリデザインするのも、作品作りの定番手法です。「このサイトのここが使いにくい」「この情報の優先順位を変えた方が良い」といった課題を見つけ、改善案をデザインに落とし込みます。
模写コーディング
プロが制作したWebサイトを模写する「模写コーディング」は、コーディングスキルを証明する作品として活用できます。ただし、模写であることを明記し、オリジナル作品と区別することが重要です。模写だけでは「自分でデザインする力」のアピールにはならないため、オリジナル作品と合わせて掲載しましょう。
個人プロジェクト
自分のブログ、趣味のサイト、友人のイベント用サイトなど、実際に公開して運用しているサイトがあれば、それも立派な作品になります。「個人プロジェクトだからクオリティが低くても仕方ない」と思わず、ポートフォリオに載せることを前提に丁寧に作り込みましょう。
ポートフォリオサイトの構成と設計
おすすめのページ構成
ポートフォリオサイトは、シンプルな構成が好まれます。以下の4ページが基本です。
- トップページ：自分のキャッチコピーと代表作品のサムネイルを配置。第一印象を決める重要なページ
- 作品一覧ページ（Works）：全作品をサムネイル付きで一覧表示
- 作品詳細ページ：各作品のコンセプト、制作プロセス、使用ツール、工夫した点を記載
- プロフィール（About）：自己紹介、スキル、使えるツール、連絡先
作品詳細ページの書き方
作品詳細ページは、ポートフォリオの中で最も見られる部分です。以下の項目を漏れなく記載しましょう。
- プロジェクト概要：どんなサイトか、どんな目的で制作したか
- ターゲットユーザー：誰に向けたサイトか
- 課題と解決策：どんな課題を設定し、デザインでどう解決したか
- デザインの意図：配色、レイアウト、フォントの選定理由
- 使用ツール・技術：Figma、HTML/CSS、JavaScriptなど
- 制作期間：どのくらいの時間をかけたか
- スクリーンショット：PC版とスマホ版の画面キャプチャ
- サイトURL：実際に閲覧できるリンク（公開している場合）
ポートフォリオ自体がデザインスキルの証明になります。レイアウトが崩れている、フォントがバラバラ、配色に統一感がないといった状態では、どんなに良い作品を載せても逆効果です。ポートフォリオサイト自体を「代表作の一つ」として丁寧に作り込みましょう。
ポートフォリオの公開方法
自分でコーディングして公開する
HTML/CSSで一からコーディングしてサーバーにアップロードする方法です。コーディングスキルのアピールにもなるため、Webデザイナー志望なら最もおすすめの方法です。レンタルサーバー（Xserver、さくらのレンタルサーバーなど）を契約し、独自ドメインを取得して公開します。
WordPressで構築する
WordPressを使えば、CMSの知識もアピールできます。ポートフォリオ向けのテーマも多数存在し、効率的にサイトを構築可能です。更新のしやすさも大きなメリットです。
ポートフォリオサービスを利用する
コーディングなしでポートフォリオを公開できるサービスもあります。MOREWORKSやforiioは、デザイン業界に特化したポートフォリオサービスで、作品をアップロードするだけで見栄えの良いポートフォリオページが作れます。
ただし、これらのサービスはあくまで「プラットフォーム上のページ」であり、自分でサイトを構築した場合と比べて技術力のアピール度は低くなります。時間がない場合の暫定的な手段として活用するのが良いでしょう。
採用担当者がチェックしているポイント
実際にWebデザイナーの採用に関わる担当者が、ポートフォリオで見ているポイントを紹介します。
デザインの意図を説明できているか
「きれいなデザインが作れる」だけでは不十分です。「なぜこの配色にしたのか」「なぜこのレイアウトなのか」を論理的に説明できることが求められます。デザインの根拠が明確であれば、未経験でも「考える力がある」と評価されます。
ユーザー目線で考えられているか
見た目の美しさだけでなく、使いやすさ（ユーザビリティ）が考慮されているかも重要な評価ポイントです。「誰が使うのか」「何を達成したいのか」というユーザー視点が作品に反映されているかを見ています。
技術力のレベル
レスポンシブ対応ができているか、アクセシビリティに配慮しているか、コードが整理されているか（インデント、命名規則）なども確認されます。ソースコードはブラウザの開発者ツールで簡単に見られるため、コードの書き方にも注意を払いましょう。
よくある質問（Q&A）
Q：ポートフォリオに載せる作品は何点くらいが適切ですか？
A：3〜5点が適切です。数が多すぎると一つ一つの印象が薄くなり、少なすぎるとスキルの幅が伝わりません。自信のある作品を厳選し、それぞれに充実した説明を付けることを優先しましょう。質を重視した構成の方が、採用担当者の印象に残ります。
Q：サイト版とPDF版、どちらが必要ですか？
A：Webデザイナー志望であれば、基本的にサイト版のみで問題ありません。サイト版はレスポンシブ対応やインタラクションの実力も同時にアピールできます。ただし、企業によってはPDFでの提出を求められるケースもあるため、PDF版も用意しておくと安心です。
Q：模写コーディングの作品をポートフォリオに載せていいですか？
A：載せること自体は問題ありませんが、必ず「模写作品」であることを明記してください。オリジナルと誤解されると信頼を失います。また、模写だけでなくオリジナル作品も必ず含めましょう。模写はコーディングスキルの証明、オリジナルはデザイン力の証明と、それぞれ役割が異なります。
Q：学習中の作品を載せても大丈夫ですか？
A：学習中に作成した作品でも、ポートフォリオに掲載して問題ありません。ただし、クオリティが低すぎるものは逆効果になるため、ある程度の完成度がある作品を選びましょう。「学習の過程で作ったもの」であることを正直に記載し、学習意欲をアピールする姿勢が大切です。
Q：ポートフォリオはどのくらいの頻度で更新すべきですか？
A：新しい作品を制作するたびに更新するのが理想です。最低でも3か月に1回は見直し、古い作品を新しい作品に入れ替えましょう。スキルが向上すると過去の作品が見劣りするため、常に最新のスキルレベルを反映した状態を維持することが重要です。
まとめ
ポートフォリオは、Webデザイナーの「名刺代わり」となる重要な制作物です。作品の数より、1つ1つの作品に「なぜこのデザインにしたのか」という意図を明確に記載することが、評価につながります。
未経験でも、架空のクライアントワークやリデザインで十分な作品を用意できます。まずは1つの作品を丁寧に仕上げて、ポートフォリオサイトの構築に取り掛かってみてください。最初の一歩が最も大切です。
