Webデザイナーのポートフォリオの作り方｜未経験で通らない人と通る人の差を採用側視点で解説

未経験からWebデザイナーへ転職するとき、最初に立ちはだかるのがポートフォリオです。書類で落ちる人と通る人の差は、作品の数でも経験年数でもなく、一作品ごとの「意図の言語化」と全体の方向性にあります。採用面接に同席する側から見ると、ここがはっきり合否を分けています。

この記事では、未経験者がつまずく原因を採用する側の目線で言語化し、架空案件しかなくても評価されるポートフォリオの作り方を手順で整理します。一般的な「作品を載せましょう」では触れられない、面接官が実際に何を見て合否を分けているのかまで踏み込みます。

未経験のWebデザイナーのポートフォリオが書類で落ちる原因は、作品数ではなく制作意図が言語化されていないこと。採用側が最初に見る「なぜこのデザインか」、架空案件でも評価される見せ方、通過作品との差を採用側視点で整理します。

この記事でわかること

ポートフォリオはなぜ採用で必須なのか

結論として、Webデザイナーの選考ではほぼ必ずポートフォリオの提出を求められ、採用担当者が最も見たいのは自己紹介文ではなく制作実績です。これは未経験でも経験者でも変わりません。

Webデザイナーになるのに国家資格は要りませんが、専門スキルが問われる職種のため、選考では履歴書・職務経歴書とあわせて作品提出が前提になります。制作会社の面接では、面接官がまず開くのはプロフィールページではなく作品一覧です。経歴は履歴書で把握済みなので、限られた時間で「この人にデザインを任せて大丈夫か」を作品から判断しようとします。

つまりポートフォリオは、口頭で説明する前に応募者の力量を先に示してしまう資料です。未経験で経験が浅くても、クオリティが高く企業の求めるテイストに合っていれば採用につながります。逆に、経験者でも方向性がずれた作品ばかりだと通りません。ポートフォリオは「経験年数を埋める書類」ではなく「実務イメージを伝える書類」。この前提に立つと、作り方の優先順位が変わってきます。

形式はサイト版を基本にする

ポートフォリオにはWebサイト版とPDF・紙版がありますが、Webデザイナーの転職では原則サイト版が基本です。サイトをゼロから組める時点でHTML/CSSの基礎力を示せますし、エージェント経由で複数社に同時応募する際もURLを共有するだけで済みます。人材紹介の担当者からも「サイト版があれば紙版は不要」と言われることが多めです。

ただし、面接にPCを持参できない場面やネット環境が不安定な会場に備えて、主要作品だけをまとめたPDFを補助的に用意しておくと安心です。あくまでメインはサイト版、PDFは保険という位置づけにします。

形式	役割	優先度
Webサイト版	基礎力の証明＋URL共有で応募が楽	メイン
PDF・紙版	ネット環境が不安な会場の保険	補助

転職活動そのものの進め方は未経験からWebデザイナーになる方法でも整理しています。

未経験のポートフォリオが書類で通らない3つの原因

未経験ポートフォリオが落ちる原因は、ほぼ次の3つに集約されます。作品の数が足りないことよりも、「中身の薄さ」が原因であるケースが圧倒的に多いです。

原因1：制作物を「ただ貼っただけ」になっている

最も多いのが、作ったバナーやサイトの完成画像を並べただけで、なぜそのデザインにしたのかが一切書かれていないパターンです。これだと「手は動かせるが、考えて作れるかは不明」という評価で止まります。

採用担当者が見たいのは、スキルレベル（使えるツールと習熟度）、デザイン力（制作物のクオリティ）に加えて、課題解決力・伝える力（制作過程や意図）です。完成画像だけでは3つ目が完全に欠落します。「いい感じに作れた作品を並べれば伝わるはず」という思い込みが、書類落ちの典型的な入り口です。

原因2：ポートフォリオ自体のデザインが雑

デザイナーの力をアピールしたいなら、ポートフォリオというサイト自体もデザインするつもりで作る必要があります。作品は良いのに、それを並べる土台の余白・文字組み・配色がちぐはぐだと、「作品は頑張ったが、自分でレイアウトを設計する力は弱い」と見られてしまいます。

