Webデザイン独学ロードマップ｜何から始める？無料教材・勉強法

Webデザインは独学できます。ただし、Webデザイナー全員がHTML/CSSを書く必要はありません。未経験者はデザインの基礎 → Figmaで画面設計までを共通で学び、その後は目標に応じて、デザイン専業なら作品制作・レビューへ、サイト制作まで担当するならHTML/CSS・公開へ進みます。

Webデザインは独学できる。ただし「できた」の基準を作品で決める

Figma等のツール操作、デザインの基礎、HTML/CSS、レスポンシブデザインは、公式ドキュメントや教材を使って独学できます。ただし、HTML/CSSが必要かどうかは担当範囲で変わります。画面設計だけを担当する場合は必須ではありませんが、実装上の制約を理解していると、開発者へ渡しやすいデザインを作れます。

独学の進捗は、知っている用語の数ではなく、次の成果物で確認します。

• 参考サイトを見て、情報の優先順位を説明できる
• FigmaでPCとスマホの画面を設計できる
• 目的、対象者、工夫、改善点を文章で説明できる
• デザイン専業：プロトタイプと仕様を第三者へ共有できる
• サイト制作：HTML/CSSで画面を再現できる
• サイト制作：画面幅が変わっても読みやすく表示できる

最初から「転職できる」「副業で稼げる」を合格基準にすると、必要な範囲が広すぎます。まずはオリジナル1ページのデザインを完成させ、第三者の指摘を受けて直せる状態までを第1区間にします。実装が目標に含まれる人だけ、HTML/CSSと公開まで続けます。

勉強を始める前に、4つの到達ルートから1つ選ぶ

Webデザインは制作物によって必要な技術が変わります。全部を同時に始めず、最初の作品で作りたいものを1つ決めます。

Webデザイン独学で学ぶ内容は、ツール操作だけではない

FigmaやPhotoshopの操作だけを覚えても、誰に何を伝える画面かは決まりません。最初の作品では、次の内容を必要な順に学びます。

Webデザイン独学に必要な環境とツール

最初から高性能なパソコン、有料ソフト、拡張機能を多く揃える必要はありません。まず現在のパソコンでFigmaが動くかを確認し、作品を作る段階で不足したものだけ追加します。

Figma公式のシステム要件では、Figmaは主にブラウザーで動き、デスクトップOSで利用できます。スマートフォンはファイル編集用ではなく閲覧中心になるため、独学の制作にはパソコンを使います。マウスや外部モニターは必須ではなく、必要性を感じてから追加します。

Figma公式は、Webサイト等のデザイン作成・共有・テストにFigma Designを使えると説明しています。Starterプランには無料枠がありますが、ファイル数や一部機能に制限があります。料金・制限は変わるため、開始時にFigma公式のStarterプラン概要を確認してください。

Photoshop等の有料ソフトは、学びたい制作物や応募先で必要になってから契約してもかまいません。月額だけでなく年間契約、解約条件、学生・教職員向け条件をAdobe公式のプラン比較で確認します。

独学方法は5つ｜YouTube・無料サイト・本の選び方

Webデザインは本を読まなくても始められます。YouTubeや無料の公式コースでも、画面を見ながら操作し、作品まで作れば独学できます。違いは「無料か有料か」だけでなく、学ぶ順番、情報の探しやすさ、質問・添削の有無です。

YouTubeで独学するときの選び方

「Webデザイン 初心者」の動画を無作為に見るのではなく、今の段階に合わせて「レイアウト 基礎」「Figma Auto Layout 初心者」「HTML CSS 1ページ制作」のように検索します。公開日、使用ツールのバージョン、完成物、素材配布の条件を確認し、同じテーマの動画は1本または1シリーズに絞ります。

Figma公式の初心者向けコースはYouTube動画を使ったハンズオン形式で、無料のStarterプランを使い、ポートフォリオサイトをゼロから作ります。まず無料動画で試したい人は、このように「1つの完成物まで順番がつながっているコース」を主教材にできます。

無料の学習サイトと本は、段階ごとに使い分ける

独学では、勉強順だけでなく「その段階で何を教材にし、何を作ったら次へ進むか」まで決めます。教材を何冊も並行する必要はありません。各段階で主教材を1つ選び、分からない点だけ公式リファレンスで調べる形にします。

以下は全部買うためのリストではありません。無料教材で進め、説明が合わない段階だけ本を1冊足します。本を使う場合も、読了をゴールにせず、章ごとに自分の1ページへ内容を使います。

無料で始める組み合わせ

まずFigma公式の無料動画コースで画面を作ります。サイト制作ルートへ進む人だけ、MDN、無料動画、学習サイトのいずれか1つでHTML/CSSを学びます。この組み合わせで小さな作品を作ってから、説明が難しい、学ぶ順番を一冊にまとめたいと感じた段階で本を追加します。

本を使って進める組み合わせ

