STEP 1
画面デザインの約束ごと
どれも「知らないと事故る、知れば防げる」ルールです。理由とセットで覚えましょう。
ピクセルは整数で
13.5pxのような小数はぼやけの原因。位置・サイズは整数で。
8pxグリッド
余白やサイズを8の倍数(8/16/24…)で揃えるとリズムが出て整う。
タップ領域44px
指で押すボタンは最低44×44px。小さすぎると押し間違える。
コントラスト
文字と背景の明暗差は4.5:1以上が目安。薄すぎる文字はNG。
行長は詰めすぎない
本文1行は全角30〜40字程度。横に長すぎると読みにくい。
相対単位も使う
本文サイズはremなど相対単位に。ユーザーの文字拡大に対応できる。
STEP 2
NG / OK 見比べ
それぞれNGとOKを切り替えて、どう違うか目で確かめましょう。理由も表示されます。
STEP 3
OK? チェックゲーム
現場でありがちな場面。Web的にOKか NGかを判断しましょう。全8問です。
PLUS
約束ごと早見表
| ルール | 目安 | 守らないと… |
|---|---|---|
| ピクセル | 整数(小数を避ける) | 境界がぼやける |
| 余白・サイズ | 8の倍数(8pxグリッド) | 間隔がバラつき雑に見える |
| タップ領域 | 44×44px 以上 | スマホで押し間違える |
| コントラスト | 4.5:1 以上(本文) | 読めない・アクセシビリティ違反 |
| 本文の行長 | 全角30〜40字 | 目が疲れる・読み飛ばす |
| 文字サイズ単位 | rem など相対単位 | 拡大に対応できない |
Webデザインの合言葉:
① ピクセルは整数
② 余白は8の倍数
③ タップは44px、文字は十分な濃さ
—— 「なんとなく」を「理由で」置き換えると、画面がぴたっと決まります。