Webデザイナーのポートフォリオの作り方を転職成功者が解説する

ポートフォリオを作ろうとして、何を載せたらいいかわからなくて手が止まっている。そんな経験はないでしょうか。

私はグラフィックデザイナーとして10年近く印刷会社に勤めたあと、30代でWebデザイナーに転職しました。そのとき一番頭を悩ませたのが、ポートフォリオでした。紙とWebの違い、採用担当が何を見ているのか、作品が少なくても通るのかどうか。当時わからないことだらけでしたが、転職に成功してわかったことがたくさんあります。

この記事では、その経験をもとにWebデザイナーのポートフォリオの作り方を解説します。採用担当が「実際に何を見ているのか」という視点から、作品の選び方・見せ方・ツールまで具体的にお伝えします。

この記事のポイント

• ポートフォリオ通過のカギは「デザインの意図を言語化できているか」にある
• 作品は3〜5点に絞り、各作品に制作背景・課題・解決策をセットで載せる
• グラフィック出身者は「印刷物の知識」をWebへの応用力としてアピールできる

Webデザイナーのポートフォリオで採用担当が見ていること

採用担当がポートフォリオで最初に確認するのは「デザインのきれいさ」ではなく、「なぜそのデザインにしたかを説明できるか」です。転職エージェントに聞いたところ、書類選考での脱落理由の第1位は「作品が並んでいるだけで、思考の跡が見えない」だといいます。

採用担当が実際にチェックする3つのポイント

1. 課題解決の思考プロセスが見えるか

デザインは「かっこよく作ること」が目的ではなく、課題を解決するための手段です。採用担当は、「このデザイナーはクライアントや事業課題を理解した上でデザインを選択できているか」を確認しています。作品の横に「このサイトでは購買率を上げるためにCTAを目線の流れに合わせて配置した」といった説明があれば、それだけで印象が大きく変わります。

2. 使用ツールとスキルの組み合わせ

FigmaやXDでのデザインデータ、HTMLとCSSによるコーディング実績が両方あると評価が上がりやすいです。完全なコーディングができなくても、「Figmaでデザインし、基本的な実装ができる」レベルは多くの求人でプラス評価になります。Webデザイナーはデザインとコーディングをどのくらい分担しているか企業によって大きく異なるため、自分の得意領域を明確に示しておくことが大切です。

3. ポートフォリオ自体のデザイン品質

ポートフォリオサイトそのものが作品になります。レイアウトの崩れ、フォントの不統一、モバイル非対応といった基本的なミスは、「細部への注意力が低い」と判断されやすいです。特にサイト版ポートフォリオの場合、Webデザイナーとしての品質基準を示す場でもあります。

ポートフォリオに必ず載せておきたい5つの要素

書類通過率を上げるためには、掲載する情報の「種類」と「見せ方」の両方を整える必要があります。特に転職活動では、採用担当が1件あたり平均30秒〜1分しかポートフォリオを見ません。この短い時間に必要な情報を伝えきる構成が求められます。

プロフィールと自己PR

名前・経歴・得意なデザインジャンルを簡潔に書きましょう。注意したいのは「何ができるか」を中心に書くことで、「デザインが好きです」といった感情表現は薄い印象につながりやすいです。「印刷・紙媒体のデザイン経験を活かし、Webでも読みやすさを重視したレイアウト設計が得意」のように、強みを具体的に示すとよいでしょう。

使用ツール・スキル一覧

「Figma」「Adobe XD」「Illustrator」「HTML/CSS」といったツール名を一覧で見せましょう。さらに踏み込むなら、「Figmaは日常的に使用」「CSSは基本的なコーディングが可能」のように習熟度を添えると、採用担当が一致する求人を探しやすくなります。

作品（3〜5点に絞る）

作品数は多い方が良いと思いがちですが、質の低い作品を増やすと全体の評価が下がります。3〜5点に厳選し、各作品に以下をセットで掲載しましょう。

• 制作背景（誰のために、何のために作ったか）
• 担当した作業範囲（デザインのみ・コーディング含む等）
• こだわったポイントと制作意図
• 使用ツール

