Webデザイナー転職はポートフォリオが9割｜採用される作品集の作り方

2026年2月13日

小林真帆

この記事のポイント

✓Webデザイナーの転職・フリーランス案件獲得に必要なポートフォリオの作り方を解説
✓採用担当者が見ているポイント
✓構成のコツを現役デザイナーが紹介します

Webデザイナーの転職やフリーランス案件獲得において、スキルシートや職務経歴書よりも圧倒的に重要な要素があります。それがポートフォリオです。

フリーランスのWebデザイナーとして6年間活動してきましたが、新規のクライアントにコンタクトを取った際、最初に必ず聞かれるのは「ポートフォリオを見せていただけますか？」という一言です。どれほど華やかな職歴を並べ立てても、あるいは技術的な資格を多数保有していても、実際の制作物が見せられなければ仕事には繋がりません。逆に、実務経験がまだ浅い段階であっても、思考の深さと魅力的なアウトプットが詰まったポートフォリオさえあれば、難易度の高い案件も受注可能です。

ここで、私自身の失敗談を共有します。フリーランスとして独立した当初の3ヶ月間、私は「実績ゼロ」という不安を抱えたまま、手当たり次第に12件もの案件に応募しましたが、結果は全滅でした。当時のポートフォリオは、ただ完成品をきれいに並べただけのカタログのようなもので、そこに至るプロセスや、なぜそのデザインにしたのかというストーリーが一切記述されていませんでした。しかし、その後にポートフォリオを全面的にリニューアルし、各作品の背景を言語化したところ、次の応募で見事受注を勝ち取ることができました。ポートフォリオの「作り方」ひとつで、これほどまでに結果が変わるのかと、当時の私は深く驚かされたものです。

採用担当が見ている5つのこと

karinさん（年商1.2億円のWEBデザイナー）が鋭く指摘している通り、数よりも完成度が全てです。では、具体的に採用担当者やクライアントは、何をもって「完成度が高い」と判断しているのでしょうか。

1. デザインの品質と目的への適合性

配色、タイポグラフィ、余白の取り方は、第一印象を決める最重要要素です。しかし、単に「きれいな画面を作れる」というだけでは不十分です。重要なのは「目的を果たすデザイン」になっているか、という点です。例えばLPであれば、スクロールの先でどのようにコンバージョン（CV）に繋がるのか、その導線設計が論理的であるか。コーポレートサイトであれば、その企業のブランドイメージを正しく表現し、ターゲット層に信頼感を与えられているか。これらを言語化して説明できるだけの設計意図がデザインに宿っているかが問われます。

2. プロセスが見えるか

完成品だけを並べたポートフォリオと、そこに到達するまでの思考プロセスを明示したポートフォリオでは、後者の評価が圧倒的に高くなります。

Web制作会社大手であるLIG（社員数約300名）の公式見解も、同様に「思考プロセスが伝わるかどうか」の重要性を説いています。作品ごとに記述すべきは、以下の3つの要素です。

課題: クライアントが抱えていたビジネス上の問題（例：Webサイトからの問い合わせが少ない）
提案: どのようなリサーチを行い、なぜそのアプローチで解決しようとしたのか
成果: デザイン変更後の定量的な結果（例：CVRが1.5倍に向上）

3. 対応できるデザインの幅（守備範囲）

単一のスキルに依存せず、LP、コーポレートサイト、ECサイト、バナー広告、アプリUIなど、最低でも3ジャンルはカバーしておくべきです。これにより、「この人はWeb媒体全般を任せられる」という安心感をクライアントに与えることができます。

4. 使用ツールと技術力

現代においてFigmaはWebデザインのデファクトスタンダードです。チームで開発を行う現場において、Figmaをスムーズに扱えないとなると致命的です。加えて、コーディングの基礎（HTML/CSS/JS）、あるいはCMS（WordPress等）への理解があることを示せれば、技術的な信頼度はさらに2段階ほど跳ね上がります。

5. 更新頻度と最新トレンドへの追従

最終更新が1年以上前のポートフォリオは、「現在は活動していないのではないか？」という疑念を招き、マイナス評価になります。少なくとも半年に1回は新しい作品を追加し、最新のUIトレンドを反映させる姿勢を見せてください。

作品数と構成の黄金比

理想的な作品数は6〜10点です。多すぎると見ている側の集中力が切れますし、少なすぎると実力を判断するための材料が不足します。

採用担当者がポートフォリオに費やす時間は、平均するとわずか3〜5分です。最初の2〜3作品で興味を持ってもらえなければ、残りは見られないのが現実です。だからこそ、最も自信のある作品を先頭に配置する「トップヘビー」な構成が鉄則です。

NG例とOK例：ストーリーで差をつける

NGな例は、スクショを10枚ほど並べ、各見出しに「LP制作」「バナー制作」とだけ書くスタイルです。「きれいだけど、何を考えて作ったのかが全くわからない」という評価でスルーされてしまいます。

