Webデザイン基礎とは｜このカテゴリで分かること
Webデザインの基礎を、見た目の好みではなく「読みやすさ」と「操作しやすさ」の観点から整理するカテゴリです。配色とコントラスト比、行間と文字サイズ、ボタンの設計、余白とグリッドの4つを、CSS の書き方とあわせて扱います。
「Webデザイン 基礎」で調べる人は、センスに頼らず再現できるルールを求めていることが多いです。ここでは数値や基準で判断できる項目を中心に取り上げ、コーディングする人がデザインの意図を理解するための地図として使えるようにしています。アクセシビリティと重なる話題は UI・UX・アクセシビリティ でも扱います。
読む順番（おすすめの順路）
- コントラスト比とは｜WCAG基準と配色の決め方 … 配色は見た目の印象と可読性を同時に左右し、判断基準が数値で示せるため。
- line-heightの決め方｜日本語の行間・文字サイズ・行の長さ … 本文の読みやすさは行間と文字サイズで決まり、サイト全体に影響するため。
- 余白とグリッドの設計｜8pxスケールとCSSのgap・auto-fit … 余白の規則を決めると、画面全体の整い方が変わるため。
- ボタンデザインの基本｜サイズ・色・状態・CSSの書き方 … 色、余白、文字の学びを集約して、操作要素の設計に応用するため。
少ない記事数ですが、この順は「色」「文字」「間隔」「部品」と、土台から部品へ積み上げる流れになっています。
押さえておきたいポイント（リサーチ）
W3C の WCAG 2.2 の解説で確認できる基準を示します。基準の版や内容は更新されるため、最新は公式で確認してください。
| 項目 | WCAG 2.2 で確認できる内容 |
|---|---|
| 通常のテキストのコントラスト比 | 4.5:1 以上が必要（達成基準 1.4.3、レベル AA） |
| 大きな文字のコントラスト比 | 18pt 以上、または太字 14pt 以上（日本語などの CJK フォントでは同等の大きさ）は 3:1 以上で足りる |
| 計算の考え方 | コントラスト比は色相ではなく相対輝度の比で決まる |
| ポインタ操作の対象サイズ | 原則として 24×24 CSS ピクセル以上（達成基準 2.5.8、レベル AA）。十分な間隔があるなどの例外がある |
数値を満たすことは最低ラインであり、ブランドの印象や使われる環境によってはさらに余裕を持たせる判断もあります。
よくある疑問
Q. コントラスト比はどう測ればよいですか。
A. 文字色と背景色から計算できます。基準値と計算の考え方、配色の決め方は コントラスト比とは｜WCAG基準と配色の決め方 にあります。
Q. 日本語の本文に適した行間はどのくらいですか。
A. 文字サイズや行の長さで変わります。目安と理由は line-heightの決め方｜日本語の行間・文字サイズ・行の長さ で解説しています。
Q. ボタンはどのくらいの大きさにすればよいですか。
A. 指やポインタで押しやすい大きさと、状態の変化が必要です。ボタンデザインの基本｜サイズ・色・状態・CSSの書き方 で、サイズと状態ごとの設計をまとめています。
Q. 余白に決まりはありますか。
A. 8px などの基準単位を決めて揃える方法が一般的です。余白とグリッドの設計｜8pxスケールとCSSのgap・auto-fit で具体例を紹介しています。
編集部の見解
デザインの基礎で大切なのは、見た目を一つずつ決めるのではなく、色・文字・間隔のルールを先に決めて再利用することだと考えます。ルールがあれば、ページが増えても統一感が保たれ、コーディングの手戻りも減ります。一方で、コントラスト比などの基準値は「満たせば十分」ではなく、最低限の目安と捉えるのが安全だと感じます。数値で確かめられる部分は数値に任せ、残りの判断に時間を使うという進め方を勧めます。