朝、駅の改札を抜けて歩いていると、ふと足を止めてしまう掲示物があります。
反対に、素通りしてしまう掲示物もあります。
その差は、案外「デザインのうまさ」ではなく、もっと単純なところにあるのかもしれません。
文字の大きさでも、色数の多さでもなく、実は「揃っているかどうか」だった、ということがよくあります。
整列とは、要素の端や中心を目に見えない一本の線に沿わせることです。
たったこれだけのことなのですが、この一本の線があるかないかで、同じ情報量でも見た人が受け取る印象はまったく変わってきます。
今回は、デザインの基礎として必ず登場する「整列」について、できるだけ丁寧に、順を追って考えていきたいと思います。
専門用語もいくつか出てきますが、身の回りにあるものを例にしながら進めていきますので、気負わずに読み進めてもらえたら嬉しいです。
整列とは何か
デザインの世界でいう整列とは、画面や紙面に配置された文字や画像、図形といった要素を、共通の線や軸に沿って並べることを指します。
英語では Alignment（アラインメント）と呼ばれ、レイアウトを考えるうえで欠かせない基本要素のひとつに数えられています。
「並べる」というと単純な作業に聞こえるかもしれませんが、実際にはかなり奥が深い話です。
たとえば、名刺の裏面に会社名と電話番号とメールアドレスを載せるとします。
なんとなく空いているところに文字を置いていくと、一見きちんと収まっているように見えても、実は微妙に左右の余白がずれていたり、行ごとに開始位置が数ミリずつ違っていたりすることがよくあります。
人の目は、そうした数ミリのズレに驚くほど敏感です。
理由をうまく言葉にできなくても、「なんとなく落ち着かない」「なんとなく素人っぽい」と感じてしまうのは、多くの場合この整列の乱れが原因になっています。
「揃える」対象は文字だけではない
整列というと、文章の左端を揃えることだと思われがちですが、対象はそれだけではありません。
写真の端、見出しの開始位置、アイコンの中心、罫線の位置、ボタンの高さなど、紙面や画面に存在するあらゆる要素が整列の対象になります。
- テキストの行頭：文章の書き出し位置
- 画像の端：写真やイラストの外枠
- 要素の中心：ロゴやアイコンの中心点
- ベースライン（Baseline）：文字が乗っている基準線
- 余白の幅：要素と要素の間隔
これらすべてに共通の基準を持たせることで、紙面全体に一本の背骨が通ったような、しっかりとした印象が生まれます。
なぜ「揃っている」と美しく感じるのか
ここで少し不思議に思う人もいるかもしれません。
そもそも、なぜ人は「揃っているもの」を見ると心地よく感じ、「揃っていないもの」を見ると落ち着かない気持ちになるのでしょうか。
この問いに対するひとつの答えが、心理学の分野で知られるゲシュタルト原則です。
ゲシュタルトとは、ドイツ語で「形」や「全体像」を意味する言葉で、人間が物事をどのように知覚し、まとめて理解しているかを説明する理論として、20世紀初頭から研究されてきました。
人の脳は、バラバラの点や線をそのまま認識するのではなく、無意識のうちに「グループ」としてまとめて理解しようとする性質を持っています。
たとえば、ばらばらの方向を向いた文字が並んでいると、脳はそれを一つのまとまりとして処理するのに余計な負荷がかかってしまいます。
逆に、要素が一本の線に沿って並んでいると、脳は「これは同じグループに属する情報だ」と瞬時に判断でき、余計な負荷をかけずに内容の理解に進むことができます。
つまり整列は、単なる見た目の問題ではなく、情報を処理する側の負担を減らすための工夫でもあるわけです。
きれいに見える、と感じる背景には、実は「読みやすい」「理解しやすい」という実用的な理由が隠れています。
整列の種類を知る
整列にはいくつかの型があります。
代表的なものを、それぞれの特徴とあわせて見ていきます。
左揃え（Left alignment / Flush left）
もっとも基本的で、もっとも読みやすいとされているのが左揃えです。
文章の書き出し位置が常に左端で揃っているため、視線が次の行に移るときに迷いません。
日本語も英語も、横書きの文章であれば基本的に左から右へ読み進めるので、左揃えは読み手の視線の動きにもっとも自然に寄り添う整列方法だといえます。
長い文章、たとえばブログ記事や報告書の本文には、ほとんどの場合左揃えが選ばれます。
理由は単純で、読みやすいからです。
中央揃え（Center alignment）
中央揃えは、要素を紙面やボックスの中心に配置する方法です。
短いキャッチコピーや見出し、招待状のような格式のある文章によく使われます。
ただし、注意が必要な整列方法でもあります。
中央揃えは行ごとに開始位置が変わってしまうため、行数が増えれば増えるほど、視線の移動先が毎回ばらばらになってしまうからです。
2行程度の短い見出しであれば効果的ですが、5行、6行と続く本文に中央揃えを使ってしまうと、一気に読みにくくなってしまいます。
「なんとなくおしゃれに見えるから」という理由だけで本文全体を中央揃えにしてしまうのは、初心者が陥りやすい失敗のひとつです。
右揃え（Right alignment / Flush right）
右揃えは、要素の右端を基準に揃える方法です。
日本語のデザインではあまり主役になることは少ないのですが、数字を並べる表組みや、日付・価格といった情報を右側にまとめたいときに使われます。
たとえば値札の価格表示は、桁数の違う数字が並んでも右端が揃っていれば見やすくなります。
均等割り付け（両端揃え）（Justified alignment / Justification）
均等割り付けは、文章の左端と右端の両方を揃える方法です。
新聞や雑誌の段組みでよく見かける形で、行の最後の文字まできっちりと右端が揃うため、非常に整然とした印象を与えます。
一方で、単語と単語の間隔を自動調整して両端を揃えるため、場合によっては文字と文字の間が不自然に空いてしまうこともあります。
日本語は英語と違って単語の区切りがはっきりしないぶん、和文の均等割り付けは調整が難しい整列方法だと言われています。
目に見えない軸で揃える（Invisible axis alignment）
ここまで紹介した4種類は、いわば教科書的な分類です。
けれども実際のデザインの現場では、もう少し柔軟な考え方が必要になる場面が多くあります。
それが目に見えない軸という考え方です。
写真の端、見出しの左端、本文の左端、ロゴの中心といったように、紙面の中にはさまざまな整列の基準点が存在します。
これらの基準点を、意識的にひとつかふたつに絞り込むことで、紙面全体に統一感が生まれます。
逆に言えば、基準となる軸が3つ以上に増えてしまうと、紙面はとたんに散らかった印象になってしまいます。
熟練したデザイナーほど、この目に見えない軸の数を意識的に絞り込んでいるものです。
紙面に定規を当てて確認したわけでもないのに「なんだかプロっぽい」と感じるチラシやポスターがあれば、それはきっとこの見えない軸がきちんと機能しているのだと思います。
よくある失敗パターン
整列の考え方を知ったところで、次は実際によくある失敗例を見ていきます。
自分のデザインを見返すときのチェックリストとしても使ってもらえると思います。
なんとなく中央に置いてしまう
もっとも多い失敗が、これです。
余白ができると、なんとなく落ち着かなくて、要素を中央に寄せてしまう。
気持ちはよく分かるのですが、実はこれが紙面を散らかす最大の原因になっていることが多いのです。
見出しは中央揃え、本文は左揃え、画像は中央揃え、キャプションは右揃え、といった具合に整列の軸がばらばらになってしまうと、要素同士のつながりが感じられなくなってしまいます。
整列の基準がページごとに違う
複数ページにまたがる資料やウェブサイトでは、ページごとに整列の基準が変わってしまうことも起こりがちです。
1ページ目は左端から10ミリの位置に見出しがあるのに、2ページ目は8ミリの位置から始まっている、というようなズレです。
1枚だけを見ているときには気づかなくても、複数のページを並べたときに、このわずかなズレは強い違和感として表面化します。
整列させたつもりが、目分量でずれている
「ちゃんと揃えたつもりなのに、なぜか揃って見えない」という経験がある人も多いのではないでしょうか。
これは、数値で正確に揃えたのではなく、感覚だけで「だいたいこのあたり」と配置してしまったときによく起こります。
人の目は非常に優秀なセンサーで、1ミリ、2ミリのズレでも無意識に感じ取ってしまいます。
だからこそ、感覚だけに頼らず、後述するガイド線やグリッドといった仕組みを使うことが大切になってきます。
揃えることに固執しすぎる
意外に思われるかもしれませんが、揃えすぎることが失敗につながる場合もあります。
すべての要素を機械的に一直線に並べてしまうと、単調で退屈な印象になってしまうことがあるからです。
- 強調したい要素：あえて整列の軸からずらして目立たせる
- それ以外の要素：基本の軸にしっかり揃える
このように、意図を持ってメリハリをつけることも、整列を使いこなすうえでは必要な考え方です。
大切なのは「全部を揃えること」自体が目的なのではなく、情報の関係性を正しく伝えるために揃えるという視点を忘れないことだと思います。
整列を実践するための具体的なコツ
理屈が分かったところで、次はもう少し実践的な話に進みます。
実際に手を動かすときに役立つ考え方をいくつか紹介します。
ガイド線を使う
多くのデザインソフトには、ガイド線という機能が用意されています。
紙面上に目に見える補助線を引いておき、その線に要素の端を吸着（スナップ）させながら配置していく仕組みです。
感覚だけに頼らず、必ずガイド線を使って配置する習慣をつけるだけで、仕上がりの精度は大きく変わってきます。
Illustrator や Photoshop、Figma といったソフトには、いずれもこのガイド機能とスナップ機能が備わっていますので、まずは一本引いてみることから始めてみてください。
グリッドを土台にする
グリッドとは、紙面をあらかじめ縦横のマス目に分割しておく設計図のようなものです。
グリッドについては別の記事で詳しく取り上げていますので詳細は割愛しますが、整列との関係だけ簡単に触れておきます。
グリッドがあると、整列の基準となる軸が自然に決まるため、迷わず要素を配置できるようになります。
いわば、グリッドは整列を助けるための下敷きのような存在です。
数値で管理する
デザインソフトの多くには、要素の位置やサイズを数値で確認できるパネルが用意されています。
目分量で「だいたい揃った」と判断するのではなく、X座標やY座標の数値を見比べて、本当に同じ数値になっているかを確認する。
地味な作業ですが、この一手間が仕上がりの精度をぐっと引き上げてくれます。
- 座標の数値：見た目ではなく数字で一致させる
- 整列パネル：ソフトの自動整列機能を積極的に活用
- 余白の幅：感覚ではなく倍数のルールで管理
一歩下がって全体を見る
画面に顔を近づけて作業していると、細部にばかり気を取られて、全体のバランスが見えなくなることがあります。
作業の手を止めて、少し画面から離れてみる。
紙に印刷しているなら、一度机の上に置いて数歩下がってみる。
こうした「離れて見る」という単純な行動が、整列の乱れに気づく一番簡単な方法だったりします。
制作に集中しているときほど、意識してこの時間を作ることをおすすめします。
用途別に見る整列の使い方
整列の考え方は、どんな制作物にも共通して活きてきます。
ここでは代表的な4つの場面に分けて、実際にどう考えていけばよいかを見ていきます。
チラシやポスターの場合
チラシやポスターは、限られた紙面の中に、見出し、写真、価格、日時、地図といった、性質の異なる情報を詰め込む必要があります。
情報量が多いからこそ、整列の乱れが目立ちやすい制作物でもあります。
まず考えたいのは、紙面の左右どちらかに、すべての要素の基準となる一本の縦線を決めることです。
見出しの左端、本文の左端、問い合わせ先の左端をこの一本の線に揃えるだけで、情報がバラバラに置かれているという印象は大きく減ります。
写真だけは紙面いっぱいに配置して基準線を無視する、というのもよく使われる手法ですが、それ以外の文字要素はできる限り軸を統一したほうが、全体としてまとまりのある印象になります。
名刺や紙媒体の場合
名刺は非常に小さな紙面ですが、それゆえに整列の乱れが一目でわかってしまう制作物でもあります。
会社名、氏名、役職、電話番号、メールアドレス、住所といった項目を、すべて左揃えでひとつの軸に沿わせるだけで、驚くほど整った印象になります。
情報の種類ごとに文字サイズを変えることはあっても、揃える基準の軸そのものはひとつに絞る、というのが名刺デザインの鉄則です。
ロゴだけは中央に置きたい、というデザインもよくありますが、その場合はロゴの軸と文字情報の軸をそれぞれ意図的に分けて設計する必要があります。
ウェブサイトの場合
ウェブサイトにおける整列は、紙媒体とは少し違う難しさがあります。
画面の幅がスマートフォン、タブレット、パソコンで異なるため、ある画面幅では揃って見えていたものが、別の画面幅では崩れてしまうことがあるからです。
そのため、ウェブデザインの現場では、コンテナと呼ばれる仮想の枠を画面中央に固定し、その枠の左右の端を基準にすべての要素を揃えるという考え方がよく使われます。
ボタンの位置、見出しの位置、画像の位置を、このコンテナの端に揃えておけば、画面の幅が変わっても崩れにくいレイアウトになります。
見た目のデザインだけでなく、こうした技術的な仕組みとあわせて整列を考える必要があるのが、ウェブデザインならではの特徴だといえます。
プレゼン資料の場合
会議や提案の場で使うプレゼン資料も、整列が特に効いてくる制作物のひとつです。
スライドごとにタイトルの位置がずれていたり、箇条書きの開始位置が微妙に違っていたりすると、聞き手は無意識のうちに「準備不足なのかもしれない」という印象を持ってしまいます。
内容がどれほど優れていても、整列が乱れているだけで説得力が下がってしまうというのは、少しもったいない話です。
タイトルの開始位置、本文の開始位置、図表の左端といった基準を、スライド全体で統一しておくこと。
たったこれだけの意識で、資料全体の印象は大きく変わります。
整列とホワイトスペースの関係
整列を語るうえで、余白の存在を無視することはできません。
余白というと「何も置かれていない、もったいない空間」というイメージを持たれることがありますが、それは少し誤解です。
余白は、要素と要素の関係性を目に見える形で伝えるための、れっきとしたデザインの部品のひとつです。
たとえば、見出しと本文の間の余白が、本文と次の見出しの間の余白より狭ければ、読み手は無意識のうちに「この見出しとこの本文はセットになっている」と理解します。
これは整列と近接という、ふたつの原則が同時に働いている状態だといえます。
余白の広さが整列の見え方を左右する
同じ位置に文字を揃えていても、まわりの余白の取り方によって、揃って見える度合いは変わってきます。
要素同士がぎゅうぎゅうに詰め込まれていると、せっかく端を揃えていても、その線が視覚的に埋もれてしまうことがあるからです。
反対に、適度な余白があると、整列の軸そのものがくっきりと浮かび上がって見えるようになります。
余白をそろえるという発想
初心者のうちは「要素の端を揃える」という発想までは自然にたどり着けても、「余白の幅を揃える」という発想にはなかなか気づきにくいものです。
見出しと本文の間隔を10ミリに決めたら、別のブロックでも同じく10ミリにする。
写真とキャプションの間隔をどこかで8ミリに決めたら、他の写真でも同じルールを適用する。
こうした余白のルール化も、広い意味では整列の一種だと捉えることができます。
紙面のあちこちで余白の幅がバラバラだと、要素の端がどれだけきれいに揃っていても、どこか落ち着かない印象になってしまうことがあります。
日本語ならではの整列の難しさ
ここまで一般的な整列の考え方を見てきましたが、日本語のデザインには、英語圏の教科書には出てこない固有の難しさがいくつかあります。
単語の区切りが目に見えない
英語は単語と単語の間にスペースがあるため、行末を揃える均等割り付けの調整が比較的しやすい言語です。
一方、日本語には単語ごとのスペースがありません。
そのため、両端を揃えようとすると、文字と文字の間隔を均等に伸び縮みさせる必要があり、行によっては文字間が不自然に間延びしてしまうことがあります。
句読点や約物の位置
「、」や「。」、かっこ類といった約物も、整列を考えるうえで見落としがちな要素です。
行頭に句読点が来てしまう「行頭禁則」という考え方や、かっこの半角・全角の扱いなど、日本語特有のルールが整列の見た目に影響を与えます。
見出しの右端をきっちり揃えたつもりでも、句読点やかっこが飛び出して見えることで、揃っていないように感じられることがあります。
こうした細部への配慮も、日本語のデザインにおける整列の一部だと考えておくとよいと思います。
縦書きという選択肢
日本語には、横書きだけでなく縦書きという選択肢もあります。
縦書きになると、整列の基準となる軸も横方向から縦方向へと変わり、上下の始まりの位置や、行の頭の高さを揃えるという発想が必要になります。
書籍の表紙や和風のデザインでは縦書きが選ばれることも多いため、横書きの整列だけでなく、縦書きならではの整列感覚もあわせて身につけておくと、表現の幅が広がります。
整列とタイポグラフィの関係
整列を考えるとき、見落とされがちなのが文字そのものの扱いです。
同じ「左揃え」であっても、書体やフォントサイズの選び方次第で、揃って見える度合いは驚くほど変わってきます。
フォントを混ぜすぎない
デザインに慣れていない段階では、つい何種類ものフォントを使いたくなってしまうものです。
見出しはゴシック体、本文は明朝体、強調したい部分は別の装飾フォント、というように種類を増やしていくと、文字の太さや高さがそろわず、紙面全体の軸がぼやけてしまいます。
フォントの種類を絞り込むこと自体も、広い意味での整列だと捉えることができます。
基本は2種類程度に抑え、太さのバリエーション（ウェイト）で強弱をつけるほうが、結果として整った印象になりやすいという傾向があります。
文字サイズのジャンプ率を整える
見出しと本文の文字サイズの差を、ジャンプ率と呼びます。
このジャンプ率がページごとにばらばらだと、同じ揃え方をしていても、紙面の印象に一貫性が生まれません。
見出しは本文の何倍の大きさにするか、小見出しはその中間はどのくらいか。
こうした比率をあらかじめ決めておくことで、文字サイズという観点からも整列に近い効果を得ることができます。
行間と字間の見落とし
左端をきっちり揃えていても、行間が詰まりすぎていたり、逆に間延びしていたりすると、読みやすさという点では整列の効果が半減してしまいます。
行間は文字サイズの1.5倍から2倍程度が読みやすいとされることが多いのですが、これは絶対的なルールというよりも目安のようなものです。
実際に印刷したり画面で表示したりして、自分の目で読みやすさを確かめるという作業を省略しないことが大切だと思います。
字間についても同様で、詰めすぎると文字同士がくっついて見え、空けすぎると単語のまとまりが感じられなくなります。
見出し用の大きな文字ほど字間を少し詰め、本文用の小さな文字ほど字間にゆとりを持たせる、という調整も、整った印象づくりには欠かせない工夫のひとつです。
光学的に揃える「オプティカル・アライメント（Optical alignment / Optical margin alignment）」という技術
欧文の組版には、もうひとつ興味深い技術があります。
左揃えにする際、すべての文字の左端を定規で引いたような一直線にきっちり揃えると、かえって不揃いに見えてしまう、という現象です。
たとえば、大文字の I（アイ）と大文字の O（オー）を、同じ縦線を基準に並べてみます。
直線的な輪郭を持つ I はぴたりと軸に沿って見えるのですが、丸みを帯びた輪郭を持つ O は、数値としては同じ位置に揃えているはずなのに、なぜか少し引っ込んで見えてしまいます。
これは目の錯覚によるもので、曲線を含む文字ほど、直線的な文字よりも内側に食い込んで見えるという、人間の視覚特性に由来しています。
そこで欧文タイポグラフィの世界では、O や C、G、S といった丸みのある文字を、あえて基準線よりわずかに左へはみ出させて配置するという調整が行われます。
数値としてはほんの数ポイント程度のわずかな差ですが、この調整があることで、実際には一直線に並んでいないにもかかわらず、見た目には整然と揃って見えるようになります。
こうした調整は、光学的整列（オプティカル・アライメント）と呼ばれています。
- 直線的な文字：I、H、E、F、T、Lなど、基準線にぴたり合わせる
- 曲線的な文字：O、C、G、Sなど、基準線よりわずかに外側へ出す
- 調整の目的：数値上の一致ではなく、見た目の一致を優先する
同じような考え方は、句読点や引用符の配置にも応用されていて、行末のカンマやピリオド、引用符をわずかに外側にはみ出させる「ハンギング・パンクチュエーション」と呼ばれる手法も、根っこにある発想は共通しています。
数値上は揃っていないのに、人の目には揃って見える。
このズレをあえて作り出すという発想は、これまで見てきた整列の考え方の、少し先にある応用編ともいえるかもしれません。
機械的に数値を合わせることがゴールなのではなく、最終的に人の目にどう映るかを優先するという視点は、整列という技術の奥深さを物語っているように思います。
全角換算で約840文字分の追加です。既存パートと同じくですます調・体言止め箇条書き・全角コロン接続・句点後2行改行・半角英数字のルールに揃えています。ハイライト（黄色マーカー）は使わず``のみにしたので、記事全体のハイライト数（20箇所）は変わりません。
Optical alignment（オプティカル・アライメント）
概念そのものを指す一般的な呼び方です。数値上の位置ではなく、視覚的な見え方を基準に揃えるという考え方全般を指します。
Optical margin alignment（オプティカル・マージン・アライメント）
Adobe InDesignなどの組版ソフトで実装されている、この調整を行う機能自体の名称です。丸みや尖りのある文字・句読点を基準線よりわずかにはみ出させる処理を、業界的にはこう呼びます。
なお、O や C のような丸い文字が基準線より少しはみ出て見える現象そのものは、タイプデザインの分野で overshoot（オーバーシュート）と呼ばれています。この overshoot を、組版の段階で自動的に調整する仕組みが optical margin alignment、という関係になります。
整列と信頼感の関係
ここまでは主に「見やすさ」という切り口で整列を語ってきましたが、もうひとつ触れておきたい観点があります。
それは、整列が持つ信頼感を生み出す力です。
第一印象は数秒で決まる
人がウェブサイトやチラシを見て、続きを読むかどうかを判断するまでの時間は、ごくわずかだと言われています。
その短い時間の中で、文章の内容までじっくり吟味している余裕はありません。
多くの場合、判断材料になっているのは、レイアウトが整っているかどうかという、ごく直感的な印象です。
要素が揃っていて余白にも一貫性があるページを見ると、人は無意識のうちに「ここは信頼できそうだ」という評価を下しやすくなります。
逆に、要素がばらばらに配置されたページを見ると、内容を読む前の段階で「なんとなく怪しい」「なんとなく不安」という印象を持たれてしまうことがあります。
整っていることは誠実さの証にはならないけれど
もちろん、整列がきれいだからといって、書かれている内容の正しさが保証されるわけではありません。
そこは切り分けて考える必要があります。
けれども、少なくとも制作物に対して丁寧に手をかけているという姿勢は、整列の精度を通して伝わるものだと感じています。
細部への配慮が行き届いているかどうかは、思っている以上に多くの人に伝わっているのではないでしょうか。
小さな会社やお店が発信するチラシやウェブサイトほど、この差がはっきりと表れやすい部分でもあります。
大きな予算をかけられない分、整列という基本的な部分を丁寧に押さえておくだけで、見た人が受け取る印象は大きく変わってきます。
整列とAIデザインツールの関係
近年は、AIを活用したデザインツールが急速に広まってきました。
画像を生成するAI、レイアウトを自動で組んでくれるAI、文章を要素ごとに自動配置してくれるAIなど、その種類は多岐にわたります。
整列という観点から見ても、これらのツールは大きな助けになってくれます。
自動整列機能でできること
多くのデザインソフトやウェブ制作ツールには、要素をワンクリックで揃えてくれる自動整列機能が搭載されています。
複数の画像を選択して「左揃え」ボタンを押すだけで、ばらばらだった端がぴたりとそろう。
こうした機能のおかげで、以前であれば定規や座標の数値とにらめっこしながら手作業で行っていた調整が、驚くほど短い時間で済むようになりました。
AIによる自動整列やスナップ機能は、作業のスピードを大きく引き上げてくれる、頼もしい存在だと思います。
生成AIについても同様で、ラフな指示を与えるだけで、ある程度整ったレイアウトの土台を提案してくれるサービスも増えてきました。
それでも人の目が必要な理由
一方で、AIが提案するレイアウトをそのまま採用すればよいかというと、そう単純でもありません。
AIはあくまで一般的なパターンをもとに整列を提案しているにすぎず、その制作物が置かれる具体的な文脈、たとえば伝えたい情報の優先順位や、ブランドとしての世界観までは汲み取りきれないことが多いのが実情です。
見た目の座標としては完璧に揃っていても、情報の重要度と視線の流れが噛み合っていない、という提案をされることも珍しくありません。
最終的にその整列が「誰に何を伝えるためのものか」を判断するのは、やはり人間の役割だと感じています。
AIが整えてくれた土台をたたき台として活用しつつ、そこに人の意図や文脈を重ねていく。
そんな付き合い方が、今のところはちょうどよい距離感なのではないかと思います。
ツールに使われないための視点
便利な機能ほど、頼りすぎてしまう危うさもはらんでいます。
自動整列のボタンを押せば見た目は揃うので、なぜその位置に揃えるのが適切なのか、という判断を自分の頭で考える機会が減ってしまうことがあります。
これは少しもったいないことだと思います。
なぜなら、ここまで見てきたように、整列という技術は単なる操作の話ではなく、人がどう情報を受け取り、どう心地よさを感じるかという、もっと根本的な理解に支えられているからです。
ツールに頼れる部分は積極的に頼りながらも、そもそもなぜ揃えると良いのか、という原理の部分だけは、自分の言葉で説明できるようにしておく。
そうした姿勢が、AIと共創する時代のデザインにおいても、変わらず大切にされるべき基礎体力なのだと思います。
整列を鍛えるトレーニング方法
整列の考え方を頭で理解しても、実際に手を動かしてみないと、なかなか感覚として身についてくれません。
ここでは、日常のちょっとした時間でできる、整列の感覚を鍛えるための方法をいくつか紹介します。
街の中の印刷物を観察する
電車の中吊り広告、店頭のポスター、レストランのメニュー表。
身の回りには、整列を学ぶための教材があふれています。
気になった印刷物を見かけたら、頭の中で縦横に線を引いてみる、という習慣をつけてみてください。
どこに軸があるのか、その軸は何本あるのか、揃っているのはどの要素なのか。
こうした観察を繰り返していくうちに、自然と自分の制作物にも軸を意識する癖がついてきます。
上手だと感じるデザインだけでなく、なんとなく読みにくいと感じる印刷物についても、なぜ読みにくいのかを分析してみると、思わぬ発見があるものです。
既存のデザインをトレースしてみる
自分で新しいデザインを考える前に、すでに世の中にある優れたレイアウトを、そっくりそのまま再現してみるという練習方法があります。
これはトレース練習と呼ばれ、絵を描く人がデッサンを重ねるのと似た意味合いを持っています。
トレースをしていると、見た目だけでは気づかなかった細かな余白の数値や、要素同士の位置関係が、手を動かすことではじめて見えてきます。
なぜここにこの余白があるのか、なぜこの見出しはこの位置から始まっているのか。
答え合わせをするような感覚で取り組んでみると、整列に対する解像度が一段階上がるはずです。
あえて崩してから直す
すでにきれいに整列されたレイアウトを、わざと少しずつずらしてみる、という練習方法もおすすめです。
見出しの位置を2ミリだけずらす、画像の端を3ミリだけはみ出させる。
そうしてから、もとの整った状態に戻す作業を繰り返してみると、どのくらいのズレが違和感として認識されるのか、自分の感覚として掴めるようになります。
- 観察の習慣：街中の印刷物に軸を見つける
- トレース練習：優れたレイアウトを再現する
- 崩して直す練習：ズレへの感度を鍛える
地味な積み重ねに感じるかもしれませんが、こうしたトレーニングの延長線上に、迷わず整列を判断できる感覚が育っていくのだと思います。
よくある質問
ここまでの内容と関連して、整列についてよく聞かれる質問をいくつか取り上げておきます。
整列の基準はいくつまでにすべきですか
明確な正解があるわけではありませんが、紙面全体で2本から3本程度に絞り込むと、まとまりのある印象になりやすいという傾向があります。
基準となる軸が増えるほど、要素同士の関係性がわかりにくくなり、紙面が散らかった印象になりがちです。
まずは一番重要な軸をひとつ決めて、そこにできる限り多くの要素を揃えていくところから始めてみるとよいと思います。
手描きのラフでも整列を意識したほうがいいですか
ラフの段階から意識しておくことをおすすめします。
デザインの初期段階で軸の方針を決めておくと、清書の作業がぐっと楽になるからです。
逆に、ラフの時点で位置関係が曖昧なまま清書に進んでしまうと、後になって全体を組み直す手間が発生しやすくなります。
整列と余白、どちらを優先すべきですか
どちらか一方だけを優先するというより、両方を同時に調整していく感覚に近いかもしれません。
整列の軸を決めても、余白のバランスが悪ければ美しく見えませんし、余白だけ整えても軸がばらばらであれば落ち着きません。
慣れないうちは、まず整列で骨組みを作り、そのあとで余白を微調整していくという順番が取り組みやすいと思います。
デザインソフトを使わずに整列は学べますか
学べます。
紙とペン、あるいはノートアプリの罫線だけでも、整列の練習は十分に可能です。
大切なのはソフトの操作方法ではなく、要素同士の関係性をどう見るか、という視点そのものだからです。
道具に頼らずに軸を意識する練習を重ねておくと、実際にソフトを使う段階になったときの理解も、きっと早くなるはずです。
整列と写真・図版のレイアウト
これまで主に文字の整列を中心に見てきましたが、写真やイラスト、図版といった要素についても、考え方は基本的に変わりません。
写真の外枠を軸として扱う
写真を紙面に配置するとき、多くの人はまず写真そのものの見え方に意識が向きます。
構図がよいか、明るさは適切か、といった点に注目するのは自然なことです。
ただ、レイアウト全体の整いを考えるなら、写真の外枠がどこにあるかという視点も忘れずに持っておく必要があります。
写真の四辺もまた、他の文字要素と同じように、整列の基準となり得る立派な軸のひとつです。
見出しの左端と写真の左端をぴたりと揃えるだけで、まったく別々に見えていた写真とテキストが、ひとつのまとまりとして認識されるようになります。
複数の写真を並べるときの注意点
複数の写真を紙面に並べる場合、縦横の比率が写真ごとに異なることがよくあります。
比率の異なる写真をそのまま並べると、上端は揃っていても下端がばらばらになったり、逆に下端は揃っていても上端が不揃いになったりします。
こうした場合は、あらかじめ写真の縦横比をトリミングで統一しておくか、あるいはグリッドの枠に合わせて配置する範囲を決めておくと、全体としてすっきりとした印象にまとまります。
- 写真の外枠：文字要素と同じ基準で揃える
- 縦横比の統一：複数枚を並べる際は比率を合わせる
- キャプションの位置：写真ごとに開始位置をそろえる
図版やグラフの軸も忘れずに
資料やレポートで使われる図版やグラフについても、同じことがいえます。
グラフの左端、凡例の位置、タイトルの開始位置がページごとにばらばらだと、内容を正しく理解する以前に、なんとなく読みにくいという印象を与えてしまいます。
数値やデータそのものは正確であっても、見せ方が整っていなければ、伝わる情報の質は下がってしまうものです。
図版を扱う機会が多い人ほど、文字の整列と同じ意識を、図やグラフにも向けてみることをおすすめします。
整列とアクセシビリティの関係
整列は、見た目の美しさだけでなく、より多くの人に情報を届けるという意味でも重要な役割を持っています。
視線の動きを予測しやすくする
高齢の方や、視覚に何らかの特性を持つ方にとって、要素の位置がばらばらな画面は、健常な視力を持つ人が感じる以上に負担の大きいものになりがちです。
視線の移動先が予測できないレイアウトは、情報を探すこと自体に大きなエネルギーを使わせてしまいます。
一貫した軸に沿って要素が並んでいれば、次にどこを見ればよいかが直感的にわかるため、多くの人にとって情報へのアクセスがしやすくなります。
画面サイズが変わっても崩れにくい設計
スマートフォンで見る人、パソコンで見る人、それぞれ画面の大きさはまったく異なります。
整列の基準をあらかじめきちんと設計しておくことで、画面サイズが変わっても、要素同士の関係性が保たれやすくなります。
反対に、行き当たりばったりで要素を配置していると、画面が小さくなった途端にレイアウトが崩れ、情報の優先順位までわからなくなってしまうことがあります。
誰が、どんな環境で見ても情報の構造が伝わるレイアウトを作るという視点は、整列を考えるうえで欠かせない要素のひとつだと思います。
整列の考え方はどこから来たのか
少し話が脇道にそれますが、整列という考え方が、どのように体系化されてきたのかを知っておくと、理解がより深まるかもしれません。
グリッドシステムの誕生
20世紀の半ば、スイスを中心に活動していたデザイナーたちの間で、紙面をあらかじめ格子状に区切り、そこに要素を配置していくという設計手法が広まりました。
これがいわゆるグリッドシステムと呼ばれる考え方で、当時のポスターや雑誌のレイアウトに大きな影響を与えたといわれています。
グリッドシステムの根底にあるのは、感覚や思いつきに頼らず、あらかじめ決めたルールに沿って要素を配置することで、誰が見ても読みやすい、機能的な紙面を作るという発想です。
整列という技術は、このグリッドシステムの考え方と切っても切り離せない関係にあります。
グリッドという格子があるからこそ、要素を揃える基準が明確になり、複数のページにわたっても一貫したデザインを保つことができるようになったわけです。
印刷から画面へ受け継がれた発想
当時のグリッドシステムは、あくまで紙の印刷物のために考えられたものでした。
けれども、その考え方はコンピューターの画面設計にもそのまま受け継がれています。
ウェブサイトのレイアウトで使われるコンテナや列の概念も、たどっていけばこのグリッドシステムの延長線上にあるものです。
道具や媒体が紙から画面へと大きく変わっても、揃える、という基本的な発想そのものは、時代を超えて変わっていないというのは、なんだか興味深いことだと感じます。
整列とブランドの一貫性
最後に、複数の媒体にまたがる展開について触れておきます。
媒体をまたいでも軸を保つ
名刺、チラシ、ウェブサイト、SNSの投稿画像。
ひとつの会社やお店が発信する情報は、いくつもの媒体にまたがって展開されることがほとんどです。
このとき、媒体ごとに整列のルールがばらばらだと、受け手の中で「同じところから発信されている情報だ」という認識が育ちにくくなってしまいます。
媒体が変わっても、見出しの配置や余白の取り方といった整列のルールを揃えておくことで、発信者としての一貫した印象を積み重ねていくことができます。
ルールブック化しておく価値
余裕があれば、自分たちの整列のルールを簡単なメモとして残しておくことをおすすめします。
見出しは左揃えで左端から何ミリの位置に置く、余白の最小単位は何ミリにする、といった基本ルールを一度言語化しておくと、次に別の制作物を作るときにも迷いが少なくなります。
これは大掛かりなルールブックを作れという話ではなく、ちょっとしたメモ書き程度で構いません。
そうした積み重ねが、結果として、揃っていて心地よいと感じてもらえる発信につながっていくのだと思います。
揃えることへの心理的なハードル
理屈としては理解していても、実際に手を動かす段階になると、案外多くの人が同じところでつまずきます。
自由に配置したい気持ちとの葛藤
デザインを始めたばかりの頃は、要素を軸に揃えることに、どこか窮屈さを感じてしまう人も少なくありません。
もっと自由に、もっと個性的に配置したい、という気持ちが先に立ってしまうからです。
その気持ち自体は、決して否定されるべきものではないと思います。
むしろ、揃えることの窮屈さと、自由に配置したい欲求の間で揺れ動きながら試行錯誤する時間こそが、デザインの感覚を育てていく過程だと感じています。
ただ、最初のうちは、その自由さが単なる「ばらつき」になってしまっているケースが多いのも事実です。
自由な配置と、根拠のないばらつきは、似ているようでまったく別のものです。
まずは型を知ってから崩す
武道や書道の世界に、守破離という言葉があります。
まずは基本の型を忠実に守り、それができるようになってから、少しずつ自分なりに崩していく、という考え方です。
整列についても、同じことがいえるのではないかと思います。
いきなり自由な発想でレイアウトを組もうとするよりも、まずは基本の軸に忠実に沿わせる練習を重ね、その感覚が身についたうえで、意図的に軸から外す、という順番のほうが、結果として説得力のあるデザインにたどり着きやすい気がしています。
型を知らないまま崩してしまうと、それは単なる乱れにしか見えませんが、型を知ったうえで崩すと、そこに意図が生まれます。
見る人にも、その違いは不思議と伝わるものです。
迷ったら基本に立ち返る
制作を続けていると、途中でレイアウトに迷ってしまう瞬間が誰にでもあります。
あれこれ手を加えているうちに、何を基準にしていたのかがわからなくなってしまう、という経験をした人も多いのではないでしょうか。
そんなときは、いったん手を止めて、最初に決めた軸に立ち返ってみることをおすすめします。
複雑に考えすぎず、要素の端をもう一度その軸に揃え直すだけで、混乱していた紙面がすっと整理されることがよくあります。
迷ったときほど、基本に戻る。
これは整列に限らず、ものづくり全般に通じる、地味だけれど確かな指針だと思います。
整列がもたらす実務上のメリット
整列を意識することは、見た目の印象を良くするだけでなく、制作の現場における実務的なメリットにもつながっています。
修正がしやすくなる
基準となる軸が明確に決まっているレイアウトは、後から内容を修正する際の作業効率が大きく変わってきます。
文章量が増減したときも、あらかじめ決めておいた軸に沿って要素を動かすだけで済むため、レイアウト全体を組み直す必要がありません。
反対に、感覚だけでその場しのぎに配置されたレイアウトは、少し文章が増えただけで全体のバランスが崩れ、あちこちを調整し直す羽目になりがちです。
整列のルールをあらかじめ決めておくことは、未来の自分の作業時間を守ることにもつながると考えると、少し前向きに取り組めるかもしれません。
チームで制作するときの共通言語になる
複数人で制作物を作る場面では、整列の基準が共有されているかどうかで、コミュニケーションのしやすさが変わってきます。
「見出しはこの軸に揃える」という共通認識があれば、担当者が変わっても一貫したレイアウトを保つことができます。
逆に、各自の感覚に任せて配置してしまうと、パーツごとに微妙な軸のズレが生まれ、最後に組み合わせたときに不自然な仕上がりになってしまうことがあります。
- 基準の共有：担当が変わっても軸がぶれない
- 確認の効率化：数値で揃っているか判断できる
- 修正の速さ：軸に沿って動かすだけで済む
小さな会社ほど恩恵が大きい
大きな予算をかけて何度も作り直せる環境であれば、整列が多少崩れていても、時間をかけて調整することができるかもしれません。
けれども、限られた時間と人数で制作物を仕上げなければならない小さな会社やお店にとっては、最初から整列の基準を決めておくことのメリットは、より大きなものになります。
一度ルールを決めてしまえば、次に作る制作物のスピードと質を、同時に底上げしてくれるからです。
派手な演出やこだわりの装飾に時間を割く前に、まずは整列という土台をきちんと固めておくこと。
回り道のようで、実はもっとも近道な取り組み方なのではないかと、個人的には思っています。
余白の数値をルール化する
整列の感覚を実務に落とし込むうえで、具体的な数値の目安を持っておくと、判断に迷う場面がぐっと減ります。
基準となる単位を決める
多くの制作現場では、余白や間隔の基準として、ある決まった数値の倍数を使うという考え方が採用されています。
たとえば8ミリを基準の単位として決めておき、要素同士の間隔は8ミリ、16ミリ、24ミリといったように、その倍数の中から選んでいくという方法です。
こうしておくと、感覚だけで「なんとなくこのくらい」と間隔を決めてしまうことがなくなり、紙面全体の余白に一貫したリズムが生まれます。
単位をいくつにするかは、制作物のサイズや用途によって変わってきますが、大切なのは基準となる数値を最初に決めてしまうという発想そのものです。
ウェブデザインにおける数値の目安
ウェブサイトの制作現場でも、同じような考え方がよく使われています。
要素同士の間隔を8の倍数、あるいは4の倍数で管理するというルールは、ウェブデザインの現場で広く浸透している手法のひとつです。
画面幅が変わっても、この倍数のルールに沿って間隔を調整していけば、極端に間隔がばらつくことを防ぐことができます。
数値のルール化は、一見すると窮屈に思えるかもしれませんが、むしろ判断の回数を減らし、デザインの本質的な部分に集中するための土台になってくれるものです。
ルールはあくまで出発点
もちろん、数値のルールに縛られすぎて、表現の幅を狭めてしまっては本末転倒です。
基準となる数値はあくまで出発点であり、必要であれば意図を持って外れることも、デザインの一部として認められるべきだと思います。
大切なのは、ルールを知らずに崩れているのか、ルールを知ったうえで意図的に崩しているのか、という違いです。
この違いを自分の中で説明できるようになることが、整列という技術を本当の意味で使いこなしている状態なのではないでしょうか。
整列を身につけたその先にあるもの
整列という技術は、デザインの入り口に位置する、いわば基礎の基礎です。
けれども、この基礎をどれだけ丁寧に身につけたかによって、その先にたどり着ける表現の幅は大きく変わってきます。
基礎があるからこそ応用が効く
整列の感覚がしっかり身についていると、あえて要素を斜めに配置したり、意図的に軸から外したりする、いわゆる崩しの表現も、自信を持って使えるようになります。
基礎が曖昧なまま崩しの表現に挑戦すると、それはただの乱れにしか見えませんが、基礎がしっかりしていれば、同じ崩しでも意図の伝わる表現になります。
遠回りに思えるかもしれませんが、整列という地味な基礎を丁寧に積み重ねることが、結果的にはもっとも早く、自由な表現にたどり着くための近道なのだと思います。
日々の制作物の中で試してみる
大掛かりな作品でなくても構いません。
次に作る資料やチラシ、あるいはちょっとしたSNSの投稿画像からでも、整列を意識する練習は始められます。
今日紹介した左揃え、中央揃え、右揃え、均等割り付けといった型を思い出しながら、まずはひとつだけ、基準となる軸を決めてみてください。
その小さな一歩の積み重ねが、半年後、一年後の制作物の質を、確実に底上げしてくれるはずです。
視線の動きと整列の関係
整列を考えるとき、あわせて知っておくと役立つのが、人の視線がどのように紙面や画面を動いていくか、という視線誘導の考え方です。
Zパターンとその特徴
チラシやポスターのように、比較的シンプルな構成の紙面を見るとき、人の視線はアルファベットのZを描くように動くといわれています。
左上から右上へ、そこから斜めに左下へ、さらに右下へ、という流れです。
見出しやロゴを左上に、価格や締め切りといった重要な情報を右下に配置するレイアウトが多いのは、この視線の流れを踏まえた結果だと考えられます。
整列の軸を、このZの動きに沿わせるように設計しておくと、意図した順番で情報を読んでもらいやすくなります。
Fパターンとウェブサイトの関係
一方、文字情報が多いウェブサイトやニュース記事のようなページでは、視線はアルファベットのFに近い動きをすることが知られています。
上部を左から右へ読んだあと、少し下がってまた左から右へ、という動きを繰り返しながら、だんだんと左端だけを追うようになっていく、という流れです。
このパターンを踏まえると、重要な情報ほど左側や上部に配置し、見出しの開始位置をきちんと左端に揃えておくことの大切さが、あらためて理解できるのではないかと思います。
多くのウェブサイトで本文が左揃えを基本にしているのは、単に読みやすいからというだけでなく、こうした視線の動きに合わせた合理的な選択でもあるわけです。
視線の起点をコントロールする
Zパターンにせよ、Fパターンにせよ、共通しているのは、視線には一定の起点と流れがある、という点です。
整列の軸を意識的に設計するということは、この視線の流れをある程度コントロールし、伝えたい情報の順番を、受け手に自然な形で体験してもらうということでもあります。
なんとなく空いている場所に要素を置いていくのではなく、まずどこに視線を集めたいのか、そこからどう流れていってほしいのかを考えたうえで、軸の位置を決めていく。
そんな順番で制作を進めていくと、同じ情報量でも、伝わり方がまったく違ってくるはずです。
すべてのレイアウトに万能な型はない
ただし、ZパターンやFパターンは、あくまで多くの場合に当てはまりやすい傾向であって、すべての制作物に当てはまる絶対のルールではありません。
写真を大きく使ったビジュアル重視のデザインでは、視線はもっと自由に、写真の印象的な部分から動き出すこともあります。
大切なのは型を鵜呑みにすることではなく、自分の制作物ではどこに視線を集めたいのか、そのために整列の軸をどう設計すればよいのかを、そのつど考える習慣を持つことだと思います。
型は判断のヒントとして活用しつつ、最終的には自分の目で、実際にどう見えているかを確かめる姿勢を忘れないようにしたいものです。
ボタンや導線にも整列は効いてくる
最後にもうひとつ、実務でよく見落とされがちな部分に触れておきたいと思います。
問い合わせボタンや申し込みリンクといった、いわゆる導線となる要素の配置です。
ボタンの位置がページごとにばらつくと
ウェブサイトの複数のページを見比べたとき、あるページではボタンが右側にあり、別のページでは左側にある、というように配置がばらついていることがあります。
内容としては同じ役割を持つボタンであっても、位置が毎回変わってしまうと、訪れた人は無意識のうちに「探す」という余計な作業を強いられてしまいます。
迷わせないという視点で揃える
導線となる要素の位置を、サイト全体を通してひとつの軸に揃えておくことは、見た目の統一感だけでなく、使いやすさそのものに直結する工夫です。
同じ位置に同じ役割の要素があるという安心感は、思っている以上に、次の行動へのハードルを下げてくれます。
ここでもやはり、整列という考え方は、見た目を整えるための技術であると同時に、情報の受け手に寄り添うための技術でもあるのだと感じます。
小さなボタンひとつの位置決めにも、こうした視点を持っておくと、細部まで丁寧に作り込まれた印象を積み重ねていくことができるはずです。
テンプレートを使うときにも役立つ視点
デザインの経験が浅いうちは、既存のテンプレートを活用して制作を進める人も多いと思います。
テンプレートはとても便利な存在ですが、整列の考え方を知っているかどうかで、その使いこなし方に差が出てきます。
テンプレートは万能ではない
テンプレートに用意された文字の量と、実際に自分が入れたい文章の量は、必ずしも一致するとは限りません。
文章が想定より長くなったり短くなったりしたとき、なんとなく空いたスペースに文字を詰め込んでしまうと、せっかく整えられていたテンプレートの軸が崩れてしまうことがあります。
崩れた軸に気づけるかどうか
ここで整列の感覚が身についていると、テンプレートのどこに軸があったのかを意識しながら、崩れた部分だけをうまく調整することができます。
反対に、整列という視点を持たないまま作業してしまうと、なぜ仕上がりに違和感があるのか、原因を特定できないまま時間だけが過ぎてしまう、ということにもなりかねません。
テンプレートはあくまで出発点であり、そこに用意された軸の意図を読み取ったうえで手を加えていく、という姿勢が、結果として質の高い仕上がりにつながっていきます。
道具を使いこなす力の土台には、結局のところ、整列という基本原則の理解が横たわっているのだと思います。
整列という小さな習慣が生む大きな差
ここまで、整列についてかなり長く書いてきました。
改めて振り返ってみると、整列というのは、派手さのない、とても地味な技術です。
色使いのように一目で印象を左右するわけでもなく、写真のクオリティのように直接的な訴求力を持つわけでもありません。
けれども、この地味な技術こそが、実は制作物全体の完成度を底上げしている土台の部分なのだと思います。
色や写真がどれほど優れていても、整列が乱れているだけで、その魅力は半分も伝わらなくなってしまいます。
逆に言えば、特別なセンスや高価なツールがなくても、要素の端を揃えるという意識ひとつで、誰でも今日から制作物のクオリティを引き上げることができるわけです。
明日、街を歩くときにでも、目に入ったポスターや看板の中に、隠れた軸を探してみてください。
きれいに揃っているものと、そうでないものの違いが、きっと以前よりもはっきりと見えてくるはずです。
そしてその視点は、自分自身の制作物を見返すときにも、必ず役に立ってくれると思います。
揃える、というたったひとつの意識が、伝えたい情報をより多くの人に、より正しく届けるための力になる。
そのことを、この記事を通して少しでも感じてもらえたなら嬉しく思います。
参考資料
本記事の執筆にあたり、視覚デザインの基本原則やゲシュタルト心理学に関する以下の情報を参考にしています。
- Nielsen Norman Group：「The Gestalt Principles」
- Lewis University：「C.R.A.P. Design Principles」
- Pressbooks：「Four Principles of Document Design」
 |
無償のデザインコンサルをご希望の方は、Squareにて： 無料のコンサルを予約する ▶︎ |
|
直接メールにてメッセージを送りたい方は、Marz宛に： メールでメッセージを送る ▶︎ |
|
月額¥299,800のデザイン7種パッケージをはじめました!： デザインサブスク頁を見る ▶︎ |
