「なんとなく素人っぽい画面」になってしまう原因は、センスではなく数値の決め方にあることがほとんどです。逆に言えば、決め方さえ揃えれば、絵が描けなくても整った画面になります。
この記事のために、同じフォームを2通り作りました。要素も文言も同じで、色を足したりアイコンを増やしたりもしていません。変えたのは余白の値、文字サイズの差、左端の位置だけです。
右のほうが整って見えると思います。何をしたのかを、4つに分解します。
1. 余白の種類を減らす
左の例では、余白が 3 / 6 / 7 / 9 / 11 / 13 / 15 / 17 / 22px と9種類も出ています。1つずつ「なんとなくこれくらい」で決めた結果です。
右は 8 / 12 / 20 / 24 / 32px の5種類だけです。使っていい値をあらかじめ決めておいて、その中から選ぶようにしています。
ここで重要なのは「8の倍数だから美しい」という話ではありません。選択肢が5個しかなければ、迷いようがないので結果的に揃うということです。
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
}
/* padding: 13px; ではなく padding: var(--space-3); と書く */変数にしてしまえば、「13px」と書きたくなった時点で、それが選択肢に無いことに気づけます。
自分のブログを測ってみた
このブログの記事本文で、実際に使われている余白をブラウザから拾ってみました。
本文の要素に使われている余白（px）
9.6, 28, 32, 41.6, 44.8, 62.4, 64, 89.68種類あって、しかも中途半端な数字が並んでいます。失敗しているように見えますが、内訳を見ると理由が分かりました。
| 要素 | 値 | 正体 |
|---|---|---|
| 段落・リスト・表・図 | 32px | 16px × 2 |
| h2 の上 | 89.6px | 22.4px × 4 |
| h2 の下 | 44.8px | 22.4px × 2 |
| h3 の上 | 62.4px | 20.8px × 3 |
すべてその要素の文字サイズの整数倍でした。CSSで em を使って指定しているので、こういう数字になります。
つまり「数値としては揃っていないが、比率としては揃っている」状態です。どちらが良いという話ではなく、余白の考え方が違います。
- 固定値（px）
余白を「絶対的な距離」と考える。画面全体で一貫し、デザインシステムと相性がいい - 相対値（em）
余白を「文字に対する量」と考える。文字サイズを変えると余白も追従する。文章主体のページに向く
まずいのはこの2つが混在することです。同じコンポーネントの中で片方は 16px、片方は 1.2em と書かれていると、文字サイズを変えたときに片方だけずれます。どちらの考え方で行くかを決めておくのが実際のところです。
2. 近いものは近く、遠いものは遠く
左の例の分かりにくさは、余白がバラバラなこと以上にグループが見えないことから来ています。
「メールアドレス」というラベルと、その入力欄の距離。そして入力欄と、次の「自己紹介」との距離。この2つがほぼ同じだと、どのラベルがどの欄のものか、一瞬考える必要が出ます。
ラベル ← 8px → 入力欄 （関係が強い＝近づける）
入力欄 ← 24px → 次の項目 （関係が弱い＝離す）目安として3倍くらいの差をつけると、線を引かなくてもグループが見えます。逆に言えば、区切り線を足したくなったときは、たいてい余白で解決できます。
実装上は、関連する要素をまとめて1つの箱に入れて、箱の外側に大きい余白を置くのがきれいです。要素ごとに個別の margin を積むと、必ずどこかで崩れます。
3. 左端を1本の線に乗せる
左の例では、要素ごとに margin-left が 2 / 3 / 6 / 9 / 14 / 22px と少しずつ違っています。ほんの数pxですが、目は数pxのズレを検出します。
揃っていないと、視線が縦に流れず、一つひとつを個別に読むことになります。読む速度が落ちるのに、原因が分からないというのがこの状態です。
対策は単純で、子要素で margin-left を使わないことです。位置は親のパディングで一括して決めます。個別に微調整を入れ始めた時点で、揃わなくなります。
「デザインが少しズレて見えるが、どこが悪いか分からない」というときは、ブラウザの検証ツールで要素の左端に定規を当てるように見ていくと、だいたい見つかります。
4. 階層は3つの手段でつける
左の例は、タイトルも説明もラベルも入力値も、全部14pxです。情報の重要度が同じだと主張していることになるので、どこから読めばいいか分かりません。
階層をつける手段は3つあります。
| 手段 | 効き方 | 使いどころ |
|---|---|---|
| 大きさ | いちばん強い | 見出しと本文 |
| 太さ | 中くらい | 同じサイズの中で目立たせる |
| 色の濃さ | いちばん弱い | 補足を下げる |
右の例では、タイトルを18pxの太字に、説明とラベルを13px前後の薄い色にしています。2段階の差をつけただけで、どこがタイトルかは考えなくても分かります。
やりがちな失敗は3つ全部を同時に使うことです。大きくして、太くして、色も濃くすると、強すぎて他が全部沈みます。1つか2つで足ります。
もう1つ、階層は「上げる」より「下げる」ほうが効きます。目立たせたいものを大きくするのではなく、補足情報を小さく薄くする。そのほうが画面全体は静かになります。
ボタンにも階層が要る
左の例では「保存する」と「キャンセル」が同じ見た目です。ユーザーは毎回どちらが主かを読んで判断することになります。
右では、主ボタンだけを塗りつぶし、キャンセルは枠も背景も外しました。押してほしいほうが、見た瞬間に分かります。
原則として1つの画面で強調するボタンは1つです。2つ並べて両方目立たせると、どちらも目立たなくなります。
作り忘れるのは「うまくいかないとき」の画面
4原則とは別に、実装していていちばん抜けやすいのがここです。データがある状態の画面だけを作って終わりにしてしまうという抜け方をします。
1つの画面には、少なくともこれだけの状態があります。
| 状態 | 見せるもの | 忘れるとどうなるか |
|---|---|---|
| 読み込み中 | スケルトンやスピナー | 一瞬「空っぽ」に見えて、無いと誤解される |
| データが0件 | 理由と、次にすべき操作 | 壊れているのか、まだ無いだけなのか分からない |
| エラー | 何が起きたかと、再試行の導線 | 白い画面だけが残る |
| 権限がない | そもそも表示しないか、理由を出す | 押せるのに毎回失敗する |
| データが極端に多い／長い | 省略や折り返しの規則 | レイアウトが崩れる |
特に0件の状態は、開発中は自分でデータを入れているので目にする機会がありません。ところがユーザーが最初に見るのは、ほぼ必ずこの画面です。初回のログイン直後は、当然すべてが空です。
「データがありません」とだけ出すのは、あまり親切ではありません。なぜ空なのかとどうすれば埋まるのかを書いて、そのまま操作できるボタンを置くと、それだけで使い方の説明になります。
もう1つ、長い文字列も忘れがちです。テストデータは短い名前ばかりなので気づきませんが、実際には40文字の会社名や、改行のない長いURLが入ります。text-overflow: ellipsis で省略するのか、折り返すのかを要素ごとに決めておく必要があります。
押せる場所は指の大きさで決める
デスクトップで作っていると小さくしがちですが、タップできる領域は最低でも44px四方が目安です。文字の大きさではなく、押せる範囲の話です。
/* 見た目は小さいアイコンでも、当たり判定は広げる */
.icon-button {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}削除アイコンのような間違えると困る操作が、他のボタンと隣接しているときは、距離も取ります。押し間違いは「ユーザーの不注意」ではなく、配置の問題として扱ったほうが解決が早いです。
コードに落とす
4つの原則を、実装のルールに置き換えるとこうなります。
- 余白は変数からしか選ばない
数値の直書きを禁止すると、自動的に揃う - 子要素で位置を調整しない
左端は親のパディングで決める - 関連する要素は同じ箱に入れる
箱の外に大きい余白を置く - フォントサイズも段階を決めておく
12 / 13 / 14 / 16 / 18 / 22 のように
どれも、「自由に決められる範囲を狭めている」のが共通点です。デザインの経験がなくても、選択肢が少なければ大きく外しません。
まとめ
- 余白の種類を5個程度に絞る
値そのものより、選択肢が少ないことが効く - px か em かを決めて混ぜない
このブログは em ベースで、数値ではなく比率が揃っていた - 関係の強さを距離で表す
3倍差をつければ、区切り線は要らない - 左端を1本に揃える
個別のmargin-leftをやめる - 階層は大きさ・太さ・色
3つ全部使わない。目立たせるより、下げる - 強調するボタンは1画面に1つ
2つあると、どちらも目立たない
色を選ぶ話は配色を実測した記事に、文字サイズと行間の話はタイポグラフィの記事に分けて書いています。
次に読む記事
