転職の場面で、ポートフォリオは履歴書よりも早く目に触れ、合否の初動を決める"表情"だ。採用担当は1日に数十件をサッと流し見し、興味を持ったものだけを深掘りする。だからこそ、作品の良し悪し以前に「最初の3秒で読み進めたい」と感じさせる設計が必要になる。
本稿では、デザイナー転職の現場で実際に評価されやすい作り方を、チェックリスト形式で具体化した。Web/UI、グラフィック、モーション、リサーチなど職種別の見せ方から、1プロジェクトの"必要十分"な記述テンプレ、ファイル形式や送付オペレーションまで網羅する。読み終えた直後に、そのまま自分のポートフォリオへ手を入れられる粒度でまとめている。
手元にPDFかFigmaリンクを開きながら読み進めてほしい。1章ごとに1箇所ずつ直せば、7日間で提出可能な状態まで仕上がる構成にしている。
採用担当が見る「3秒」と「30秒」を意識する
ファーストビューの設計(表紙・サマリー)
最初の3秒で判断されるのは「雰囲気と対象職種が合っているか」だ。表紙はA4横(16:9でも可)で、氏名/ロール(例:Product Designer)/連絡先/最新更新日だけに絞り、背景は無彩色〜低彩度でコントラストを確保する。
2枚目に「サマリー」を置き、得意領域(UI設計・情報設計・ビジュアル)と代表作3件のサムネイルを並べる。各サムネには"問題→成果"を10〜15字で添えると先読みの負担が減る。PDFなら1ファイル15MB以下を目安、オンライン版は目次とパンくずを用意し、1クリックで代表作へ到達できる導線を作る。
プロジェクトの並び順とストーリー
30秒の時点で見られるのは「一番いい仕事の筋が通っているか」。並び順は最新×成果が大きい順が基本だが、応募先の文脈に合わせて"相手が知りたい順"に差し替える。
ポイント
SaaS企業ならオンボーディング改善や有料転換率改善の案件を先頭へ。ECならCVRや購買単価が動いた案件を最初に。複数の良案件があるなら、①大きな成果(数値)②難条件の克服(制約)③チームでの役割が明確、の三点で優先順位を決めると失敗しにくい。
非言語情報(余白・書体・密度)の評価
作品以前に「読みやすいか」は強い示唆になる。タイトルと本文のサイズ比は1:1.6〜1.8、行間は本文で1.4〜1.6倍、左右マージンは本文幅の8〜12%が目安。本文は可読性重視のサンセリフ1種+強調用1種で十分だ。
図版は"1スライド1メッセージ"を守り、色はベース+アクセント1色(UIならアクセントは主要CTA色に合わせる)に絞ると密度過多を避けられる。これらは「設計・情報整理の素養」を間接的に伝える非言語の評価軸になる。
職種別・目的別の見せ方を切り替える
同じデザイナー転職でも、UI・グラフィック・モーション・リサーチで見せるべき証拠が全然違う。自分の狙う職種に合わせて優先順位を組み替えよう。
Web/UIデザイナー向け(プロセス重視)
UI/UX系はプロセスの透明性が命。ウォークスルーの順序は課題仮説→ユーザー/市場のインサイト→情報設計→ワイヤー→UIデザイン→検証→結果で固定する。特に「意思決定の分岐点」を1〜2箇所、図解で示すこと(例:CTA配置A/Bと注視ヒートマップ、KPI影響の比較)。完成画だけでなく、中間成果物(サイトマップ、フロー、コンポーネント定義)を掲載すると、再現性を評価してもらえる。
グラフィック/ブランディング(仕上がり重視)
ビジュアルのクオリティが主戦場。アートボードの整頓、色校や用紙選定、ロゴの最小使用サイズや余白規定など、運用に耐える設計も併記する。モックアップは乱用せず、実配布や実装写真を優先。色は実印刷/現物に近い写真を撮影し、環境光が整った状態で掲載する。ブランドの"らしさ"を一言で説明できるタグラインを各案件に添えると、記憶に残りやすくなる。
モーション/3D/UXリサーチ(専門性の証明)
モーションは再生時間10〜30秒の短編をサムネイル化し、動きの原則(イージング、オーバーシュート、タイミング)を説明。3Dはトポロジやマテリアル設定、レンダリング条件を1枚にまとめ、"見た目の裏側"を見せる。リサーチは計画→対象→サンプル数→手法→主な発見→ビジネス示唆の順で簡潔に。統計的に弱い場合は限界と補完策(トライアンギュレーション)を書き添えると誠実さが伝わる。
未経験・異業種からの転職(換骨奪胎)
実務が少ない場合は"業務に近い演習"で埋める。既存アプリのオンボーディング再設計、LPの情報設計リライト、ブランドガイドの再構成など、評価者が文脈を共有しやすい題材を選ぶと効果的だ。元職の強み(分析、営業、CSなど)を"ユーザー理解"や"業務知"に結びつけて可視化し、学習のロードマップ(3か月でこれを学び実践)を最後に提示すると伸びしろが伝わる。
プロジェクト1件あたりの「必要十分」テンプレート
背景・課題・制約を90秒で
案件の背景は「誰の、どんな行動や成果を変えたかったか」に集約する。ターゲット、KPI、期日、予算、規制や既存システムなどの制約を1スライドで箇条書き5行以内にまとめる。長い調査は別ページに逃し、ここでは"意思決定の前提"だけを残そう。制約を書けると「現実解を設計できる人」だと伝わる。
プロセス・意思決定の証跡
プロセス紹介は"見た目の栄養価"より"判断の筋道"を優先。ワイヤーの比較、バリエーションの弔い(採用しなかった案)、その理由(技術・費用・UX)を添える。ユーザビリティテストは参加者属性、タスク、主要発見3点を図解。デザイン原則(例:一貫性、可視性、エラー防止)をどの画面にどう反映したか、吹き出しで示すと納得感が増す。
成果・数値・学びの書き方
成果はKPIの定義→ベースライン→施策→結果→解釈の順で並べる。
ポイント
【例】「アカウント作成完了率 42%→58%(+16pt、n=3.1万)/計測期間:2024/10–2025/01」
細部の定量化が難しい場合は、代替指標(タスク完了時間、エラー率、NPS、CSからの問い合わせ件数)で示す。失敗は隠さず、次の改善案を添えると前向きな評価に変わる。
役割とチーム体制の開示
「自分が何をやったか」は最重要。RACIや簡易表で、要件定義、情報設計、UI、原稿、実装、分析の担当範囲を明確にする。週次の関与時間や関係部門(PdM、エンジニア、CS、法務)も書くと、組織内連携のイメージが湧く。外注やテンプレ利用がある場合は出典を明記して信頼を担保する。
採点されるチェック項目リスト(セルフチェック)
以下の4カテゴリを順番に自己採点しよう。各項目で×が3つ以上あるカテゴリは、その章を最優先で直す。
伝わるか(メッセージの明確さ)
- 各スライドに「今日、伝えたい一言」があるか
- 図と文が冗長になっていないか(どちらかを削れるか)
- 用語が応募先の業界語に一致しているか(例:MAUかWAUか)
- 色や注釈で視線誘導ができているか(左上→右下の自然な流れ)
使えるか(再現性・即戦力の兆し)
- 設計思想や原則が言語化されているか
- 実装や運用の制約に触れているか(パフォーマンス、アクセシビリティ)
- データやテストの手順が簡潔に示されているか
- ドキュメントの目次/リンク構造が合理的か
信頼できるか(誠実さ・整合性)
- 成果の数値に計測期間、母数、出所があるか
- NDA配慮が適切か(匿名化、数値のレンジ化)
- 出典・テンプレート・素材のクレジットを明記しているか
- 誇張表現や"持っていない権限"の表記がないか
一貫しているか(トーン&マナー)
- タイプスケール、余白、グリッドが全ページで整っているか
- 色数とアイコンスタイルが統一されているか
- 文章の語尾や敬体が揺れていないか
- サムネイルが作品ごとに同解像度・同アスペクト比か
作品の「質」を底上げする即効テク
色・余白・タイポの三点直し
まず全体の色数を3色以内に制限する(ベース/テキスト/アクセント)。余白は「詰めすぎ→読みづらい」を避け、段落間12〜20px、要素間8px刻みでリズムを作ると即改善する。タイポは見出し・本文・注釈の3レベルをつくり、太さは1段階だけ上げる(Regular→Mediumなど)。これだけで素地が整い、他の粗が目立ちにくくなる。
画面密度と階層の調律
"情報の重さ"に応じて階層を3段に分ける。主要メッセージ>補助説明>注釈。強調は同時に2か所まで。視線が迷う場合は、①見出しの一行化、②箇条書き3点まで、③図のラベルの冗長削減、の順でダイエットする。にぎやかなUIはスクロールで分割し、各セクション頭に要点を短文で置くと、読了率が上がる。
モバイル・アクセシビリティ対応
オンライン版はモバイルからも見られる。本文16px以上、タップ領域は44px角以上、コントラスト比は4.5:1以上を基準に。代替テキストは代表画像だけでも付与、動画は自動再生を避け、字幕かキャプションを用意する。これらは「ユーザーへの配慮」を作品そのもので証明する機会になる。
実在感の出し方
Lorem ipsumは最小限に。実際の文体・桁・制約に近いテキストへ置換する(例:住所・氏名の桁、金額の桁、日付フォーマット)。モバイルUIは親指リーチや片手操作の写真を載せると、使い勝手の想像がつく。印刷物は紙厚や加工(箔、エンボス)の寄り写真を1枚入れると、仕上がりの説得力が跳ね上がる。
ドキュメント形式の選び方(PDF/Notion/ウェブ)
| 形式 | 向いている用途 | 要件 |
| 受け取り環境差の最小化・応募フォーム | A4横 or 16:9、10〜20枚、15MB以下 | |
| Notion/自前ウェブ | 回遊して深掘り・多言語対応・SEO | モバイル可読性、ダークモード、目次/タグ |
| Figmaリンク | 操作して理解が進む案件 | view only権限、フレーム名を「課題_施策_結果」順に |
PDFは目次ページに各案件の内部リンクを付け、代表作には外部プロトのURLも併記。画像は150〜200dpiで十分、細部説明は拡大図を別ページ化する。更新日は表紙右上、バージョン表記はv1.2のように小さく置くと運用が楽になる。Notion/ウェブは英語版ページを薄く用意しておくと外資や多国籍チームの評価が上がる。
NDA・実名・数値のマスキング
ココに注意
会社名・固有名詞はイニシャル化、ロゴはグレーアウト。数値はレンジ(例:+12〜18pt)や比率で表現し、期間と母数は残すと信頼は維持される。スクショは識別情報を消し、使用データは公開情報か自作ダミーへ差し替える。迷ったら"再現可能だが特定不能"を判断基準に。
在籍企業の製作物を使うなら、社内規程の範囲を確認し、必要に応じて「個人ポートフォリオでの非商用公開」をメールで記録化する。外部公開が難しい場合は、面接時のみ提示の"限定公開URL+パスワード"運用に切り替える。実名の消し忘れ対策として、提出前に"検索:@・#・http・社名キーワード"で全ページを機械的に点検すると抜け漏れが減る。
提出オペレーションと面接での話し方
ファイル命名とバージョン管理
「Name_Portfolio_ProductDesigner_2025Q3_v1.2.pdf」のように、人名・ロール・期・版を含める。差し替え時は同名上書きではなくv番号で履歴を残し、応募先には"最新版URL"を使って更新を一元化。ローカルとクラウドのディレクトリ構造も案件別に揃えると管理が楽だ。
送付文テンプレ(コピーして即使用)
メモ
件名:[応募]プロダクトデザイナー/氏名
本文:いつもお世話になっております。◯◯(氏名)です。貴社◯◯職に応募いたします。直近の成果が伝わる3案件を先頭に再構成しました。PDFとオンライン版を併記します。
・PDF:添付(15MB)
・オンライン(PW: 1234):https://…
面接等の機会を頂けましたら、10分の案件解説をご用意します。
エージェント経由の場合は案件マッピング表(応募先→該当案件リンク)を渡すと推薦文が強化される。URLはUTM付きにして、どの経路から閲覧されたかを把握できるようにしよう。
10分版ピッチと画面共有の準備
- 冒頭30秒で自己紹介と得意領域
- 3分で代表作A(課題/制約/意思決定)
- 3分で代表作B(数値と学び)
- 2分で失敗からの改善
- 最後に志望先の課題仮説1つ
各セクションの冒頭に"一言結論"を置き、資料は1スライド1メッセージ。ウィンドウは最小限、通知は切る、解像度は相手側のHD基準に合わせて125%拡大。ネット回線は有線 or テザリングのバックアップを確保しておく。
想定問答の型
「あなたの強みは?」→"再現性の根拠+短い事例"。「なぜその意思決定?」→"比較した選択肢・評価軸・捨てた理由"。「数字はどこから?」→"計測方法・期間・母数"。"型"で答えるとブレない。反対に、言い切れない部分は"前提条件つきの結論"として誠実に提示する。
7日間の改善スプリント
Day1–2:棚卸しと骨組み
案件を"成果/制約/役割の明確さ"で仕分け、トップ3を決定。各案件に一言タグラインを作り、章立てを白紙に書き出す。余分な図版は一旦捨て、"意思決定の証跡"に再投資する。
Day3–4:文章・図解の磨き込み
本文は結論→根拠→示唆の順に短文化。図は余白を増やし、注釈は10〜14字で。見出しの語尾を名詞止めに揃えると、一覧性が上がる。色数・書体・行長をテンプレ化して全体の一貫性を出そう。
Day5:検証とアクセシビリティ
モバイル閲覧・ダークモード・コントラストを点検。音声読み上げで不自然な文や記号の連打を発見できる。外部の友人1人に"30秒レビュー"を依頼し、最初に伝わった点/伝わらなかった点だけを回収する。
Day6–7:仕上げと提出
表紙・サマリー・代表作の順で"導線"を最終確認。PDF出力/URL作成/パスワード設定までをチェックリストで完了させ、そのまま応募する。送付後24時間で"閲覧ログ→次の一手"を決めて追伸を送ると、印象に残りやすい。
よくあるNGと最終チェックリスト
注意ポイント
・非現実的な数値の提示(CVR10倍等)→期間・母数・ベースラインを併記
・誇張と関与不明→RACIや担当区分を小さな表で表示
・画像・素材の権利不明→ライセンス明記、生成AIは出力の出典を記録
・リンク切れ・閲覧不可→提出直前に別端末で検証、PDF単体で伝わる構成に
最終提出前の必須チェックは以下のとおり。
- 表紙に氏名/ロール/連絡先/更新日
- 代表作3件の"問題→成果"がサムネで伝わる
- 各案件に役割・制約・KPI・期間・母数
- NDA配慮の匿名化/数値のレンジ化
- PDF15MB以下+オンライン版URL(PW)
- リンクの権限・期限・モバイル可読性
余裕があればオプション強化策として、英語ミニ版/10分ピッチ資料/UTM計測とサムネA/B/失敗案件1本の"学び可視化"/応募先ごとの案件並び替え、まで用意すると内定率が段違いに上がる。
計測と学習の仕組み化
UTMと閲覧ログ
オンライン版にはUTMを付与し、チャネル別の閲覧状況を把握する。リンク短縮を使う場合も、原URLを手元に管理しよう。ログは"閲覧→面談→内定"の漏斗でメモ化し、次の応募へ学びを循環させる。応募先ごとにサムネイルを差し替えたり、代表作の順序を並べ替えたりする"差分運用"が効いてくる。
サムネイルとタイトルのA/B
代表作のサムネイルは2案用意し、クリック率の高い方を採用する。タイトルは"課題×成果"の二項で短く(例:オンボ改善で完了率+16pt)。効果が見えたら他案件にも展開すると、ポートフォリオ全体の反応率が底上げされる。
面接後のふりかえり
質問内容・詰まった点・次回の補強策を面談直後に3行で記録する。次の会社に合わせ、該当箇所の説明スライドを1枚だけ差し替える"差分運用"にすると、応募のたびに"完成度"が上がる。差し替えは3〜5枚に留め、全体構成を毎回変えると管理が破綻するので注意したい。
よくある質問(FAQ)
はてな
Q1. 作品数は何点が理想ですか?
代表作3件+補助2〜3件で十分です。10点並べても採用担当は最初の3点しか見ないので、"見せたい順の最初の3件"に全リソースを集中させたほうが結果が出ます。
Q2. 実務未経験ですが応募できますか?
可能ですが、"業務に近い演習"(既存アプリのリデザイン、LPの情報設計リライト等)を最低2件は用意してください。スクール課題そのままは差別化にならないので、実在サービスの改善提案として書き直します。
Q3. UIとUXどちらに寄せるべきですか?
中途市場ではUI×UXを両方触れる人材が最も評価されます。「UIだけ」の求人よりレンジが1〜2ランク上になるので、両方の証跡を1本ずつ持つことを推奨します。
Q4. 使うツールはFigma一択で良いですか?
Figmaは中途市場の共通言語なので必須。Sketch/XD専用のポートフォリオは避ける(閲覧環境の壁が生まれる)ほうが無難です。加えてIllustrator/Photoshopの基礎、Notion/Miroでの整理は"できる"レベルで書けると幅が出ます。
Q5. 年収相場はどのくらいですか?
UIデザイナー400〜700万円、UXリサーチャー500〜800万円、デザインマネージャー800〜1,200万円が目安。"UI/UX両利き+事業KPIを語れる"人は+100〜200万円のプレミアが乗ります。
まとめ
ポートフォリオは"作品集"ではなく、"意思決定の再現装置"だ。課題・制約・判断・結果が一続きで読めれば、未経験の領域でも即戦力の像が立ち上がる。まずは代表作3件の順序を入れ替え、サマリーと役割表を整え、数値の前提を明記しよう。PDFとオンラインの二段構えにして、10分ピッチを用意すれば、明日の面接でも迷わない。
完璧を待つ必要はない。今日30分、1つの案件だけでも"意思決定の証跡"を足してみてほしい。あなたの次のチャンスは、その一枚で動く。