デザインポートフォリオ:本当に採用につながるものを作る方法

採用担当者がポートフォリオに費やす時間は90秒。その間に面接するかどうかを決めます。ところがほとんどのデザイナーは、その90秒ではなく、自分のエゴに最適化したポートフォリオを作っています。結果はどうなるか。美しく撮影されたホームページは誰にも読み進められず、5つのプロジェクトはどれも同じに見え、ケーススタディは大量のスクリーンショットの壁の下に、面白い意思決定をすべて埋めてしまいます。

このペーパーは実践版です。ポートフォリオをジュニアからシニアへ引き上げる5つのプロジェクト、センスではなく意思決定を証明するケーススタディの構成、そして不採用メールではなく48時間以内の返信をもらえるサイトの作り方を扱います。

ポートフォリオとは本当は何か

ポートフォリオは次の仕事への賭けであり、過去の仕事の博物館ではありません。 すべてのプロジェクトには、そこにある理由が必要です。すべてのケーススタディは、あなたの思考について読み手に何かを教えなければなりません。ホームページの階層からケーススタディの長さまで、サイト上のあらゆる判断が採用シグナルです。

面接につながるポートフォリオは、プロジェクト数が最も多いものではありません。採用担当者が3つのケーススタディを読み、「この人と一緒に仕事がしたい」と思って席を立つもの。それは偶然ではなく、構造の産物です。

ビジュアルヒエラルキーデザインの解説では、あらゆるページで読む順序をコントロールする方法を扱っています。ポートフォリオはそのテストケースです。ポートフォリオに階層がなければ、採用担当者は最後まで読みません。

本当に重要な5つのプロジェクト

ほとんどのポートフォリオは8〜12個のプロジェクトを載せています。採用担当者が読むのは2つ。「全部載せる」か「厳選する」かという議論は決着しました。厳選です。最大5つ。完結したストーリーを語る5つを選びましょう。

プロジェクト1:フラッグシップ

リサーチからローンチまで、成果に責任を持ったプロジェクトを1つ。通常は最も強いケーススタディです。ホームページのファーストビューに置きます。採用担当者が1つしか読まないならこれを読んでほしい、というプロジェクトで、読み手の40パーセントにとっては実際にそれが全てです。

フラッグシップは一番きれいなプロジェクトではありません。意思決定が最も明確で、スコープが最大で、課題から成果までの一貫した筋が最も締まっているものです。オーナーシップを持ってやり切った地味なプロジェクトは、3画面しか触っていない派手なプロジェクトに勝ちます。

プロジェクト2:レンジを示すもの

フラッグシップとは異なるビジュアル表現で仕事ができることを示すプロジェクト。フラッグシップがクリーンなSaaSダッシュボードなら、レンジを示すものは表現豊かなブランドアイデンティティ。フラッグシップが個性のあるコンシューマーアプリなら、こちらは精密なエンタープライズツール。レンジは適応力の証明であり、それはシニアという言葉の半分の意味です。

レンジを示すものは、ホームページの2番目に置かれることが多いです。ひと目でフラッグシップとはっきり違って見えるべきで、そうすればケーススタディを読まなくても採用担当者は幅の広さを認識できます。

プロジェクト3:専門性の深さを示すもの

高度な専門領域を示すプロジェクト。デザインシステムのアーキテクチャ、アクセシビリティ、リサーチ手法、モーションデザイン、フロントエンド実装など。深さこそがシニアと中堅を分けます。シニアデザイナーには必ず、ジェネラリストに必要な水準より深く掘れる領域が少なくとも1つあります。

深さを示すものは、ケーススタディの長さではフラッグシップより短く、技術的にはより濃くなります。コードスニペット、トークン設計の図、リサーチプロトコルが登場するのはここです。デザインシステムガイドは、深さを示すプロジェクトにうまく収まる題材の一例です。

プロジェクト4:コラボレーションの事例

他のデザイナー、エンジニア、デザイン以外のステークホルダーと働けることを証明するプロジェクト。トレードオフ、妥協、リリースしたものと本当はリリースしたかったものについて、正直に書く場です。採用担当者はこのプロジェクトを重く見ます。ソロ活動ではなく、チームメイトとしてのあなたがどんな人かが分かるからです。

コラボレーションの事例は、正直さが要るため最も書きにくいことが多いです。妥協なしでリリースされたプロジェクトはまず存在せず、そう主張するケーススタディは嘘に読めます。

プロジェクト5:個人またはサイドプロジェクト