デザインの判断に迷う人はWebデザイン基礎の本、Figmaの操作で止まる人はFigmaの本、サイト制作まで行う人はHTML/CSSの本を選びます。3冊を最初に買うのではなく、今止まっている段階の1冊だけを使います。

未経験からのWebデザイン独学ロードマップ

順番は「知識を全部入れてから制作」ではなく、短い学習と小さな制作を交互にします。各段階の終わりに成果物を1つ残し、次へ進む条件を決めます。

ステップ1：目的と参考サイトを決める

最初に架空の依頼文を作ります。たとえば「地域の個人ピアノ教室が、体験レッスンの対象・料金・申込方法をスマホで分かりやすく伝える1ページ」のように、対象者と行動まで決めます。

参考サイトは、色や装飾をコピーするためではなく、情報の順番を観察するために使います。「最初に何を伝えているか」「どこで信頼材料を見せるか」「ボタンの前に何を説明しているか」をメモします。

ステップ2：デザインの基礎を使ってワイヤーを作る

配色パターンを集める前に、見出し、本文、画像、ボタンの優先順位を白黒で組みます。余白、整列、反復、コントラストを一つずつ確認し、なぜその位置と大きさにしたのかを言葉にします。

この段階の完成物は、トップ、特徴、料金、よくある質問、申込導線を含むワイヤーです。見た目が華やかでも、対象者が次に何を読めばよいか分からなければ次へ進みません。

ステップ3：FigmaでPC・スマホ画面を作る

Figmaでは、フレーム、文字スタイル、色、画像、Auto Layout、コンポーネントを使い、同じボタンやカードを繰り返し作り直さない構成にします。Figma公式の初心者向け案内でも、レイヤー、Auto Layout、コンポーネント、プロトタイプ接続を基礎として扱っています。

PCだけを作ってから縮小するのではなく、スマホで情報の優先順位がどう変わるかを確認します。長い見出し、2行のボタン、画像の縦横比、表の横幅など、内容が変わったときに崩れる箇所を先に試します。

ステップ4：デザイン専業とサイト制作でルートを分ける

デザイン専業ルートでは、HTML/CSSの実装は必須にしません。架空の依頼に対するオリジナル画面、クリックできるプロトタイプ、文字・色・余白・部品のルール、開発者へ伝える仕様を揃え、第三者レビューへ進みます。

サイト制作ルートでは、Figmaで作った画面をHTML/CSSで実装します。MDNのウェブ開発学習は、HTMLで内容と構造を作り、CSSで見た目を整え、JavaScriptで操作を加える順に学べる構成です。最初の1ページではHTMLとCSSを優先します。

HTMLでは見出し、段落、リスト、リンク、画像、フォームを意味に合う要素で組みます。CSSでは文字、色、余白、ボックスモデル、Flexbox、Gridを使い、Figmaの数値を写すだけでなく、内容が増減しても破綻しないレイアウトを目指します。

ステップ5：担当範囲に合う方法で品質を確認する

デザイン専業ルートでは、PC・スマホの画面、状態変化、クリック後の遷移、文字や画像が増減した場合のルールを確認します。プロトタイプを第三者に操作してもらい、目的の情報と行動へ迷わず進めるかを見ます。

サイト制作ルートでは、レスポンシブ、キーボード操作、画像の代替テキスト、色の見分けやすさ、表示崩れを確認します。レスポンシブデザインは、特定の端末1台へ合わせる作業ではありません。MDNは、異なる画面サイズや解像度で使いやすく表示するための手法として説明しています。

Chrome DevTools等で、DOMとCSS、複数の画面幅、コンソールエラーを確認します。アクセシブルな設計・実装例はW3C WAIのアクセシビリティチュートリアルを参照できます。

ステップ6：作品と改善過程を共有する

デザイン専業ルートは、閲覧できるプロトタイプとケーススタディを共有します。サイト制作ルートは公開URLを作り、スマホとPC、表示速度、リンク切れを確認します。どちらも、架空案件であること、使用素材の出典・ライセンス、自分の担当範囲を明記します。

最後に「課題」「対象者」「目的」「情報設計」「デザイン上の判断」「実装範囲」「指摘と修正」「今後の改善」を1ページにまとめます。完成画像だけでなく、判断と改善過程を説明できることが、次の作品やポートフォリオにつながります。

学習期間は週の時間から逆算する

「3か月で習得」のような期間だけを見ても、1週間に使える時間が違えば意味が変わります。以下はサイト制作ルートで、最初のオリジナル1ページをデザイン・実装・公開し、ケーススタディ下書きを作るまでを120時間の計画単位としてカレンダーに置き換えた例です。デザイン専業ルートには、そのまま適用しません。

大切なのは計算式そのものではなく、120時間分の学習・制作時間を生活の中に確保できるかです。週に使える時間が決まれば、下表からカレンダー上の完了目安を確認できます。

