こんにちは。Web制作会社LIGが運営するWebクリエイタースクール「デジLIG（デジタルハリウッドSTUDIO by LIG）」編集部です。
Webディレクターのポートフォリオは、「何を載せればいいのかわからない」「デザイナーと違って“作品”が手元にない」と悩む方がとても多い書類です。ディレクターの仕事は企画・進行管理・課題解決が中心で成果物が見えにくいぶん、実物の良い例を見て、見せ方の型を参考にすると、イメージがつかみやすくなります。
そこで本記事では、デジLIG卒業生が実際に作ったポートフォリオの実例4つを制作ポイントとあわせて紹介し、そこから採用担当に「会ってみたい」と思わせる作り方の共通点とテンプレートまで解説します。
Webディレクターのポートフォリオとは？ なぜ必要なのか
ポートフォリオは、自分のスキルや実績を採用担当に伝えるための資料です。Webディレクターの場合、単なる作品集ではなく「この案件でどんな課題に向き合い、どう解決したか」を伝えるプレゼン資料として作る必要があります。
求人に応募する際、職務経歴書だけでは「実際にどう動ける人なのか」までは伝わりません。プロジェクトの進め方や思考のプロセスを具体的に見せられるポートフォリオがあると、書類選考から面接へ進む確率がぐっと上がります。
デザイナーのポートフォリオとの違い
同じ「ポートフォリオ」でも、デザイナーとディレクターでは見せ方の重心が変わります。デザイナーが「成果物そのもの」を主役にできるのに対し、ディレクターは成果物が他メンバーとの協働で生まれるぶん、「自分がどう考え、どう動いたか」を主役に据える必要があります。
| Webデザイナーのポートフォリオ | Webディレクターのポートフォリオ | |
|---|---|---|
| 評価の土台 | デザイン自体の美しさ・センス | 課題解決のプロセスと意思決定 |
| あわせて見られる点 | 制作の考え方・ロジック | 企画・要件定義・進行管理・数値での成果 |
| 成果物の見せ方 | 作品そのものを主役にする | 自分の判断・役割・関わり方を主役にする |
つまり違いは「ビジュアルか、プロセスか」という二択ではなく、どちらに重心を置くかです。ディレクターの場合は、きれいな画面を並べるだけでは不十分で、「なぜその構成・判断にしたのか」という背景まで言語化できているかが問われます。
なお、デザイナーのポートフォリオも、ビジュアルの美しさだけで評価されるわけではありません。LIGのデザイナー向けイベントでも、採用担当はデザインの美しさを土台にしつつ、「案件を通じてどう考えてきたか」まで見ていると語られています（とくにベテランほど考え方が重視されます）。詳しくは以下記事もご参考ください。
【当日答えられなかった質問に全力回答！】夜のお茶会「キャリア10年以上のデザイナーのポートフォリオを囲む夜」イベントレポート
Shoto Nakakoshi
採用担当がポートフォリオで見ているもの
では、採用担当はポートフォリオのどこを見ているのでしょうか。LIGでディレクターの選考を担当しているジョーさんは、書類を見るときの本音をこう語っています。
ディレクターの選考では、正直「騙されないぞ」という気持ちで見ています。デザインが綺麗とか、数値が何倍になりましたとか、そういう華々しい実績よりも、そこに至るまでの過程やコミュニケーションの取り方が一番大事だと思っているんです。
派手な成果よりも、「どう考え、どう動いて、その結果にたどり着いたか」という過程が見られているということです。面接官目線で「採用される」ポートフォリオに何が求められるかは、LIGの現役ディレクターが実例をもとに語ったこちらのイベントレポートも参考になります。
LIGディレクターの実例から学ぶ「採用される」ポートフォリオの作り方【イベントレポート】
Riko Sato
【実例4選】ポートフォリオの実例と制作のポイント
ここからは、デジLIG卒業生のポートフォリオ作品と、LIGの現役Webディレクターのポートフォリオを、制作のポイントとあわせて4つ紹介します。実際の作品を見ながら「どんな狙いと工夫で作られているか」を押さえると、自分のポートフォリオづくりのイメージがつかめます。
なお、より多くの作例を見たい方は、Webデザイナーのポートフォリオが中心ですが以下記事もおすすめです。情報設計や見せ方の工夫は、ディレクターのポートフォリオづくりにもそのまま応用できます。
Webデザインスクール卒業生のポートフォリオ作品を19例紹介！
Akiko Nakanishi
実例1：阿部さん｜異業種からWebディレクターへ転職したポートフォリオ（Webサイト）
【STUDIO池袋 2023年8月生/Webデザイナー専攻/デザイン集中講座】
旅行代理店の法人営業から、休職を経て未経験でWebディレクターへ転職した阿部さんのポートフォリオ（LILOU ABE PORTFOLIO）。「ポートフォリオ＝自分を伝えるもの」という考えで、人柄まで伝わるように作り込んだ一例です。
- 💡 制作のポイント
-
- ディレクター志望として、デザインを見せるだけでなく「どんな人が作ったのか」が伝わるよう意識
- カメラが得意な友人にスタジオでプロフィール写真を撮影してもらい、服装や雰囲気も「自分らしさ」を表現
- 全体のトーンも含め、「どう伝えるか」を重視して構成
阿部さんのスクール入学から転職活動までのキャリアインタビューはこちらです。
安心して飛び込んで大丈夫。出会いに支えられ、自分のペースで学び、Webディレクターへ
Yukina Aribayashi
実例2：荒木さん｜要件定義から思考を積み上げたディレクター視点のポートフォリオ（PDF）
【STUDIO池袋 2025年7月生/Webデザイナー専攻/デザイン集中講座】
ARAKI DAISUKE PORTFOLIO（PDFより一部抜粋）
大手化学メーカーで約9年間プラント運転に従事した後、未経験からWebディレクターを目指す荒木さんのポートフォリオ。「なぜそう判断したか」を要件定義から一貫して積み上げ、思考の過程を見せるPDF形式の一例です。
- 💡 制作のポイント
-
- 制作目的や伝えたい内容を明確にするため、初期段階で要件定義を具体化
- Web業界を目指す理由や原動力が伝わるよう、デザインコンセプトを設定し、ひとつのモチーフを軸に視覚表現へ落とし込み
- ディレクターに必要な役割・能力を調査し、情報設計や構成にもこだわって設計
実例3：穂積さん｜思考プロセスが伝わるストーリー型ポートフォリオ（PDF）
【STUDIO上野 2024年11月生/Webデザイナー専攻/デザイン集中講座】
Design Portfolio（PDFを一部抜粋）
前職は化粧品会社の販売職を6年経験した穂積さんの、「なぜこのデザインに至ったか」を根拠から説明できるポートフォリオ。クライアントワークと自主制作を、市場調査やペルソナ設計とあわせて見せている一例です。
- 💡 制作のポイント
-
- 「About／Works／Study Log」の3部構成で、作品だけでなく思考プロセスや学習記録、人物像まで掲載
- 各案件で目的・課題・ペルソナ・市場調査（参考データ付き）からアプローチ方針までを示し、「なぜこのデザインに至ったか」を根拠から説明
- 化粧品販売員として培った「深いユーザー理解」を強みに、共感を生む情報設計を重視
- 情報量が多いなか、Bento UIなどを取り入れてデザイン性と視認性を両立
実例4：倉持さん｜作業プロセス順で思考の流れを見せたポートフォリオ（Notion）
新卒で制作会社に入社後、UI/UX改善やSNS企画提案など幅広い経験を積み、2年目でLIGのWebディレクターに転職した倉持さんが、転職時に実際に使ったポートフォリオ。全プロジェクトを作業プロセス順に並べ、思考の流れが伝わるように構成した一例です。
- 💡 制作のポイント
-
- プロセスで見せる：全プロジェクトを作業プロセス順（課題の抽出→ワイヤーフレームの工夫→Figmaでの情報設計→メンバーの巻き込み）で並べ、1工程ずつ成果物画像とポイント解説をセットで提示
- スキルマップ：基準を4軸に定め、できること・できないこと・伸ばしたい領域を正直に可視化
- 情報整理：シンプルながら圧倒的な情報量を、見る側が追いやすいように整理
倉持さんのポートフォリオを書類選考で見た面接官のジョーさんも、「Figmaのキャプチャがあるだけで、情報のまとめ方やコミュニケーションの取り方ができる人だとわかって安心する」と高く評価していました。
このポートフォリオの実物は、LIGエージェントにご登録いただいた方限定で、面談時にご覧いただけます。「採用されたポートフォリオは何が違うのか」を直接確かめたい方は、ぜひご相談ください。👉️いますぐ登録する（無料）
採用担当に評価されるポートフォリオ5つのポイント
採用担当に評価されるポートフォリオには、共通するポイントがあります。LIGの採用経験から、おさえておきたい5つを整理しました。
- 課題→施策→成果の「過程」を見せる
- 「できること・できないこと」を客観的に伝える
- 成果はKPI・数値で語る
- 自分の役割とチーム体制を明示する
- 採用担当者目線で読み手の負担を減らす
課題→施策→成果の「過程」を見せる
最も大切なのが、「どんな課題に対し、なぜその施策を選び、どんな結果になったか」という過程を見せることです。完成画面だけを貼っても、ディレクターの仕事である「判断」は伝わりません。
見せ方はさまざまですが、たとえばヒアリングで抽出した課題、ワイヤーフレームでの工夫、情報設計で意識した点などを1工程ずつ並べ、成果物の画像とポイント解説をセットにすると、見る側が「この人はこう考えて動くのか」と具体的にイメージできます。
FigmaやNotionのキャプチャで検討中のコメントのやり取りや情報設計の過程をそのまま見せると、「どう議論し、どう整理したか」まで伝わります。
「できること・できないこと」を客観的に伝える
採用担当が知りたいのは、あなたが実務で「何を、どこまでできるか」です。できることも苦手なことも客観的に伝えるほど、入社後の姿をイメージしてもらいやすくなります。
見せ方は自由ですが、「★5段階評価」や「経験〇年」は基準が人によってバラバラで指標になりにくいため避けましょう。たとえば「Figmaでワイヤーフレームからプロトタイプまで作成できる」のように行動ベースで書いたり、領域ごとに整理した「スキルマップ」で可視化したりする方法があります。
そして見落とされがちなのが、「できないこと・これから伸ばしたい領域」もあわせて書くことです。LIGの採用面接官・ちぐさんは、こうした自己分析を示した応募者についてこう語っています。
自分に何が足りてないかを客観的に分析できているというのは、「うちの会社とマッチするな」「入社したらこの案件でこんな成長ができるな」というのが見えるので、これは経験が短い人ほどやってほしいです。スキルマップだけで20分は語れます。
「できます」と書いて入社後にできなかったら、お互いに不幸です。できないことを言える人は、期待値のすり合わせができる人材として、むしろ信頼につながります。
成果はKPI・数値で語る
「サイトをリニューアルしました」だけでは価値が伝わりません。PV・CVR・問い合わせ数など、サイトの目的（KPI）に対してどれだけ貢献したかを数値で示すと説得力が一気に増します。「CVRを0.8%→1.4%」のようにBefore/Afterで見せると、改善幅が直感的に伝わります。
学習段階の作品や架空サイトで実数値がない場合は、「想定ターゲットの行動をどう設計したか」「どんな指標で成功を測る前提か」を書くだけでも、成果を意識する姿勢が伝わります。
自分の役割とチーム体制を明示する
チームで制作した案件では、「どこからどこまでを自分が担当したか」を正直に切り出すことが大切です。「大規模リニューアルを担当」ではなく「トップページの要件定義と外部ライター10名の進行管理を担当」のように書くと、面接で深掘りされてもブレません。範囲を絞って正直に書くほうが、かえって信頼性が高まります。
採用担当者目線で読み手の負担を減らす
最後に、ここまでの4つを支える土台になるのが、「忙しい採用担当者が、短時間で必要な情報を得られるか」という視点です。何を・どの順で載せるかは、「自分が見せたいもの」ではなく「相手が知りたいもの」から逆算します。
トップに要点や代表実績を先に置き、詳しく知りたい人だけが深掘りできる導線にすると、読み手はストレスなく情報を追えます。個性や世界観は、この“伝わりやすさ”を土台にしたうえで足していくと、独りよがりにならずに効果を発揮します。
私たちが多くのポートフォリオを見てきた経験からも、作品のクオリティは前提として、「情報をどう設計し、わかりやすくまとめられるか」という構成力そのものが評価を左右すると感じます。サービス概要・自分の役割・取り組み・成果といった重要情報を先にまとめ、担当範囲を明確にするだけでも、読み手の理解度は大きく変わります。デザイナー向けの内容ですが、採用視点での「見せ方」は以下記事も参考になります。
【デザイナー転職】採用されるポートフォリオとは？プロが徹底討論！
Jumpei Hayashi
Webディレクターのポートフォリオの作り方【4ステップ】
ポイントがわかったら、実際に手を動かしていきましょう。ゼロから作る場合も、この4ステップで進めれば迷いません。
STEP1：載せる実績・作品を棚卸しする
まずは、これまで関わった案件や制作物をすべて書き出します。そのうえで、数を絞ってでも「課題と解決を語れるもの」を選ぶのがコツです。多くのポートフォリオを見てきた経験からも、似たような作品を10件並べるより、意図がしっかり伝わる1〜2件のほうが評価されると感じます。数が多すぎると、読み手のモチベーションも下がってしまいます。
選ぶ基準は、有名な案件かどうかや規模の大きさではなく、「自分がどんな役割を担い、どう工夫したかを説明できるか」です。関わりが浅く語れることが少ない案件は、無理に載せなくてかまいません。どうしても載せたい作品が複数ある場合は、自信のあるものは詳しく、そうでないものはさらっとと情報量に差をつけ、全体の分量を読み手の負担にならない範囲に整えると親切です。
実務経験がない場合は、架空サイトや学習用の制作物などでも問題ありません。ただし架空のテーマは「目的がなんでもあり」になりがちで意図が伝わりにくいため、実在するサービスやお店を題材にすると、ぐっと説得力が増します。クラウドソーシングなどで小さくても実案件に挑戦すれば、「自ら案件を取りにいく行動力」というアドバンテージにもなります。大切なのは、実績そのものより「考えて動いた過程」が見えることです。
STEP2：構成（型）を決める
載せる内容が決まったら、全体の構成を決めます。Webディレクターのポートフォリオは、次の流れで組むと「人柄」と「実力」の両方が伝わります。後述のテンプレートをそのまま使ってもかまいません。
- 💡 ポートフォリオの基本構成
-
- 自己紹介・仕事のスタンス（どんな人か）
- スキル（できること・苦手な領域を客観的に）
- 実績紹介（課題→施策→成果を1件ずつ。検討の過程も）
- 仕事の進め方・情報発信（プロセスやアウトプット）
構成で意識したいのは、冒頭で「何ができる人か」が一目で伝わるようにすることです。採用担当は最初の画面で読み進めるか判断するため、得意領域やスタンスは前半に置きます。また、応募先によって求められる強みは異なるので、応募先に合わせて見せる順番や強調する実績を入れ替えると刺さりやすくなります。すべての応募に同じものを使い回すのではなく、軸は固定しつつ要所を調整するイメージです。
あわせて意識したいのが、冒頭の自己紹介で「どんな人か」「一緒に働くイメージ」が伝わるようにすることです。採用担当はスキルや経歴だけでなく、「自社に馴染みそうか」を直感的に見ています。実際、デジLIGから転職した卒業生のなかには、トップに自分の正面写真を大きく載せて人柄や雰囲気を伝え、それが面接で評価された人もいます。スキルや実績の前に、まず「会ってみたい」と思ってもらう入口をつくる意識が大切です。
STEP3：ツールとアウトプット形式を決めて作る
ツール選びで迷いがちですが、順番として大事なのは、まず「自分の何を一番伝えたいか」を決めることです。そこから見せ方（形式）が決まり、最後にその形式を得意とするツールを選ぶ、という流れで考えると迷いません。
論理的な進行管理や課題解決のプロセスを強みにしたいなら、順を追って読ませられるPDF（プレゼン）形式。人柄やデザインへの感度で「会ってみたい」と思わせたいなら、メインビジュアルで世界観を伝えられるWebサイト形式が向いています。本記事の実例でも、人柄を前面に出した阿部さん（実例1）はWebサイト、思考プロセスを丁寧に説明する穂積さん（実例3）はPDFと、強みに合わせて形式が選ばれています。
それぞれの特徴を整理すると次のとおりです。
| PDF（プレゼン）形式 | Webサイト形式 | |
|---|---|---|
| 向く場面 | 書類選考・面接でのプレゼン | SNS・メールでの共有、実績公開 |
| 伝わり方・印象 | 1ページずつ順を追って読ませるため、思考の流れや論理の組み立てが伝わりやすい。「課題→施策→成果」のような筋道を、相手のペースを想定して落ち着いて見せられる | トップのメインビジュアルや動き・操作感で第一印象を一気に伝えられる。世界観や使い心地まで含めて、人柄・デザインへの感度が伝わりやすい |
| 強み | 順番に見せられ、レイアウトが崩れない。相手に合わせてページを調整しやすい | URL一つで共有でき、常に最新に保てる。動画やインタラクションも見せられる |
| 主なツール | PowerPoint・Keynote・Googleスライド、Illustrator・InDesignなど。Figmaで作り込んでPDF書き出しもよく使われる | STUDIOなどのノーコードツール、ポートフォリオサービス（foriioなど）。Notionもページを公開URLにできる |
見せたい形式が決まったら、その形式を得意とするツールを選びます。ここがズレると作り直しになるので注意が必要です。STUDIOはWeb公開専用でPDFにはなりませんし、NotionはPDF書き出しもできますが、レイアウトが簡素でプレゼン資料には向きません（Web公開や情報整理向き）。Figmaはデザイン制作ツールなので、URLをそのまま共有すると見づらく、PDFに書き出すか画像をWeb系ツールに貼るのが基本です。
なお、形式を指定してくる企業はほとんどありません。デザイナー職ではコーディングまで対応したWeb形式が好まれる傾向がありますが、ディレクター職はPDFかWebのどちらか一方があれば十分です。むしろ目玉になる作品があるなら、PDF形式にして冒頭にばんと配置するほうがアピールになります。ただし重いと開いてもらえないこともあるため、PDFは画像を圧縮して10MB前後を目安に、読みやすさを最優先にしましょう。
STEP4：第三者にレビューしてもらう
完成したら、必ず第三者に見てもらいます。自分では伝わっているつもりでも、初見の人には伝わらない箇所が必ずあるためです。可能なら現役のディレクターや採用経験者にフィードバックをもらうと、採用視点での改善点が見つかります。
実際、デジLIGから転職した卒業生のなかには、最初は「個性的すぎる」と指摘を受け、採用担当者目線で約1か月かけて作り込んだことが評価につながった人もいます。自分の見せたいものと、相手が知りたいことのバランスを、第三者の目で整えることが大切です。デジLIGでは、現役クリエイターによるポートフォリオの添削サポートを卒業後も無期限で受けられます。
そのまま使えるポートフォリオ構成テンプレート
ここまでのポイントを盛り込んだ、Webディレクター用のポートフォリオ構成テンプレートです。各項目の〔 〕を自分の情報に置き換えれば、骨組みが完成します。
1. 自己紹介・仕事のスタンス
- 氏名／ニックネーム、簡単な経歴
- 大切にしている仕事の考え方・得意領域
2. スキル（できること・苦手）
- できること（行動ベースで具体的に。例：要件定義からワイヤーフレーム作成まで対応できる）
- これから伸ばしたい領域（客観的に記載）
3. 実績紹介（1件ごとに繰り返す）
- プロジェクト名・サイトURL・スクリーンショット
- クライアント／サイトの目的（守秘義務の範囲で）
- 担当範囲・チーム体制・期間
- 課題と、それに対して打った施策（なぜそうしたか）
- 検討の過程（ワイヤーフレーム、Figma・Notionのキャプチャなど）
- 成果（KPI・数値。出せない場合は相対表現や工夫した点）
4. 仕事の進め方・情報発信
- 普段の進行管理の流れ、使用ツール
- ブログ・登壇・勉強会などのアウトプット（あれば）
5. プロフィール・連絡先
- 経歴、保有資格、連絡先・SNS
Webディレクターのポートフォリオに関するよくある質問
Q: ポートフォリオに載せる実績がありません。未経験でも作れますか？
作れます。架空のサイトや学習用に制作したもの、個人のブログ運営なども立派な題材になります。大切なのは作品の数や規模ではなく、「誰のために・何を・なぜ作ったか」を言語化できていることです。デジLIGの卒業制作のように、企画から完成までのプロセスを1件分しっかり見せられれば十分にアピールになります。
Q: Webディレクターでもデザインの作品は必要ですか？
必須ではありません。ディレクターのポートフォリオで評価されるのは、デザインの美しさより「課題解決のプロセスと判断」です。ただし、ワイヤーフレームや情報設計図など、自分が手を動かした制作物があれば、思考の過程を示す材料として有効です。
Q: ポートフォリオは何のツールで作るのがおすすめですか？
情報整理力が伝わるNotion、デザインの自由度が高いFigmaやSTUDIOが定番です。ツール自体に正解はなく、見出し・順序・余白で読みやすく整理されているかが重要です。ディレクター職の場合は形式を指定する企業はほとんどなく、PDFかWebのどちらか一方があれば十分です。目玉になる作品があるなら、PDFにして冒頭に大きく見せるとアピールになります。
Q: 守秘義務で実績の数字や固有名詞を出せません。どうすればいいですか？
クライアント名やサイト名を伏せ、「大手通信キャリアのキャンペーンサイト」「月間50万PV規模のメディア」のように業界・規模感が伝わる表現に置き換えましょう。改善数値も「前年比120%」など相対表現にすれば、守秘義務と具体性を両立できます。
Q: ポートフォリオ（PDF）はどうやって送るのがいいですか？
URLで共有する方法（Googleドライブなどにアップロード）と、ファイル転送サービス（ギガファイル便など）やメールに直接添付する方法があります。応募先の指定があればそれに従うのが基本です。指定がない場合も、相手がすぐ開けることが最優先なので、ファイルサイズは画像を圧縮して10MB前後を目安にしましょう。
まとめ
Webディレクターのポートフォリオは、作品の見栄えではなく「課題解決のプロセスと判断」を伝えるプレゼン資料です。本記事のポイントを振り返りましょう。
- 採用担当は過程を見ている：課題→施策→成果の流れを見せる
- スキルは行動ベースで客観的に：★や年数ではなく「何ができるか」を書き、苦手も示す
- 成果はKPI・数値で語る：出せない場合は相対表現や設計意図で代替する
- 役割と体制を明示する：担当範囲を正直に切り出すと信頼につながる
- 実例を見て型を真似る：デジLIG卒業生の作例のように、構成テンプレートから始める
まずは1件分でいいので、課題と解決を語れる実績を丁寧に作り込むことから始めてみてください。良い型を真似て、自分の思考が伝わるポートフォリオに仕上げていきましょう。