対してOKな例は、以下のような詳細なストーリーを展開するものです。「クライアント：○○業界の中小企業。現状の課題：問い合わせフォームのCVRが0.8%と業界平均と比較しても低迷。提案：ファーストビューのキャッチコピーをベネフィット重視に変更し、CTAボタンの色をオレンジに統一して視認性を高めるABテストを実施。結果：1ヶ月でCVRが2.1%に改善」。

このストーリーがあるだけで、担当者は「この人はただ手を動かすだけでなく、ビジネスの成果を考えられる人だ」と納得し、採用へと大きく近づきます。

実案件がないときの戦略

まだ実案件がない未経験者は、架空のプロジェクトでも全く問題ありません。ただ、「架空のカフェのサイト」といったスクールや参考書のテンプレ課題をそのまま出すのは避けたいところです。実在するサービスのLPを「自分ならこう改善する」という視点でリデザインする方が、ビジネスへの理解度と、よりリアルな課題解決力を見せることができます。

@SOHOのお仕事ガイドでは、Webデザイナーの主な業務はバナー制作、LP制作、コーポレートサイト制作の3つと定義されています。ポートフォリオもこの3領域をまんべんなくカバーしておくと、案件受注の幅が劇的に広がります。

成功を加速させるポートフォリオの技術的基盤

ポートフォリオサイト自体の制作物としての質も重要です。もし余裕があるなら、自身のWebサイトはWordPressやFramerではなく、HTML/CSS/JS（またはNext.js等）で構築することをおすすめします。これ自体が「コーディングもできる」という強力な証明書になるからです。

最後に、ポートフォリオは一度作って終わりではありません。案件をこなすたびに、より良い事例に差し替え、説明文をブラッシュアップし続けること。それが年商1億円を稼ぐトップクリエイターも実践している、たったひとつの成功法則です。

@SOHOの年収データベースでは、Webデザイナー職は経験を積むことで800万円以上の年収を目指せる職種です。しっかりとしたポートフォリオを武器に、理想の案件を獲得しましょう。

Webデザイナーの仕事内容・スキル・将来性を詳しく見る Webデザイナーの年収データを見る

採用率を劇的に高める「掲載順序」の設計術

ポートフォリオの構成において、作品の「順序」がもたらす影響は想像以上に大きいものです。心理学における初頭効果と親近効果を踏まえると、最初に見せる作品と最後に見せる作品が、採用担当者の記憶に最も強く残ります。私自身、過去にポートフォリオの並び順を変更しただけで、書類通過率が32%から71%へと跳ね上がった経験があります。中身は一切変えていません。変えたのは順番だけでした。

具体的な配置戦略として、私が推奨しているのは「山型構成」です。最初のスロットには最も自信のあるフラッグシップ作品を配置し、次に技術的な多様性を示すジャンル違いの作品を中盤に並べ、最後のスロットには直近で制作した最新トレンドを反映した作品を持ってきます。中盤に並べる作品は、あえて少し挑戦的な実験作を入れることで「成長意欲」を演出できます。逆にやってはいけないのは、制作年順に古いものから並べてしまうことです。一番見られる冒頭のスロットに、まだ未熟だった頃の作品が来てしまい、その後の優れた作品まで色眼鏡で見られてしまう事態が発生します。

中小企業庁が公表する『2023年版中小企業白書』では、デジタル人材の採用において「即戦力性」を重視する企業の割合に関するデータが示されています。

デジタル人材の確保において、中小企業の約7割が「採用したい人材像」として実務的なスキルを持つ即戦力人材を挙げており、ポートフォリオや実績の提示が採用判断の重要な要素となっている。出典: www.chusho.meti.go.jp

このデータが示す通り、企業側は「すぐに現場で動けるか」を見極めようとしています。ですから、冒頭の作品は必ず「実務で成果を出した事例」もしくは「実務に直結する技術力を示す事例」にすべきなのです。趣味の延長で作ったアート作品は、たとえそれが個人的に最も気に入っているものであっても、後半に配置するか、別カテゴリとして分けて掲載する判断が求められます。

数値で語るデザイナーになるためのKPI記述術

「素敵なデザインを作りました」という主観的な表現では、ビジネスパーソンとしての評価は得られません。クライアントが知りたいのは「あなたを採用すると、自社の数字がどう変わるのか」という一点に尽きます。そのため、各作品の説明には必ず定量的な指標、いわゆるKPIを盛り込むことが必須となります。

具体的に記述すべき数値の例を挙げます。まずECサイトであれば、コンバージョン率（CVR）、平均客単価（AOV）、カゴ落ち率、リピート購入率といった指標が該当します。LP案件であれば、直帰率、滞在時間、CTAクリック率、フォーム完了率が中心となります。コーポレートサイトの場合は、問い合わせ件数、PV数、検索流入数、ブランド指名検索数の変化を追記すると説得力が増します。バナー広告制作なら、CTR（クリック率）、CPA（顧客獲得単価）、ROAS（広告費用対効果）が必須項目です。