面接官の立場で見ると、ポートフォリオサイトそのものが「実務で渡したときの仕上がり見本」に見えます。情報設計や読みやすさが整っているかは、作品より先に無意識に評価されています。

原因3：載せる作品がジャンルもテイストもバラバラ

独学の練習作品を全部載せたくなりますが、ECバナー・スマホアプリUI・名刺・イラストが脈絡なく並ぶと、「この人は何が得意なのか」が伝わりません。応募先が求めるテイスト（例：コーポレートサイト寄り、LP寄り）に合った作品を前に出し、方向性を揃えることが大切です。

未経験のうちは「全部載せて量で勝負」と考えがちですが、採用側は得意分野が読み取れる構成のほうを高く評価します。応募先に合わせて見せる順番や取捨選択を変えるだけで、同じ作品でも印象が変わります。

採用側が各作品で本当に見ているポイント

ここが、一般的な作り方解説で最も薄い部分です。面接に同席してわかったのは、面接官は1作品あたり数十秒で「考えて作れる人か」を判断しているということ。その短い時間で見られているのは、おおむね次の3点でした。

見られる順番	チェック内容	未経験が落とされやすい理由
1. 全体の第一印象	サイト全体の整い・読みやすさ	余白と文字組みが整理されておらず雑に見える
2. 各作品の意図	なぜこの配色・レイアウトにしたか	「なんとなく」で作っており説明がない
3. 課題解決の筋道	目的とアウトプットがつながっているか	見た目だけ作り込み、目的が後付け

逆に言えば、この3点を意識するだけで、作品の数や経験年数が同じでも通過率は大きく変わります。作品はほとんど入れ替えず「各作品に意図の説明文を足した」だけで、次の選考で書類が通るようになった——そんなケースも現場では珍しくありません。

自己紹介よりも作品ページに力を入れる

ポートフォリオには人柄が伝わるプロフィールも必要ですが、主軸はあくまで制作物です。学んできたこと・挑戦したエピソード・今後どう成長したいかは簡潔にまとめ、長文の自分語りにしないことが大切です。面接官は自己紹介を読み込む前に、まず作品で力量を測ろうとします。

プロフィールは「人柄を補足する欄」、作品ページは「実力を示す本体」と役割を分けて、エネルギーの8割は作品ページに注ぐイメージで構いません。

架空案件でも評価される作品の作り方（目的→ターゲット→UI設計）

未経験者の多くは「載せる作品がそもそもない」という壁にぶつかります。ここでよく使われるのが、実在する店舗やサービスのサイトを仮想リニューアルする架空案件です。架空案件は実績がない言い訳に見えそうで不安かもしれませんが、作り方次第で実務案件と同じくらい評価されます。

採用側として差がつくのは、架空案件に「実務と同じ思考プロセス」を通しているかどうかでした。完成画像だけの架空案件は弱いですが、次の3手順で目的・ターゲット・UI設計を言語化した架空案件は、実務未経験でも「考えて作れる人」として評価されます。

手順1：架空案件の「目的」を一文で定義する

まず、その仮想リニューアルが何を達成するためのものかを一文で決めます。「個人カフェの新規来店を増やすためのサイトリニューアル」「地域学習塾の問い合わせ数を増やすためのLP」のように、ビジネス上のゴールを具体的に置きます。ここが曖昧だと、以降のデザイン判断すべての根拠が崩れます。

手順2：「ターゲット」を具体的に想定する

次に、そのサイトを見る人を具体化します。年齢層・利用シーン・何に困っているかまで落とし込みます。カフェなら「近隣に住む20〜30代で、落ち着いて作業できる店を探している人」というように、一人の人物像が浮かぶレベルまで具体化します。ターゲットが定まると、配色・写真の選び方・文章のトーンに一貫した根拠が生まれます。

手順3：「UI設計」の意図を言葉にする

最後に、目的とターゲットを踏まえてなぜそのレイアウト・配色・導線にしたのかを各作品ページに書きます。「作業利用の落ち着いた印象を出すため彩度を抑えた」「初来店の不安を減らすため店内写真をファーストビューに置いた」のように、デザイン判断と目的を一本の線でつなげます。

