整列の原則とは?見えない基準線で要素の端をそろえるレイアウトの基本

整列の原則の基本

まずは、整列の原則とは何か、そしてそろえるとデザインの見え方がどう変わるのかを押さえましょう。

整列の原則とは

整列の原則とは、画面の中の要素を思いつきの位置に置かず、ほかの要素と端や中心をそろえて配置するという考え方です。

アメリカのデザイナー、ロビン・ウィリアムズの著書『ノンデザイナーズ・デザインブック』で紹介されている、デザインの4つの基本原則(近接・整列・反復・コントラスト)の1つです(書籍はこの記事の最後で紹介しています)。

同書では、整列の原則を「ページ上に何ひとつ適当に置かず、どの要素もページ上のほかの何かと見た目のつながりを持たせる」という趣旨で説明しています。

ここでいう「見た目のつながり」とは、たとえば見出しの左端と本文の左端が同じ縦の線の上にある、というような関係のことです。

実際に線が引かれているわけではありませんが、端がそろっていると、見る人の目にはそこに見えない線があるように感じられ、要素同士がつながって見えます。

整列するとデザインはどう変わるか

要素をそろえると、デザインに「まとまり」と「きちんと感」が生まれます。

端がそろった要素同士は見えない線でつながって見えるため、ばらばらの部品ではなく、1つのまとまった情報として伝わるからです。

また、そろっていると視線がまっすぐ下へ流れるので、読む人が次にどこを見ればいいかで迷いません。

同じ内容のプロフィールカードを、整列のある・なしで比べてみましょう。

NGの見本では、名前・肩書き・紹介文・ボタンが、それぞれ少しずつ違う位置から始まっています。

一つひとつのずれは小さくても、見る人には「なんとなく落ち着かない」「雑に作られている」という印象を与えてしまいます。

OKの見本では、すべての要素の左端を同じ位置にそろえたことで、要素が1本の見えない線でつながり、カード全体がすっきりまとまって見えます。

そろえる場所は「端」と「中心」

要素をそろえる位置には、大きく分けて「端」と「中心」があります。

横に並ぶ要素なら上端・下端・上下の中心、縦に並ぶ要素なら左端・右端・左右の中心のどこかを、ほかの要素と同じ線の上に置きます。

そろえる位置	見えない線のでき方	よく使われる場面の例
左端	要素の左側に縦の線ができる	記事の本文、フォーム、一覧など、読む量が多い部分
左右の中心	要素の真ん中を通る縦の線ができる	ページのタイトル、短いキャッチコピー、ボタン1つだけの案内
右端	要素の右側に縦の線ができる	表の金額の列、日付など、右側でそろうと比べやすいもの
上端・下端・上下の中心	横に並んだ要素の上・下・真ん中に横の線ができる	アイコンと文字、横並びのカード、ヘッダーのロゴとメニュー

ここでいう「端・中心」は、文字や画像を含むブロック(ひとかたまりの要素)をどこにそろえるかという話です。

1つのブロックの中で文章の行を左揃え・中央揃えのどちらにするかの使い分けは、文字の揃え方とは?で詳しく解説しています。

横に並ぶ要素の例として、アイコンと文字の並びを比べてみましょう。

NGの見本は、文字がアイコンよりも下の位置から始まっているため、アイコンと文字がセットに見えません。

OKの見本は、アイコンと文字の上下の中心を同じ横の線にそろえたことで、「アイコン+説明」が1組の情報として読み取れます。

揃える基準を作る方法

ここからは、実際にデザインするときに、何を基準にそろえればよいかを見ていきます。

「基準線を少なくする」「グリッドを使う」「最後は目で確かめる」「ツールの整列機能を使う」の4つがポイントです。

基準線は少なく決める

整列のコツは、そろえる線の本数をできるだけ少なくすることです。

そろえる線が多いと、一つひとつは何かにそろっていても、画面全体では線が入り乱れて見え、結局ごちゃついた印象になるためです。

よくある失敗が、タイトルは中央、本文は左、ボタンは中央というように、1つのまとまりの中で左端と中心の基準が混ざってしまうケースです。

NGの見本では、タイトルとボタンは中央、本文は左端、日付は右端にそろっているため、どれを基準に見ればいいのかが分かりません。

OKの見本では、すべての要素の左端を同じ線にそろえたので、上から下へまっすぐ読み進められます。

中央揃えが悪いわけではなく、1つのまとまりの中では「左端なら左端」「中心なら中心」と基準を1つに決めることが大切です。

また、画面全体でも、コンテンツの左端や、写真の端など、「ここにそろえる」という線を数本に絞っておくと、要素が増えても整って見えます。

グリッドを基準線として使う

そろえる線を毎回ゼロから考えるのが大変なときは、グリッドを基準線として使うと便利です。

グリッドとは、画面をいくつかの縦の列(カラム)に区切った、配置の目安になる線のことです。

方眼ノートのマス目のように、見えない線があらかじめ画面に引いてあり、その線に沿って要素を置いていくイメージです。

