Webデザインの勉強法｜何から始めるか・上達する練習方法と無料で学べる公式教材
Webデザインの勉強は「基本の4原則と配色・文字の決まりを知る → 実在するサイトをFigmaでトレースする → HTML/CSSで自分の手で組む → 架空のサイトを1つ作り切る」の順に進めると、何から始めればよいか迷いません。上達の近道は、見本を見ながら同じものを作る「練習」の量を増やすことです。
この記事では、Webデザインの勉強を4つの段階に分け、それぞれで何を練習すればよいか、無料で使える公式の学習サイトとツール、上達を確かめるチェック方法を説明します。料金やプランは各公式サイトで確認した内容です（2026年10月15日確認）。
Webデザインの勉強で身につけること
Webデザインは「見た目をきれいにすること」だけではありません。情報を整理し、読みやすく、迷わず操作でき、どの画面サイズでも崩れないページを設計する仕事です。勉強する内容は大きく4つに分かれます。
| 分野 | 主な中身 | 練習のしかた |
|---|---|---|
| デザインの基礎 | 近接・整列・反復・対比、余白、配色、文字（タイポグラフィ） | 既存サイトの観察とトレース |
| デザインツール | Figma（画面設計）、画像編集ツール | トレース、架空サイトのデザイン |
| 実装の基礎 | HTML・CSS、レスポンシブデザイン | 模写コーディング |
| 使いやすさ | UI/UX、アクセシビリティ（色のコントラストなど） | チェックリストで自分の作品を点検 |
社会人が仕事と並行して学ぶ場合も、学生が最初に取り組む場合も、順番は同じです。違うのは1回に使える時間だけなので、「平日は30分のトレース、週末に作品づくり」のように、短い練習を続けられる形にするのが現実的です。
段階1：基本の原則を知る（最初の1〜2週間の目安）
レイアウトの4原則
デザインの入門書でよく紹介されるのが、近接・整列・反復・対比の4つです。
- 近接：関係のある要素は近くに、関係のない要素は離して置く
- 整列：要素の端や中心をそろえ、見えない線でつなぐ
- 反復：見出しやボタンなど、同じ役割のものは同じ見た目にする
- 対比：大事なものとそうでないものの差（大きさ・太さ・色）をはっきりつける
読むだけで終わらせず、普段見ているWebサイトのスクリーンショットを撮り、「どこがそろっているか」「何がいちばん目立つか」を書き込んでみてください。原則を知ってから見ると、うまく作られたサイトほど、これらが徹底されていることに気づきます。
配色と文字
配色は、ベースの色・メインの色・アクセントの色の3つから始め、使う色の数を絞ります。文字は、本文の大きさと行間を決め、見出しとの差をはっきりつけるだけで読みやすさが大きく変わります。フォントはGoogle Fontsで日本語フォントを含む多くの書体を無料で試せます。
段階2：Figmaでトレースする
Webデザインの「練習」としてもっとも効果があるのが、実在するサイトを見ながら同じ画面をデザインツールで作り直すトレースです。余白の取り方や文字の大きさの比率を、数値として手で確かめられます。
ツールは、ブラウザでも動き、無料のプランがあるFigmaが始めやすいでしょう。公式の料金ページでは、無料の「スターター」プランにドラフト数無制限、UIキットとテンプレートが含まれると案内されています。有料のプロフェッショナルプランは、年払いの場合フルシート1人あたり月16ドルです（米ドル表記、2026年10月15日確認）。学習段階では無料プランで十分です。操作の基本はFigmaの使い方入門でまとめています。
トレースの進め方
- 好きなサイトのトップページを1つ選び、スマホ幅とPC幅でスクリーンショットを撮る
- Figmaに貼り、半透明にした上から、見出し・本文・ボタン・画像の枠を同じ位置に作る
- 文字の大きさ、行間、余白の数値を書き出し、どんな規則があるかを探す（8の倍数でそろっている、など）
- スクリーンショットを外して見比べ、ずれている箇所を直す
トレースした作品は練習用です。他人のサイトのデザインを自分の作品として公開したり、ポートフォリオに載せたりしないよう注意してください。
段階3：HTML/CSSで組んでみる
デザインツールの中だけで完結させず、HTMLとCSSで実際のページとして組むと、「この余白はブラウザではどう実現するのか」「画面幅が変わったら崩れないか」が分かるようになります。実装を担当しない場合でも、作れる範囲を知っているデザイナーはエンジニアとのやり取りがスムーズです。
無料で体系的に学べる公式の教材として、次の2つがあります。
- MDN「ウェブ開発の学習」：HTML・CSS・JavaScriptの基礎から、CSSのレイアウトまでを順に学べるモジュール
- web.dev「Learn Responsive Design」（英語）：メディアクエリ、ページ全体のレイアウト、部品単位のレイアウトなど、レスポンシブデザインの考え方を学べるGoogleのコース
練習としては、段階2でトレースしたページを、今度はHTML/CSSで再現する「模写コーディング」がおすすめです。デザイナーがどこまでプログラミングを学ぶべきかはWebデザイナーはプログラミングをどこまで学ぶべき？で詳しく扱っています。
段階4：架空のサイトを1つ作り切る
トレースと模写である程度手が動くようになったら、見本のないオリジナルのサイトを作ります。「近所のパン屋」「架空の英会話教室」など、目的と利用者がはっきりした題材を自分で決めるのがコツです。
- 誰が、何のために見るサイトかを1〜2行で書く
- 必要なページと、トップページに載せる情報の優先順位を決める
- 手書きやFigmaで配置だけの下書き（ワイヤーフレーム）を作る
- 配色・文字・余白のルールを決めてデザインを仕上げる
- HTML/CSSで組み、スマホとPCで表示を確認する
- 次の章のチェックで点検し、直す
完成させた作品は、それぞれに「誰のための何か」「なぜこの配色・配置にしたか」を説明する文章を付けると、ポートフォリオとして使えます。転職を考えている場合の準備はWebデザイナーへの転職ガイドを参考にしてください。
上達を確かめるチェック：色のコントラストを計算してみる
「おしゃれだけど読みにくい」デザインになっていないかは、感覚ではなく基準で確かめられます。代表的なのが文字と背景のコントラスト比です。Webアクセシビリティの国際的なガイドラインWCAG 2.2では、通常の文字は少なくとも4.5:1、大きな文字は3:1のコントラスト比を求めています（WCAG 2.2 日本語訳（ウェブアクセシビリティ基盤委員会）の達成基準1.4.3）。
同じ文書にある相対輝度とコントラスト比の定義どおりに、Pythonで計算してみます。
def luminance(hex_color):
rgb = [int(hex_color[i:i + 2], 16) / 255 for i in (1, 3, 5)]
lin =
return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2]
def contrast(fg, bg):
l1, l2 = sorted([luminance(fg), luminance(bg)], reverse=True)
return (l1 + 0.05) / (l2 + 0.05)
for fg, bg in [("#000000", "#FFFFFF"), ("#777777", "#FFFFFF"), ("#767676", "#FFFFFF"), ("#FFFFFF", "#FF8C00")]:
r = contrast(fg, bg)
print(f"{fg} on {bg}: {r:.2f}:1", "OK" if r >= 4.5 else "NG")実行結果：
#000000 on #FFFFFF: 21.00:1 OK
#777777 on #FFFFFF: 4.48:1 NG
#767676 on #FFFFFF: 4.54:1 OK
#FFFFFF on #FF8C00: 2.33:1 NG白い背景に#777777の灰色の文字はわずかに基準に届かず、1段階だけ濃い#767676なら基準を満たします。オレンジの背景に白い文字は、目立つボタンでよく見かけますが2.33:1しかありません。デザインツールにもコントラストを確認するプラグインがありますが、一度自分で計算しておくと、色を選ぶときの感覚が変わります。色のコントラストの考え方はMDN「色のコントラスト」でも解説されています。
アクセシビリティ全体を初めて学ぶなら、デジタル庁が公開しているウェブアクセシビリティ導入ガイドブック（2025年10月16日策定）が、専門用語を抑えた図解中心の資料です。法改正などWebデザイナーに関わる最近の変化はWebデザイナーが押さえるべき最新の変化にまとめています。
独学・スクール・資格の使い分け
| 方法 | 向いている人 | 気をつけること |
|---|---|---|
| 独学（公式教材＋トレース） | 自分で毎日の練習を続けられる人 | 作品を見てもらう相手がいないと、癖に気づきにくい |
| スクール・講座 | 期限を決めて学びたい人、質問できる環境がほしい人 | 料金と、作品へのフィードバックがどれだけあるかを確認する |
| 資格の勉強 | 学ぶ範囲の目安がほしい人 | 資格だけでは作品の代わりにならない |
国家検定のウェブデザイン技能検定については、ウェブデザイン技能検定とは？で試験の内容と勉強方法を説明しています。どの方法を選んでも、上達を決めるのは作った数と、作ったものを点検して直した回数です。
よくある質問
Q. Webデザインは何から勉強すればよいですか？
近接・整列・反復・対比の4原則と、配色・文字の基本を知ったうえで、実在するサイトをFigmaでトレースする練習から始めるのがおすすめです。その後HTML/CSSで組み、最後に架空のサイトを1つ作り切ります。
Q. 無料で使える勉強サイトはありますか？
HTML・CSSの基礎はMDNの「ウェブ開発の学習」、レスポンシブデザインはweb.devの「Learn Responsive Design」（英語）で無料で学べます。デザインツールのFigmaにも無料のスタータープランがあります。
Q. Webデザインが上達する練習方法は？
見本のサイトを同じ数値で作り直すトレースと、それをHTML/CSSで再現する模写コーディングです。作ったものを、文字と背景のコントラスト比などの基準で点検して直すと、感覚に頼らない上達につながります。
Q. 社会人でも独学でWebデザインを身につけられますか？
公式の無料教材と無料のツールで学ぶことはできます。仕事と並行する場合は、平日は短いトレース、週末に作品づくりのように時間を分け、作品を人に見てもらう機会をつくると続けやすくなります。
まとめ
Webデザインの勉強は、原則を知る、トレースする、HTML/CSSで組む、オリジナルを作り切る、の4段階で進めます。どの段階でも、読むより手を動かす時間を多くし、コントラスト比のような基準で自分の作品を点検することが上達の近道です。実装まで手を広げたい場合は、通学型のスクールで質問しながら学ぶ方法もあります。テックジムは東京本校（永田町）で、自分のペースで課題を進め、つまずいたらトレーナーに質問できる対面・通学型のプログラミングスクールで、無料Python講座・Claude Code講座から試せます。
プログラミング学習に興味がある方は、まずは無料体験会へ
