作品ゼロでもポートフォリオは作れます。架空案件・自主制作・模写の3種で補えば、未経験からフリーランス案件を取れる水準に達した事例が多くあります。この記事では構成・作品の集め方・作品説明の書き方を5ステップで解説します。
▶ 3日で初案件PR
この記事でわかること
最初から完璧な作品を目指さなくても、架空案件と模写で3〜5件そろえればフリーランス向けポートフォリオとして成立します。掲載すべき必須7項目と、クライアントに読まれる作品説明の書き方を習得できます。担当範囲・参考単価の明示など、問い合わせを受注につなげるフリーランス向け追加情報5つも網羅します。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
未経験Webデザイナーのポートフォリオは、架空案件や模写でも作品として成立します。70点の作品を複数そろえることが、フリーランスとして仕事を取る最初の一歩です。掲載すべき必須7項目と作品説明の書き方を押さえれば、未経験でもクライアントに読まれるポートフォリオを公開できます。
最初に確認すること
架空案件で架空クライアント向けのサイトを1つ制作することを先に決めてください。フリーランス向けポートフォリオでは実案件か架空かよりも、課題・施策・結果の説明ができるかどうかが見られます（構成の設計：所要時間の目安30分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| まず何を決めればよいか迷っている | ターゲット設定と得意分野の軸を先に決める | 5分 |
| 載せる作品がゼロで困っている | 未経験でも作品を作る3つの方法 | 7分 |
| 何をどの順番で載せるかわからない | 必須7項目で構成する基本フレーム | 6分 |
| 作品説明の書き方がわからない | 課題・施策・結果で作品を説明する | 5分 |
| フリーランス案件受注に使いたい | フリーランス向けに追加する5つの情報 | 5分 |
| 公開後にどう改善するか知りたい | 公開後の改善サイクル：3ステップ | 4分 |
ターゲット設定と得意分野の軸を先に決める
ポートフォリオを作る前に「誰に見せるか」を決めると、掲載作品の選び方から作品説明の書き方まで、すべての方向性が揃います。ターゲットが曖昧なまま作品を並べると、担当範囲もスキルも伝わらない資料になります。
受けたい案件の種類を先に決める
転職活動向けか、フリーランスとして直接受注したいかで、ポートフォリオの重点が変わります。フリーランス志向なら「LP制作専門」「コーポレートサイト」「EC向けバナー」のように、受けたい案件の種類を1〜2つに絞ることが先決です。
案件の種類が決まると、架空案件を作るときにも「どの業種のサイトを作るか」が決まりやすくなります。飲食店向けのLPと不動産業者向けのコーポレートサイトとでは、掲載する工夫点も使用ツールも変わるため、先に軸を決めると作品の説明文に一貫性が出ます。
「誰に」「何を」「どんな成果で」を決める
ターゲットが決まったら、そのクライアントが何を求めているかを具体化します。「飲食店オーナーが予約件数を増やしたい」なら、LPのCTAデザインや視線誘導を工夫点として説明できます。「個人事業主が信頼感を伝えたい」なら、余白の使い方やフォント選定の根拠を言語化できます。
この作業は作品を作る前に紙1枚でまとめておくだけで十分です。後で作品説明を書くときに「なぜこのデザインにしたか」が言語化しやすくなり、制作意図を問われたときの答えに迷わなくなります。
得意分野と苦手分野を分けて整理する
「デザインは得意だがコーディングは現状限定的」なのか、「コーディングは問題ないがデザインの引き出しが少ない」のかを整理します。どちらかに強みがある場合は、強みが伝わる作品を中心に配置します。両方が得意であれば、デザインからコーディング・公開まで一貫対応できることを連絡先の近くに一文で明記するだけで差別化になります。
苦手分野を隠す必要はなく、「現在習得中」と書くほうが誠実に映ります。架空案件を使って習得中の分野を練習作品にする方法は、次のセクションで解説します。
CHECK
▶ 今すぐやること: 受けたい案件の種類を1〜2つ、紙またはメモアプリに書き出す（5分）
Q: ターゲットを絞ると受注の幅が狭まりますか？
A： 最初は絞った方が問い合わせが来やすい傾向があります。「LP専門」と明示しているポートフォリオは、LP制作を探しているクライアントが問い合わせやすく、営業効率が上がります。受注の種類が増えてからポートフォリオを拡張する順番が現実的です。
Q： 得意分野が決まっていない場合はどうすればよいですか？
A： まず模写を3〜5点試してください。作りやすかった種類（LP、コーポレート、バナーなど）が得意分野の候補になります。模写の過程で「なぜ元のデザインがこうなっているか」を言語化できた案件が、架空案件のテーマになります。
未経験でも作品を作る3つの方法
架空案件や模写でも、制作意図と工夫点を説明できれば、クライアントからの問い合わせにつながった事例は多くあります。
方法1：架空案件でゼロから設計する
架空のクライアント・架空の課題を設定し、実際にサイトを制作する方法です。「地元の書店が来店数を増やしたい」「個人カウンセラーが初回相談の申込を増やしたい」のような具体的な課題を自分で決めると、後の説明文が書きやすくなります。
設定が雑すぎると説明文が薄くなります。業種・ターゲット年齢・解決したい課題・希望のトーンを事前にメモしておくと、制作時の判断に迷いにくくなります。「なんとなく飲食店のサイトを作った」では説明できませんが、「30代女性向けの小規模カフェが予約数を増やすためのLPを設計した」なら課題と施策の説明が成立します。
「最初は架空案件でOK」「クオリティ100点を1個より70点を5個がよい」
という考え方が示されています（未経験Webデザイナーのためのポートフォリオの作り方【初心者】）。
方法2：実在サイトを模写して解説を付ける
気に入った既存サイトをそのまま再現する模写は、デザインの基礎力を伝える手段として有効です。模写をポートフォリオに載せるときは「模写である旨」を明記し、「なぜこのサイトを選んだか」「再現する上でどこが難しかったか」「元のデザインの意図をどう解釈したか」を説明文に加えます。
模写を黙って実案件のように見せると、問い合わせが来たときに説明できず信頼を損なう原因になります。模写と明記した上で解説を丁寧に書いた方が、デザインの観察眼と言語化能力が伝わります。
方法3：自主制作で既存サイトをリデザインする
実在する企業や店舗のサイトを「より改善するとしたらどうするか」という視点でリデザインする方法です。「元のデザインの課題」「改善の方針」「変更した箇所と理由」を並べると、デザインの判断力を説明しやすくなります。
リデザインの場合も、元サイトのURLと「自主制作によるリデザイン案」である旨を明記します。商用利用の意図がないことが伝われば、クライアントの信頼を損なう可能性は低くなります。また、実在サイトをテーマにするため「架空の設定を作る手間」が省ける利点もあります。
ポートフォリオが完成したら、フリーランスの仕事につながるポートフォリオの作り方も参考にして、案件獲得に向けた掲載内容を整えてみてください。
Q: 架空案件は何件くらい作ればよいですか？
A： 掲載する種類が異なる3〜5件を目安にしてください。同じ種類（LPのみ5件など）を大量に並べるより、LP・コーポレートサイト・バナーなど種類が違う3件の方が対応範囲の広さが伝わります。説明文を丁寧に書けない作品は外した方が評価は上がります。
Q： 模写と架空案件、どちらを先に作るべきですか？
A： デザインの基礎に不安があるなら模写を先に行い、基礎が固まってきたら架空案件に移る順番が定着しやすいです。模写で「この配置がなぜ見やすいか」を言語化できるようになると、架空案件の設計判断もぶれにくくなります。
必須7項目で構成する基本フレーム
掲載すべき項目は業界内でほぼ共通しており、この7項目が揃っていればクライアントが受注判断に必要な情報を得られます。1項目でも欠けると問い合わせの確率が下がります。
項目1：トップページ（第一印象のデザイン）
最初の画面でポートフォリオ自体のデザイン品質が判断されます。氏名か屋号、キャッチコピー（「LP制作専門のフリーランスWebデザイナー」など）、代表作1点のビジュアルをファーストビューに配置するのが一般的です。
装飾を増やすより、読み込み速度と視線の流れを優先した方が、デザイン判断力の高さを示せます。ファーストビューで「誰向けに何ができるか」が3秒以内に伝わることを基準にします。
項目2：自己紹介（経歴と強みの言語化）
名前・職歴の概要・習得スキル・デザインを始めた経緯を100〜200字程度でまとめます。前職の経験がデザインと関係ない場合でも、前職で培ったビジネス視点（接客経験によるUX感覚など）を書くと差別化になります。
写真を入れると信頼感が上がりますが、必須ではありません。SNSやXアカウントがある場合はリンクを貼ると、活動の継続性が伝わります。
項目3：制作実績（作品一覧）
作品のサムネイルを並べるページです。各作品にタイトル・種類（LP／バナー／コーポレート）・使用ツール・制作期間を最低限記載します。実案件と架空案件が混在する場合は、それぞれ区別して表示します。
作品は多すぎると読まれなくなります。説明文を丁寧に書けるものだけを選び、3〜5件から始めるのが現実的です。
項目4：作品ごとの詳細ページ（課題・施策・結果）
制作実績から各作品をクリックしたときに表示される詳細ページです。「課題→施策→結果」の3段構成で説明します。架空案件なら「想定した課題→行ったデザイン施策→期待できる効果」の形式で書けます。
この詳細ページの質がポートフォリオ全体の評価に直結します。画像だけを並べて終わりにすると、デザインの判断プロセスが伝わりません。
「書類に記載されていることと同じことは多く入れないこと」
とあり、自己紹介ページとの重複を避けて、作品説明では制作プロセスに集中する工夫が示されています（未経験からWebデザイナーを目指す私のポートフォリオができるまで）。
項目5：スキル・ツール一覧
使用できるツールと習熟度の目安を一覧で示します。Figma・Adobe XD・Photoshop・Illustrator・HTML/CSSなどを用途別に整理します。「使ったことがある」と「実務で使える」の区別を正直に書くことで、問い合わせ後のミスマッチが減ります。習得中のスキルには「現在習得中」と付記します。
項目6：担当範囲の明示
フリーランスに問い合わせるクライアントは「デザインのみ」なのか「コーディングまで」なのか「公開作業まで含むか」を確認します。「デザイン（Figmaで納品）」「デザイン＋HTML/CSSコーディング」「公開・更新作業まで対応可」のように段階別に書いておくと、問い合わせの質が上がります。
項目7：連絡先・問い合わせフォーム
メールアドレスの掲載またはGoogleフォームへのリンクが最低限必要です。フォームの方が問い合わせのハードルが下がるため、簡易なフォームでも設置することを優先します。SNSへのリンクを並べる場合は、業務用として運用しているアカウントに限定します。
ポートフォリオサイトの作り方については、ポートフォリオサイト作り方｜未経験でも今日から始められるも参考になります。
Q: ポートフォリオはWebサイト型とPDF型、どちらが有利ですか？
A： Webデザイナー志望であれば、Webサイト型の方が「実際にサイトを作れること」を証明できるため有利です。ただし、PDF型は印刷や書類選考への添付がしやすい利点があります。Webサイト型を本体にしつつ、PDFをダウンロードできるリンクを設置する構成にすると、両方の用途に対応できます。
Q： NotionやnoteでもWebデザイナーのポートフォリオとして代替になりますか？
A： 制作物の一時的な掲示場所として使うことはできますが、デザインの自由度と表示速度の点でWebサイト型に劣ります。Notionのポートフォリオは「デザインを自分で作れない人向け」と判断されることがあるため、Webデザイナー志望では自作のWebサイトを最初の目標にする方が評価されやすいです。
自分のポートフォリオを5問で診断する
ポートフォリオが完成したら、以下の5問で不足している要素を確認します。このチェックを飛ばして営業を始めると、問い合わせが来ても受注に至らないケースが増えます。
Q1：ファーストビューで「誰向けに何ができるか」が3秒以内に伝わりますか？
Yesの場合はQ2へ進んでください。Noの場合はトップページのキャッチコピーと代表作の配置を見直してください。
Q2：全作品に「課題→施策→結果」（または「想定課題→施策→期待効果」）の説明が付いていますか？
Yesの場合はQ3へ進んでください。Noの場合は詳細ページの説明文を追加してください。画像だけの作品は一旦非公開にする方が評価が安定します。
Q3：担当範囲（デザインのみ／コーディングまで／公開まで）が明記されていますか？
Yesの場合はQ4へ進んでください。Noの場合はスキル一覧またはトップページに担当範囲の記載を追加してください。
Q4：連絡先またはお問い合わせフォームが1クリックで見つかりますか？
Yesの場合はQ5へ進んでください。Noの場合はナビゲーションに「お問い合わせ」リンクを追加してください。
Q5：架空案件は「架空クライアントの想定案件」または「自主制作」であることが明記されていますか？
Yesの場合は公開準備完了です。Noの場合は各作品の詳細ページに「架空案件（自主制作）」の旨を一文追加してください。
Q： 診断で問題なくても問い合わせが来ない場合はどうすればよいですか？
A： ポートフォリオ単独での集客には時間がかかります。クラウドソーシング（ランサーズ・クラウドワークス）への登録と並行して、SNSでの発信（制作過程の投稿・解説記事）を組み合わせると、ポートフォリオへの流入が増える傾向があります。
Q： スマートフォンでの見え方も確認すべきですか？
A： 必須です。クライアントがスマートフォンでポートフォリオを開く機会は多く、モバイル表示が崩れているとそこで離脱します。公開前に実機で全ページを確認し、テキストが読めるか・ボタンが押せるか・画像が縦に長すぎないかを確認してください。
PR提供: 日本デザインスクール（デザスク）
課題・施策・結果で作品を説明する
作品の画像だけを並べたポートフォリオは、デザインへの理解の浅さを示します。作品説明の質がポートフォリオ全体の印象を決めるため、デザイン本体と同じ丁寧さで書いてください。
「課題」はクライアントの言葉で書く
「デザインが古かった」という書き方より「来店数が伸び悩んでいる飲食店が、視覚的な印象を改善して予約率を上げることを目指した」のように、クライアント（架空でも）の課題を言葉にします。これにより、「デザインを作った人」ではなく「課題を解決しようとした人」という印象を与えられます。
架空案件の場合は「想定クライアント：地元カフェ／課題：初回来店のハードルを下げたい」のように、設定を先に示す方が読みやすくなります。
「施策」はデザインの選択理由を書く
「青色を使った」ではなく「信頼感と清潔感を伝えるため、彩度を抑えた青をメインカラーに選んだ」のように、選択の根拠を書きます。フォント選定・余白の設計・CTA配置・情報の優先順位なども、「なぜそうしたか」を一文加えるだけで、デザインの判断力が伝わります。
フリーランス案件では「使用ツール：Figma（デザイン）・VS Code（コーディング）・制作期間：7日間」のような制作メタ情報も施策の欄に添えます。
「結果」は数値か定性的な変化で書く
実案件であれば「公開後2週間でフォームの送信数が月平均3件から8件に増えた」のような数値が書ければ理想です。架空案件では数値は出せないため、「視線の流れを改善し、CTAが一目で見つかる構成にした」のように、達成したデザイン上の改善を明記します。
「成果がわかりません」で終わるより、「公開後にXXXを達成することを目標とした設計」と書くほうが、意図を持って設計していることが伝わります。
CHECK
▶ 今すぐやること: 手元の1作品について「課題・施策・結果」の3段落を各3文で書き出す（15分）
Q: 制作意図を言語化するのが苦手な場合はどうすればよいですか？
A： 作品を見ながら「なぜこの色を選んだか」「なぜこのレイアウトにしたか」を口頭で説明してみると言葉が出やすくなります。友人や家族に説明したときの言葉をそのまま文章にする方法が現実的です。選択の理由が読み手に伝わることが目的なので、難しい言葉は不要です。
Q： 制作期間が短い（1〜2日）場合は正直に書くべきですか？
A： 正直に書いてください。短期間でも完成度が高ければ「作業が速い」というプラス評価になります。実際より長く見せると、受注後の制作期間の見積もりに矛盾が出る原因になります。
フリーランス向けに追加する5つの情報
就職活動向けポートフォリオとフリーランス向けポートフォリオの最大の違いは、クライアントが「発注可能かどうかを判断するための情報」を求めている点です。以下の5つを追加することで、問い合わせが受注につながりやすくなります。
追加情報1：担当範囲の詳細
「デザインのみ（Figmaで納品）」「デザイン＋HTML/CSSコーディング」「WordPress実装まで対応」「公開・ドメイン設定まで含む」のように段階別に書きます。できないことを隠して受注してから断るより、最初に範囲を明示して適切な問い合わせを増やす方が両者にとってストレスが減ります。
追加情報2：参考単価（または価格帯）
「LP制作：5万円〜」「コーポレートサイト（5ページ）：10万円〜」のような参考単価を掲載します。価格帯がわからないと問い合わせのハードルが上がります。「まずは相談」だけより「参考価格あり」の方が、予算感の合うクライアントからの問い合わせが増えます。
単価は案件内容によって変わることを「案件内容により変動します」と一文添えれば、値引き交渉が来やすくなるリスクも和らぎます。参考単価の相場感については、フリーランスWebデザイナーの仕事内容や独立に必要なステップも参考になります。
追加情報3：制作日数の目安
「LP制作：5〜10日」「コーポレートサイト：15〜20日」のような目安を書きます。制作日数がわからないと、タイトなスケジュールのクライアントが問い合わせをためらう原因になります。目安より大幅に短い納期を求められた場合の対応（追加費用・相談）も一言添えておくと、後のトラブルが減ります。
追加情報4：成果指標（実案件がある場合）
実案件であれば、クライアントに許可を得た上でCVR・来店数・問い合わせ数などの成果数値を掲載します。架空案件では数値は掲載できませんが、実案件が1件でも取れたら積極的に追加します。「成果を示す数字」があるかどうかで、ポートフォリオの信頼度が大きく変わります。
追加情報5：稼働状況と対応可能な連絡方法
「現在受注可能」「2週間後から対応可能」のような稼働状況と、「メール対応」「Chatwork・Slack使用可」のような連絡方法を記載します。フリーランスに問い合わせをするクライアントは、すぐに動けるかどうかを気にします。稼働状況を更新し忘れると、受注できない時期に問い合わせが来てミスマッチになるため、月1回の更新を習慣にします。
フリーランスとして案件を獲得し続けるための全体像は、フリーランスの仕事につながるポートフォリオの作り方で詳しく解説されています。
Q: 実案件がゼロの段階でも参考単価を書いた方がよいですか？
A： 書いた方が問い合わせの質は上がります。相場を調べ、クラウドソーシングの類似案件の単価を参考にして「5万円〜（案件内容により変動）」のように設定します。相場より大幅に低い単価は「品質が低い」と判断されるリスクがあります。
Q： 稼働状況はどこに掲載するのが見つけやすいですか？
A： トップページのファーストビュー近く、または連絡先ページの冒頭に置くと見逃されにくいです。「2026年9月時点：受注可能」のように時点を入れると、ページが更新されていることも伝わります。
公開後の改善サイクル：3ステップ
ポートフォリオは公開して終わりではなく、問い合わせ状況や第三者フィードバックをもとに定期的に改善することで受注率が上がります。完成度を高め続ける姿勢自体も、クライアントへの安心材料になります。
ステップ1：第三者フィードバックを受ける
公開直後に、同じくデザインを学んでいる人や、フリーランスで活動している先輩に見てもらいます。「3秒で何を伝えたいか伝わるか」「問い合わせしやすいか」「作品説明が理解できるか」の3点を聞くだけで、自分では気づかない改善点が出ます。
デザイン系DiscordやオンラインコミュニティをF活用すると、同程度の経験者から率直な意見をもらいやすいです。フィードバックをもらった後、どこを直したかを記録しておくと、次の改善時に参考になります。
ステップ2：問い合わせが来た作品とそうでない作品を分ける
問い合わせが来たクライアントが「どの作品を見て連絡したか」を確認する習慣をつけます。直接聞けるなら聞いてください。傾向が見えてきたら、問い合わせが来た種類の作品を増やし、そうでない作品は詳細ページの説明を改善するか入れ替えを検討します。
問い合わせが0件の期間が2〜3週間続いた場合は、SNSで「制作した架空案件を解説する投稿」を試してみると、ポートフォリオ以外からの流入が増える場合があります。
ステップ3：実案件が取れたら即追加する
実案件が1件取れた時点で、架空案件と並列で掲載します。実案件には「実際にご依頼いただいた案件（クライアントの許可あり）」の旨を記載します。実案件が増えるたびにポートフォリオの説得力が上がるため、取れた実案件はなるべく早く追加する習慣が受注の好循環につながります。
CHECK
▶ 今すぐやること: 公開したポートフォリオのURLを、デザインを学んでいる知人1人に共有して「3秒で何が伝わったか」を聞く（5分）
Q: Xやnoteで発信するとポートフォリオへのアクセスは増えますか？
A： 発信の内容によります。「制作した作品の解説」「デザインの判断プロセスの説明」のように、見た人が参考になる内容を投稿すると、ポートフォリオへの流入が増える傾向があります。「ポートフォリオを公開しました」の告知だけでは流入にはつながりにくいです。
Q： ポートフォリオの更新頻度はどのくらいが適切ですか？
A： 作品が増えたとき・稼働状況が変わったとき・スキルが増えたときに都度更新するのが基本です。何も変化がなくても月1回は確認し、稼働状況と時点表記を更新する習慣をつけると、古いページになることを防げます。
未経験Webデザイナーは今日から作り始める：5ステップのまとめ
未経験Webデザイナーのポートフォリオは、架空案件や模写でも作品として成立します。最初に受けたい案件の種類を決め、その軸に合う作品を3〜5件そろえ、各作品に「課題・施策・結果」の説明を付けることが基本の流れです。フリーランスとして受注したい場合は、担当範囲と参考単価を追加することで問い合わせの質が上がります。
どのポートフォリオも最初の1件からスタートしています。架空案件の設定を決めるだけなら今日中に終わります。
| 状況 | 次の一歩 | 所要時間 |
| まだ何も作っていない | 架空案件の設定（業種・課題・ターゲット）を紙に書く | 10分 |
| 作品は1〜2件ある | 各作品に「課題・施策・結果」の説明を追加する | 30分 |
| 作品が3件以上ある | フリーランス向けの5項目（担当範囲・単価等）を追加する | 20分 |
| ポートフォリオが公開済み | 知人1人に見せてフィードバックをもらう | 5分 |
| 改善点がわかっている | 最も見やすくなる変更を1箇所だけ先に直す | 15分 |
Webデザイナー 未経験 ポートフォリオ 作り方に関するよくある質問
Q: スクールに通わないと未経験でポートフォリオは作れませんか？
A： スクールなしでも作れます。無料のデザインツール（Figmaの無料プランなど）と、本・YouTube・実在サイトの模写で基礎を固めてから架空案件に進む方法が、費用をかけずに進めやすいルートです。フィードバックをもらえる環境はSNSやコミュニティを活用して作ると代替できます。
Q： ポートフォリオを公開するのに適したサービスはありますか？
A： 自作Webサイトを本体にし、ドメインとサーバーを用意する方法が最もデザイン自由度が高いです。初期費用を抑えたい場合は、GitHub PagesやNetlifyを使った無料公開も選択肢に入ります。いずれの場合も、独自ドメインを取得しておくと連絡先として伝えやすくなります。
Q： 作品の画像サイズや解像度に決まりはありますか？
A： 決まりはありませんが、画像が重すぎると読み込みが遅くなるため、1枚あたり200KB〜500KB程度を目安に圧縮します。モックアップ画像（PCやスマートフォンの画面に作品を当てはめた画像）を使うと、作品の完成イメージが伝わりやすくなります。
ポートフォリオ公開後の営業活動については、フリーランスが初営業で挫折しないためにが参考になります。