予定どおり進まない場合は、睡眠や仕事を削る前に制作範囲を減らします。複数ページを1ページにする、アニメーションを後回しにする、JavaScriptやWordPressを第2区間へ移すと、核となる作品を完成させやすくなります。

サイト制作ルートを週10時間・12週間で進める計画例

教材は「見る時間」より「作って直す時間」を多くする

同じ教材を何度も見直してから制作に入ると、知識は増えても自分で決める練習が不足します。1つの章を学んだら、その日のうちに小さな制作へ使います。

レビュー相手がいない場合は、1日空けて自分で点検し、家族や知人には「好きか」ではなく「誰向けの何のページに見えるか」「次にどこを押すと思うか」を聞きます。専門的な添削の代わりにはなりませんが、伝わり方の問題は見つけられます。

独学で挫折しやすい7つの原因と対策

独学のメリット・デメリットと、支援を使う判断基準

独学は、費用を抑えやすく、生活に合わせて教材と時間を選べることがメリットです。一方で、学習順、質問、締切、作品の評価を自分で用意する必要があります。独学かスクールかは意志の強さではなく、現在足りない機能で決めます。費用を払う意味が出やすいのは、順序、締切、作品添削、質問、ポートフォリオ、キャリア支援が必要なときです。

独学から転職・副業へ進む前に確認すること

教材を終えただけで仕事の準備が完了するわけではありません。応募や案件提案へ進む前に、少なくとも自分の制作範囲と判断を説明できる作品を用意します。

• 模写だけでなく、自分で要件と構成を決めた作品がある
• 対象者、目的、情報の順番、デザインの理由を説明できる
• PC・スマホ画面と、必要な状態変化や操作を確認している
• 指摘を受け、修正前後と修正理由を記録している
• 架空案件・模写・実案件を区別し、自分の担当範囲を明記している
• 画像・文章・フォント等の出典と利用条件を確認している

このチェックは仕事獲得を保証する基準ではありません。応募先や案件によって必要な作品、ツール、実装範囲は変わるため、募集要項を確認し、不足する内容を次の学習課題にします。

よくある質問

Webデザインの独学は何から始めればよいですか？

最初に作りたい1ページと対象者を決め、参考サイトの情報構造を観察します。その後、白黒のワイヤーとFigmaの画面を作ります。デザイン専業なら作品制作とレビューへ、サイト制作まで担当するならHTML/CSSの実装へ進みます。

YouTubeだけでもWebデザインを独学できますか？

最初の作品までは進められます。単発動画を次々に見るのではなく、1つの完成物まで順番がつながるシリーズを主教材にし、動画と同時に手を動かします。最後に見本とは異なる対象者・文章・画像で作り直し、第三者の指摘を受けて修正します。

本とYouTubeはどちらがおすすめですか？

操作を画面で見たい、まず無料で試したい人はYouTubeが向いています。学習順と索引がほしい、制作中にすぐ見返したい人は本が向いています。両方を同時に進める必要はなく、今の段階の主教材を1つ選びます。

独学を始めるのに高性能なパソコンは必要ですか？

最初から買い替えるのではなく、現在のパソコンと最新ブラウザーでFigmaの公式システム要件を満たし、練習用ファイルを問題なく編集できるか確認します。スマートフォンは表示確認に使えますが、Figmaの制作環境としてはパソコンを使います。

無料でどこまで学べますか？

Figmaの画面設計、HTML/CSSの基礎、最初の小さな作品までは、公式コースや無料範囲のある学習サイトで進められます。有料になり得るのは、本、学習サービスの追加範囲、画像編集ソフト、独自ドメイン・ホスティング、添削やキャリア支援です。契約前に無料範囲、更新、解約条件を確認します。

HTML/CSSとFigmaはどちらを先に学びますか？

まずFigmaで小さな画面を設計します。デザイン専業を目指す場合、HTML/CSSの実装は必須ではありませんが、レスポンシブや要素の構造を理解しておくと開発者へ渡しやすくなります。サイト制作まで担当する場合は、その画面をHTML/CSSで実装し、設計と実装を往復します。

JavaScriptやWordPressも必要ですか？

最初の静的な1ページには必須ではありません。動きやフォーム処理、CMS更新が目標に必要になった段階で追加します。先にHTML/CSSとレスポンシブを理解しておくと、表示崩れやテーマ編集の原因を切り分けやすくなります。

Webデザイン独学に無料教材だけで足りますか？

基礎を試し、最初の小さな作品を作るところまでは無料の公式教材でも進められます。作品添削、締切、転職・副業支援が必要なら、その機能に対して書籍、講座、メンター、スクールを比較します。

何か月で仕事にできますか？

一律には決まりません。120時間は、Layer Miraiがサイト制作ルートの最初のオリジナル1ページと制作記録を作るために置いた計画目安です。「一般的なWebデザイン習得時間」や、就職・案件獲得を保証する時間ではありません。目標職種、既存スキル、作品の質、応募・営業活動によって必要期間は変わります。