女性向けエンジニアスクール
3秒でわかる
要素を見えない基準線に沿わせて配置するデザイン原則。視線の動く道筋を作り、画面が散らかって見えるのを防ぐために使います。
もう少し詳しく
どういうものか
整列は、テキストや画像、ボタンといった要素を共通の基準線にそろえて配置する考え方です。左端をそろえる、中心をそろえる、ベースラインをそろえる、といった形があります。近接、反復、コントラストと並ぶデザインの基本原則の 1 つに数えられます。
そろえるのは見た目の端ではなく、意味のまとまりごとの基準線です。見出しと本文が同じ左端から始まっていれば、その 2 つは同じ話題だと目が判断します。
なぜ必要か
人の目は、そろっていない要素を「別のもの」として扱います。左端が 2px ずれた項目が並ぶと、理由が説明できないのに雑に見えるのはこのためです。逆にそろえるだけで、装飾を足さずに情報のまとまりを示せます。
基準線の数を減らすほど視線の移動が減ります。1 画面に左端が 5 種類あると、読み手は毎回どこから読むか判断させられます。
具体例
CSS では横方向と縦方向でそろえ方の指定が分かれます。
/* テキストの水平位置 */
.card__title { text-align: left; }
/* Flexbox 横並びの縦位置をそろえる */
.toolbar {
display: flex;
<a href="/glossary/align-items" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">align-items</a>: center; /* 交差軸 */
gap: 12px;
}
/* Grid でラベル幅をそろえ、入力欄の左端を一直線にする */
.form {
display: grid;
grid-template-columns: 120px 1fr;
align-items: baseline;
row-gap: 16px;
}フォームでラベルの文字数がばらついても、grid-template-columns で列幅を固定すれば入力欄の左端が 1 本の線にそろいます。
つまずきやすいところ
中央そろえ(text-align の center)を多用してしまうのが典型です。中央そろえは行の左端が毎行変わるため、3 行以上の本文では読みにくくなります。中央そろえは見出しや短いキャッチに限り、本文は左そろえにします。
align-items と justify-content の取り違えも頻出です。justify-content は主軸方向、align-items は交差軸方向をそろえます。flex-direction を column に変えると 2 つの働く向きが入れ替わるため、横並びのつもりで覚えた指定がそのままでは効きません。
余白でそろえた見た目を作るのも避けます。margin-left を目分量で足してそろえた配置は、文字サイズや画面幅が変わると崩れます。
似た用語との違い
| 原則 | 働き |
|---|---|
| 整列 | 基準線をそろえて秩序を作る |
| 近接 | 関係の近いものを寄せてまとまりを示す |
| コントラスト | 差をはっきりつけて重要度を示す |
覚え方
要素を置くときに「これはどの線にそろっているか」と 1 度自問します。答えられない配置は、たいてい見る側にも理由が伝わりません。
