評価されるWebデザイナーのポートフォリオとは？構成から具体例まで徹底解説

公的な職業情報から見るWebデザイナーに求められる力

厚生労働省の職業情報提供サイトjob tag（Webデザイナー）では、入職にあたって特に学歴や資格は必要とされないが、デザインの基礎知識・技術は必要と説明されています。また、利用者に支持されるサイトを作ることができるかという個人のスキルが問われる職業であり、表現力や、伝えたいことをインターネットの特徴を生かして表現する技術が求められるとも記載されています。

学歴や資格よりも個人のスキルが問われる職業だからこそ、そのスキルを目に見える形で示すポートフォリオが、就職や案件の獲得で重要な役割を持ちます。仕事内容の全体像はWebデザイナーの仕事内容で確認できます。

自己紹介とスキル

名前、活動の拠点、これまでの経歴、Webデザイナーとしての強みを簡潔に書きます。使えるツールや言語は、「Figmaは実務で使用」「HTMLとCSSは一からページを作れる」のように、どの程度使えるかが分かる書き方にすると、採用担当者がスキルを判断しやすくなります。前職の経験がデザインの仕事にどう活かせるかも書いておきましょう。強みの伝え方はWebデザイナーの自己PRの書き方も参考になります。

制作実績

ポートフォリオの中心になるのが制作実績です。作品ごとに、次の項目をそろえて記載します。

問い合わせの導線

興味を持った人がすぐに連絡できるよう、メールアドレスや問い合わせフォーム、SNSへのリンクを用意します。フォームの入力項目は、名前、メールアドレス、用件の程度に絞ると、連絡のハードルが下がります。

実績の多さを伝えるグリッド型

トップページに作品の画像をタイル状に並べる構成です。一度に多くの作品を見てもらえるため、作品の数が多い人や、幅広いテイストに対応できることを伝えたい人に向いています。各作品の画像をクリックすると、詳しい作品ページに移動できるようにします。

考え方を伝える1ページのストーリー型

縦に長い1ページで、自己紹介から作品、考え方までを物語のように見せる構成です。作品の数がまだ少ない人でも、一つひとつの作品の背景や工夫をじっくり伝えられます。量より深さで勝負したい初心者に向いています。

専門性を打ち出す特化型

「飲食店のサイト」「ECサイトのバナー」など、特定の分野に絞った構成です。その分野の仕事を探している発注者にとっては、何でも対応できるデザイナーより頼もしく映ります。特定の業界での経験や知識がある人に向いています。

見せる相手と目的を決める

最初に、制作会社の採用担当者に見せるのか、案件を発注する企業や個人に見せるのかを決めます。転職が目的なら実務の力やチームで働く姿勢を、案件の獲得が目的なら対応できる業務や制作の流れを、それぞれ強調します。

載せる作品を選ぶ

すべての作品を載せる必要はありません。目指す方向に合い、意図を説明できる作品を、まずは数件程度に絞りましょう。完成度の低い作品が混ざると、全体の印象を下げてしまうことがあります。迷う作品は載せないのが基本です。

ワイヤーフレームで構成を決める

トップ、自己紹介、作品の一覧、作品ページ、問い合わせという基本の流れを決め、各ページに何を置くかをワイヤーフレームで設計します。スマートフォンで見たときに、迷わず作品ページにたどり着けるかも確認しておきましょう。

作り方を選んで形にする

ポートフォリオサイトは、HTMLとCSSで自分でコーディングする方法のほか、ノーコードのサイト作成ツールやWordPressを使う方法もあります。コーディングまで対応できることを伝えたいなら、自分でコーディングしたサイトはそれ自体が実装の力を示す作品になります。応募先からPDFでの提出を求められることもあるため、必要に応じてPDF版も用意しておくと安心です。

公的な基準で使いやすさを確かめる