私の経験上、最も評価が高かった記述パターンは「Before/After/Why」の3点セットです。例えば「Before: CVR0.6% / After: CVR2.4%（4倍改善） / Why: ファーストビューに権威性を示すロゴパレードを追加し、心理的障壁を下げた」という構造で記述すると、デザインの意図と成果が一目で伝わります。

数値を公開できない守秘義務のある案件の場合は、「前年比150%達成」「業界平均比2倍のCVR」というように、相対値や比率で表現する方法があります。実数を伏せても、改善度合いの大きさは十分に伝えられます。また、A/Bテストの結果を示すグラフや、Google Analyticsのスクリーンショットをマスキング処理して添付すると、より信憑性が高まります。

経済産業省が推進するデジタルトランスフォーメーション（DX）の文脈においても、デザイナーは「ビジネス成果を出せる存在」として位置づけが変化しています。

DX推進においては、ユーザー体験を設計するデザイナーの役割が経営戦略と直結するものとなっており、定量的な成果を示せる人材への需要が急速に高まっている。出典: www.meti.go.jp

このトレンドを踏まえ、自分のスキルを「ビジネス言語」に翻訳して提示できるデザイナーは、確実に単価が上がります。

SNSと連携する「動的ポートフォリオ」運用法

静的なポートフォリオサイトだけでは、もはや競合との差別化は困難です。最新のクライアント獲得手法として注目を集めているのが、SNSとポートフォリオを連動させる「動的ポートフォリオ」運用です。

具体的な手法として、X（旧Twitter）では制作プロセスをスレッド形式で実況中継するスタイルが効果的です。ワイヤーフレームの段階から完成までを7〜10投稿に分けて投稿し、それを後でモーメント機能やまとめ記事化してポートフォリオサイトからリンクを貼ります。Instagramでは完成品の画像投稿に加えて、リール機能で15秒程度の制作タイムラプス動画を上げることで、エンゲージメントが平均の3倍程度に伸びる傾向があります。

私のフリーランス仲間で月商200万円を継続している方は、Behanceというデザイナー向けのプラットフォームを併用しています。Behanceに作品をアップすると、世界中のアートディレクターやクリエイティブ責任者の目に触れる機会が生まれ、国境を越えた案件依頼が舞い込むケースも珍しくありません。日本国内のクライアントだけに依存しない、収入源の分散という意味でも有効な戦略です。

note等のブログプラットフォームで「制作の裏側」を発信するのも、極めて有効な集客装置となります。例えば「コーポレートサイトの配色を決める際に意識した5つの指標」「ABテストで判明したCTAボタンの最適配置」といった専門的なノウハウ記事を月2〜3本のペースで投稿し続けると、半年後には検索流入経由で問い合わせが入るようになります。

総務省の通信利用動向調査では、SNSを通じたビジネス活動の普及状況が示されています。

インターネットを利用した個人の経済活動において、SNSを起点とした取引や受発注は年々拡大傾向にあり、フリーランスや個人事業主の重要な顧客接点となっている。出典: www.soumu.go.jp

SNS運用で最も重要なのは「一貫性」です。プロフィールアイコン、ヘッダー画像、固定ポスト、自己紹介文の世界観を、ポートフォリオサイトと完全に統一させてください。クライアントがSNSからポートフォリオに飛んできた瞬間に「同じ世界観だ」と感じられるかどうかで、信頼の積み上がり方が全く変わります。逆にバラバラなトーンで運用していると、せっかくの集客チャネルがただのノイズに変わってしまうので注意が必要です。

よくある質問

Q. ポートフォリオに載せる作品数はいくつが適切ですか？

一般的には4〜6点程度が最も適切とされています。数を競う必要はありません。作品数が多すぎると、採用担当者やクライアントがすべてを詳しく見きれなくなります。自信のある最高の作品を厳選し、それぞれの制作意図やプロセスを深く解説することにリソースを注いでください。

Q. 実務経験がないため、架空のサイト（架空案件）しか掲載できませんが評価されますか？

はい、未経験者の場合は架空案件でも十分に評価の対象となります。既存サイトの課題を分析した上でのリデザイン案や、ターゲットを細かく設定したコンセプトサイトを制作してください。重要なのは「どのようなビジネス上の課題を設定し、デザインという手段を用いてどう解決に導いたか」という論理的なプロセスです。

Q. ポートフォリオサイト自体もHTML/CSSで自作すべきですか？

コーダーやフロントエンドエンジニアとしてのスキルも同時にアピールしたい場合は、自作することが強く推奨されます。一方で、UI/UXデザインやグラフィック作成のスキルのみを重視するポジションを狙うのであれば、STUDIOやWixなどのノーコードツールを使用して構築しても全く問題ありません。目的に応じてツールを選択してください。