整列

定義

整列とは、要素を水平方向（左・中央・右）と垂直方向（上・中央・下）という 2つの基準線に沿って配置することです。言葉にすると単純ですが、画面のなかの たくさんの要素が目に見えない同じ線の上にきれいに揃っていると、人はそれを 「整っている」と感じます。逆に要素が少しずつずれていると、理由をはっきり 言えなくても、どこか落ち着かず、未完成な印象を受けてしまいます。だから整列は、 もっとも目立たないのに完成度を左右する基本の技術です。ポイントは「要素ごとに バラバラの線に置かず、できるだけ同じ線を共有させる」ということです。

なぜ重要か

人の目は、並んだ線に沿って自然に動きます。テキストや画像、ボタンが共通の 基準線を共有していれば、視線が途切れずになめらかに流れ、内容をすばやく 追えます。整列が崩れると、目は毎回あたらしい始点を探してわずかに引っかかり、 その小さな疲れが積み重なって画面全体が読みにくく感じられます。さらに整列は、 要素どうしの関係も示します。同じ線に置かれた項目は「対等」または「ひとまとまり」 という合図になり、あえてずらした要素は「強調」や「例外」として読まれます。 つまり整列を使いこなすとは、視線の流れと要素の関係を同時に設計するということで、 これは余白とともに画面の秩序を支える2本の軸になります。実際、画面が散らかって 見えるときは、色やフォントを変える前にまず基準線を見直すと、手を入れる場所は 少なくても効果はいちばん大きい、ということがよくあります。ずれた要素を1つ同じ線に 戻すだけで、画面全体の印象がはっきりと整うからです。

よくある間違い

• なんでも中央揃えにしてしまう癖です。中央揃えは、短い見出しやボタン、空の状態の 案内のように視線を集めたいときには強力ですが、何行も続く本文に使うと行ごとに 始点が変わり、かえって読みにくくなります。
• 要素ごとにバラバラの基準線を使うことです。あるカードは左端、別のカードは少し 内側に揃っている、という状態は目にはわずかなずれとして映り、画面が整っていない 印象を与えます。
• 数字や金額を左揃えにすることです。桁数の違う数字は右揃えにしてこそ位取りが 縦に揃い、大きさをひと目で比べられます。

実務のヒント

• 画面で共有する基準線の数をできるだけ減らしましょう。ほとんどの要素が1本の 左基準線を共有するように整えるだけで、画面はすぐに引き締まって見えます。
• 長い文章は左揃え、短くて独立した要素は中央揃え、という基本を覚えておきましょう。 例外をつくるときは「なぜこれだけ違う扱いにするのか」を自分で説明できることが大切です。
• 整列と余白はいっしょに動きます。要素を同じ線に揃えたあと、その間の間隔をスケールに 合わせて整えると、少ない労力でぐっとプロらしい画面に近づけます。

関連概念