【結論】Webデザイン学習の順番は「バナー→LP→サイト」が最短ルート
Webデザインを学び始めたとき、最初にぶつかる壁が「結局、何から手をつければいいの？」という悩みです。
「まずはHTML/CSSから」「いや、Figmaが先だ」「バナー模写を100本やれ」——。ネットやSNSには正解のような情報が溢れていて、どれを信じればいいか分からなくなってしまいますよね。特に学習時間が限られる会社員の方にとって、遠回りはしんどいものです。
未経験からスキルを積み上げるなら、まずおすすめしたいのは「バナー（基礎）→LP（構成力）→Webサイト（設計）」の順番です。小さく作って改善し、同じ基礎を少しずつ大きな制作物に広げることで、挫折しにくく上達も実感しやすくなります。
この記事では、プロの現場でも必須になりやすいFigmaを使ったデザイン学習ロードマップを、具体的な練習ステップとともに解説します。配色・タイポ・UIの鍛え方まで「手順書」として持ち帰ってください。
この記事の前提：本記事は「Figmaでのデザイン（UIデザイン/デザインカンプ作成）」が中心
まず誤解を防ぐために、この記事で扱う「Webデザイン 学習 順番」の定義をはっきりさせます。
本記事で解説するのは、コーディング（HTML/CSS）に入る前の「Figma上でデザインデータを作れるようになる順序」です。具体的には、バナー・LP・サイトの見た目（レイアウト、配色、タイポ、UIパーツ）を、Figmaで設計して形にする力を伸ばします。
一方で、Web制作の仕事では「デザイン＋実装（コーディング）」まで求められる場合もあります。そのため記事内でも、サイト制作が進むと実装やCMSの話題が“関わってくることがある”点には触れますが、この記事の主戦場はあくまでデザイン（作画・設計）です。
コーディングも学びたい人は、デザインの基礎が固まったあとに「LPを1本デザインできる状態」から入るとスムーズです。先にデザインの型があると、HTML/CSSで再現するときの迷いが減ります。
なぜ「バナー→LP→サイト」の順番が伸びるのか
学習が止まりやすい最大の理由は、最初から難易度の高い“総合問題”に挑戦してしまうことです。Webサイト全体を作ろうとすると、レイアウト、配色、タイポ、余白、画像、UIパーツ、導線、レスポンシブ…と論点が一気に増え、どこでつまずいているのか分からなくなりがちです。
そこで、作る対象のスコープ（小→中→大）で段階を踏みます。
- バナー：1画面で完結。配色・タイポ・余白・視線誘導を短いサイクルで反復できる
- LP：縦長で情報量が増える。見出し設計、メリハリ、CTAなど“読ませて動かす”構成力が伸びる
- サイト：ページ間の関係まで考える。情報設計（IA）、ナビゲーション、コンポーネント設計など“設計力”が育つ
この順番の良いところは、学んだ基礎がそのまま次の制作物に使い回せる点です。バナーで身につけた配色ルールはLPでもサイトでも有効ですし、LPで作ったボタンやカードはサイトで資産になります。限られた時間でも積み上げが効くので、会社員の独学と相性が良い進め方です。
まず整える：Figmaは「最低限の機能」だけ覚えて作りながら伸ばす
Figmaは機能が多いぶん、「全部覚えてから作ろう」とすると止まります。最初は“作るために必要な機能だけ”で十分です。バナー→LP→サイトの順番で必要性が高いのは、主に次の項目です。
- フレーム（画面サイズ）と整列（Align）
- テキスト（スタイル化して見出し/本文を型にする）
- カラーstyle（色を増やしすぎないための管理）
- オートレイアウト（余白と並びを崩さない）
- コンポーネント（ボタンやカードを使い回す）
- 画像配置と書き出し（PNG/JPG/SVGの基本）
覚え方のコツは「操作を知る→その日のうちに制作で使う」をセットにすることです。たとえばオートレイアウトは、理解したらすぐにCTAボタン（文字＋余白＋アイコン）を作る。コンポーネントは、LPのボタンとカードを登録する。こうして“学習”を“制作”に直結させると、挫折しにくく身につきます。
また、同じ要素を3回作ると伸びます。1回目は模写、2回目は寸法を変える、3回目は配色とタイポだけ変える。これだけで「理解→再現→応用」に近づきます。
ステップ1：バナーで伸ばす（配色・タイポ・余白の基礎）
バナーは小さな面積で完結するため、上達に必要な反復回数を稼ぎやすい練習素材です。ここで鍛えるのは、デザインの土台になる配色・タイポ・余白。凝った装飾よりも、情報整理と読みやすさを優先すると伸びが速くなります。
おすすめは、バナーを「型」で作ることです。たとえば、①メインコピー（結論）②サブコピー（補足）③ベネフィット（短い箇条書き）④CTA（ボタン）という基本構成を固定し、テーマだけ変えて作ります。型が同じだと比較ができるので、「どこを変えると読みやすくなるか」を体で覚えられます。
配色はまず3色（ベース・メイン・アクセント）＋テキストのグレー濃淡で十分です。タイポはフォントを増やすより、サイズ・太さ・行間で差をつけた方が整います。余白は“詰めない”だけではなく、要素を塊にまとめて区切る意識が重要です。
バナー練習の課題例（初心者向け）
- 飲食店キャンペーン（割引・期間・CTA）
- オンライン講座募集（対象・ベネフィット・CTA）
- アプリDL訴求（特徴3つ・ボタン）
到達目標は「情報を詰め込みすぎず、視線が自然に流れるバナーを複数作れること」。ここができると、LPでの見出し設計が一気に楽になります。
ステップ2：LPで伸ばす（構成力・メリハリ・UIの基本）
LP（ランディングページ）は、Webデザインの実戦力が伸びやすい題材です。1画面で終わるバナーと違い、LPは縦長の構成で「読む順番」「納得の流れ」「行動の導線」を作ります。つまり、見た目に加えて“伝える設計”が必要になります。
まずやるべきは、セクションの目的を決めることです。たとえばファーストビューは「何のページで、誰に、どんな価値があるか」を一瞬で伝える場所。次に「悩みの言語化」、その次に「解決策」、そして「選ばれる理由（一般論としての根拠の示し方）」、最後にCTAを置く、といった流れを作ります。文章を詰める前に、見出し（セクションタイトル）だけ先に並べると迷いが減ります。
デザイン面では、LPはタイポと余白で読みやすさが決まります。見出し・本文・注釈の階層が曖昧だと、どれだけ見た目が良くても読まれません。Figmaでテキストスタイル（見出し/本文/注釈）を作り、サイズと行間を揃えるだけで完成度が上がります。
UIの観点では、ボタン、カード、FAQ、料金表など“よく出るパーツ”をコンポーネント化していく段階です。LPで作ったUIが、次のサイト制作でそのまま使える資産になります。
LP制作のミニ手順（型）
- ゴールを1つに絞る（問い合わせ／申し込み／DLなど）
- セクション見出しだけ先に並べる（文章は後でOK）
- 各セクションの役割を1行で定義する（例：不安を解消する）
- 同じパーツ（ボタン・カード）を繰り返し使って統一感を出す
- 最後に余白と文字サイズを整えて読みやすさを上げる
ステップ3：サイトで伸ばす（情報設計・ページ構造・コンポーネント設計）
サイト制作は、デザインの“総合力”が問われます。LPとの大きな違いは、ページが増える前提で迷わない構造を作ることです。ここで重要になるのが情報設計（IA：Information Architecture）で、どの情報をどのページに置き、どの順番で見せるかを決めます。見た目から作り始めると、後からページが増えたときに整合性が崩れやすくなります。
初心者の最初のサイトは、いきなり大規模にせず3〜5ページ構成に抑えるのがおすすめです（例：トップ／サービス／実績／料金／問い合わせ）。そして、ヘッダー、フッター、ボタン、カード、見出しブロックなどの共通パーツをコンポーネント化し、ページごとの差分だけ作る。この進め方だと、統一感と制作スピードが両立します。
レスポンシブの考え方も、最初から完璧を狙わなくて大丈夫です。まずはPCとスマホの2パターンを作り、スマホ側で文字サイズ・行間・タップしやすいボタンを意識します。見た目の美しさだけでなく、“使いやすいUI”をサイトで仕上げるイメージです。
配色・タイポ・UIを「センス」にしない勉強法
伸び悩む人ほど、感覚で選んでしまいがちです。ルールに寄せると再現性が出ます。ここでは、配色・タイポ・UIを「制作しながら」鍛えるやり方に絞って紹介します。
配色：3色＋テキストのグレーで回す
配色は、ベース（背景）・メイン（テーマ）・アクセント（強調）の3色が基本です。色数が増えると統一感が崩れます。例外として、テキスト用にグレーの濃淡を用意するのはOKです。
練習は、好きなLPを1つ選び、色を拾って「この色は何の役割か」を言語化します。「ボタンだけ」「見出しだけ」「背景だけ」など、役割が見えると自分の作品でも同じ使い分けができます。
タイポ：フォント選びより「階層」が最重要
タイポグラフィは、フォントの種類よりも、見出し→本文→注釈の階層で決まります。まずはフォントを増やさず、サイズ・太さ・行間の差でメリハリを作ります。
おすすめ練習は、同じ内容で2パターン作ることです。Aはサイズ差を大きく、Bは差を小さく。どちらが読みやすいかを比較すると、階層の感覚が身につきます。
UI：よく使うパーツを10個作って使い回す
UIは暗記ではなく、パーツの引き出しです。最初は次の10個を作り、LPとサイトで繰り返し使ってください。Figmaでコンポーネント化すると、修正が一括で反映されます。
- ボタン（通常/強調/無効想定）
- 見出しブロック（タイトル＋補足）
- カード（画像＋タイトル＋本文）
- 特徴3つ（アイコン＋短文）
- 料金/プラン（シンプルでOK）
- FAQ（アコーディオン想定）
- フォーム（入力欄＋ラベル）
- ヘッダー/ナビ
- フッター
- CTAセクション
具体例：未経験の20代会社員が「学習迷子」から抜ける進め方
ここでは、平日は1日30〜60分、休日に2〜3時間触れる20代会社員（未経験・独学、PCあり、Figma使用）を想定します。狙いは「順番を決めて、作品を積み上げる」ことです。
最初の2週間は、Figmaの最低限（フレーム/テキスト/オートレイアウト/書き出し）を触りながら、バナーを10枚作ります。1枚に時間をかけすぎず、同じ型でテーマを変えて量産するのがポイントです。作るほど、配色や文字サイズの癖が見えてきます。
次に、LPを1本作ります。最初は架空でOKです。「オンライン英会話」「美容室」「学習アプリ」など題材を決め、ゴールは1つ（申し込み）に絞ります。セクション見出しを先に決め、ボタンやカードをコンポーネント化。最後に“読みやすさ”だけを見直して余白と階層を整えます。
最後に、LPで作ったパーツを流用して、3〜5ページのサイト構成に広げます。トップはLPの要素を短くまとめ、サービス/料金/問い合わせはLPのセクションをページ化するイメージです。ゼロから設計しない分、迷いが減って完成まで持っていきやすくなります。
この流れの良い点は、途中で止まっても「バナー10枚」「LP1本」など成果物が残り、再開しやすいことです。学習は“気合い”より“再開しやすさ”が効いてきます。
ポートフォリオにどう載せる？バナー→LP→サイトを「武器」に変える見せ方
未経験から副業や転職を意識するなら、学習の成果はポートフォリオとして見せられる形にしておくと強いです。このロードマップは、そのままポートフォリオの構成にも向いています。
- バナー10枚：「バリエーションの幅」を示せる。目的が違う（キャンペーン/募集/DLなど）バナーを並べると説得力が出る
- LP1本：「構成力」と「UIの統一感」を示せる。ファーストビュー→CTAまでの流れが作れるのは強み
- サイト（3〜5ページ）：「設計力（IA）」と「コンポーネント運用」を示せる。ページが増えても崩れない設計が伝わる
載せるときは、完成画像だけでなく意図を一言添えるのが効果的です。「アクセントカラーはCTAに限定」「見出し階層はH1/H2/本文の3段で統一」「カードをコンポーネント化して変更に強い設計」など、判断の根拠が書けると“勘で作っていない”ことが伝わります。
また、ポートフォリオは数を盛るより、同じルールで作れているかが見られやすいです。色数、文字階層、余白のルールを揃えるだけでも、まとまりが出ます。
すぐできるチェックリスト：学習が前に進む人の共通点
学習を続けるコツは「意思」ではなく「仕組み」にすることです。以下をチェックして、できていないところだけ直すと迷いが減ります。
- 今日作るものが1つ決まっている（バナー1枚、LPの1セクションなど）
- 参考デザインを1つ選び、真似する点を言語化している（配色、余白、文字階層など）
- 色は3色＋テキストのグレー濃淡で管理している
- 見出し/本文/注釈の階層が分かる（サイズ・太さ・行間の差がある）
- 同じUIパーツを使い回している（ボタンやカードが毎回違わない）
- 作ったあとに“読みやすさだけ”を見直す時間がある
- 週に1回、第三者の目に出して改善している（添削、友人、コミュニティなど）
特に「参考の言語化」と「階層の確認」は、伸びる人ほど丁寧です。デザインは当てずっぽうより、検証した回数がものを言います。
よくある失敗5選と回避策
失敗1：最初からサイトを作って挫折する
サイトは論点が多く、つまずきポイントが見えません。回避策は、ロードマップ通りにバナー→LP→サイトでスコープを増やすこと。サイトを作りたい場合でも、まずはトップページ相当をLPとして作り、あとからページ分割すると進めやすいです。
失敗2：参考を集めすぎて手が動かない
参考が多いほど選べずに止まります。回避策は、1制作につき参考は1つに絞ること。さらに「配色だけ」「余白だけ」など、真似する対象を1〜2個に限定すると作業が進みます。
失敗3：色とフォントを増やして統一感が崩れる
初心者ほど“足し算”で整えようとしがちです。回避策は、色は3色（＋グレー濃淡）、フォントは1〜2種まで。変えるのは種類ではなく、サイズ・太さ・行間にします。
失敗4：毎回ゼロから作って同じミスを繰り返す
ボタンやカードの形が作品ごとに違うと、学習が積み上がりません。回避策は、Figmaでコンポーネント化して自分のUIキットを育てること。作るたびに“資産が増える”状態を作れます。
失敗5：完成させずに次の教材へ移る
“分かった”より“作り切った”が強いです。回避策は完成の定義を下げること。LPなら「ファーストビュー〜CTAまで通しで置けたら完成」。そのあと改善すればOKです。完成→改善の順にすると、前に進めます。
向いている人／向いていない人（ただし対策は可能）
Webデザインは、才能よりも改善の積み重ねが効きやすい分野です。ただ、向き不向きの“傾向”はあります。自分の特性に合わせて進め方を調整すると続けやすくなります。
向いている人の傾向
- 余白や文字サイズの微調整を“検証”として楽しめる
- 参考を観察して「なぜこうなっているか」を考えられる
- フィードバックを受けて直すことに抵抗が少ない
- 小さく作って改善するのが得意（完璧主義で止まりにくい）
向いていないと感じやすい人の傾向（よくあるつまずき）
- 最初から独自性を出そうとして手が止まる（→まず模写・型でOK）
- 判断に迷うと進めない（→ルール化：色3つ、階層3段など）
- 長期目標だけで燃え尽きる（→バナー3枚など短期目標に分割）
「向いていない」は、やり方が合っていないだけのことも多いです。今回のロードマップは迷いを減らすための型なので、まずは型通りに進めてください。
まとめ：チェックリストと次にやること
Webデザイン 学習 順番で迷ったら、まずはバナー→LP→サイトの流れでスコープを広げるのがおすすめです。バナーで配色・タイポ・余白の基礎体力をつけ、LPで構成とUIを鍛え、サイトで情報設計（IA）とコンポーネント運用を仕上げる。この順番なら、学んだことが次にそのまま活きます。
この記事はFigmaでのデザイン（UIデザイン/デザインカンプ作成）を中心に解説しました。コーディング（HTML/CSS）まで含めるかどうかは目標次第ですが、デザインの型が固まってから実装に進むと、遠回りが減りやすくなります。
次にやること（3ステップ）
- ステップ1：Figmaでバナー用テンプレを作る（色3つ＋テキスト階層＋フレーム）
- ステップ2：同じ型でバナーを3枚作る（参考は1つ、真似する点を言語化）
- ステップ3：LPの見出し構成だけ先に作る（セクション見出し→CTA→共通パーツ作成）