クライアントワークではないプロジェクトを1つ。自発的な探求、自作ツール、タイポグラフィの実験、ゲームジャムの作品など。ブリーフの外でもセンスがあることを、ポートフォリオが証明する場所です。大きくなくて構いません。ただし具体的であるべきです。

サイドプロジェクトは、クライアントワークが限られる駆け出しのデザイナーと、探究心が続いていることを示したいシニアのデザイナーにとってより重要です。ミドルキャリアのデザイナーは、この枠を飛ばして2つ目の「深さを示すもの」に置き換えてもよいでしょう。

---

成果につながるケーススタディの構成

ほとんどのケーススタディは、最終画面のスライドショーの合間に宣伝文句を挟んだ構成です。それはケーススタディではありません。ギャラリーです。本物のケーススタディは意思決定ログとして読めます。

うまくいく構成はこうです。

セクション1:2行のピッチ

クライアントは誰で、課題は何で、あなたの役割は何だったか。2行、それ以上は不要です。他に何も読まない採用担当者でも、このプロジェクトが何で、あなたが何に貢献したかが分かるべきです。

例:「18市場・200万ユーザーにサービスを提供するフィンテック企業のチェックアウトフローを再設計。UXをリードし、ブランドデザイナーと3人のエンジニアと協働して、旧ベースラインに対しカート放棄率を23パーセント削減するフローをリリースした。」

セクション2:課題

実際の課題について1〜3段落。「ユーザー体験が悪かった」ではダメです。具体的に。数字、行動、摩擦ポイント。課題が具体的であるほど、解決策の信頼性は上がります。

落とし穴は、ビジネスではなくデザイナーが気にする言葉で課題を語ってしまうことです。「インターフェースが古く感じた」はデザイナーの課題。「ユーザーの17パーセントが決済画面で離脱した」はビジネスの課題。書くのは後者です。

セクション3:アプローチ

課題にどう挑んだか。どんなリサーチをしたか。どんな仮説を立てたか。どんな制約が仕事を形作ったか。ここは思考のセクションであり、採用担当者がケーススタディを読む理由そのものです。彼らは、解決策にたどり着いたという事実だけでなく、課題から解決策へどう進むかを見たいのです。

制約を飛ばしてはいけません。本物のプロジェクトには必ずあります。予算、スケジュール、レガシーコード、規制要件、ステークホルダーの好み。制約のない自由な探索のように読めるケーススタディは、フィクションに読めます。制約は味付けのスパイスです。

セクション4:制作物

成果物を見せます。リサーチ結果、ワイヤーフレーム、デザイン案の探索、最終画面。スクリーンショットはここに置きますが、あくまでストーリーに奉仕するもので、ストーリーの代わりではありません。すべてのスクリーンショットに、見た目だけでなく、どんな意思決定を表しているかを説明するキャプションを付けましょう。

よくある間違いは、磨き上げた最終画面を先頭に置き、プロセスを埋もれさせることです。逆にしましょう。散らかった中間(却下した方向性、リサーチの発見、議論したトレードオフ)から始め、その思考の結論として最終成果を見せます。

セクション5:成果

ローンチ後に何が起きたか。指標、定性的なフィードバック、その後の仕事、学んだこと。確かな数字があるなら使います。なければ定性的なシグナル(お客様の声、社内の反応、次はどうするか)を使います。

数字を捏造してはいけません。でっち上げたコンバージョン率を見抜いた採用担当者は、面接が始まる前に終わらせます。「当時は計測していなかったが、リデザイン後にセールスチームからデモからトライアルへの転換が強くなったと報告があった」という正直な書き方は、作り物の指標に常に勝ります。

セクション6:振り返り

学んだことと、変えたいことを短く1段落。このセクションこそ、シニアとミドルを分けることが多いです。ジュニアは「全部うまくいった」と主張するケーススタディを書きます。シニアはこう書きます。「新しいオンボーディングは、リリース前に5人のユーザーでテストすべきだった。最初の1週間で2つのユーザビリティ問題が見つかったが、リサーチなら明らかだったはずだ。」

振り返りは自己批判ではありません。自己認識の証明です。振り返りのないケーススタディは、すべて正しくやったと思っているデザイナーに読め、それは採用担当者が見たいものの正反対です。

---

ホームページのルール

ホームページは10秒のテストです。これに通らなければ、ケーススタディは読まれません。ルールは3つ。

ルール1:自分ではなく、作品で始める

ヒーローには最も強いプロジェクトのプレビューを置きます。顔写真でも、キャッチコピーでも、「心地よい体験をデザインします」のようなヒーローコピーでもありません。採用担当者は、まだあなたに興味がありません。気にしているのは、あなたの作品が自分たちの採用領域に合っているかどうかです。作品を先に見せ、自己紹介は後です。

