独学でWebデザイナーを目指す人が最初に直面するのは、「実績がないのに何を見せればいいのか」という問題です。架空案件やサイト模写から始めて、フリーランス案件獲得に使えるポートフォリオを5ステップで仕上げる方法をこの記事で解説します。
▶ 3日で初案件PR
この記事でわかること
この記事を読むと、作品0点の状態から公開できるポートフォリオを10時間以内に作る手順がわかります。架空案件の設定方法・作品詳細ページの5項目フォーマット・公開後の改善サイクルの3点を中心に解説します。案件獲得につながるポートフォリオと、ただ作品を並べたポートフォリオの違いは「誰向けに何を解決したか」の言語化の有無です。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
独学・未経験者でも、架空案件やサイト模写を作品化することでポートフォリオは作れます。評価の分かれ目は作品数ではなく「誰向けに何を解決したか」の言語化であり、それが案件獲得時の差別化につながります。3点の厳選作品から始め、公開後に少しずつ更新していく運用が現実的です。
最初に確認すること
このページを読む前に、「自分が狙う案件の種類（LP制作、バナー制作、サイト全体設計など）」を1つだけ決めておいてください。ターゲット案件が決まると、作品の方向性がすぐ定まります（5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 何も作品がない段階 | 架空案件とサイト模写で作品を作る方法 | 5分 |
| 作品はあるが見せ方がわからない | 作品ページは5項目で構成する | 5分 |
| 構成・ページ設計に迷っている | ポートフォリオの構成は5項目で整理する | 3分 |
| 公開ツールを選べていない | 公開ツールはWeb版を基本に選ぶ | 3分 |
架空案件とサイト模写で作品を作る方法
架空案件とサイト模写は、実務と同等の練習課題として通用します。クライアントワークでなくても、制作意図が説明できれば評価の対象になります。
架空案件は「想定クライアントとターゲット」を明記して作る
架空案件で有効な作品を作るには、「誰のために、何の課題を解決するためのデザインか」を先に設定します。たとえば「30代女性向けのオーガニックコスメショップのLP、課題は初回購入率の低さ」のように具体化します。想定が明確なほど、作品詳細ページでの言語化が自然になります。
架空案件を作るとき、「こんな設定で本当に評価されるのか」と感じる場面があります。設定が現実離れしていても評価は下がりません。採用担当者や発注者が見ているのは「このデザイナーはクライアントの課題を理解しながらデザインできるか」であり、架空設定の精巧さではないからです。
架空案件を作品として掲載する場合は、作品詳細ページに「架空案件」と明記します。記載なしで掲載すると、後から「実績を偽った」と受け取られるリスクがあります。
CHECK
▶ 今すぐやること: 自分が狙う案件ジャンルを1つ決め、「想定クライアント業種・ターゲット年齢・抱えている課題」を3行でメモする（10分）
サイト模写は「なぜその配色か」まで言語化する
サイト模写は、既存のWebサイトを忠実に再現する制作課題です。コーディングやレイアウト再現の技術力を示しやすく、未経験者のポートフォリオに組み込む方法として広く使われています。
模写だけでは「作れる」ことしか伝わりません。模写した理由・配色やタイポグラフィの意図の読み解き・もし自分が改修するとしたらどこをどう変えるかという考察を作品詳細ページに追加することで、「思考ができるデザイナー」として印象が変わります。
模写で迷いやすいのが「どのサイトを選べばいいか」という点です。難易度が高すぎると制作に時間がかかりすぎ、低すぎると技術的なアピールが薄くなります。自分が狙う案件ジャンルに近い既存サイト1本から始め、その後ジャンルを変えてもう1本作るのが現実的です。
Q： 架空案件を掲載することへの採用担当者の反応はどうですか？
A： 架空であることを明記したうえで制作意図を丁寧に説明していれば、未経験者への評価に大きな影響は出ません。問題になるのは架空案件を実績として偽る場合です。
Q： 模写した作品の著作権は問題になりませんか？
A： 模写はポートフォリオの学習目的の掲載として一般的に使われていますが、模写元のサイトを明記し、「模写作品」として明確に区別することが必要です。商用利用や模写であることを隠した掲載は避けてください。
作品ページは5項目で構成する
作品を並べるだけでは、閲覧者に「どういう思考でこのデザインを選んだのか」が伝わりません。作品1点ごとに5項目を統一フォーマットで書くことで、制作意図が読み取れる状態になります。
5項目の構成：コンセプト・ターゲット・使用ツール・工夫した点・制作期間
作品詳細ページに最低限書くべき5項目はコンセプト（何を解決するためのデザインか）・ターゲット（誰に向けたデザインか）・使用ツール（Figma、Adobe XD、Canvaなど）・工夫した点（配色・タイポグラフィ・レイアウトで意識したこと）・制作期間の5つです。
この5項目を統一フォーマットにしておくと、作品が増えたときに更新の手間が減ります。閲覧者側も比較しやすくなるため、ポートフォリオ全体の見やすさが上がります。
制作期間の記載を避ける人は多くいます。「時間がかかりすぎた」と思われるのが心配なためです。ただ、制作期間を書いておくと「このデザインにこれだけ時間をかけた」という密度の話ができ、後から営業トークにも使えます。
言語化が苦手なときは「なぜその色にしたか」から始める
作品の意図を言語化しようとすると、最初は「なんとなく」「見た感じよかったから」で止まりやすいです。そういうときは、「なぜその配色を選んだか」という1点から始めるのが現実的です。
「ターゲットが30代女性だったため、清潔感と信頼感を出すためにライトグレーとオフホワイトを基調にした」というレベルで十分です。配色の根拠が1つ言語化できると、タイポグラフィ・余白・構成の理由も芋づる式に出てくることが多くあります。
Webデザイン配色は3色70-25-5%で決まるという考え方を参考にしながら、「なぜその色の組み合わせを選んだか」を言葉にする練習を積み上げていくと、言語化の精度が自然と高まります。
言語化の精度を高める方法の1つは、他のデザイナーの作品詳細ページを参考にして「この人はどういう理由でこの色を選んでいるか」を読むことです。参考にするのはよいですが、表現をそのままコピーするのは評価を下げる原因になります。
工夫した点は「何を避けて何を取ったか」で書く
工夫した点を書くとき、「こだわった」「丁寧に作った」という言葉は印象に残りにくいです。「A案とB案で迷い、B案にした理由は○○だったから」という選択の根拠を書いた方が、思考プロセスが伝わります。
「フォントはゴシック体と明朝体で迷い、ターゲットの年代とブランドのトーンに合わせて明朝体を選んだ」のように、選ばなかった選択肢との対比で書くと具体性が出ます。これは実務でもクライアントへの提案時に使う説明形式と同じです。
Q： 作品詳細ページは全作品に必要ですか？
A： 全作品に詳細ページを作るのが望ましいですが、最初から完璧にする必要はありません。まず自信作2〜3点に詳細ページを作り、残りは後から追加する形で始めるのが現実的です。
Q： 制作意図を言語化するのに時間がかかりすぎます。どうしたらいいですか？
A： 言語化に慣れていないうちは、作品を作りながらメモを取る習慣をつけると効果的です。「今日なぜこのレイアウトにしたか」を作業中にテキストに残しておくと、後から整理する手間が大幅に減ります。
ポートフォリオの構成は5項目で整理する
ポートフォリオ全体の構成でよく使われるのは、目次・自己紹介・できること・作品・連絡先の5項目です（未経験でも大丈夫！Webデザイナーポートフォリオの作り方）。この流れは、閲覧者が「この人は何者か→何ができるか→実際の仕事は→どう連絡するか」という順で確認していく動線と一致しています。
自己紹介はプロフィール写真・経歴・得意領域の3点だけでよい
自己紹介ページで書くべき情報は、顔写真または似顔絵・経歴の要点・得意領域の3点に絞ります。長い自己紹介は読まれにくく、作品の印象が薄まる原因になります。
ポートフォリオの目的は「この人に頼みたい」と思ってもらうことです。得意領域を一言で書いておくと、閲覧者が「このデザイナーに頼める案件か」を瞬時に判断できます。
「書類に記載されていることと同じ情報を多く入れない」という観点で見せ方を工夫することも有効です（未経験からWebデザイナーを目指す私のポートフォリオができるまで）。履歴書や職務経歴書と内容が重複するなら、ポートフォリオでは「得意領域と制作思想」に絞った方が読みやすくなります。
作品の掲載順は「自信作→新しい作品→多様性を示す作品」の順で並べる
掲載順の基本は、自信作を最初に、次に新しい作品、最後に多様性（バナー・LP・サイト全体設計など異なる種類）を示す作品を置く順序です。
自信作を最初に置く理由は、閲覧者がポートフォリオをすべて確認するとは限らないためです。最初に印象的な作品がないと、残りを見てもらえない可能性があります。新しい作品を前に置くのは「現在のスキル」を示すためです。2年前の作品が最初にあると、現在のスキルレベルが正確に伝わりません。
掲載数については、初期は3〜5点に絞り、案件獲得経験が増えるにつれて10点前後まで増やすのが現実的です。作品が少ない段階で無理に増やそうとすると、完成度の低い作品を掲載することになり、全体の印象を下げる原因になります。
連絡先は問い合わせフォームとメールアドレスを両方置く
連絡先は、問い合わせフォームとメールアドレスを両方掲載します。片方だけだと、相手の使いやすい方法で連絡できないケースが出ます。
フリーランスとして営業する場合、「連絡手段が見つからなかった」という理由でそのまま候補から外れることがあります。フォーム・メール・SNSのいずれかから必ず連絡できる状態にしておくことで、機会損失を減らせます。
Q： 作品数が3点しかない段階でもポートフォリオを公開してよいですか？
A： 公開してよいです。3点でも「誰向けに何を解決したか」が明確な作品であれば、評価の対象になります。案件獲得を待ちながら完成を目指すより、早期に公開して反応を見ながら改善する方が現実的です。
Q： SNSのURLを掲載することは必要ですか？
A： 必須ではありませんが、デザイン系のSNS（Behance、Dribbble、Instagram）のアカウントがあれば掲載を検討してください。更新頻度が高いアカウントは、活動の継続性を示す材料になります。
PR提供: 日本デザインスクール（デザスク）
あなたのポートフォリオは今すぐ作り始められるか3分で診断
「自分はポートフォリオを作れる段階か」を判断するための確認です。
Q1: 作品候補（架空案件・模写・自主制作）が1点以上ありますか？
Yesの場合はQ2へ進みます。Noの場合は、まず架空案件またはサイト模写を1本作ることから始めます。
Q2: Figma、Adobe XD、Canva、STUDIOのいずれかを使ったことがありますか？
Yesの場合はQ3へ進みます。Noの場合は、まず無料で使えるFigmaまたはCanvaから始めます。
Q3: 「自分が狙う案件ジャンル」を1つ挙げられますか？
Yesの場合は今すぐポートフォリオの構成設計を始められます（Result A）。Noの場合はターゲット案件を決めることから始めます（Result B）。
Result A: 今すぐ始められます
作品を5項目のフォーマットで言語化し、STUDIOまたはWixで公開まで進めてください。まず自信作1点の詳細ページを作ることを最初の目標にします。
Result B: ターゲット設定から始めます
「LP制作・バナー制作・Webサイト全体設計」のいずれかから1つ選び、その案件ジャンルに近い架空案件の設定を書き出すことから始めます。
Q： ポートフォリオを作ったことがない段階でも1人で進められますか？
A： 進められます。作品の言語化と構成設計に迷う場面は多いですが、まず1点の作品詳細ページを5項目フォーマットで書いてみることが、最初の突破口になります。
Q： デザインツールを複数使えないとポートフォリオは弱いですか？
A： ツールの種類より、1つのツールで何を作れるかの方が評価されます。Figma1本で作った完成度の高い作品の方が、複数ツールで作った低品質な作品群より印象に残ります。
公開ツールはWeb版を基本に選ぶ
ポートフォリオは、Web上に公開する形式を基本にします。URLを送るだけで共有できるため、営業時の利便性が高く、更新もすぐ反映されます。
STUDIOとWixは未経験者がゼロから作りやすいツール
STUDIOは日本語の情報が豊富で、コーディングなしでレスポンシブ対応のサイトを作れます。デザインの自由度が高く、ポートフォリオサイト向けのテンプレートも用意されています。Wixも同様にノーコードで作れ、無料プランから始められます。
実際に15日間で構成・デザイン・コーディング・レスポンシブ対応・フォーム実装まで進めた制作記録もあり、ツール習得と同時並行でポートフォリオを作ることは現実的な進め方です（独学でWEBデザイナーのポートフォリオを作成した記録）。
STUDIOで作るポートフォリオ自体を「Webデザインの実績」として提示できるのも利点です。ポートフォリオサイトのデザインが整っていれば、それ自体が作品の1つになります。
なお、ポートフォリオサイト作り方の全体像を理解しておくと、ツール選びの前に構成設計をスムーズに進められます。
WordPressは案件でよく使うが、最初の1本としては工数が多い
WordPressはフリーランス案件で使われる機会が多く、使えることをアピールしたい場面があります。ただし、環境構築や設定に時間がかかるため、ポートフォリオを最速で公開したい段階では優先度が下がります。
「WordPressで自分のポートフォリオを作った」という実績を作りたい場合は、STUDIOやWixで一度公開した後にWordPressへ移行する順序が現実的です。最初からWordPressに挑戦して行き詰まり、ポートフォリオ公開が長期間遅れる方が機会損失になります。
PDFは提出を求められたときのために別途用意する
一部の案件や求人では、ファイルとしてのポートフォリオ提出を求められます。Web版と同じ内容をPDFに書き出しておくと、こういう場面に対応できます。
PDFを作る場合は、FigmaまたはAdobe XDのデザインデータからPDF書き出しが最も手間が少なく、デザインの崩れも起きにくいです。更新のタイミングでWebとPDFを同時に書き出す習慣をつけると管理しやすくなります。
CHECK
▶ 今すぐやること: STUDIOの無料アカウントを作成し、用意されているポートフォリオ向けテンプレートを1つ開いて構成を確認する（15分）
Q: 無料ツールで作ったポートフォリオは低く見られますか？
A： 見られません。評価されるのはポートフォリオの内容とデザインの完成度であり、使用ツールの費用ではありません。有料ツールを使っても、中身が薄ければ評価は変わりません。
Q： ポートフォリオサイト自体をコーディングで作る必要がありますか？
A： コーディングができることをアピールしたい場合は、HTMLとCSSで作る意味があります。案件獲得が目的であれば、まずノーコードツールで公開を優先し、後からコーディング版に移行する方が現実的です。
独学ポートフォリオで差別化する5つのハック
【対象】: 作品を作り始める前の段階、または作品はあるが方向性が定まっていない人
【手順】: 自分が受けたい案件のジャンル（LP制作・バナー制作・コーポレートサイト等）を1つ選びます（15分）。そのジャンルの実際の案件をクラウドソーシングで3〜5件見て、要件・予算・クライアント層を把握します（30分）。その情報をもとに架空案件の設定を作り、作品制作を開始します（制作開始の初日）。
【コツと理由】: LP制作が得意なデザイナーとして記憶されるポートフォリオの方が受注につながりやすいです。ジャンルを1つに絞ると、閲覧者が「この人に頼める案件か」を瞬時に判断できるため、問い合わせの質も変わります。
【注意点】: 1ジャンルに絞ることと、他ジャンルの作品を一切載せないことは別の話です。メインをLP制作に設定しつつ、他の作品を「その他の制作物」としてまとめて掲載する構成で問題ありません。
ハック2: 作品詳細ページを5項目テンプレートで統一する
【対象】: 作品はあるが、何を書いたらいいか迷って詳細ページを作れていない人
【手順】: コンセプト・ターゲット・使用ツール・工夫した点・制作期間の5項目をFigmaまたはメモ帳に書き出します（1作品あたり20〜30分）。5項目をポートフォリオサイトの作品詳細ページに転記します（10分）。全作品に同じテンプレートを適用し、表記の統一（ツール名の書き方など）を整えます（30分）。
【コツと理由】: 選択の根拠まで書くと、閲覧者は「このデザイナーは論理的に判断できるか」を確認でき、単なるスキル評価から「思考力の評価」に変わります。「こだわって丁寧に作りました」で終わる作品説明との差がここで生まれます。
【注意点】: 5項目すべてを完璧に書こうとすると、1作品の詳細ページ作成に数時間かかることがあります。コンセプトと工夫した点の2項目だけ先に書き、残りは後から追記するという進め方で構いません。全作品の詳細ページを同時に完成させようとして手が止まる状態は、典型的な失敗パターンです。
ハック3: 掲載順は「自信作→新作→多様性」の順で固定する
【対象】: 作品は複数あるが、どの順番で並べるべきか迷っている人
【手順】: 手持ちの作品を「自信作・新しい作品・種類の異なる作品」の3カテゴリに分けます（10分）。自信作の中で最も制作意図を言語化できている1点を最初に配置します。以降、制作が新しい順に並べ、最後に種類の異なる作品でまとめます。
【コツと理由】: 閲覧者に響くのは「完成度が高い作品」です。制作に時間をかけたことと完成度は別物であり、閲覧者は最初の1〜2点で印象を決めます。自信作を最初に置くことで、残りを見てもらえる確率が上がります。
【注意点】: 自信作が架空案件である場合でも、架空であることを明記したうえで最初に置いてよいです。架空かどうかより、作品の完成度と言語化の質で判断されます。
ハック4: 差別化ポイントを「制作思想」として1行で書く
【対象】: 自己紹介ページに何を書けばいいかわからない、または書いたが印象が薄いと感じる人
【手順】: 自分が大切にしているデザインの考え方を1〜2文で書き出します（例:「機能とビジュアルの両立」「ターゲット行動を起点にしたデザイン」など）（20分）。その考え方が実際に作品に反映されているか作品詳細ページと照合します（10分）。自己紹介の冒頭または得意領域の直後に「制作思想」として1行掲載します。
【コツと理由】: 独学者の多くが同じツールを使っているため、スキル一覧だけでは差別化になりません。「なぜそのデザインを選ぶか」という制作思想は、ツールやスキルレベルに関係なく個人の視点であり、競合との差別化になります。制作思想が1行でも書いてあると、閲覧者が「この人に頼む理由」を言語化しやすくなります。
【注意点】: 「ユーザーに寄り添ったデザイン」のような抽象度の高い表現は印象に残りにくいです。「30代女性向けのECサイトで購買率を上げるための、情報密度と余白のバランスにこだわる」のように、具体的な対象と目標を含む形にします。
ハック5: 公開後は「問い合わせ数→閲覧数→滞在時間」の順で改善する
【対象】: ポートフォリオを公開したが、問い合わせや案件獲得につながっていない人
【手順】: 公開後2週間、営業先にURLを送り続け、問い合わせが来るか確認します（継続作業）。問い合わせが来ない場合、連絡先ページと自信作の詳細ページを優先して改善します（1〜2時間）。閲覧数が少ない場合は、クラウドソーシングのプロフィールにURLを掲載し、SNSで作品を発信します（30分）。
【コツと理由】: 不完全でも早期公開して反応を見ながら改善する方が、早く結果が出ます。閲覧者の行動は実際に公開してからでないとわからないため、公開前の完璧主義は結果を遅らせます。改善の優先順位は「問い合わせにつながる連絡先と自信作の詳細」から始め、デザインの細部は後回しにします。
【注意点】: 「公開したのに反応がない」という状態が2週間以上続いた場合、ポートフォリオの問題ではなく営業活動量の問題である場合があります。ポートフォリオを改修し続けることに時間を使いすぎず、まず営業先への送付数を増やすことを優先してください。ポートフォリオが完璧でなくても受注している人は多くいます。
CHECK
▶ 今すぐやること: ランサーズまたはクラウドワークスにアカウントを作り、プロフィール欄にポートフォリオのURLを掲載する（20分）
フリーランスWebデザイナーとしての最初の案件獲得につながる営業の考え方を理解しておくと、ポートフォリオ公開後の動き方がより具体的になります。
Q: ポートフォリオを公開後、どのくらいの期間で問い合わせが来ますか？
A： 問い合わせが来るタイミングは、ポートフォリオの完成度と営業活動の量によって変わります。公開して待つだけでは問い合わせは来にくく、クラウドソーシングへの提案やSNSでの発信など、能動的な営業活動との組み合わせが現実的です。
Q： 他のデザイナーとポートフォリオで差別化する方法はありますか？
A： 「誰向けに何を解決するか」を一言で説明できる状態にすることが、最も効果的な差別化です。得意ジャンルと制作思想を組み合わせて、閲覧者が「この人に頼む理由」を言語化できる状態を作ることが目標です。
Webデザイナー独学ポートフォリオは作品の質と言語化で決まる
独学でもフリーランス案件獲得に使えるポートフォリオは、架空案件・サイト模写を起点に作れます。作品数より「誰向けに何を解決したか」の言語化が評価の分かれ目であり、3点の厳選作品から始めて公開後に改善を続ける運用が現実的です。
フリーランスのWebデザイナーとして最初の受注をつかむためのポートフォリオは、完璧である必要はありません。「今の自分が見せられるベストの3点」を丁寧に言語化して公開し、営業活動と組み合わせながら改善していく姿勢が、長期的な案件獲得につながります。作品の完成を待つより、不完全でも公開して動き始めることを選んでください。
フリーランスWebデザイナーの仕事内容や独立に必要なステップについては、別記事でより詳しく解説しています。ポートフォリオ完成後の営業や単価アップの方法も合わせて確認しておくと、独立に向けた全体像が見えてきます。
| 状況 | 次の一歩 | 所要時間 |
| 作品が0点 | 架空案件の設定（想定クライアント・ターゲット・課題）をメモする | 10分 |
| 作品はあるが言語化できていない | 自信作1点の5項目（コンセプト・ターゲット・ツール・工夫・制作期間）を書く | 30分 |
| 言語化はできているがサイトにできていない | STUDIOの無料アカウントを作りテンプレートを選ぶ | 15分 |
| 公開済みだが問い合わせが来ない | クラウドソーシングのプロフィールにURLを掲載し、3件提案する | 30分 |
Webデザイナー独学ポートフォリオに関するよくある質問
Q: 独学のWebデザイナーがポートフォリオに載せる作品は何点必要ですか？
A： 最初は3〜5点から始めます。作品数より「誰向けに何を解決したか」が明確な作品であることの方が評価につながります。案件経験が増えてきたら10点前後を目標に増やしていきます。
Q： 架空案件はポートフォリオに掲載してよいですか？
A： 掲載してよいです。ただし、「架空案件」と明記することが必要です。制作意図（想定クライアント・ターゲット・解決したい課題）を丁寧に説明すれば、実際の案件経験がなくても評価の対象になります。
Q： ポートフォリオはどのツールで作れば早く公開できますか？
A： STUDIOまたはWixが最も早く公開できます。どちらも無料プランがあり、コーディングなしでポートフォリオサイトを作れます。WordPressは案件でよく使われますが、環境構築に時間がかかるため、最初の公開には向きません。
Q： Web版とPDF版はどちらを作るべきですか？
A： Web版を基本にして、PDF版は提出を求められたときのために別途用意します。Web版はURLで共有できるため営業時の利便性が高く、更新もすぐ反映されます。
Q： ポートフォリオのデザイン自体が未熟だと逆効果になりますか？
A： 掲載作品の完成度と言語化の質が伝わる範囲であれば問題になりません。シンプルで読みやすいデザインで十分です。ポートフォリオのデザインに時間をかけすぎて作品の言語化が後回しになる方が本末転倒です。