たとえばこう書けばよいでしょう。「制作背景：地元カフェのリニューアルを想定し、テイクアウト需要増加に合わせてモバイルファーストのLPを制作。担当範囲：ワイヤーフレームからFigmaデザイン、HTML/CSS実装まで。こだわり：フードの写真を大きく使い、CTAボタンを1画面に1つに絞ることで離脱率を下げることを意識した」。このように書かれていると、採用担当はデザイナーの仕事の進め方が一目で把握できます。

架空案件でも問題ありません。「実在するカフェを想定し、来店促進のためのLPをデザインした」のように、課題設定が明確であれば十分にアピールできます。

制作プロセスの可視化

完成品だけでなく、ワイヤーフレームや途中のデザイン案を掲載すると、思考の深さを伝えられます。「3案を比較検討し、ユーザーの視線移動を考慮してこの構成にした」という過程が見えるだけで、実力の判断材料が増えます。

稼働条件・連絡先

フリーランス案件を目的とする場合は特に重要です。「週何日対応可能か」「リモート対応可否」「対応可能な業務範囲」を明記しておくと、クライアントから声がかかりやすくなります。

なお、実務経験がある場合は守秘義務に注意が必要です。在籍中・退職後にかかわらず、会社が制作したWebサイトの内部データやデザインカンプをそのまま掲載するのはNGになる場合があります。掲載前に「公開可能なものか」を確認するか、モザイクや一部トリミングで対応するのが安全です。

作品数が少なくても通過するポートフォリオの組み立て方

作品が1〜2点しかない場合でも、ポートフォリオ選考は通過できます。デジタルハリウッドのポートフォリオ講座では「掲載できる作品は1点でも問題ない。その作例を通してスキルと思考力が伝わればよい」と明言しています。実際に私自身も転職活動のときに作品点数が多かったわけではありませんでしたが、各作品の解説を丁寧に作り込んだことで書類通過率が上がりました。

1点の作品で「3つの深さ」を示す方法

リサーチと分析

「競合サイトを5件調査し、色使いとCTAの位置を分析した」「ターゲットユーザーは30代女性と想定し、フォントと余白でやわらかさを演出した」のように、デザイン前の思考を書きましょう。

デザインの選択理由

「青系カラーを選んだのは信頼感を出すためではなく、競合が全て暖色系だったため差別化を意識した」のような具体的な選択理由は、採用担当に「この人は考えて作っている」と伝わりやすいです。

改善案と振り返り

完成した作品に対して「もしもう一度作るなら○○を変える」と自己評価を書くと、成長意欲と客観的な視点があることを示せます。スクールの課題をそのまま出すよりも、振り返りコメントをつけた方がはるかに印象がよいでしょう。

架空案件の作り方

実案件が少ない場合は架空案件で補いましょう。テーマは「既存店舗の集客改善LP」「地域イベントの告知サイト」のように現実に存在しそうな設定にするとリアリティが出ます。テーマを決めたら、実際のサービスと同じように課題定義→ターゲット設定→ワイヤーフレーム→デザインの順で進めると制作プロセスも見せやすくなります。

なお、架空案件を作るときに陥りがちなのが「完成品だけ作って終わり」にしてしまうことです。課題設定から始め、調査・分析・デザイン・改善案まで一連のプロセスを書いておくと、実案件と変わらない説得力が生まれます。

グラフィックデザイナーからWebデザイナーに転職する人が意識すること

グラフィックデザイナー出身者がWebデザイナーに転職するとき、ポートフォリオで意識すべきことが独特にあります。これは競合記事がほぼ触れていない視点ですが、印刷会社やデザイン事務所から転職を考えている人にとって重要なポイントです。

印刷物をポートフォリオに載せる場合の注意点

グラフィック時代の実績はWebのポートフォリオに入れてもかまいません。ただし、そのまま載せるのではなく「この印刷物のデザイン経験がWebのどのスキルに活きているか」を言語化することが必須です。

たとえばこう書きましょう：「チラシや冊子で培った”読み手の視線の流れを設計する力”は、WebのLP設計でも直接活きています。ZパターンやFパターンを意識したレイアウトはWebでも同じ原理で有効です」

グラフィックデザインの経験を「無駄なもの」として隠すのではなく、Webに接続できるスキルとして提示すると、むしろ強みになります。

グラフィック出身者が陥りやすいミス