ポートフォリオサイトそのものも作品として見られるため、使いやすさを客観的な基準で確かめておくと安心です。W3Cが公開しているWCAG 2.2では、通常の文字と背景のコントラスト比は4.5:1以上、クリックやタップの対象の大きさは24×24 CSSピクセル以上が、レベルAAの基準の一つとして示されています。

表示の速さについては、Googleが公開しているCore Web Vitalsの考え方が参考になります。良好とされる目安は、ページの主要な内容が表示されるまでの時間を示すLCPが2.5秒以内、操作への反応の速さを示すINPが200ミリ秒以下、表示中のレイアウトのずれを示すCLSが0.1以下です。作品の画像を多く載せるポートフォリオは表示が重くなりやすいため、画像のサイズや形式も見直しておきましょう。

架空の案件を企画して制作する

架空のお店やサービスを設定し、ターゲットの設定、ワイヤーフレーム、デザイン、コーディングまで、実際の仕事と同じ流れで制作します。既存のサイトの改善案を作る場合は、その会社から依頼された仕事であるかのような見せ方は避け、学習用の提案であることを明記しましょう。

バナーなどの小さな作品を積み上げる

大きなサイトの制作が難しければ、バナーやSNS用の画像など、小さな作品から始めましょう。同じテーマで複数のパターンを作り、それぞれの狙いの違いを説明すると、配色や情報の優先順位の考え方を示せます。

学習中の課題を改善して載せる

スクールや教材の課題をそのまま載せると、同じ課題に取り組んだ人の作品と区別がつきにくくなります。今の技術で改善を加え、自分のアイデアや意図を書き添えたうえで掲載しましょう。学習の進め方はWebデザイナーの勉強方法で、デザインの基礎はWebデザイナーの基本で紹介しています。

身近な人の依頼で実際に作る

知人のお店や地域の団体など、身近な人の依頼で実際にサイトやバナーを作ると、実在する依頼者の要望に応えた経験として示せます。掲載する際は、依頼者の了承を得ておきましょう。

公開の許可を得ずに実務の作品を載せる

実務で制作した作品でも、契約によっては公開が認められていない場合があります。掲載する前に、クライアントに公開してよいかを確認しましょう。許可が得られない場合は、パスワードで閲覧を制限する、機密にあたる部分をぼかすといった配慮が必要です。写真やフォントなどの素材も、公開してよい条件のものかを確認しておきます。

表示崩れやリンク切れを放置する

スマートフォンで見るとデザインが崩れている、ボタンを押してもリンク先に移動しないといった状態は、「自分のサイトも管理できない人」という印象を与えます。公開前に、パソコンとスマートフォン、複数のブラウザで表示を確認し、公開後も定期的に点検しましょう。

サイトの装飾が作品より目立つ

凝った動きや演出にこだわりすぎて、肝心の作品が見にくくなっている例もあります。ポートフォリオの主役は作品です。作品がいちばん映えるよう、シンプルで使いやすい作りを優先しましょう。

作品の数を増やして説明が薄くなる

作品をたくさん並べても、一つひとつに意図の説明がなければ評価にはつながりにくくなります。数を増やす前に、各作品の説明が十分かを見直しましょう。

作品の数が多くないと評価されない

評価を左右するのは、数よりも作品の質と、その作品で何を解決しようとしたかの説明です。考え抜かれた少数の作品のほうが、意図の説明がない多数の作品より高く評価されることは珍しくありません。

センスがないとポートフォリオは作れない

ポートフォリオは、情報を整理して相手に伝える力を示す場でもあります。デザインの原則にもとづいて意図を説明できれば、センスに自信がなくても評価されるポートフォリオは作れます。

完璧になるまで公開しないほうがいい

完璧を目指して公開を先延ばしにすると、応募や営業の機会を逃してしまいます。基本の要素がそろったら一度公開し、人に見てもらって意見をもらいながら改善していくほうが、結果的に早く良いポートフォリオになります。