この3手順を踏んだ説明文を添えるだけで、架空案件は「練習作品」から「実務想定の提案」に格上げされます。作品づくりを指導する場面でも、見た目を直すより先にこの言語化を直すと、書類通過率がはっきり上がります。

未経験でポートフォリオに載せる作品を揃える方法

「目的→ターゲット→UI設計」の型がわかっても、肝心の作品が手元にないと始まりません。未経験者が作品を揃える現実的な方法は、おおむね次の3つに整理できます。

方法1：架空案件で3〜5点をまず固める

最初の土台は、前章の手順で作る架空案件です。実在の店舗やサービスを題材にした仮想リニューアルを3〜5点そろえると、ポートフォリオとして最低限の形になります。題材は普段から知っている地域の店やよく使うサービスを選ぶと、ターゲット像を具体化しやすく説得力が出ます。

方法2：身近な実案件を小さく取りに行く

周囲でデザイン依頼がないかアンテナを張り、知人の店やイベントのバナー・チラシ・簡単なサイトを実際に作らせてもらうのも有効です。たとえ小規模でも「実在の相手のために作った」という事実は、架空案件にはない強みになります。報酬の有無より、実際に使われた制作物が1点でもあるかが効いてきます。

副業として小さく実績を積む進め方はWebデザイナーの副業の始め方も参考になります。

方法3：学習環境を使って作品の質を底上げする

独学だけだと、作品のどこが弱いのか自分では気づけないことが多いです。基礎ツールの操作習得までは独学で十分到達できますが、お金を払う価値が大きいのは「作品レビューと方向性の壁打ち」——これが独学と教育の両方を経た現実的な線引きです。

スクールやオンライン学習サービスで現役デザイナーから作品へのフィードバックをもらうと、自分では見えない改善点が一気に可視化されます。完全に独学で進めて手が止まったときは、学習環境に頼る選択肢を持っておくと回り道を減らせます。

落選作品と通過作品はどこで分かれるのか（差分表）

最後に、落選した作品と作り直して通った作品の違いを、項目ごとに比較します。作品そのものを大きく入れ替えたわけではなく、同じ題材でも「見せ方と言語化」を変えただけで合否が逆転した部分です。これから作る人は、この差分を先に潰しておくと書類選考でつまずきにくくなります。

比較項目	落選しやすい作品	通過しやすい作品
制作意図	完成画像のみ・説明なし	目的・ターゲット・UI設計を各作品に明記
作品の方向性	ジャンルもテイストもバラバラ	応募先に合わせて方向性を統一
ポートフォリオ自体の設計	余白・文字組みが雑	サイト自体も一つの作品として整える
自己紹介	長文の自分語りが主役	簡潔・作品ページが主役
架空案件の扱い	練習作品として並べただけ	実務想定の提案として言語化

表のとおり、分かれ目は「作品の数」や「経験年数」ではなく、一作品ごとの意図の言語化と全体の方向性です。書類落ちの局面で足りないのは、技術より圧倒的に言語化のほう。逆に言えば、未経験でもここを意識すれば経験者に見劣りしないポートフォリオに近づけます。

30代で挑戦する場合のリアルな進め方は30代未経験からのWebデザイナー転職のリアルもあわせてご覧ください。

よくある質問

ポートフォリオ作成で頻出する5つの疑問を整理します。

まとめ

未経験Webデザイナーのポートフォリオで合否を分けるのは、作品の数でも経験年数でもなく、一作品ごとの意図の言語化と全体の方向性です。要点を整理します。

採用側を経験して見えるのは、技術より先に「考えて作れることを伝える設計」が問われているということです。これから作る方は、完成画像を並べる前に、なぜそのデザインにしたのかを言葉にするところから始めてみてください。

この記事の執筆者：Murata（制作会社Webデザイナー5年→事業会社フロントエンドエンジニア3年→フリーランスの経験。未経験からの転職と、制作会社で採用面接に同席した側の視点でWebクリエイター転職を発信しています。採用基準は企業ごとに異なるため、応募先の募集要項も必ずご確認ください。）