▶ 3日で初案件PR
この記事でわかること
3〜5作品の構成基準と各作品に必要な6要素がわかる。作品が少ない状態でも思考プロセスで補う具体的な方法がわかる。面接で1作品2〜3分・5ステップで説明できる準備が整う。
未経験でもWebデザイナーの面接を通過するポートフォリオは、3〜5作品に制作背景・使用ツール・工夫を添えた構成が基準です。この記事では構成設計から面接での説明方法まで順を追って解説します。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
未経験Webデザイナーの面接ポートフォリオは、「何を見せるか」より「どう思考したか」を伝えられる構成が評価されます。作品数は3〜5点を目安に、各作品に制作背景・コンセプト・担当範囲・使用ツール・工夫した点の5要素を添えてください。面接では1作品あたり2〜3分で話せるように事前に要点を短文化しておくと、深掘り質問にも落ち着いて答えられます。
最初に確認すること
ポートフォリオを作り始める前に、「就職・採用面接用」か「フリーランスの営業用」かを決めることが先決です。目的が違うと、載せる作品の優先順位も説明の角度も変わります（確認時間：5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| ポートフォリオの構成から知りたい | 未経験Webデザイナーのポートフォリオは4ブロック構成が基準 | 5分 |
| 作品が少なく内容で補いたい | 作品数が少ない場合は制作プロセスで補う3つの方法 | 4分 |
| 面接での説明方法を知りたい | 面接の説明は1作品2〜3分・5ステップで話す | 4分 |
| 自己PRと内容が重複しそうで困っている | 自己PRとポートフォリオの役割分担は2軸で決まる | 3分 |
| フリーランス受注用に特化させたい | フリーランス向けポートフォリオは受注導線を3か所に置く | 3分 |
| 今すぐ自分のポートフォリオを診断したい | 未経験ポートフォリオは5項目で通過率を自己診断 | 3分 |
未経験Webデザイナーのポートフォリオは4ブロック構成が基準
ポートフォリオがなぜ必要かを正確に理解していないと、作り込む方向が定まらずに時間が溶けていきます。作品を並べることが目的になってしまい、採用担当者に伝えたいことが何も残らない状態は珍しくありません。
自己紹介ブロックは学習理由と得意分野を30秒で伝える
自己紹介ブロックには、名前・学習理由・得意分野・強みをまとめます。文字数の目安は200〜300文字です。「Webデザイナーを目指した理由」は採用側が必ず確認するポイントで、ここが薄いとその後の作品説明全体の説得力が下がります。「グラフィックデザインの経験を活かしてWebに転向した」「独学でHTML/CSSを半年学んだ」など、具体的な経緯を一言入れるだけで印象が変わります。
未経験でWebデザイナーとして採用されるための体験談では、「自己紹介に学習の動機を書いたら、面接で”読んできましたよ”と言ってもらえた」という声があります。
スキルブロックは使用ツールと習熟度を分けて記載する
スキルブロックには、習得済みのツールと習熟度の目安を並べます。「Figma：日常的に使用」「Adobe XD：学習中」のように、どの段階にあるかを明示すると正直さが信頼につながります。ツール名だけでなく「何に使っているか」を一言添えると、採用担当者がスキルの具体的なイメージを持ちやすくなります。すべて「使えます」と書くと面接で詳しく聞かれたときに答えられず、かえって逆効果になります。
製品名を挙げる際は、Figma公式サイトやAdobe公式サイトで最新の情報を確認してください。
作品ブロックは3〜5点を基準に応募先に近いものを前に置く
作品は3〜5点が目安として複数の情報源に挙がっています（未経験者向けポートフォリオ例、ポートフォリオの作り方と注意点）。各作品には、制作背景・コンセプト・担当範囲・使用ツール・工夫した点・成果や学びの6要素を揃えます。応募先の業種や案件に近い作品を最初に置くと、採用担当者が「うちの仕事に合いそうか」を判断しやすくなります。作品を全部並べて「あとは見てください」という構成では印象が薄くなります。
なお、フリーランスのWebデザイナーの仕事内容や独立に必要なステップでは、採用用と受注用でポートフォリオの設計をどう分けるかも詳しく解説しています。
連絡先ブロックは問い合わせまでの手順を1ステップに絞る
連絡先は必ず入れます。メールフォームかメールアドレスを1か所に置き、SNSリンクを追加する場合も「どれに連絡すればよいか」が一目でわかる構成にします。未経験からWebデザイナーを目指す体験談では、問い合わせしようとしたら複数のSNSが並んでいてどれが主連絡先か迷ったという経験が語られています。フリーランスを目指す場合は特に、依頼者が迷わず連絡できる導線の短さが仕事の取りやすさに直結します。
CHECK
▶ 今すぐやること: 自分のポートフォリオ（または作成予定のもの）を開いて、4ブロック（自己紹介・スキル・作品・連絡先）のうち欠けているブロックを1つ特定する（5分）
CHECK
箱スタイルAです。一行でも複数行でも対応。箱スタイルAです。一行でも複数行でも対応。箱スタイルAです。一行でも複数行でも対応。箱スタイルAです。一行でも複数行でも対応。
Q: ポートフォリオはWebサイト型とPDF型のどちらが必要ですか？
A： 応募方法によって変わります。Webサイト型はURLで即座に共有でき、更新がいつでもできる点が便利です。PDFや紙で提出する場合は目次をつけると閲覧性が上がります（未経験向けポートフォリオ作成）。両方用意しておくと、応募先の形式を問わず対応できます。
Q： 自己紹介ページに顔写真は必要ですか？
A： 必須ではありません。フリーランスとして受注を目指す場合は掲載しておくと依頼者に安心感を与えやすいです。就職目的の場合は企業の採用文化によって異なります。
作品数が少ない場合は制作プロセスで補う3つの方法
「実案件がない」「作品が3点も作れていない」という状態で面接日程が決まり、焦った経験がある人は多くいます。ただ、作品が少ないこと自体よりも「それをどう見せるか」の工夫が評価に影響します。
架空案件は課題設定の明確さで実案件と同等に扱われる
架空案件とは、実在しないクライアントや商品を自分で設定して制作した作品です。「地元のカフェのリニューアルを想定したLP」「架空のアプリのUI設計」のように、課題と目的を自分で設定すると制作意図が説明しやすくなります。架空だから評価されないということはなく、「誰のために・何のために作ったか」が明確なほど面接官に響きます。ただし、ポートフォリオ上に「架空案件」と明記することは必要です。架空を実案件のように見せると、面接で詳細を聞かれたときに答えられず信頼を損ないます。
模写は「なぜこのサイトを選んだか」を添えると意図が伝わる
模写とは、既存のWebサイトのデザインを自分の手で再現する練習です。スキル確認の手段として広く使われており、ポートフォリオへの掲載は適切に行えば評価対象になります（未経験向けポートフォリオ作成）。掲載時は「どのサイトを選んだか」と「なぜそのサイトを選んだか」の2点を必ず書きます。「ターゲットが自分の目指す分野と近かった」「レイアウトの学習目的で選んだ」など、選定の理由があると思考力を示せます。模写自体を自分の創作物として提示することは避け、「〇〇サイトの模写」と明記します。
1作品を詳細ページ付きで見せると思考プロセスが可視化される
作品数が2点しかなくても、各作品に詳細ページを設けて制作フローをステップで見せると情報量が補えます。具体的には、「課題の定義→参考サイトの収集と選定理由→カラーパレットの決定過程→実制作→振り返り」の流れを文章と画像で構成します。未経験で内定獲得した実例では、「量より質と思考プロセス」という考え方が採用担当者から実際に言及されています。作品枚数が少ない時期こそ、1点あたりの説明密度を上げる戦略が有効です。
ポートフォリオサイト自体の作り方については、ポートフォリオサイト作り方の完全ガイドも参考になります。
Q: 架空案件は何点くらい入れても問題ありませんか？
A： 架空案件の数に明確な上限はありませんが、実案件・依頼案件がある場合はそちらを優先して前に置きます。架空のみで構成する場合は、課題設定の多様さ（LP・バナー・UI・企業サイトなど異なる形式）を意識すると、対応範囲の広さを示しやすくなります。
Q： 学習サービスの課題作品はポートフォリオに入れてよいですか？
A： 入れられます。ただし「スクール課題」と明記し、課題に対して自分がどう工夫したかを添えると評価につながります。課題のままでは差がつきにくいため、配色やコンポーネントを独自にアレンジした場合はその理由も記載します。
面接の説明は1作品2〜3分・5ステップで話す
書類通過率5割とする作成体験談では、面接で作品を説明するとき、どこから話せばよいかわからず制作ツールの話から始めてしまったという経験が語られています。説明順序と時間配分を事前に決めておくと、深掘り質問にも落ち着いて対応できます。
説明は「課題・背景→コンセプト→工夫→ツール→学び」の順が伝わりやすい
1作品の説明を5ステップで構成します。
第1ステップは「課題・制作背景」です。「誰のために・どんな問題を解決するために作ったか」を1〜2文で話します。ここで聞き手の文脈理解が定まります。
第2ステップは「コンセプト」です。「どんなデザイン方針を選んだか・なぜその方針か」を1文で話します。「落ち着いた配色でシニア層の読みやすさを重視した」のような一言です。
第3ステップは「工夫した点」です。デザイン上の具体的な判断を1〜2個話します。「ファーストビューのCTA位置を3パターン検討した」のように、判断の過程があると思考力が伝わります。
第4ステップは「使用ツール・技術」です。Figma・Photoshop・HTML/CSSなど使ったものを簡潔に列挙します。
第5ステップは「成果・学び」です。「公開後に依頼者から修正依頼が5件来て、初回確認の詰め方が甘かったと気づいた」のような具体的な振り返りが、採用担当者には好意的に受け取られます。上手くいった話だけでなく、失敗から学んだ点を添えると実在感が出ます。
最初に説明する作品は「最も自信があるもの」ではなく「応募先に合うもの」を選ぶ
採用担当者の関心は「うちの仕事に役立つか」に集中しています。応募先がECサイトの会社なら商品訴求型のLP、Web制作会社なら企業サイトや複数形式の作品を前に置きます。作品を選定する判断基準は、「応募先の仕事内容と形式が近いか」の1点です。
深掘り質問は「なぜその色・なぜそのレイアウト」が多くを占める
面接で作品を見せると、「なぜこの色にしたんですか」「このボタンの位置を決めた理由は？」という質問が集中します。これらはすべて「デザインの判断に根拠があるか」を確認する質問です。事前に各作品について「3つのデザイン判断とその理由」をメモしておくと、本番で詰まる場面が減ります。根拠が「なんとなくきれいだから」のままでは評価が下がります。「ターゲット年齢層が40代以上なので文字サイズを16px以上に設定した」のように、対象者や目的に紐づいた理由を準備します。
面接当日の自己PRの組み立て方については、次のセクションで詳しく解説します。
CHECK
▶ 今すぐやること: ポートフォリオに掲載している作品を1つ選び、上記5ステップで2〜3分に収まるように声に出して話してみる（10分）
Q: 面接時間が短い場合、何作品を見せるべきですか？
A： 面接が30分以下の場合は2〜3作品に絞ってください。全部見せようとして説明が浅くなるより、1〜2作品を丁寧に説明したほうが印象が残ります。冒頭に「今日は特に〇〇の作品を中心にご説明します」と伝えると進行がスムーズになります。
Q： 面接官が作品に興味を示さない場合はどうすればよいですか？
A： 説明の長さを短くして「何か気になる点はありますか」と一度確認すると双方向になります。一方的に話し続けると、面接官が質問のタイミングを見失うことがあります。
PR提供: 日本デザインスクール（デザスク）
自己PRとポートフォリオの役割分担は2軸で決まる
自己PRと作品説明が似た内容になってしまい、どちらで何を話せばよいかわからなくなる状態は珍しくありません。整理する軸は「言葉で伝えること（自己PR）」と「成果物で証明すること（ポートフォリオ）」の2つです。
自己PRは「スタンスと強み」を言葉で伝える場
自己PRで話す内容は、自分がWebデザインにどう向き合っているか、どんな強みを持っているかです。「ユーザー視点を意識してデザインを決める」「フィードバックを素直に受け取って反映できる」「進捗を都度報告して認識ずれを防ぐ」といった仕事のスタンスは、作品を見ただけでは伝わりません。ここで話したスタンスを、後のポートフォリオ説明で「実際の作品の工夫点」として裏付ける構造が作れると、説得力が増します。
フリーランスの自己PRの3ステップガイドでは、案件獲得につながる自己PR文の組み立て方を具体的に解説しています。就職面接用にも参考になる内容です。
ポートフォリオは「思考と行動の証拠」を見せる場
ポートフォリオは、自己PRで言ったことが実際に行動に出ているかを示します。「ユーザー視点を意識している」と言ったなら、ポートフォリオでは「ターゲット設定の根拠」「情報設計の意図」を具体的に示します。言葉と成果物が一致している状態が、採用担当者に「信頼できる人」という印象を残します。言っていることとやっていることがずれていると、どちらの信頼度も下がります。
フリーランス受注目的の場合は「依頼者の視点」で整理する
フリーランスとして受注を目指す場合、採用担当者は「一緒に働けるか」を見ますが、依頼者は「自分のサイトを任せられるか」を見ます。そのため、フリーランス向けポートフォリオでは「どんな業種・規模の案件を得意とするか」「対応範囲（デザインのみ/コーディングまで/ディレクションまで）」を明示する必要があります。採用用と受注用を同一ポートフォリオで兼ねようとすると、どちらにも中途半端になりがちです。
Q： 自己PRで「コミュニケーション能力が高い」と書いても問題ありませんか？
A： 抽象的な表現は採用側にほぼ伝わりません。「修正依頼を受けたときに意図を確認してから着手するため、やり直しが1回で済む」のように、具体的な行動で示す形に変えると説得力が出ます。
Q： 転職回数が多い場合、自己PRでどう触れるべきですか？
A： 転職回数の多さを自己PRで先に認めて「各経験で得た〇〇がWebデザインの仕事に活かせる」と繋げるほうが、聞かれて答えるより印象が落ち着きます。採用担当者は職歴を必ず確認します。
フリーランス向けポートフォリオは受注導線を3か所に置く
就職目的のポートフォリオと、フリーランスとして仕事を取りに行くポートフォリオは設計の優先順位が違います。信頼と依頼のしやすさを同時に設計する必要があります。
冒頭のキャッチコピーは「何ができる人か」を1行で示す
ポートフォリオのトップに、自分が何をできる人かを一言で示すコピーを置きます。「フリーランスWebデザイナー｜飲食・小売業の集客サイト制作」のように、得意分野と対象業種が入ると依頼者側が「自分の仕事に合うか」をすぐに判断できます。「Webデザイナーを目指しています」という書き方は、受注を前提にした相手には弱い印象を与えます。学習中であっても「制作可能な仕事」と「対応範囲」を明示する書き方に変えます。
実績・作品の各ページに依頼フォームへのリンクを置く
作品ページを見て「この人に頼みたい」と思った依頼者が、そのまま連絡できるように、各作品ページの末尾に問い合わせフォームへのリンクを置きます。書類通過率5割とする作成体験談では、トップページだけに連絡先を置いていると作品ページから離脱されるケースがあると言及されています。フォームの入力項目は「名前・メール・依頼内容・希望納期」の4つに絞ると、依頼者の入力負担が減ります。
フリーランスが仕事につながるポートフォリオの作り方では、案件獲得を前提にした実績・価格・著作権の記載ポイントを詳しく解説しています。
対応範囲・料金目安・納期目安をFAQ形式で明示する
依頼者が「いくらか」「どのくらいかかるか」「何を頼めるか」を自分で確認できる場所を作ります。料金を出しにくい場合でも「目安：〇万円〜」の形で範囲を示すだけで、問い合わせのハードルが下がります。未経験からWebデザイナーを目指す体験談では、「最初の問い合わせで金額の見当がつかなかったから諦めた」という理由で依頼を逃していたことに気づいたという経験が語られています。「お気軽にご相談ください」だけでは、具体的な数字を知りたい依頼者に行動を起こさせにくい状態になります。
Q： 制作料金をポートフォリオに公開することのデメリットはありますか？
A： 料金を公開することで、予算が合わない依頼者からの問い合わせを事前に絞り込める点はメリットです。案件規模によって料金が大きく変わる場合は「目安：〇万円〜（内容により変動）」の形で範囲を示すと誤解を防ぎやすくなります。
Q： SNSとポートフォリオサイトは連携させたほうがよいですか？
A： Instagramやnote等でデザイン制作の過程を発信している場合は、ポートフォリオからリンクを貼ることで制作スタイルの透明性が増します。ただし、SNSに個人情報が混在している場合は、切り分けて運用するほうが安全です。
未経験ポートフォリオは5項目で通過率を自己診断
「自分のポートフォリオが面接で通じるレベルか」を自分で判断するのは難しいと感じる人は多くいます。以下の診断で現状を確認してください。
Q1: ポートフォリオに自己紹介（学習理由・得意分野）が入っていますか？
Yesの場合はQ2へ進みます。Noの場合はまず自己紹介ブロックを追加します（目安：200〜300文字）。
Q2: 掲載作品が3点以上ありますか？
Yesの場合はQ3へ進みます。Noの場合は架空案件または模写を追加します（「作品数が少ない場合は制作プロセスで補う3つの方法」を参照）。
Q3: 各作品に「課題・背景」と「工夫した点」の記載がありますか？
Yesの場合はQ4へ進みます。Noの場合は各作品に「誰のために・何のために作ったか」と「判断した理由」を追記します。
Q4: 面接で各作品を2〜3分で説明できますか？
Yesの場合はQ5へ進みます。Noの場合は5ステップの説明メモを紙に書き、時計で計りながら練習します（「面接の説明は1作品2〜3分・5ステップで話す」を参照）。
Q5: 連絡先または問い合わせフォームがポートフォリオ上にありますか？
Yesの場合は診断完了です。基本の5項目が揃っています。Noの場合は連絡先を追加します（フリーランスの場合は各作品ページにも置くことをおすすめします）。
CHECK
▶ 今すぐやること: 上記5項目のうち「No」になった項目を1つ選び、今週中に対応する作業時間を30分確保する（予定確認：5分）
Q: 診断で5項目すべてYesでも面接に落ちることはありますか？
A： あります。ポートフォリオは書類選考や面接の準備ツールであり、それ自体が合否を決めるわけではありません。作品の質・説明の的確さ・応募先との相性・競合状況など、複数の要素が重なります。5項目は「最低限の通過条件を整えた状態」として使ってください。
Q： ポートフォリオを完成させてから応募したほうがよいですか？
A： 完成を待つよりも「今ある状態で応募して、フィードバックを受けながら更新する」ほうが実践的な経験が積めます。ポートフォリオは一度作って終わりではなく、案件や採用状況に合わせて継続的に更新するものです。
未経験Webデザイナーの面接ポートフォリオは思考プロセスを見せることが基準
「何を作ったか」よりも「なぜそう作ったか」が評価されます。3〜5作品を揃え、各作品に制作背景・担当範囲・工夫した点を添えれば、作品数の少なさは思考の密度で補えます。面接では1作品2〜3分で話せる準備を整えておくことで、深掘り質問への対応力が格段に上がります。
フリーランスを目指す場合は、採用用とは別に「依頼者が判断しやすい構成」でポートフォリオを設計し直すタイミングを作ってください。初期から受注導線を意識した構成にしておくと仕事の取れ方が変わります。
| 状況 | 次の一歩 | 所要時間 |
| ポートフォリオがない | 4ブロック（自己紹介・スキル・作品・連絡先）の草案を作る | 2〜3時間 |
| 作品が2点以下 | 架空案件1点を設定し、課題と目的を文章で書く | 1〜2時間 |
| 面接対策が不十分 | 掲載作品を1つ選び、5ステップで声に出して練習する | 30分 |
| 自己PRと内容が重複している | 自己PRは「スタンス」、ポートフォリオは「証拠」に役割を切り分ける | 30分 |
| フリーランス受注を目指している | 冒頭コピー・各作品ページのリンク・FAQ（料金目安）の3か所を追加する | 1〜2時間 |
未経験Webデザイナーの面接ポートフォリオに関するよくある質問
Q: 未経験でも有料フォントやAdobe CCは使ったほうが印象が上がりますか？
A： 使えるツールの種類よりも、使い方の意図が大切です。有料ツールを使っていても説明できない判断が多いと評価は下がります。無料のFigmaやCanvaで丁寧に作られた作品のほうが、ツール代がかかった作品より評価されるケースは珍しくありません。
Q： スマートフォン表示（レスポンシブ）まで対応しないとポートフォリオとして弱いですか？
A： レスポンシブ対応があると技術範囲の広さを示せますが、対応していない場合は「学習中の技術として将来的に対応予定」と一言添えることで正直さを伝えられます。未実装のまま黙っておくより、自己評価が正確にできる人物として受け取られます。
Q： ポートフォリオを何回くらい更新するのが適切ですか？
A： 新しい作品が完成するたびに更新し、古い作品の中で説明しにくくなったものは入れ替える運用が現実的です。目安として、3か月に1回は全体を見直し、自己紹介・スキル欄の情報が現在の状態と合っているか確認します。