未経験からWebデザイナーへ転職するポートフォリオは、自己紹介・スキル・制作物・制作意図の4要素を軸に、応募先の業種・制作スタイルに合わせて構成するのが基本です。作品数は3〜5点から始め、質と説明の充実を優先します。この記事では掲載すべき7項目、作成6ステップ、未経験者が実践できる作品不足の補い方を具体的に解説します。
▶ 3日で初案件PR
この記事でわかること
この記事を読むと、採用担当者が確認する7項目の全体像・実案件なしでも評価される4種類の素材の作り方・公開から更新まで手戻りなく進む6ステップの手順がわかります。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
未経験からWebデザイナー転職を成功させるポートフォリオには、自己紹介・スキルセット・制作物・制作意図・使用ツール・工夫点・連絡先の7項目が最低限必要です。作品の数よりも「なぜそのデザインにしたか」の説明が採用担当者の判断材料になります。学習過程の制作物や架空案件でも、業種・課題・解決方針を明確にすれば評価の対象になります。
最初に確認すること
応募先が決まる前にポートフォリオ制作を始めると、どの業種・制作スタイル向けに作ればよいか分からず、汎用的な内容に終わります。まず「どの会社・案件に応募するか」を1〜2社でよいので仮決めし、その会社のサイトや制作物のテイストを確認してから構成を設計すると迷わずに進められます（所要時間：30分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 何を載せるか迷っている | 採用されるポートフォリオは7項目が基本 | 5分 |
| 作品数が3点以下で不安 | 未経験でも作品数を補う4つの方法 | 5分 |
| どう作ればよいか手順を知りたい | 転職ポートフォリオの作成は6ステップで完成 | 7分 |
| フリーランスも視野に入れている | フリーランス転向後のポートフォリオは3点追加 | 4分 |
| 自分のポートフォリオを診断したい | ポートフォリオの完成度を4問で診断 | 3分 |
採用されるポートフォリオは7項目が基本
採用担当者が確認したい情報は7項目に整理できます。この構成を満たしていれば「何が欠けているか」という不安は解消されます。
項目1: 自己紹介は経歴だけでなくデザインを志した理由も書く
氏名・経歴・居住地の基本情報に加え、「なぜデザインを選んだか」と「どんな強みを持っているか」を2〜3文で入れます。未経験者の場合、前職の業種経験がデザインに応用できる点（例：接客経験があるためユーザー目線の設計が得意、など）を書くと他の未経験者との差別化になります。自己紹介は採用担当者が最初に目を通す箇所なので、「この人がどんな人か」を30秒以内に伝えきる密度を意識します。
未経験からWebデザイナーになった体験記｜noteでは、「目的が明確で、誰がいつどう見るかまで意識して作ることが大切だ」という点が共有されています。
項目2: スキルセットは習熟度を4段階で示す
使えるツール名を並べるだけでは、どの程度使えるかが伝わりません。「Figma（日常的に使用）」「Photoshop（基本操作可能）」「Illustrator（学習中）」のように、習熟度を4段階（日常的に使用・業務レベル・基本操作可能・学習中）で示すと採用側が実務配置を判断しやすくなります。HTML/CSSのスキルがある場合も同様に示します。
項目3: 制作物は見栄えより応募先への適合度で選ぶ
作品を選ぶ基準は「きれいに仕上がったか」よりも「応募先の業種・制作スタイルに近いか」です。飲食業向けのコーポレートサイトに応募する場合は、飲食やサービス業を扱った架空案件を前面に出します。作品数の目安は3〜5点で、最初から10点以上を揃えようとすると完成が遠ざかります（未経験からWebデザイナー転職を成功させる「ポートフォリオ」の作り方｜goworkship）。
なお、フリーランスのWebデザイナーの仕事内容や独立に必要なステップでは、ポートフォリオの充実が案件獲得に直結することが解説されており、転職後のキャリアを見据えた作品選定の参考になります。
項目4: 制作意図の説明に6要素を入れる
作品ごとの説明文は、タイトル・テーマ・ターゲット・使用ツール・制作時間・工夫点の6要素を入れることを基本とします。「シンプルなデザインにしました」だけでは評価対象になりません。「20代女性向けのカフェサイトを想定し、滞在時間を増やす目的でファーストビューに大きめのビジュアルを配置しました」のように、判断の根拠を一文一文に持たせます。
未経験Webデザイナーのポートフォリオ基本方針｜noteでも、タイトル・テーマ・ターゲット・使用ツール・制作時間・工夫点をセットで掲載する方針が紹介されています。
項目5: フォントやカラーの選択理由までコメント化する
制作意図の説明をもう一段深めるなら、フォントやカラーの選択理由も書きます。「親しみやすさを出すためにサンセリフ体を選びました」「メインカラーを#3B82F6にした理由は、信頼感を出しながら若さも伝えたかったからです」のように書くと、デザインの思考プロセスが可視化されます。このレベルの言語化をしているポートフォリオは少ないため、面接の場での話題にもなります。
Webデザイナー転職ポートフォリオのコメント化実践例｜noteでは、概要→デザイン設計→ポイント→制作データの流れで整理し、フォントやカラーの選択理由までコメント化している実践例が紹介されています。
項目6: 書類の内容と重複する情報は削る
ポートフォリオと履歴書・職務経歴書の内容が同じだと、採用担当者に「見た意味がなかった」と思われます。書類に記載している職歴・資格は最低限にとどめ、ポートフォリオでは制作プロセスや思考の言語化に集中します。
転職ポートフォリオで書類と重複させない工夫｜noteでも、書類に記載されていることと同じ内容を多く入れすぎない工夫が紹介されています。
項目7: 連絡手段を必ず1つ以上明記する
問い合わせフォーム・メールアドレス・SNSのプロフィールページなど、採用担当者や潜在クライアントが連絡できる手段を1つ以上明記します。連絡先がないポートフォリオは、作品の質がどれほど高くても次のステップに進めません。転職活動中は応答が早いと印象がよくなるため、実際に返信できる手段を選びます。
CHECK
▶ 今すぐやること: 自分のポートフォリオ（または構成メモ）を開き、上記7項目のうち抜けているものをメモする（5分）
Q: 自己紹介には写真を入れるべきですか？
A： 必須ではありません。顔写真を入れると人物像がつかみやすくなり、面接前の印象形成に役立つ場合があります。入れる場合は清潔感のある写真を1枚だけにとどめます。
Q： スキル欄に「学習中」と書いてよいですか？
A： 書いてかまいません。「学習中」を正直に示す方が、採用側が実務配置を判断しやすくなります。ただし「学習中」が大半を占める状態では採用判断が難しくなるため、「日常的に使用」または「基本操作可能」なツールを最低2〜3本確保してから応募するのが現実的です。
Q： 連絡先はメールアドレスを載せないといけませんか？
A： メール以外の手段（問い合わせフォーム・SNSプロフィールページ）でも代用できます。スパムリスクが気になる場合は問い合わせフォームを選んでください。
未経験でも作品数を補う4つの方法
実案件の経験がなくても評価対象になる素材は4種類あります。
方法1: 架空案件は業種・課題・解決方針の3点セットで作る
架空のクライアントを想定し、「業種」「課題」「解決方針」を明確に定義してから制作します。「カフェのサイトをリニューアルする想定で、来店予約率を高めることを課題とし、ファーストビューにメニューと予約ボタンを並列配置した」のように設定を具体化することで、単なる練習作品と差別化できます。業種の選択は応募先に合わせます。
方法2: 模写は「なぜそのレイアウトか」の分析を添える
既存サイトの模写は多くの未経験者が行いますが、「模写しました」で終わると評価の対象になりません。「このサイトはなぜ左にナビゲーション、右にコンテンツを配置しているか」を自分なりに言語化し、分析コメントを制作物に添えます。分析の精度そのものより、「考える習慣があるか」を採用側は見ています。模写を終えてコメントを書き始めたとき、「理由が分からない箇所がたくさんあった」という経験はほぼ全員がします。そこで辞めず、調べた内容を書き留めると素材になります。
方法3: 改善前後の比較を1セット用意する
既存の低品質なサイト（フリー素材で公開されているサンプルなど）を選び、問題点を定義して改善案を作り、ビフォーアフターで並べます。「元サイトのどこが課題で、どう改善したか」の説明を添えると、デザインだけでなく問題発見・解決のプロセスが伝わります。
方法4: 学習履歴を制作物として整理する
学習で制作した課題・サムネイル・バナーなども、制作意図と使用ツールを添えることで素材になります。「Figmaの練習として作ったバナー」ではなく「30代女性向けのスキンケア商品の新聞折込広告を想定し、訴求ポイントを価格より素材に絞ったバナー」と書き換えるだけで印象が変わります。学習履歴として時系列で並べると、成長の過程も伝わります。
なお、フリーランスが最初の案件を獲得するためのポートフォリオ作成についてでは、プロフィール・スキル・実績を戦略的にまとめて得意領域を明確にする重要性が解説されており、転職後のフリーランス転向を見据えた場合にも参考になります。
Q: 架空案件ばかりでも選考を通過できますか？
A： 通過できる場合があります。採用側が判断するのは「架空か実案件か」よりも「課題を定義して解決できているか」です。架空であることを隠す必要はなく、「想定案件として作成」と明記したうえで業種・課題・解決方針を明確に書くと評価の対象になります。
Q： 模写はどのくらいのクオリティまで仕上げるべきですか？
A： ピクセル単位の完全再現よりも、「なぜこのレイアウトか」の分析コメントを完成させることを優先します。模写の精度よりも思考の言語化を採用側は評価します。
Q： 学習用に作ったものはポートフォリオに入れてもよいですか？
A： 制作意図・使用ツール・工夫点の説明が添えられれば掲載できます。説明なしで画像だけを並べると評価の対象から外れます。
ポートフォリオの完成度を4問で診断
自分のポートフォリオが採用の場で通用するか、以下の4問で現状を確認します。
Q1: 応募先の業種・制作スタイルに合った作品が1点以上あるか？
ある場合はQ2へ進みます。ない場合はまず応募先を1社仮決めし、その業種に合った架空案件を1点制作してから再確認します。
Q2: 各作品に「ターゲット」「課題」「解決方針」の3点が説明文に含まれているか？
含まれている場合はQ3へ進みます。含まれていない場合は各作品の説明文に3点を追記してから再確認します（1作品あたり30分）。
Q3: 連絡手段が1つ以上明記されているか？
明記されている場合はQ4へ進みます。明記されていない場合は問い合わせフォームかメールアドレスをその日中に追加します（15分）。
Q4: 書類（履歴書・職務経歴書）と重複する情報が大半を占めていないか？
重複が少なければResult A（公開してよい状態）です。重複が多ければResult B（書類との差別化が必要）です。
Result A: 応募を始められる状態です
7項目の充足度を最終確認したうえで、まず1社に応募します。応募後に得たフィードバックをもとに随時更新する方針にします。
Result B: ポートフォリオ固有の情報を増やす必要があります
書類に書いてある職歴・資格の記載を最小限にとどめ、代わりに制作プロセスや思考の言語化を増やします。制作意図の説明文に各作品200文字以上を目安に加筆します。
Q: 自分では判断が難しい場合はどうすればよいですか？
A： デザインスクールのメンタリングサービスや、SNS上でポートフォリオ添削を公開している現役デザイナーに見せることが有効です。フィードバックの内容は必ずポートフォリオに反映させます。
Q： 診断でResult Aが出ても選考に通らない場合はどうすべきですか？
A： 作品の質・説明文の具体性・応募先との方向性のいずれかがズレている可能性があります。書類選考で落ちる場合は作品の方向性を、面接で落ちる場合は制作プロセスの言語化を見直します。
PR提供: 日本デザインスクール（デザスク）
転職ポートフォリオの作成は6ステップで完成
作成手順が分からないまま始めると、デザインに入ってから構成の破綻に気づいてやり直すことになります。以下の順序で進めることで手戻りを減らせます。
ステップ1: 応募先とターゲットを決める（30分）
最初に「どの会社・案件に応募するか」を1〜2社仮決めします。その会社の公式サイトを見て、デザインの傾向（フラットデザイン寄りか、情報量が多いか、写真が多用されているかなど）を把握します。ポートフォリオの方向性はこの時点で決まります。
ステップ2: 「誰に何を伝えるか」を1文で定義する（15分）
「飲食業向けのWebデザインを担当できる、UIの読みやすさを重視する未経験デザイナーです」のように1文で書きます。この文がポートフォリオ全体のコンセプトになり、作品の選定基準と自己紹介の内容を決める軸になります。この1文が書けない状態でデザインに入っても、作品の方向性がバラバラになります（転職用ポートフォリオの作り方｜creators-factory）。
ステップ3: 掲載作品を選定して構成を設計する（1〜2時間）
手持ちの素材（架空案件・模写・学習履歴）を並べ、ステップ2で定義したコンセプトに近い順に並べ替えます。3〜5点に絞り込んだうえで、各作品の説明文に入れる6要素（タイトル・テーマ・ターゲット・使用ツール・制作時間・工夫点）をテキストベースで書き出します。この段階ではまだデザインに入りません。
ステップ4: ワイヤーフレームを作成する（2〜3時間）
FigmaやAdobe XDでワイヤーフレームを作り、各ページのレイアウト・ナビゲーション・作品の配置順を確定させます。ワイヤーフレームを省くと、デザイン作業の途中で「作品の見せ方が変」と気づいて最初から作り直すことになります。最初のポートフォリオ制作でワイヤーフレームを飛ばして後悔したという経験は多くのデザイナーが共有しています。レイアウトの検討はワイヤーフレームの段階で終わらせます。
ステップ5: デザインを制作して1ページ版で公開する（3〜5時間）
ワイヤーフレームをもとにデザインを制作し、まず1ページ版（スクロール型）で公開します。完璧な多ページ構成を目指して公開が遅れるよりも、最小構成で公開して早い段階でフィードバックを受けた方が改善が進みます。公開先はSTUDIO・ポートフォリオ専用のnoteなど、デザインを比較的自由に表現できるツールが選ばれる傾向があります（未経験Webデザイナー向けポートフォリオ解説｜tokyofreelance）。
ポートフォリオサイト自体の作り方については、2週間で完成するポートフォリオサイト作り方｜未経験でも今日から始められるも参考になります。プロフィール・作品紹介・スキル一覧・実務経歴・問い合わせフォームの5要素をどう構成するか具体的に解説されています。
ステップ6: 応募後もフィードバックをもとに更新し続ける（随時）
応募した会社からフィードバックを得た場合も、書類審査で落ちた場合も、その結果をポートフォリオに反映させます。「完成したら終わり」ではなく、応募→結果→改善のサイクルを繰り返すことで、ポートフォリオの精度は上がります。作品の差し替えは月に1回、説明文の改善はフィードバックを受けるたびに行うのが現実的なペースです。
CHECK
▶ 今すぐやること: ステップ1だけ今日中に完了させ、応募候補の会社サイトを1社分確認する（30分）
Q: ポートフォリオの公開にはどんなツールを使えばよいですか？
A： STUDIO・WordPress・Notion・portfの中から、自分のスキルセットや更新頻度に合うものを選びます。HTMLとCSSが書ける場合はGitHub Pagesで独自実装する方法もあります。どのツールが自分に合うかは、まず無料プランで試してから判断します。
Q： ワイヤーフレームは紙でもよいですか？
A： かまいません。FigmaやAdobe XDを使うと後の工程でそのままデザインに移行しやすいですが、最初は紙に書いて構成を決めてからツールに移す方がスムーズな場合もあります。デザインに入る前に構成を確定させることが目的なので、手段は問いません。
Q： ポートフォリオの公開後はどのくらいの頻度で更新するべきですか？
A： 作品の差し替えは月1回、説明文の改善は応募のたびに行うことを基本とします。更新が半年以上ない状態は、採用担当者から「活動していない」と受け取られる場合があります。
フリーランス転向後のポートフォリオは3点追加
転職先で経験を積んだあとフリーランスに転向する場合、転職用ポートフォリオに3点を追加します。
追加1: 対応可能な領域と得意業種を明示する
バナー制作から始めるのか、コーポレートサイト全体を担当できるのか、LP制作専門なのかを明記します。「Webデザイン全般」とだけ書くと、クライアントは何を依頼できるか判断できません。得意業種（飲食・医療・スタートアップなど）があれば合わせて書きます（フリーランス向けポートフォリオの作り方｜launchstudio）。
追加2: 料金目安か予算感の記載を検討する
料金を明示するかどうかは任意ですが、「バナー1点〜3万円」「コーポレートサイト〜20万円」のように予算感を示すと、問い合わせの質が上がります。料金を示さない場合でも、「料金はご要望と作業範囲に応じてお見積もりします」と書いておくと問い合わせへのハードルが下がります。料金は市場の相場と自分のスキルレベルに応じて決めます（フリーランスWebデザイナー向けポートフォリオ｜itpropartners）。
追加3: 案件ごとに担当範囲と役割を明示する
フリーランスへの依頼では「何から何まで任せられるか」が判断基準になります。「ワイヤーフレームから納品まで担当」「デザインのみ担当（実装は別担当）」「ディレクション含む」など、各作品の担当範囲を明示します。
フリーランスに転向した後のポートフォリオ戦略については、フリーランスの仕事につながるポートフォリオの作り方が参考になります。クライアントワークの許諾取得方法や著作権の扱い方まで詳しく解説されています。
Q: フリーランス向けに切り替えるタイミングはいつですか？
A： 転職先で実案件を2〜3本担当した段階で、作品に担当範囲と実績を追記してフリーランス向けの内容に更新するのが現実的なタイミングです。実績が一切ない状態でフリーランス向けのポートフォリオを作ると、掲載できる情報が転職用と変わらなくなります。
Q： フリーランスのポートフォリオにクライアント名を載せてよいですか？
A： 契約時に秘密保持義務がある場合は掲載を避けます。掲載したい場合はクライアントに事前確認を取ります。掲載が難しい場合は「飲食業向けコーポレートサイト（非公開）」のように業種と制作物の種類だけを書く方法があります。
未経験転職ポートフォリオを完成させる：7項目と6ステップのまとめ
採用されるポートフォリオは、自己紹介・スキルセット・制作物・制作意図・使用ツール・工夫点・連絡先の7項目を満たし、作品ごとに「なぜそのデザインにしたか」を言語化したものです。未経験者は実案件が少なくても、架空案件・模写・改善前後・学習履歴の4種類の素材を活用でき、いずれも業種・課題・解決方針の3点を明記することで評価対象になります。作成は応募先の仮決め→コンセプト定義→構成設計→ワイヤーフレーム→公開→更新の6ステップで進め、公開後は応募のたびに改善を続けます。
3点の素材をそろえて早めに公開し、フィードバックをもとに更新する方が実際には選考対策になります。ポートフォリオは「更新し続けるもの」として扱うことが、転職とフリーランス転向の両方に長期的に役立ちます。
| 状況 | 次の一歩 | 所要時間 |
| 応募先が未決定 | 1〜2社仮決めして公式サイトのデザイン傾向を確認する | 30分 |
| 作品が1点もない | 架空案件の業種・課題・解決方針を書き出す | 30分 |
| 構成は決まった | Figmaでワイヤーフレームを1ページ分作る | 2〜3時間 |
| 公開できる状態にある | 1ページ版でまず公開し、1社に応募する | 30分 |
| フィードバックを得た | 説明文の具体性を各作品で改善する | 1作品あたり30分 |
Webデザイナー未経験転職ポートフォリオに関するよくある質問
Q: 作品数が2点しかない状態で応募してもよいですか？
A： 説明文が充実していれば2点でも応募できます。ただし、作品ごとに「ターゲット・課題・解決方針・使用ツール・工夫点」の5要素を揃えることが前提です。3点目を架空案件で追加制作しながら応募を並行して進める方法が現実的です。
Q： ポートフォリオはWebサイト形式でないといけませんか？
A： 必須ではありません。PDF形式のものやNotionで作成したものも使われています。ただし応募先がWebデザイナーを募集している場合、自分のポートフォリオサイト自体がWebデザインのスキルを示す場になります。応募先の業態に合わせて形式を選びます。
Q： 未経験でポートフォリオが高く評価されるにはどのくらいの期間が必要ですか？
A： 架空案件を3点作り、各作品の説明文を整える期間として2〜4週間が目安です。応募先の業種に合わせた作品を含めること・ワイヤーフレームから制作すること・説明文に制作意図を入れることの3条件を満たせば、期間よりも内容の充実が選考結果を左右します。
【出典・参照元】
Webデザイナー転職ポートフォリオのコメント化実践例｜note
未経験Webデザイナー向けポートフォリオ解説｜tokyofreelance
未経験からWebデザイナー転職を成功させる「ポートフォリオ」の作り方｜goworkship
転職用ポートフォリオの作り方｜creators-factory