Webデザイン初心者がフリーランスを目指す場合、デザイン基礎からポートフォリオ公開まで6つのステップを順番に進めることで、遠回りを減らせます。学習期間の目安は基礎習得まで3〜6か月、実務レベルまで6〜12か月程度です。この記事では、各ステップの具体的な作業内容と、つまずきやすいポイントを整理します。
▶ 3日で初案件PR
この記事でわかること
この記事を読むと、次の3点が明確になります。フリーランスを目指す場合の勉強順と各ステップの目安時間。FigmaとHTML/CSSのどちらを先に学ぶかの判断基準。案件応募レベルに達しているかどうかのセルフ診断方法。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Webデザイン初心者がフリーランス案件の受注につながる学習をするには、ツールより先にデザイン基礎を学ぶことが出発点です。その後、Figma・HTML/CSS・模写・オリジナル制作・ポートフォリオという順序で進めることで、「作れるだけ」ではなく「説明できる」制作物が揃います。何から手をつけるかが決まれば、学習の迷いは大幅に減ります。
最初に確認すること
まずゴールを「副業」「転職」「フリーランス独立」のいずれかに決めてください。ゴールによって優先すべきステップと期間の配分が変わります。この確認だけなら5分で終わります。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 何から始めるか決めたい | Webデザイン初心者の勉強順は6ステップで整理できる | 5分 |
| FigmaとHTMLのどちらが先か迷っている | FigmaとHTML/CSSはどちらを先に学ぶか | 3分 |
| 模写・トレースの意味が分からない | 模写・トレースとオリジナル制作は目的が違う | 3分 |
| ポートフォリオに何を載せるか分からない | ポートフォリオは制作意図で差がつく | 4分 |
| 案件に応募できるレベルか判断したい | 案件応募レベルをセルフ診断する | 5分 |
| フリーランスとしての収入イメージを作りたい | フリーランスWebデザイナーが収入を安定させる5つの仕組み | 5分 |
Webデザイン初心者の勉強順は6ステップで整理できる
「何を買えばいいですか」「Figmaから始めればいいですか」という質問をよく見かけます。ツール名より先に決めることがあります。
ステップ全体像と各フェーズの目的
6つのステップは次の順番で進めます。ステップ1がデザイン基礎、ステップ2がFigma習得、ステップ3がHTML/CSS習得、ステップ4が模写・トレース、ステップ5がオリジナル制作、ステップ6がポートフォリオ公開です。この順番には理由があります。デザインの判断軸がないままFigmaを開いても、何が良くて何が悪いかの基準がなく、手が止まります。判断軸を先に作るのがステップ1の目的です。
ステップ1〜3は「知識と道具を揃えるフェーズ」、ステップ4〜5は「実際に手を動かすフェーズ」、ステップ6は「他者に見せるフェーズ」です。フェーズを意識すると、自分が今どこにいるかが把握しやすくなります。
ゴール設定が学習順を変える理由
副業として月3〜5万円を目標にするなら、バナー制作とLP制作ができれば最初の案件に近づけます。転職を目指すなら、HTML/CSSのコーディングスキルと実務に近いポートフォリオが求められます。フリーランス独立を目指すなら、制作・提案・修正対応・納品という一連の流れを自分で回せる状態が必要です。
ゴールを決めずに始めると、なんとなく動画を見続けてアウトプットが後回しになります。「半年勉強したけど何も作れていない」という状態になったフリーランスWebデザイナーの体験談も多くあります。ゴールを先に決めることが、学習順を実質的に決定します。
学習期間の目安と必要な週間学習時間
基礎習得（ステップ1〜4）に3〜6か月、実務レベル（ステップ5〜6と案件獲得）まで6〜12か月という目安が複数の解説記事で示されています。ただし週10時間と週30時間では到達速度が3倍異なります。期間の目安は学習量の関数であり、カレンダーの月数だけを信じると見通しがズレます。
週あたりの学習時間を先に決め、それをもとに期間を逆算する方が現実的です。
CHECK
▶ 今すぐやること: ゴール（副業・転職・フリーランス）を紙に書き、週に確保できる学習時間を記録する（5分）
Q: Webデザインは独学でフリーランスになれますか？
A： 独学でフリーランスになった事例は多くあります（フリーランスWebデザイナー成功ガイド）。ただし、独学のみで進めると配色やレイアウトの判断基準がズレたまま固まるリスクがあります。定期的に添削やレビューを受ける機会を作ることを検討してください。
Q： 最初に何を買えばいいですか？
A： まず用意が必要なのはFigmaのアカウント（学習目的なら無料プランで十分）とパソコンです。書籍はRobin Williams著「ノンデザイナーズ・デザインブック」が配色・フォント・レイアウト・デザイン原則を体系的に整理しており、ステップ1に適しています。高額なスクールの前に、これらで学習の方向性を確認してください。
FigmaとHTML/CSSはどちらを先に学ぶか
「FigmaとHTMLどっちから?」と迷う人は多くいます。答えは「Figmaが先」です。理由まで理解していないと途中で迷います。
Figmaを先に学ぶ理由
FigmaはWebデザインの制作作業を行うツールです。バナーもLPもWebサイトのカンプもFigmaで作ります。HTML/CSSはそのデザインをブラウザ上に再現するための言語です。デザインがない状態でHTML/CSSを書き始めると、「何を再現しているのか」が不明瞭なまま進みます。
Figmaを先に学ぶことで、「作りたいデザイン → それをHTMLで再現する」という流れが成立します。逆順で進めると、HTMLのサンプルコードを写しているだけになりやすく、「デザインの判断」を練習する機会が後回しになります（Webデザイン学習ロードマップ）。
FigmaでWebデザインの制作環境を整える手順
Figmaの学習ステップは4段階で進めます。まずFigma公式サイトでアカウントを作成します（無料プラン、10分）。次にFigmaの基本操作として、フレーム作成・テキスト配置・色の設定・整列コマンドを覚えます（2〜3時間）。その後、自分がよく見るWebサイトのヘッダー部分だけをFigmaで再現する練習をします（1〜2時間）。最後に、バナー1枚を一から作ります（2〜3時間）。この4段階で基本操作は一通り触れます。
なお、フリーランスとして活動を始める前にポートフォリオサイト作り方を把握しておくと、学習のゴールイメージがより明確になります。
HTML/CSSはどこまで学べばよいか
フリーランスWebデザイナーとして受注できる案件の多くは、デザインカンプ（Figmaで作ったデザインデータ）を納品するものと、コーディングまで含むものに分かれます。コーディング未対応でも受注できる案件は存在しますが、HTML/CSSを身につけると単価の幅が広がります。
学習の優先順位としては、Figmaで1〜2作品を作った後にHTML/CSSに入る流れが適切です。HTML/CSSの学習目標は「Figmaで作ったバナーやLPの構造をHTMLで記述し、CSSでスタイルを再現できる」水準です。JavaScriptやフレームワーク（ReactやVue）はこの段階では不要です。
Q： PhotoshopやIllustratorも必要ですか？
A： 最初の段階では不要です。PhotoshopはWeb用画像の書き出し・レタッチ、Illustratorはロゴ・イラスト制作に使います。学習初期はFigmaで制作の流れを身につけることを優先し、PhotoshopやIllustratorは実案件で必要になったタイミングで覚える方が無駄が少ないです（Webデザイン学習ロードマップ）。
Q： STUDIOやWordPressは学んだ方がいいですか？
A： フリーランスを目指すなら、HTML/CSSの後に学ぶ選択肢として検討できます。ただしSTUDIOやWordPressはCMS（コンテンツ管理システム）であり、デザインの基礎判断力がないと、テンプレートを微修正するだけになります。デザイン基礎とFigmaの習得後に検討するのが適切です。
デザイン基礎は4要素から始める
「センスがないからデザインは難しい」と感じる人は少なくありません。デザインの基礎は感覚より先に知識の問題です。
配色・フォント・レイアウト・デザイン原則の順で学ぶ
デザイン基礎の4要素は配色、フォント、レイアウト、デザイン原則です（Webデザイン独学ロードマップ）。
配色では、色相環・補色・同系色の関係と、Web制作でよく使うカラーパレットの作り方を学びます。フォントでは、ゴシック体と明朝体の使い分けと、行間・字間・サイズの関係を学びます。レイアウトでは、グリッドシステム・余白の役割・視線の流れを学びます。デザイン原則では、近接・整列・反復・対比（CRAP原則とも呼ばれる）を学びます。
Webデザイン配色の基礎を理解しておくと、この段階での判断精度が大きく上がります。3色を70:25:5の比率で扱うルールは、初心者のうちから意識しておく価値があります。
これらを全部先に学んでから手を動かす必要はありません。各要素を「知る → 実際のWebサイトで見つける → 自分の制作に取り入れる」という往復で身につけていく方が定着します。
バナー制作を繰り返してデザイン基礎を固める
配色・フォント・レイアウトを学んだ後は、バナー制作を繰り返す方法が有効です。バナーは制作物として小さく、1本あたり2〜4時間で完成します。20本を目標に作ることで、デザインの判断を繰り返し練習できます。「1本目と10本目で余白の使い方が変わった」という実感が出てくると、基礎が定着しています。
よく起きるのが「完成度を高めようと1本に時間をかけすぎる」ことです。1本を完璧にするより、5本を短期間で作る方がデザイン判断の回数を増やせます。最初の5〜6本は「ひどい出来でいい」と割り切る方が続きます。
デザイン基礎を独学で学ぶ際の教材選び
書籍ではRobin Williams著「ノンデザイナーズ・デザインブック」が配色・フォント・レイアウト・原則を一冊で整理しており、初心者に向いています。オンライン動画はYouTubeの無料動画でも基礎的な解説を探せますが、「概念の説明」で終わる動画と「手を動かして覚える」動画を組み合わせる方が効率よく進められます（独学の勉強法と流れ）。
Q： センスがないとWebデザインは難しいですか？
A： センスより先に、デザイン基礎の知識が判断の根拠になります。「余白が少ない」「フォントが合っていない」という判断を言語化できるようになることが、センスに見える状態の実態です。最初は「なぜこのデザインがよく見えるか」を言葉で説明する練習を意識すると、判断力が身につきます。
Q： デザイン理論を全部覚えてから手を動かすべきですか？
A： 覚えてから動かすより、動かしながら覚える方が定着します。配色の章を読んだらその日にFigmaでカラーパレットを作るなど、インプットとアウトプットを交互に繰り返す方が実践で使える知識になります。
案件応募レベルをセルフ診断する
「自分はもう案件に応募できるレベルですか?」と判断しづらい人は多くいます。以下の診断で目安を確認してください。
Q1: Figmaで1,000px幅のWebページのカンプを1から作れますか？
Yesの場合はQ2へ進んでください。Noの場合はステップ1〜2（デザイン基礎・Figma）に戻ります。
Q2: 他のWebサイトを見て、似たレイアウトをFigmaで再現できますか（模写）？
Yesの場合はQ3へ進んでください。Noの場合はステップ4（模写・トレース）から再開します。
Q3: 自分でテーマを決めてLPまたはコーポレートサイトのデザインを制作し、制作意図を言葉で説明できますか？
Yesの場合はQ4へ進んでください。Noの場合はステップ5（オリジナル制作）を完了させてから応募します。
Q4: ポートフォリオに3作品以上掲載されており、各作品に制作意図・担当範囲・改善点が記載されていますか？
Yesの場合は案件応募レベルに達しています。Noの場合はポートフォリオを整えてから応募します。
CHECK
▶ 今すぐやること: 上のQ1〜Q4を実際に確認し、止まったステップを今週の学習目標に設定する（5分）
Q: 模写作品はポートフォリオに載せていいですか？
A： 模写はポートフォリオに載せないのが一般的です。模写は練習目的の制作物であり、著作権の問題もあります。ポートフォリオに掲載するのはオリジナル制作の作品に絞り、模写は「手を動かす練習」として扱ってください。
Q： どこに案件を探しに行けばいいですか？
A： 初案件はクラウドソーシング（ランサーズ・クラウドワークス）が取り組みやすい場所です。最初は単価より「完成させて納品する」経験を積むことを優先します。1〜3件の実績が積まれると、直接依頼や単価交渉がしやすくなります（独学でフリーランスWebデザイナーを目指す流れ）。
PR提供: 日本デザインスクール（デザスク）
模写・トレースとオリジナル制作は目的が違う
「模写とオリジナルのどちらが大事ですか?」という質問は、目的を区別することで答えが変わります。
模写・トレースで身につけること
模写は既存のWebサイトのデザインをFigmaで再現する練習です。「なぜここに余白があるのか」「なぜこのフォントサイズなのか」を考えながら再現することで、レイアウトの構造を読み取る力が身につきます。トレースは模写と近い意味で使われますが、より細部の形状や配置を正確に再現する練習を指すことが多いです。
模写で身につくのは「観察力」と「再現力」です。既存の良いデザインを手で再現することで、「こういう構造になっているのか」という発見があります。1つのサイトを模写するのに4〜8時間程度かかることもあり、「時間がかかりすぎる」と感じることがありますが、この時間は判断力の蓄積です（Webデザイン独学ロードマップ）。
オリジナル制作で身につけること
オリジナル制作は、自分でテーマを決めてゼロからデザインを作ることです。「カフェのランディングページ」「架空の本のWebサイト」など、架空のクライアントを設定して制作します。
オリジナル制作では「デザインの判断」と「説明する力」が試されます。なぜこの配色なのか、なぜこのレイアウトなのか、ユーザーをどこに誘導したいのか、を言葉で説明できる状態が目標です。「見た目だけ良い」制作物は、ポートフォリオで差がつきません。制作意図を言語化できる作品がフリーランス案件の評価につながります（フリーランスWebデザイナーになるための体験ロードマップ）。
バナー・LP・コーポレートサイトの制作順
練習の種類別に推奨する順番は、バナー制作（ステップ4）、LP制作（ステップ5前半）、コーポレートサイト制作（ステップ5後半）です。バナーは情報量が少なく構造がシンプルなため、最初のアウトプットに向いています。LPは情報設計とビジュアルの関係を学べます。コーポレートサイトは複数ページの情報構造を考える練習になります。この順番で進めると、制作の複雑さが段階的に上がります。
Q： 模写は何サイト・何枚やればいいですか？
A： 目安として、Webサイト模写を3〜5サイト、バナートレースを10〜20枚程度こなすと、再現力が安定してきます。ただし「この構造はなぜこうなっているのか」を考えながら進めない場合、枚数を重ねても判断力の向上が遅くなります。再現しながら「意図を言葉にする」習慣が重要です。
Q： 架空のクライアントを設定するのが難しいです。
A: 設定に迷ったら「近所の実在する飲食店」「自分がよく利用するサービス」など実在するものをモデルにするのが入りやすいです。実在するビジネスを題材にすると、「このサービスを使うユーザーはどんな人か」という視点が自然に加わり、デザインの目的意識が持ちやすくなります。
ポートフォリオは制作意図で差がつく
作品を並べてポートフォリオを公開した後、応募したが返信がなかった、という経験を持つ人は珍しくありません。
ポートフォリオに載せるべき情報
各作品のページに記載すべき情報は4項目です。制作意図（なぜこのデザインにしたか）、担当範囲（デザインのみかコーディングまでか）、使用ツール（FigmaとHTML/CSS等）、制作時点での課題と改善案です（独学ロードマップと案件獲得）。
作品の見た目だけを並べるポートフォリオは「作れます」しか伝わりません。制作意図を書くことで「なぜそのデザインにしたか考えられる」ことが伝わります。これがフリーランス案件での評価に直結します。
掲載作品数と質の考え方
ポートフォリオの作品数は3〜5点から始めれば十分です。20点並べても制作意図のない作品の羅列では評価されません。「少ないけど意図が説明できる3点」と「多いけど説明できない10点」では、前者の方が仕事につながります。
ただし、バナー・LP・コーポレートサイトのように種類を揃えることは重要です。「バナーしかない」ポートフォリオよりも、「バナー・LP・コーポレートサイトの3種が揃っている」ポートフォリオの方が、受けられる案件の幅が広がります。
ポートフォリオサイトの公開方法
ポートフォリオを公開する方法は複数あります。Notion（無料）でページを作り公開する方法が、最初は技術的な障壁が少ないです。HTML/CSSを学んだ後であれば、自分でコーディングしたポートフォリオサイトを作ることが、「コーディングができる」証明になります。ポートフォリオサイト自体が作品の一つとして機能する点で、フリーランス志向には自作の選択肢を推奨します。
ポートフォリオサイトの作り方では、プロフィール・作品一覧・スキル・実績・連絡先の7項目構成が整理されています。公開後の運用まで含めた設計を把握しておくと、制作の方向性がブレにくくなります。
「ポートフォリオを作って公開したことで、直接依頼が来るようになりました。SNSに投稿して反応を見ることも有効でした」と語るフリーランスデザイナーの声もあります（フリーランスWebデザイナー成功ガイド）。
Q： ポートフォリオが完成したら何をすればいいですか？
A： ポートフォリオのURLをBehanceやnote等に投稿し、フィードバックを集めることを最初の一歩にしてください。クラウドソーシングのプロフィールにURLを掲載し、案件応募を始めるタイミングでもあります（独学ロードマップと案件獲得）。
Q： ポートフォリオに未完成の作品を載せてもいいですか？
A： 未完成の作品は掲載しない方が無難です。「制作中」と明記していても、評価する側には完成作品として比較されます。代わりに「現在制作中の作品があります」と一言添えて、完成後に追加する方が信頼感があります。
フリーランスWebデザイナーが収入を安定させる5つの仕組み
学習が進んでも「仕事につながるイメージが持てない」という感覚は自然なことです。学習フェーズと案件獲得フェーズは、やることが変わります。
ハック1: ゴール別に学習の優先順位を組み替える
【対象】: 副業・転職・フリーランス独立のいずれかを目指す全ての学習者
【手順】: 現在のゴール（副業・転職・フリーランス）を1つ選び5分で書き出します。次に、ゴール別の優先スキルを10分で確認します。副業ならバナー・LP制作、転職ならHTML/CSSとポートフォリオ、フリーランス独立なら提案・修正対応・納品の一連の流れを含むスキルセットです。最後に現在の学習計画と照合し、優先順位を変えるかどうか10分で判断します。
【コツと理由】: 「Webデザインのスキルを全部身につけてから活動を始める」と考えると、学習範囲が広がりすぎて着手が遅れます。「ゴールに必要な最小限のスキルを先に習得し、案件を通じて残りを補完する」流れが、仕事につながるまでの時間を短縮します。ゴールが先に決まることで、学ぶべきものとそうでないものの区別がつきます。
【注意点】: ゴールは決めた後も変わって構いません。最初に「副業」で始めたが途中で「転職」に変更した場合、その時点でスキルの優先順位を組み替えてください。一度決めたゴールに縛られて合わない学習を続ける必要はありません。
ハック2: バナー制作で判断の回数を稼ぐ
【対象】: デザイン基礎は学んだが、アウトプットが少ない段階の学習者
【手順】: Figmaで新しいフレームを開き、サイズを1,200×628px（SNS広告の標準サイズの一例）に設定します（2分）。実在する商品やサービスを題材に決め、伝えたいメッセージを1行で書きます（5分）。配色・フォント・レイアウトを決めてバナーを完成させます。最初は1本あたり2〜3時間が目安です。
【コツと理由】: 「良いバナーを1本」より「ひどくてもいいから5本」という考え方が、配色・フォント・レイアウトの感覚を定着させます。短時間で5本を作る方がデザインの判断を繰り返し練習でき、次の制作物への応用が早くなります。
【注意点】: 「ひどいバナーを大量に作る」ことと「雑に作る」ことは違います。毎回「なぜこの配色にしたか」「なぜこのフォントにしたか」を制作中に一度確認する習慣を維持してください。確認なしに量だけ増やしてもデザイン判断力は上がりません。最初から高品質を求めてバナー1本に丸一日かけることも不要です。
ハック3: 制作意図を言語化してポートフォリオの評価を上げる
【対象】: 作品は作れるが、案件応募後の返信率が低い段階の制作者
【手順】: 既存のポートフォリオ作品を1つ選びます（2分）。各作品について「①誰に向けたデザインか」「②何を伝えたいか」「③なぜこの配色・レイアウトにしたか」「④今改善するなら何を変えるか」の4項目を書きます（30分）。その内容を作品ページに追加し、意図が読める状態に更新します（30分）。
【コツと理由】: 実務で評価されるポートフォリオは「デザイナーの思考過程が見える」ものです。「なぜそのデザインにしたか」を説明できることは、実案件での修正対応・提案・打ち合わせの能力を証明します。制作意図が書いてある作品とそうでない作品では、同じ見た目でも伝わる信頼感が変わります。
【注意点】: 「制作意図を書く」ことと「言い訳を書く」ことは別です。「フォントが合わなかった」「時間がなかったので手抜きした」は書かなくてよいことです。「今改善するなら○○にする」という形で書くと、反省ではなく成長の証明になります。
ハック4: 模写と並行して「なぜ」を言語化する習慣を作る
【対象】: 模写・トレースの練習を始めているが、力がついている実感が薄い段階の学習者
【手順】: 模写するWebサイトを選び、Figmaで新しいフレームを用意します（5分）。ヘッダー部分だけを再現し、終わった後に「なぜこのレイアウト・余白・フォントサイズなのか」を自分の言葉で3文書きます（1〜2時間）。同じサイトの他のセクションに進む前に、前のセクションの言語化を先に完成させます。
【コツと理由】: 実務では「観察した内容を判断の根拠にする」力が求められます。「形を再現するだけの模写」と「理由を言語化しながら進める模写」では、同じ時間でも制作判断への転換速度が変わります。言語化の習慣は、後のオリジナル制作で「なぜこのデザインにするか」を即座に判断できる力につながります。
【注意点】: 言語化に詰まることがあります。「余白が多い理由が分からない」という場合、「ここは分からなかった」とメモするだけで構いません。「分からないを記録する」方が、後で見返したときの気づきになります。完璧に言語化できないからといって模写を止める必要はありません。
ハック5: 小さな案件で実務経験を先に積む
【対象】: ポートフォリオが3点以上揃っており、最初の案件に踏み出せていない学習者
【手順】: クラウドソーシング（ランサーズまたはクラウドワークス）に登録し、バナー制作またはLP制作のカテゴリで予算3,000〜10,000円の案件を探します（20分）。応募文にポートフォリオURLを添え、「対応できる内容・できない内容」を正直に書いて応募します（30分）。受注できたら、納品まで「途中でのヒアリング・修正対応・完成確認」の一連の流れを経験します。
【コツと理由】: 実案件のプレッシャーと納品経験が、独学では得られない判断力を短期間で与えてくれます。最初の案件は単価より「一度完結させる経験」が目的です。1〜3件の実績があると、クライアントとのやりとりに慣れ、次の案件の応募文も書きやすくなります（フリーランスWebデザイナー成功ガイド）。
【注意点】: 最初の案件で「できないことをできると言う」ことはやらなくてよいことです。コーディングが未経験なら「デザインカンプの納品まで対応できます、コーディングは現時点では対応外です」と書く方が、受注後のトラブルを防げます。正直に書いた方が、後の修正依頼や追加依頼につながるクライアントとの関係を作りやすいです。
フリーランスWebデザイナーとして活動するにあたり、開業届の提出手順と開業資金の目安を事前に確認しておくと、収入が安定してきた段階でスムーズに動けます。
CHECK
▶ 今すぐやること: ランサーズまたはクラウドワークスを開き、バナー制作のカテゴリで予算5,000〜15,000円の案件を3件確認する（10分）
Q: 最初の案件はいくらで受けるのが適切ですか？
A： 最初の1〜3件は、完成させる経験を優先するなら単価にこだわらなくて構いません。「最初の案件は実務経験への投資」と考えると、単価より「一通り完結できるか」が優先されます。実績が積まれてからの単価交渉の方が根拠を持って話せます。
Q： 案件が取れない時期が続くとどうすればいいですか？
A： 返信がない場合、応募文・ポートフォリオ・スキル設定の3つを見直します。応募文が長すぎる、ポートフォリオのリンクが分かりにくい、スキル設定がクライアントの求めと合っていない、のどれかが原因であることが多いです。現役デザイナーに応募文とポートフォリオのレビューを依頼することも選択肢になります（独学でフリーランスWebデザイナーを目指す流れ）。
Webデザイン初心者の勉強順はゴールから逆算する
Webデザイン初心者がフリーランスを目指す場合、最初の一手はゴール設定です。ゴールが決まると、デザイン基礎・Figma・HTML/CSS・模写・オリジナル制作・ポートフォリオという6つのステップのどこに力を入れるかが見えてきます。
ツールの名前を覚える前に、「なぜそのデザインにするのか」を言葉にできる力を育てることが、フリーランス案件で評価されるデザイナーへの道筋です。焦って範囲を広げるより、今のステップを完了させてから次へ進む方が着実です。
| 状況 | 次の一歩 | 所要時間 |
| ゴールがまだ決まっていない | 副業・転職・フリーランスのどれかを書き出す | 5分 |
| Figmaをまだ触ったことがない | Figmaで無料アカウントを作成する | 10分 |
| バナーを1本も作っていない | Figmaで1,200×628pxのフレームを作って1本完成させる | 2〜3時間 |
| 模写をしたことがない | 好きなWebサイトのヘッダーだけをFigmaで再現する | 1〜2時間 |
| ポートフォリオが未公開 | 既存の作品に制作意図を書いてNotionで公開する | 1〜2時間 |
| 案件に応募したことがない | ランサーズでバナー案件に1件応募する | 30分 |
Webデザイン初心者の勉強順に関するよくある質問
Q: WebデザイナーとWebコーダーの違いは何ですか？
A： Webデザイナーは見た目のデザイン（配色・レイアウト・フォント・Figmaでのカンプ制作）を担当します。WebコーダーはそのデザインをHTML/CSSでブラウザ上に再現する実装を担当します。両方を担当するデザイナーもいますが、学習初期は「デザインが先」と理解しておくと迷いが減ります。
Q： JavaScriptやReactはいつ学べばよいですか？
A： Webデザイナーとしてのポートフォリオが完成し、初案件の経験を積んだ後で検討する範囲です。JavaScript・ReactはフロントエンドエンジニアLが主に使うスキルであり、Webデザイナーとして案件を受注するための必須要件ではありません。単価を上げたい段階や、インタラクションの実装を担当したい場合に学習範囲を広げる選択肢として持っておくとよいです。
Q： スクールと独学、どちらが良いですか？
A： どちらにも一長一短があります。独学は費用を抑えられる反面、学習の方向性がズレていても気づくまでに時間がかかります。スクールはカリキュラムと添削がある分、方向性のズレを修正しやすいですが費用がかかります。独学で始めて3か月ほど進んでから現役デザイナーに添削を依頼する折衷的な方法も現実的な選択肢です（独学で学ぶ方法と教材例）。
【出典・参照元】
フリーランスWebデザイナーになるための体験ロードマップ｜note
フリーランスWebデザイナー成功ガイド｜webfield.biz
Webデザイン学習ロードマップ｜tokyofreelance.jp