フロントエンド開発 / 約20分
配色・タイポグラフィ・余白の原則
なぜこれを学ぶか
「デザインセンスがない」と諦める前に、いくつかの原則を知るだけで見た目は大きく改善します。この道場自体のデザインも、その原則の実例です。
配色 は「メイン+アクセント+グレースケール」の最小構成から始めると失敗しません。この道場も背景はdojo-900系のダーク基調(グレースケール)に、amber-400(アクセント)を要所に使う構成です。
タイポグラフィ では、見出しと本文のサイズ差で情報の階層を伝えます。全て同じ大きさの文字では、どこが重要か伝わりません。
余白(ホワイトスペース) は「何も無い部分」ではなく「情報を区切る道具」です。詰め込みすぎた画面より、適度な余白がある画面の方が理解しやすくなります。
コントラスト比 も重要な指標です。WCAG(Web Content Accessibility Guidelines)は本文で4.5:1以上を推奨しています。薄いグレー文字を白背景に置くと、読みにくいだけでなく一部のユーザーには読めません。
重要ポイント
- 配色は「メイン+アクセント+グレースケール」の最小構成
- 見出しと本文のサイズ差で情報階層を伝える
- コントラスト比はWCAG推奨の4.5:1を目安に
理解度チェック
選ぶと即座に解説が表示されます。
文字色#999999・背景色#FFFFFFの本文がある。このデザインの問題点は?
ヒントを見る
薄いグレー文字を白背景に置くと、コントラスト比はどうなるでしょうか。WCAGが推奨する目安(4.5:1)と比較して考えてみましょう。
スキルセルフチェック
このレッスンの内容をどの程度理解できましたか?