あらかじめ線が決まっていれば、要素を置くたびに「どの線にそろえるか」を選ぶだけで済み、ページの中で基準線が増えすぎるのを防げます。

カラムや、カラムとカラムの間のすき間(ガター)など、グリッドの基本的な用語と使い方は、グリッドと余白の関係とは?、Webでよく使われる12本の列に区切るグリッドは12カラムグリッドとは?で解説しています。

数値でそろえたあと、目で見て確かめる

数値の上では正しくそろっていても、目で見るとずれて見えることがあるので、最後は必ず目で見て確かめましょう。

人の目は、形の外枠ではなく「見た目の重さ」でそろっているかを判断するためです。

たとえば、丸や三角は、同じ幅の四角と並べると小さく見えやすい形です。

そのため、アイコンやロゴでは、丸い部分を四角の外枠からわずかにはみ出させて、見た目の大きさや位置をそろえる工夫が行われることがあります。

また、ボタンのように背景の色や枠がある要素と、枠のない文字を縦に並べる場合は、文字の端ではなく、ボタンの枠の端を周りの文字の端にそろえると、すっきり見えます。

数値はあくまで出発点と考え、最終的には画面を少し離れて眺め、ずれて見える部分がないかを確かめるのが確実です。

Figmaの整列機能を使う

デザインツールには、選んだ要素を自動でそろえる機能があるので、手作業で位置を合わせるより正確です。

マウスで動かして目分量で置くと、1px単位の小さなずれが残りやすく、そのわずかなずれが「なんとなく雑」に見える原因になります。

たとえばデザインツールのFigma(フィグマ)では、要素を選んで整列のボタンを押すと、左揃え・水平方向の中央揃え・右揃え・上揃え・垂直方向の中央揃え・下揃えができます。

要素を1つだけ選んだときはその要素を囲む親のフレーム(要素を入れる枠)に対して、複数選んだときは選んだ要素同士でそろいます(Figmaヘルプ:配置、回転、位置の調整)。

同じヘルプでは、左揃えはAlt+A、上揃えはAlt+Wのように、キーボードのショートカットも紹介されています(MacではAltキーはOptionキーのことです)。

目で見て置いた要素も、最後に整列機能でそろえ直す習慣をつけると、細かなずれがなくなります。

実践のポイント

整列で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 要素を目分量でドラッグして置き、数px単位のずれが残ってしまうことがあります。
  小さなずれほど「うっかり」に見えるので、ツールの整列機能や数値の入力で位置をそろえましょう。
• 1つのまとまりの中で、中央と左端など、そろえる基準を混ぜてしまうことがあります。
  まとまりごとに基準を1つに決め、画面全体でもそろえる線を絞りましょう。
• 長い文章まで中央にそろえてしまうことがあります。
  行の始まりの位置が毎回変わって読みにくくなるので、読む量が多い部分は左端にそろえるのが基本です。
• 要素を広い範囲に散らして置いたため、端はそろっていても、離れすぎてつながりが感じられないことがあります。
  関係のある要素は近づけてまとめたうえでそろえましょう(要素同士の距離で関係を伝える考え方は近接の原則とは?で解説しています)。

よくある質問

• Q. 中央揃えは使わないほうがいい?
  A. そんなことはありません。
  タイトルや短いキャッチコピー、ボタンが1つだけの案内など、短い要素を落ち着いた印象で見せたいときには中央揃えが向いています。
  大切なのは、1つのまとまりの中で中央と左端を混ぜないことです。
• Q. 整列と近接はどう違う?
  A. 近接は「関係のある要素を近づけてグループを作る」原則、整列は「要素の端や中心をそろえてつながりを作る」原則です。
  近接でグループを作り、グループの中とグループ同士を整列でそろえる、というように組み合わせて使います。
• Q. 1〜2pxのずれでも直すべき?
  A. 意図したずれでないなら、直しておきましょう。
  ほんのわずかなずれは、見る人が理由を説明できなくても「なんとなく雑」という印象につながりやすいからです。
  反対に、目立たせるためにわざと線から外すなら、「わざと」だと分かるくらいはっきり外すのがコツです(外し方の例はグリッドをあえて崩すデザインとは?で解説しています)。

まとめ

整列の原則とは、要素を思いつきの位置に置かず、ほかの要素と端や中心をそろえて見えない線でつなぐ考え方で、デザインにまとまりときちんと感を生みます。

そろえる線はできるだけ少なく決め、1つのまとまりの中で基準を混ぜないこと、グリッドや整列機能を使い、最後は目で見て確かめることがポイントです。

まずは自分が作ったデザインを1つ開き、各要素の左端に定規を当てるつもりで縦の線を引いてみて、何本の線ができているかを数えてみてください。

あわせて読みたい書籍

整列をはじめとするデザインの4原則を、たくさんの作例と一緒に学びたい方は、こちらの書籍もあわせてチェックしてみてください。