唯一の例外は、名前そのものがフックになる有名デザイナーです。そうでないなら、作品で始めましょう。

ルール2:1行のポジショニング

注目プロジェクトの下か横に、あなたを位置づける1行のテキストを置きます。バリュープロポジションではなく、ポジショニングです。「アーリーステージのフィンテック向けプロダクトデザイナー」「コンシューマー向けウェルネスのブランドデザイナー」「エンタープライズSaaS向けUXシステムデザイナー」。

ポジショニングの1行は読み手を選別します。ウェルネス企業のブランドデザイナーを探しているリクルーターは、その1行を見て読み進めます。あなたの1行がフィンテックなのにエンタープライズSaaSを探しているリクルーターは、離れていきます。それが正しい結果です。バリューベース価格設定の用語集でも、クライアントワークについて同じ論理を扱っています。可能性を排除するためではなく、合う仕事を引き寄せるために狭く位置づけるのです。

ルール3:邪魔をしないナビゲーション

上部ナビゲーションは3〜5項目ちょうど。Work、About、Contact、必要ならNotesまたはWriting。ポートフォリオは直線的な成果物です。採用担当者は初回訪問時に上から下へ読みます。探し回らせてはいけません。

ケーススタディのフィルターメニュー、ホバーで並びが変わるメイソンリーグリッド、勝手に隠れるアニメーションナビゲーションは避けましょう。ホームページはすでに採用担当者の注意を奪い合っています。そこに摩擦を足さないでください。

---

Aboutページ

Aboutページは、フラッグシップのケーススタディに次いで、ポートフォリオで2番目によく読まれるページです。ほとんどのデザイナーはこれを形式的なものとして扱います。そうではありません。Aboutページは、採用担当者の特定の問いに答えます。「この人は一緒に働いてどんな人だろうか」。

含めるべきことは3つ。

平易な言葉のプロフィール。 2〜4段落。あなたが誰で、何をしてきて、何を大切にしているか。LinkedInのプロフィールではなく、カンファレンスで自己紹介するつもりで書きます。磨き上げよりも、具体性と手触りが勝ちます。

一緒に働いてきた人たち。 すべての会社ではなく、重要なところだけ。クライアント、企業、協働者の短いリスト。そのうちの誰かから一言の推薦コメントをもらえるなら、その一言は、あなたが自分について書くどの段落よりも価値があります。

連絡先を目立つ場所に。 採用担当者が連絡してくるのは、たいていAboutページです。メールアドレスは(コンタクトフォームの裏ではなく)プレーンテキストで、上と下の2か所に置きましょう。コンタクトフォームは障壁です。障壁は取り除いてください。

ポートフォリオの外にある仕事

採用担当者はポートフォリオで止まりません。Twitter/X、LinkedIn、Dribbble、個人サイトのノート欄、長文の記事もチェックします。見られている前提で、見つかるものがポートフォリオの語るストーリーを補強するようにしましょう。

これは存在感を偽ることではありません。自分自身と矛盾しないということです。システム志向のシニアデザイナーとして位置づけたポートフォリオに、「デザインを始めたばかりです、アドバイスください」だらけのTwitterフィードが並んでいると、シグナルが混線します。解決策は、Twitterのフィードを更新するか、ポートフォリオが志向を示すものだと認めるかのどちらかです。どちらも有効です。不一致は有効ではありません。

よくあるポートフォリオの失敗

作品の弱さよりも多くのポートフォリオを殺す4つのパターンです。

終わりのないプロジェクトリスト。 12個のプロジェクト、どれも差別化されておらず、採用担当者は最初の3つを過ぎるとスクロールで流します。解決策は厳選です。5つのプロジェクト、それぞれがストーリーの異なる部分を語る。特定の採用上の問いに答えないプロジェクトは削りましょう。

階層のないヒーロー。 美しいけれど、何から読めばいいかを採用担当者に伝えないホームページ。解決策は、注目プロジェクト1つ、ポジショニング1行、他はすべてフォールドの下。ウェブデザインの原則の解説では、ポートフォリオを含むあらゆるランディングページに同じルールを扱っています。

意思決定を隠すケーススタディ。 最終画面の壁、プロセスなし、振り返りなし。採用担当者はデザイナーの思考について何も学べず、それこそがケーススタディの存在意義です。解決策は、上の6セクション構成を使うこと。思考で始め、制作物で支えましょう。

