階層、余白、コントラスト、整列、近接、タップ領域という6つのWebデザインの原則を、切り替えられるライブのビフォーアフターと、修正の裏にあるCSSで紹介します。
良いWebデザインは、主に6つの習慣から生まれます。明確な視覚的階層でコンテンツに優先順位をつける、十分な余白をとる、テキストのコントラストを4.5:1以上に保つ、要素を共通の端にそろえる、関連する項目を近くにまとめる、タップ領域を24ピクセル四方以上にする、の6つです。下の各デモをビフォーとアフターで切り替えて、違いを確かめてください。
6つの原則と、よく使われるCSSでの修正方法
デザインの原則を扱う記事の多くは、言葉とストック写真で説明しています。ここでは、各原則を小さな商品カードやフォームとして、崩れた状態と修正後の状態の2通りで描いています。2つを切り替えて、何が変わったのかを正確に確認できます。
日々の作業で最も重要なのは、階層、余白、コントラスト、整列、近接、押しやすいタップ領域です。これらをまとめるのが一貫性で、同じ余白、文字サイズ、色をすべてのページで繰り返し使うことです。
視覚的階層とは、人がページ上のものに気づく順番のことです。デザイナーはサイズ、太さ、色、位置、余白でこれをコントロールし、見出しが最初に目に入り、補足情報が次に続き、メインのアクションが見つけやすくなるようにします。
WCAG 2.2の達成基準1.4.3（レベルAA）では、通常のテキストで4.5:1以上、大きなテキストで3:1以上が求められます。大きなテキストとは、18ポイント以上、または太字で14ポイント以上と定義されています。
文字の多いページを人がよく読み流す動きを表したものです。上部を横に読み、少し下でもう一度横に読み、その後は左側を下へたどります。実践的な教訓は、重要な言葉を見出しや行の先頭に置き、大切なポイントを段落の途中に埋もれさせないことです。
WCAG 2.2の達成基準2.5.8（レベルAA）では、ポインターのターゲットに最低24×24 CSSピクセルを求めています。文中のリンクなど、いくつかの例外があります。多くのデザインチームは、押しやすくするためにメインのボタンをこれより大きくしています。
3段階の文字サイズでコンテンツに優先順位をつけ、余白は8pxのスケールに基づき、控えめなテキストも白の背景で4.5:1を満たす濃さを保っています。
タイトル、価格、ボタンが同じサイズと太さのため、視線の行き場がありません。
サイズ、太さ、色でコンテンツに順位をつけています。タイトルが1番目、価格が2番目、アクションが3番目です。
すべてが端から端まで詰め込まれ、ごちゃごちゃして読み流しにくくなっています。
ゆとりのあるpaddingとgapでグループを分け、各項目に余裕を持たせています。
白の背景に薄いグレーの文字は、通常のテキストに求められるWCAGの最低基準を大きく下回っています。
白の背景に濃い文字で、通常サイズのテキストに対するWCAG 2.2レベルAAの最低基準である4.5:1を満たしています。
中央揃えと左揃えの行が混在し、視線が追いかけなければならないガタガタの端ができています。
共通の左端を1つにすることで、バラバラの行が1つの読みやすいブロックになります。
ラベルがどの入力欄からも同じ距離にあるため、どのラベルがどの欄のものかわかりません。
各ラベルが自分の入力欄に寄り添い、組と組の間に余白があるため、グループが一目でわかります。
小さなリンクが密集していて、指でタップすると外れやすくなっています。
ターゲットはWCAG 2.2レベルAAの最低基準である24×24 CSSピクセル以上で、間隔も空けています。
原則
バージョン
ビフォー
アフター
ビフォー：{text}
アフター：{text}
サワードウブレッド
$9、毎日焼き上げ
今すぐ注文
営業時間
月〜金、午前7時から午後6時
土、午前8時から午後2時
店舗から5 km以内に、毎朝9時までにお届けします。
白の背景に文字色{hex}
ケータリング
10名から100名様向けのオードブル。
2日前までにご注文ください。
お名前
電話番号
メニュー
営業時間
注文
無料で始める · クレジットカード不要