未経験からWebデザイナーを目指す場合、デザイン基礎・Figma・HTML/CSSの3領域を順番に積み上げ、模写と制作練習を通じて実力をつけるのが実態に近い道筋です。この記事では、学習の優先順位から模写の進め方、ポートフォリオ構成、初案件の取り方まで5ステップで解説します。
▶ 3日で初案件PR
この記事でわかること
デザイン基礎・Figma・HTML/CSSの3領域を正しい順番で習得する方法、模写を「意図の言語化」に変える3段階の進め方、ポートフォリオに「課題→意図→工夫点」の説明を添えて案件獲得につなげる手順。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
未経験からWebデザイナーへ転換するには、デザイン基礎を学んでからFigmaで手を動かし、HTML/CSSで実装との接続を理解する順番が実務に近い道筋です。模写は「なぜそのレイアウトか」を言語化しながら行い、ポートフォリオは作品集ではなく「課題→意図→工夫→成果物」の説明セットとして整理します。独学とスクールの使い分けは、「詰まる前提でスクールを補助線にする」か「完全独学で期間を決めて動く」かで判断が分かれます。
最初に確認すること
今この瞬間から始めるなら、Figmaの無料アカウントを作成し、Webサイトを1件開いて「余白・整列・色数」を書き出す観察練習から入ってください。環境構築の複雑さがなく、デザイン感覚と道具の両方に触れられるため、最初の一歩として動きやすい方法です（10〜15分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 何から始めるかまだ決まっていない | Webデザイナー未経験が最初に学ぶ3領域 | 5分 |
| 模写をやっているが合っているか不安 | 模写・トレースは意図の言語化が7割 | 5分 |
| ポートフォリオに何を載せるか迷っている | ポートフォリオは作品集ではなく説明書 | 5分 |
| 初案件をどう取ればよいか分からない | 未経験から初案件を取る現実的な方法 | 5分 |
| 独学かスクールか迷っている | 独学とスクールどちらを選ぶか5項目で判定 | 4分 |
Webデザイナー未経験が最初に学ぶ3領域
「デザインだけ学べばよいのか、コーディングまで必要なのか」という疑問は、多くの未経験者が最初に抱えるものです。デザイン基礎・Figma・HTML/CSSの3領域を並行して進めながら、実際の制作練習に早めに入ることが実務寄りの道筋です。
デザイン基礎は余白・整列・近接・コントラストの4概念
デザイン基礎の習得は、Figmaを開く前に行うと後の制作速度が変わります。余白・整列・近接・コントラストの4概念は、ほぼすべてのWebデザインに共通する判断軸です。学習方法としては、好きなWebサイトを5件開き、「余白の広さ」「テキストの揃え方」「色数」を手書きでメモする観察ノートから始めるのが実態に近い入り口です（Webデザイン独学のロードマップを解説！おすすめの勉強方法）。
書籍1冊で概念を整理してから観察に移ると、何を見るべきかが絞られて効率が上がります。書籍は「ノンデザイナーズ・デザインブック」が初学者に広く使われており、4原則が具体例付きで解説されています。
特に見落としがちな点として「フォントの選択」があります。余白や配色に意識が向きやすい反面、見出しと本文のフォントウェイトの差がデザインの完成度に直結することは学習初期に気づきにくい箇所です。
FigmaはWebデザインの実作業に最も近いツール
Figmaは、Webデザインの現場で広く使われているデザインツールです（Webデザイン初心者向け勉強方法を徹底解説【完全版】）。無料プランで主要機能を使えるため、学習コストが低く、チーム共有やフィードバック受け取りも同一画面で行えます。PhotoshopやIllustratorは印刷物や画像加工に強い一方、画面設計の流れを練習するにはFigmaの方が操作と目的がつながりやすい構造です。
Figmaを最初のツールとして選ぶ根拠は、コンポーネントやオートレイアウトといった概念が、実際の制作現場での設計思想と直結しているためです。最初から「現場の作法」で手を動かす経験は、後でスムーズに案件対応できる土台になります。なお、Webデザイナーとしての独立を目指すなら、フリーランスWebデザイナーの仕事内容や独立に必要なステップも参考になります。
ただし、最初からすべての機能を使おうとすると詰まります。まずはフレーム作成・テキスト配置・色の設定の3操作だけで、1枚のバナーを完成させる練習から入るのが現実的な出発点です。
HTML/CSSはデザインと実装をつなぐ共通言語
HTML/CSSの基礎は、デザイナー専業を想定していても学んでおく価値があります。コーディングまで担当しない場合でも、エンジニアとのやり取りで「このデザインは実装コストが高い」「ここはCSSで表現しにくい」という判断ができるかどうかが、実務での信頼に影響します（Webデザイナーになるには？必要スキルと学習方法）。
学習リソースとしては、「Progate」や「ドットインストール」で基礎を動かしてみてから書籍で体系を補う組み合わせが、学習効率を保ちやすい順番です。完全に習得してから制作に入る必要はなく、「Figmaでデザインを作り、それをHTMLで再現しようとする」反復が、両方の理解を同時に深めます。
HTML/CSSをまったく知らない状態でデザインだけを続けると、「実装では横幅がここまでしか広げられない」「フォントはシステムフォントの制約がある」という前提を知らずに、実案件では成立しないデザインを提出してしまうケースが起こりやすくなります。
CHECK
▶ 今すぐやること: Figmaのアカウントを作成し、好きなWebサイトを1件開いて「余白・色数・フォントの種類」を書き出す（15分）
Q: PhotoshopとFigmaはどちらを先に学ぶべきですか？
A： Webデザインの制作練習を目的とするなら、Figmaを先に学ぶ方が実務と学習がつながりやすいです。Photoshopは画像合成・レタッチが強みであり、バナーや広告素材を扱う業務が明確に見えている段階で学び始めると学習目的が絞られます。
Q： HTML/CSSはどこまで習得すれば足りますか？
A： 「要素を配置できる」「ボックスモデルを理解している」「クラス名で装飾を変えられる」の3点が使えれば、Webデザイナーとしての最低限の理解として成立します。JavaScriptはデザイン業務では必須ではなく、後から必要に応じて学ぶ領域です。
Q： Illustratorは必要ですか？
A： バナーやチラシ・ロゴ制作が業務に含まれる場合は学ぶ価値があります。Webサイトのデザインに特化するならFigmaで大半の業務は対応できます。使用するかどうかは案件の種類によって変わるため、最初から全部揃えようとしなくて問題ありません。
模写・トレースは意図の言語化が7割
模写を続けていても力がついているか分からない、という感覚が生じる原因の多くは、見た目を再現することに集中して「なぜそのレイアウトなのか」を考える工程が抜けているためです。
模写は完成形の再現よりも設計意図の解読
模写は、「見た目を正確に写す」作業ではなく「この配置・余白・色はどういう意図で選ばれたのか」を解読する訓練として使うと、1件の模写から得られる学習量が変わります（Webデザインを独学で学ぶ方法｜未経験向け学習ステップ）。具体的には、模写中にメモ欄を設けて「ここの余白はスクロールを止めるためではないか」「このフォントの太さは見出し階層を示している」といった仮説を書き出す練習を並走させます。
この仮説を書くことで、「見て写す作業」が「意図を読んで再現する作業」に変わります。後でポートフォリオに制作意図を添える工程でも、この習慣が直接役に立ちます。
バナーやLPのトレース、クラウドソーシングのコンペ参加など実践中心の学習が有効とされており、「ただ再現する」段階を早めに卒業するほど制作力の成長が加速します（未経験からWebデザイナーになるための実践寄りロードマップ）。
模写の進め方は3段階で構成する
参考サイトを見ながら「どこまで正確に再現すべきか」「時間をかけすぎるのは悪いのか」という判断が難しく、手が止まりやすい作業です。3段階で進めると手が止まりにくくなります。
第1段階は「ブロック分解」で、参考サイトをエリア単位（ヘッダー・メインビジュアル・コンテンツ・フッター）に分けてFigmaのフレームで囲むだけです。第2段階は「要素の書き出し」で、各エリアに何の要素があるかを書き出します。第3段階で初めて実際に配置・装飾を行います。
この3段階を踏まないと全体を一度に作ろうとして途中で詰まり、手順の問題を「センスの問題」と誤解しやすくなります。段取りを分解すれば詰まる箇所を特定できます。
模写1件を終えたら別テーマでオリジナル制作へ移る
模写を終えた直後に、別テーマでオリジナル制作を行う流れが実践力を高めます（フリーランスWebデザイナーになるには？必要スキルと学習法）。「美容サロンのLPを模写した後、架空のコーヒーショップのバナーを作る」のように、業種や目的を変えることで「参考サイトの設計をそのまま使う」のではなく「自分で要素を選ぶ」判断が生まれます。この判断の経験がポートフォリオの制作意図の説明に使えます。
「模写1件→オリジナル1件」のセットを1サイクルとして5サイクル回すことを目安にするのが現実的な区切りです。完璧に再現してからオリジナルに移ろうとする必要はなく、再現精度より早くサイクルを回す方が制作の判断力は上がります。
CHECK
▶ 今すぐやること: 今日模写している（または模写候補の）サイトを1件開き、「ヘッダー・メインビジュアル・コンテンツ・フッター」のブロック分解をFigmaで行う（20分）
Q: 模写するサイトはどう選べばよいですか？
A： 学習初期は「シンプルな構成・テキスト中心・色数が少ない」サイトを選ぶと詰まりにくいです。装飾が多いサイトは再現コストが高く、意図の読み取りが難しくなります。参考サイト収集サービス（Awwwards、Pinterest、Webクリエイターボックス等）でシンプルと評価されているサイトを探す方法が実態として使いやすいです。
Q： 模写にどのくらいの時間をかけるべきですか？
A： 1件のバナーなら1〜2時間、1枚のLPなら3〜5時間が実態として多い目安です。それ以上かかる場合は、詰まっている箇所を特定して次に進む判断をした方が学習のサイクルが止まりません。
Q： トレースと模写の違いは何ですか？
A： 実務文脈では同義として使われることが多く、「Figmaや制作ツール上でサイトの構成を再現する行為」をどちらで呼んでも意味は通じます。どちらの言葉で検索しても参考サイトは見つかります。
未経験Webデザイナーの学習進捗を5問で診断
自分が今どの段階にいるかが分かると、次の行動が絞られます。5問に答えることで、現在地と優先すべきことを確認できます。
Q1: Figmaで1枚のバナーを完成させたことがありますか？
Yesの場合はQ2へ進みます。Noの場合は、まずFigmaでバナーを1枚完成させることが直近の目標です。サイズ設定・テキスト配置・色設定の3操作で完成させられます。
Q2: 模写を3件以上完了していますか？
Yesの場合はQ3へ進みます。Noの場合は、「ブロック分解→要素書き出し→配置・装飾」の3段階サイクルを3件行うことが次の行動です。
Q3: ポートフォリオ用の作品が1件以上あり、制作意図を言葉で説明できますか？
Yesの場合はQ4へ進みます。Noの場合は、作品に「課題→制作意図→工夫点」を添えてポートフォリオの1ページを作ることが優先です。
Q4: HTML/CSSで自分のデザインを部分的に再現しようとしたことがありますか？
Yesの場合はQ5へ進みます。Noの場合は、FigmaとHTMLを並走させる練習として、自分が作ったバナーをHTMLで再現してみることが次のステップです。
Q5: クラウドソーシングや知人経由で案件経験（コンペ含む）がありますか？
Yesの場合は、ポートフォリオを整理して継続的な案件獲得に移行する段階です。Noの場合は、クラウドソーシング（ランサーズ・クラウドワークス）のコンペで初回提案を行う段階です。
Q： 診断でQ1が「No」の場合、何から始めれば一番進みやすいですか？
A： Figmaの公式チュートリアルを1本見ながら、横600px・縦200pxのバナーを1枚作ることが最も動きやすい出発点です。デザインとしての完成度は問わず、「Figmaで画像と文字を置いて書き出す」体験を先に積みます。
Q： 全部Yesになったら次は何をすればよいですか？
A： ポートフォリオを整備して、クラウドソーシングの受注・コンペ参加・SNS発信のいずれかに絞って案件経験を積む段階です。全部の方向を同時に進めようとすると動きが止まりやすいため、最初は1つを集中して動かす方が実案件につながりやすいです。
ポートフォリオは作品集ではなく説明書
作品の数が少ない学習中期に「ポートフォリオに何を載せればよいか」という悩みが集中します。作品数よりも「制作意図と工夫点を説明できるか」の方が採用・案件獲得での評価に直結します。
「課題→意図→工夫点→成果物」の順で整理する
ポートフォリオの1件は、「課題→制作意図→工夫点→成果物」の4要素で構成すると、仕事を発注する側が「この人はどういう考え方で作るのか」を判断しやすくなります（ポートフォリオ作成の重要性と実践法）。「バナーを作りました」だけの展示は、完成度が高くても「なぜその配色にしたか」「どの要素を強調したか」が伝わりません。
架空のカフェのLPを制作したなら「ターゲットが30代女性のため、暖色系で柔らかいフォントを選択した」「ファーストビューに来店を促すCTAボタンを設置し、視線の流れを意識して左上→中央→右下に配置した」という説明が、作品の意図を伝える記述になります。この説明を書けるかどうかは、模写中に「なぜこの配置か」をメモしていたかどうかに直結します。
スキル学習後にポートフォリオを作成し、SNSやブログで発信しながらクラウドソーシングや直接契約へ進む流れは、未経験から初案件へつながった経験者に共通するパターンです（未経験からフリーランスWebデザイナーへのロードマップ体験談）。フリーランスとして仕事獲得につながるポートフォリオの作り方も合わせて参照すると、実務寄りの構成ヒントが得られます。
作品数は3〜5件でも説明の質を優先する
10件の作品が並んでいても「なぜその配色か」「どこを工夫したか」がどこにも書かれていないポートフォリオより、3件でも設計意図が明確に説明されているポートフォリオの方が、案件担当者の判断材料として機能しやすいです。
「ポートフォリオを完璧にしてから営業する」というアプローチは、完成の基準が定まらずに動き出しが遅れる原因になりやすいです。3件整理できた段階で発信・営業を始め、案件を受けながら追加・更新する方が実態として機能しやすい進め方です。
ポートフォリオをGitHub PagesまたはSTUDIOで公開する
ポートフォリオをURL形式で提出できると、採用や案件連絡の返答率が変わります。構築コストを下げる方法として、GitHub Pages（HTMLが書ける場合）やSTUDIO・Notion（コーディング不要）が学習段階では使いやすい選択肢です（独学から案件獲得までの7STEP）。
「ポートフォリオサイト自体をゼロからコーディングで作る」ことに時間を使うより、ポートフォリオに載せる作品の質と説明の精度を高める方が、案件獲得への接続が早くなります。ポートフォリオサイト自体は後から作り込めるため、最初は公開できる状態を作ることを優先します。なお、ポートフォリオサイトの作り方を解説した記事では、2週間で完成させる手順が詳しく説明されています。
Q: 架空の案件を作ってポートフォリオに入れてよいですか？
A： 問題ありません。「架空のクライアントを設定し、課題・ターゲット・要件を自分で設計した作品」は、実案件と同等の学習価値があり、制作意図の説明もしやすくなります。「この案件は架空の設定です」と明示した上で掲載するのが実態として一般的です。
Q： 写真素材は無料で使ってよいですか？
A： ポートフォリオ掲載用途であれば、Unsplash・Pexels・写真ACなど商用利用可・帰属表記不要の素材サイトを使えます。素材サイトごとにライセンス条件が異なるため、使用前に利用規約を確認してください。
Q： ポートフォリオはどのくらいの頻度で更新すれば良いですか？
A： 案件を受けた後・新しい制作物が完成した後・スキルが上がった実感がある段階の3つのタイミングが実態として更新の目安になります。「定期的に更新する」という義務感より「見せられる作品が増えたら追加する」という感覚の方が継続しやすいです。
PR提供: 日本デザインスクール（デザスク）
未経験から初案件を取る現実的な方法
学習中に案件獲得の具体的な動き方が見えないまま進むと、ポートフォリオが完成しても次の行動が取れない状態になります。
クラウドソーシングのコンペが初案件の現実的な入口
ランサーズ・クラウドワークスのバナーコンペは、受注実績ゼロの状態でも提案できるため、初案件の入口として実態として機能しやすい方法です（独学から案件獲得までの7STEP）。コンペは採用率が低いため、最初から「採用されること」より「提案する行為に慣れること」「要件を読んで制作すること」を目的にする方が続けやすいです。
コンペへの参加自体が、「要件に沿って制作する」「納期内に完成させる」「見ず知らずの相手に制作物を出す」という実務経験の模擬練習として機能しています。
受注型案件への移行は3〜5件の実績後に
コンペで3〜5件の提案経験を積んだ後、プロジェクト型（受注型）の案件に移行する流れが実態として多いです（独学でフリーランスWebデザイナーになるためのロードマップ）。この段階では、「納期・修正・コミュニケーション」の3要素を実際に経験しておくことが、継続的な受注につながるかどうかに影響します。
失敗しやすい場面は修正回数の認識のずれです。「無制限修正」と明示されている案件でも、何度でも修正に応じると時間コストが収入を超えることが起こります。最初の受注時に「修正は〇回まで」を契約書またはメッセージで確認しておくことが、案件終了後の疲弊を減らします。初案件から先の営業活動については、フリーランスが初営業で挫折しないための記事も参考になります。
SNS発信は案件獲得経路として機能する場合がある
制作物をX（旧Twitter）やInstagramで発信する方法は、クラウドソーシングとは別の案件経路として機能する場合があります（独学から案件獲得までの7STEP）。フォロワー数が少ない段階での発信は即案件には直結しにくいため、「学習の記録を継続的に発信する」スタンスで続ける方が、発信の継続がしやすいです。
「SNS発信のためにわざわざ制作物を作る」ことは不要です。学習で作った作品を撮影・キャプチャして投稿するだけで十分であり、発信用に別の作品を作ると学習と発信の両方が中途半端になりやすいです。
Q: 知り合い経由の案件は受けた方がよいですか？
A： 実績ゼロの段階では、知人・友人経由の案件は受注の難易度が下がるため積極的に受けてください。ただし、知人案件は「安くやってほしい」という期待値のずれが起きやすいため、料金・修正回数・納品形式を最初に文章で確認しておくことが後のトラブルを減らします。
Q： 料金設定はどうすれば良いですか？
A： バナー1件数千円、LP1件数万円程度が実態として多い価格帯とされています。案件の規模・修正回数・クライアントの予算によって変動するため、相場の参考として使い、実際の案件では要件を聞いてから決定します。
Q： ポートフォリオなしでも案件は取れますか？
A： コンペへの提案はポートフォリオなしでも可能ですが、プロジェクト型案件の応募では制作物の提示を求められることが多いです。最低1件でも「課題→意図→成果物」を説明できる作品があると、案件応募の対象が広がります。
独学とスクールどちらを選ぶか5項目で判定
「スクールに通うべきか、独学で進めるべきか」は、学習スタイルより「詰まったときにどう解決できるか」と「期限があるかどうか」で決まることが多いです。
Q1: 詰まったとき、自分で調べて解決できますか？
Yesの場合は独学で進められる可能性が高いです。Noの場合はスクールの方が詰まりの解消コストが下がります。
Q2: 半年以内に案件獲得または転職したい時期的な目標がありますか？
Yesの場合はスクールの期限・カリキュラムが学習ペースの強制として機能します。Noの場合は独学で自分のペースで進む選択肢が現実的です。
Q3: 学習時間を1日2時間以上確保できますか？
Yesの場合はどちらの方法でも進められます。Noの場合はスクールのカリキュラムペースに合わせる方が、学習の滞留が少ない場合があります。
Q4: 費用を抑えたいですか？
Yesの場合は独学が選択肢の中心になります。書籍・動画教材・無料のオンライン学習サービスで大半の知識は習得できます。Noの場合は、スクールを選んだ際に「フィードバックを受ける環境」「同期の存在」が学習継続に影響します。
Q5: フリーランスの実務経験者に質問できる環境がありますか？
Yesの場合は独学でも詰まりが解消しやすいです。Noの場合はスクールのメンター制度が詰まりの解消に機能します。独学の場合はSNSや勉強会でのコミュニティ参加が代替手段になります。
Q： スクールは不足スキルだけ受けることはできますか？
A： はい、単科コースや特定スキルのみの短期講座を提供しているスクールはあります。「ポートフォリオの作り方だけ」「Figmaの使い方だけ」という形で利用できるため、完全なコースを受けなくても目的に合わせた利用は可能です（独学でフリーランスWebデザイナーになるためのロードマップ）。
Q： 独学が途中で続かなくなったらスクールに切り替えてよいですか？
A： 切り替えは問題ありません。「続かなくなった理由」が詰まりによる停滞なのか、モチベーションの問題なのかを先に確認すると、スクールで解決できる課題かどうかが判断しやすくなります。詰まりが原因なら切り替えは有効であり、モチベーションが原因なら学習の目標設定を先に見直す方が継続につながります。
Q： スクールを選ぶ基準はどう設定すれば良いですか？
A： 「転職・案件獲得の実績を公開しているか」「講師またはメンターが現役のデザイナーか」「無料体験授業があるか」の3点を確認することが判断の出発点になります。料金だけで選ぶと、サポート内容と費用のバランスが合わない場合があります。
Webデザイン独学5ステップを実務感覚で加速するハック
【対象】: 模写は終わったが、制作スピードが遅く実案件のイメージが持てない人
【手順】: A8バナーサイズ（728×90px）を1枚選び、1時間で完成させることを目標に設定します（5分）。次に参考にするバナーを3件選び、配色・フォント・キャッチコピーの位置をメモして、そのバナーの「型」を抽出します（15分）。最後に型を使って自分のバナーを制作し、Figmaで書き出して日付ファイル名で保存します（40分）。
【コツと理由】: 実務では「型を素早く使い回して数をこなす」判断力が求められます。バナーの制作現場では1件あたりの時間が限られており、短時間で成立させる判断力は繰り返しでしか養われません。時間を決めて次に移ることが、1か月後の制作スピードに差をもたらします。
【注意点】: 20件をすべて違うジャンルで作る必要はありません。同じジャンルで配色やコピーを変えるだけでも練習として機能します。まず数をこなす段階では、自己判断で次に進む方がサイクルが止まりません。
ハック2: 模写メモは「なぜこうしたか」の仮説3つをセットにする
【対象】: 模写は続けているが、ポートフォリオの制作意図説明に詰まる人
【手順】: 模写するサイトを開き、ブロック分解（ヘッダー・メインビジュアル・コンテンツ・フッター）をFigmaで囲みます（10分）。次に各ブロックについて「なぜこの余白か」「なぜこの色か」「なぜこのテキストサイズか」の仮説を3つメモします（15分）。模写が完成したら、メモを見ながら「自分がオリジナルで作るなら何を変えるか」を1点書き出します（5分）。
【コツと理由】: 模写の価値は「設計意図を解読する」ことにあります。仮説を3つセットにするのは、「1つだと正解を探して止まる」「3つ以上だと時間がかかりすぎる」という実務感覚から来た区切りです。この仮説がポートフォリオの「制作意図」の文章として再利用できます。
【注意点】: 仮説が「正しいかどうか」を確認しようとして検索しすぎると手が止まります。「自分がそう読んだ」という解釈として記録し、正確な理由の確認は後でよいです。模写中に仮説の正解探しを行うことは、制作サイクルを止める原因になります。
ハック3: ポートフォリオの「課題→意図→工夫点」を30文字以内で書く練習をする
【対象】: 制作意図を言葉にしようとすると長くなりすぎて伝わらない人
【手順】: 手元にある作品を1件選び、「この制作の課題は何だったか」を30文字以内で書きます（5分）。次に「その課題に対してどんな意図で作ったか」を30文字以内で書きます（5分）。最後に「工夫した点1つ」を30文字以内で書きます（5分）。
【コツと理由】: 発注側が読みたいのは「どういう判断でこのデザインにしたか」です。30文字の制約を設けると不要な情報が削られ、判断の核だけが残ります。この30文字の説明を3セット書けたら、ポートフォリオの1件分のテキストとして使えます。
【注意点】: 30文字を厳守する必要はなく、「短く書こうとする」制約として使います。箇条書きのメモから始めて後から文章にする順番の方が詰まりにくいです。最初から完成した文章を書こうとする必要はありません。
ハック4: HTML/CSSの学習は自分のデザインを再現することで進める
【対象】: ProgateやドットインストールのカリキュラムをProgateやドットインストールを終えたが、実際に何を作ればよいか分からない人
【手順】: Figmaで作った自分のバナーまたはLP（A4サイズ程度）を1件選びます（5分）。次にHTMLとCSSファイルを作成し、そのデザインの「ヘッダー部分だけ」を再現することを目標にします（30〜45分）。再現できたら「なぜ自分のFigmaデザインと見た目が違うか」を1点書き出し、CSSで修正します（15〜20分）。
【コツと理由】: 入門教材で決められたサンプルを作るより、「自分が作ったデザインをHTMLで動かす」体験の方が、デザインと実装のつながりが実感として残ります。「どうしてこのデザインにしたか」を自分が知っているため、「なぜHTMLで同じにならないか」という問いが自然に生まれ、調べる動機が持続しやすくなります。
【注意点】: 完全に同じ見た目にしようとすると、CSSの詳細な制御が必要になり時間がかかります。「だいたい同じ構成」で止める判断が、次のステップへの移行を早めます。FigmaとHTML再現を交互に繰り返す方が両方の理解が進みます。
ハック5: 初案件はコンペ3件に提案してからプロジェクト受注を検討する
【対象】: ポートフォリオが1〜2件整ってきたが、案件獲得の動き出し方が分からない人
【手順】: ランサーズまたはクラウドワークスのバナーコンペを検索し、「締切が3日以上ある・要件が明確な」案件を3件選びます（15分）。各コンペの要件を読み、Figmaで制作して提案します（各1〜2時間）。提案後、採用・不採用に関わらず「要件のどの部分を満たせたか」を自己評価してメモします（10分）。
【コツと理由】: 案件獲得に慣れていない段階では、プロジェクト型の受注に応募するよりコンペへの提案で要件読解と制作の往復に慣れる方が、実務の型を効率よく習得できます。コンペは採用されなくても要件に沿って制作した経験が積まれ、その制作物がポートフォリオの作品になります。
【注意点】: コンペでの提案をいつまでも続けて、プロジェクト型案件に移行しないケースがあります。3〜5件のコンペ経験後は、プロジェクト受注の応募も並行して始めてください。採用されることを動き出しの条件にせず、3件提案を基準に次のステップへ移ります。
Webデザイナー未経験は5ステップで動く
未経験からWebデザイナーを目指すなら、デザイン基礎を観察で固め、Figmaで制作練習を積み、模写の意図言語化からポートフォリオの説明力へつなげる流れが実務に近い道筋です。独学かスクールかの選択は「詰まったときの解消手段があるかどうか」と「期限があるかどうか」で決まり、どちらが正解かは状況によって変わります。
学習が続くかどうかは、完璧なロードマップを持っているかどうかより「次に何をすればいいか」がいつも1つに絞られているかどうかで変わることが多いです。この記事の診断や5ステップが、その1つを絞る参考として機能します。
| 状況 | 次の一歩 | 所要時間 |
| まだ何も始めていない | Figmaアカウント作成→バナー1枚制作 | 1〜2時間 |
| 模写を始めたばかり | 模写にブロック分解メモを加える | 次回の模写から即日 |
| 模写は続けているが次が見えない | 模写後にオリジナル制作1件に移る | 翌日から |
| 作品はあるがポートフォリオが整っていない | 「課題→意図→工夫点」を30文字で書く | 30分/1件 |
| ポートフォリオはあるが案件が取れていない | バナーコンペに3件提案する | 3〜5時間 |
Webデザイナー未経験の勉強方法に関するよくある質問
Q: Webデザインは独学で習得できますか？
A： 習得できます。ただし「デザイン基礎」「ツール操作」「実践練習」の3領域を順番に積み上げる計画と、詰まったときの解消手段（書籍・動画教材・コミュニティ）を最初に決めておくことが、途中で止まらない条件になります。
Q： 未経験からフリーランスになるまでどのくらいかかりますか？
A： 学習時間や目標のレベルによって差が大きいため、一律の期間を示すことはできません。「模写→ポートフォリオ→初案件」の流れを実行した場合に数か月〜1年程度を見込む記事が多く見られますが、1日の学習時間・制作する作品数・案件獲得の努力量によって変わります（Webデザイン初心者向け勉強方法を徹底解説【完全版】）。なお、フリーランスとして独立する際に必要な開業資金の目安と調達方法も、あらかじめ確認しておくと安心です。
Q: デザインのセンスがないと難しいですか？
A： Webデザインで求められるのは「センス」より「判断基準」です。余白・整列・コントラスト・近接の4原則は学習で身につけられる知識であり、「なぜこのレイアウトにするか」を説明できることが実務では必要とされます。センスは観察と制作の繰り返しで後から積み上がるものであり、最初からある必要はありません。
Q： 案件を取るにはSNSのフォロワーが必要ですか？
A： 必須ではありません。クラウドソーシングのコンペ・プロジェクト受注は、フォロワー数に関係なく参加できます。SNS発信は案件経路の1つとして機能する場合がありますが、初案件に必要な条件ではなく、「学習の継続記録」として使いながら自然に伸ばす方が継続しやすいです。
Q： AIツールは学習に使ってよいですか？
A： 使って問題ありません。ただし「デザイン案の生成をAIに任せる」と、デザインの判断基準が身につかないまま制作が進む状態になることがあります。AIは「詰まった箇所の調べ物」「アイデア出しの補助」として使い、最終的な配色・レイアウト・フォントの選択は自分で行う運用が、実力として残りやすいです（Webデザインを独学で学ぶ方法｜未経験向け学習ステップ）。