モバイルで崩れるサイト。 27インチのディスプレイでは動くのに、スマホでは崩壊するポートフォリオサイト。最初の閲覧の半分はモバイルで起きます。そこで機能しないポートフォリオは、機能しないポートフォリオです。あらゆるウェブデザインに当てはまるレスポンシブデザインのパターンは、ここにも当てはまります。

習慣としてのポートフォリオ更新

2年に1度しか更新されないポートフォリオは、開かれたその日にすでに2年遅れです。解決策は、キャリアの節目ごとの大改修ではなく、小さく定期的な更新のリズムです。

四半期ごと:ケーススタディを1つ追加または更新し、ホームページの注目プロジェクトを見直し、連絡先が最新か確認する。

年1回:ポジショニングの1行を見直し、5つのプロジェクトが今も正しいストーリーを語っているか判断し、古くなったものは外す。

転職活動のたびに:徹底的に編集する。狙うポジションに合わせてポジショニングを書き直す。最も関連性の高いプロジェクトが先頭に来るようホームページを並べ替える。Aboutページを現在のターゲットに合わせて更新する。

ケーススタディの構成、サイトのポジショニング、あるいはすでにこれを使いこなしているデザイナーの採用でお手伝いが必要なら、Brainyに依頼してください。私たちはシニアのポートフォリオがどんなものかを知っています。そこから採用しているからです。

FAQ

デザインポートフォリオには何個のプロジェクトを載せるべきですか?

最大5つです。シニア向けのポートフォリオに2〜3個では足りません。8個以上ではストーリーが薄まります。フラッグシップ、レンジを示すもの、深さを示すもの、コラボレーションの事例、個人プロジェクトの5つを厳選すれば、採用担当者に圧倒感を与えずに十分な証拠を示せます。

ポートフォリオのケーススタディはどのくらいの長さにすべきですか?

意思決定のストーリーを語るのに十分な長さで、採用担当者が5分でざっと読める短さ。通常、スクリーンショットとキャプション込みで1ケーススタディあたり600〜1500語。フラッグシップはもっと長くても構いません。短めのサイドプロジェクトは300語でも大丈夫です。重要なのは、すべてのセクション(ピッチ、課題、アプローチ、制作物、成果、振り返り)が揃っていることです。

ポートフォリオサイトに履歴書を載せるべきですか?

任意です。ほとんどのポートフォリオは、履歴書をインラインで掲載するのではなく、ダウンロード可能なPDFの履歴書かLinkedInのプロフィールにリンクしています。載せるなら、ホームページではなく別ページに。ホームページは作品のための場所です。

LinkedInが充実していれば、ポートフォリオは不要ですか?

必要です。LinkedInはプロフィールであって、ポートフォリオではありません。充実したLinkedInはリクルーターとの会話に入る助けになります。面接を取れるのはポートフォリオです。ジュニアより上のデザイン職なら、ポートフォリオは必須です。

ポートフォリオはプロセスを見せるべきですか、それとも最終成果だけですか?

両方ですが、差別化要因はプロセスです。最終成果はデザインができることを示します。プロセスは、どう考えるかを示します。すでにデザインができると知っている(何らかの形であなたを見つけた)採用担当者は、意思決定を理解するためにケーススタディを読んでいます。6セクションのケーススタディ構成は、その両方のバランスを取ります。

ポートフォリオでデザイナーが犯す最大の間違いは何ですか?

厳選が甘いことです。ほとんどのポートフォリオはプロジェクトが多すぎ、そのどれについてもストーリーが足りません。解決策は容赦ない編集です。残す5つを強くするために4つを捨て、ギャラリーではなく意思決定を軸にしたケーススタディを書き、ホームページは8つのグリッドではなく、強い注目作品1つで始めましょう。

ポートフォリオは賭けである

すべてのポートフォリオは、次に誰と働きたいかについての表明です。5つのプロジェクトは主張。ケーススタディは証拠。ホームページは書き出しの一文。Aboutページは締めくくりです。

次の仕事を賭けるつもりで作ってください。実際そうなのですから。容赦なく厳選する。すべてのケーススタディを意思決定ログとして構成する。四半期ごとに更新する。モバイルで動くようにする。メールアドレスはプレーンテキストで載せる。

すでにこの基準をクリアしたデザイナーを採用したい、あるいはシニアレベルで成果につながるケーススタディづくりに助けが欲しいなら、Brainyに依頼してください。ポートフォリオは就職活動の応募書類です。そう扱いましょう。

関連記事

• デザイナーのためのケーススタディテンプレート
• デザインシステムガイド
• ビジュアルヒエラルキーデザイン
• ウェブデザインの原則
• UI対UX