「印刷の感覚でWebをデザインしてしまう」という落とし穴があります。具体的には、余白を取りすぎて情報密度が低くなる、フォントサイズが小さすぎてスマホで読みにくい、印刷解像度の画像をそのまま使いファイルサイズが重くなる、といった問題です。
ポートフォリオを作る段階から「これはスマホで見たときにどう見えるか」を常に確認する習慣をつけておくと、Webデザイナーとしての感覚が身についていることも伝わります。

Webデザインで新たに習得すべきスキルを明示する

転職後に必要になるFigma・HTML/CSS・レスポンシブデザインの知識が「現在学習中」であれば、ポートフォリオのプロフィール欄に書いておきましょう。「現在Figmaを使ったデザイン制作を実践中」のような一文は、成長意欲のアピールになります。採用側は「伸びる人かどうか」を気にしています。

ポートフォリオを作るおすすめのツールと選び方

ポートフォリオを作るツールは「サイト型」か「PDF型」かで選択肢が変わります。転職を目的とするならサイト型が基本で、紙媒体のデザイン会社やリテラシーの低いクライアントが相手の場合はPDF型もあわせて用意しておくと安心です。

サイト型ポートフォリオのツール比較

ツール	特徴	向いている人
STUDIO	ノーコードで高品質なデザインが作れる。日本語対応も充実	デザイン重視・コーディング不要
Wix	直感的な操作性。テンプレートが豊富	手軽に作りたい初心者
WordPress	カスタマイズ性が高い。運用実績もアピールに使える	コーディング経験がある人
自作（HTML/CSS）	ポートフォリオ自体がコーディングの実績になる	コーディングもアピールしたい人

私はWebデザイナーへの転職活動時にSTUDIOでポートフォリオサイトを作りました。コーディングよりもデザインに集中したかったためで、採用担当からも「デザインのクオリティがわかりやすい」という評価をもらえました。ただ、転職後の現職ではHTMLとCSSの基礎知識が役立つ場面が多く、今振り返るとコーディングを少し載せておいてもよかったと思っています。

PDFポートフォリオが有効な場面

• 面接時に持参してその場で説明したい場合
• Webが不慣れな採用担当者を相手にする場合
• 印刷会社・広告代理店などの紙媒体案件が多い会社に応募する場合

PDF版を作る場合はAdobeのPortfolioやIllustratorでレイアウトを作り、PDFとして書き出す方法がシンプルで品質も出しやすいです。

よくある質問

Q. 作品は何点載せれば書類を通過できますか？

3〜5点が目安です。点数より「各作品に制作意図と解説が書かれているか」の方が重要で、1点の完成度が高い方が5点のスカスカな作品集より評価されることもあります。

Q. 未経験・架空案件でもポートフォリオに載せていいですか？

問題ありません。採用側も「実務経験なし」を前提に見ています。課題設定が明確で、デザインの意図が説明できていれば架空案件でもスキルと思考力は十分に伝わります。

Q. ポートフォリオはサイト型と紙型どちらを作ればいいですか？

転職ならサイト型を基本にしましょう。デザイン重視の会社には紙型（PDF）もあると安心ですが、両方必須ではありません。応募先の業態に合わせて判断するとよいでしょう。

Q. グラフィックデザイナー時代の印刷物を載せてもいいですか？

載せてかまいません。ただし「この経験がWebのどこに活きるか」を必ず言語化して添えましょう。説明がないと採用担当には「関係ない作品」として判断されます。

Q. コーディングができなくてもWebデザイナーとして転職できますか？

できます。ただし「Figmaでのデザイン制作ができる」「基本的なHTMLとCSSを理解している」レベルがあると選考対象の幅が広がります。コーディング不要の求人も多いですが、知識として持っておくと転職後に評価されやすいです。

まとめ

Webデザイナーのポートフォリオは、作品の数より「思考の言語化」が勝負を決めます。採用担当が本当に見ているのは、デザインの課題設定・選択理由・改善意識の3点です。

作品が少なくても、各作品に制作背景と意図をセットで添えれば十分に戦えます。グラフィック出身者はこれまでの経験を「無駄なもの」として隠すのではなく、Webに接続できる強みとして言語化することで差別化できます。

まずは1点、制作意図を丁寧に書いた作品からポートフォリオを作り始めるのが最短ルートです。