このデザインの配置、どっちが正解？整列のセンスを磨いておこう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
Webデザイナーの松下 絵梨です。
デザインの仕上がりを左右する基本的なレイアウトのひとつが「整列」です。
整列とは、デザインを構成する要素を、まとまりや秩序をもって配置することです。
整列を意識してデザイン要素を配置すれば、洗練さが大きく変わります。
そこで今回は、「整列」に関するクイズを3問用意しました。
以下の作例を見比べていただき、AとB、どちらの配置がよりバランスよく整っていると感じますか？
1問目「アイコンとテキスト」（難易度★）
メールのアイコンとその横のテキストの配置、整っているのはどっち？
2問目「複数のボタン」（難易度★★）
Webサイトのナビゲーションバーのボタンの配置、整っているのはどっち？
3問目「複数のアイコン」（難易度★★★）
アプリのメニューアイコンの配置、整っているのはどっち？
いかがでしたか？
私が考える答えは……
1問目の答え：B
2問目の答え：B
3問目の答え：B
以上が私なりの解答です。
ではここからは、それぞれの作例のAとBで何が異なっていたのか？を説明し、整列を意識してデザイン要素を配置するためのポイントを紹介していきます。
1．テキストは天地中央に揃えて配置する
では、1問目から振り返っていきましょう。
私が選んだ答えは「B」でした。
AとBの違いは、アイコンとテキストを中央に配置した際の上下の位置（天地）です。
Aはアイコンに対してテキストが少し上にズレており、天地中央に配置されていないように見えます。
一方でBは、天地中央に揃っています。
実は、AとBどちらも、Adobe Illustratorで「垂直方向中央に整列」という同じ操作を行って配置したものです。
なぜこのような違いが生じたのかを説明していきます。
デフォルト設定の整列だと、天地中央に見えない理由
先ほどのような違いが生まれた原因は、和文フォント（日本語フォント）にあります。
実は、和文フォントをアプリケーションの機能を用いて整列させようとすると、デフォルトの状態では天地中央に揃わないことがあります。
ここで、欧文フォントと和文フォントの違いについて解説しておきます。
欧文フォントの場合、文字ごとに「アセンダーライン」「ベースライン」「ディセンダーライン」などの基準線があります。
欧文フォントには、小文字の「g」や「p」のようにベースラインから下に伸びる部分（＝ディセンダーライン）をもつものがあるため、文字は下方向に余白を含んだ設計になっています。
一方、和文フォントにはディセンダーラインをもつ文字が存在しません。
一般的なアプリケーションで文字を整列しようとすると、欧文フォントも和文フォントも同じ設定が適用されるため、欧文フォントのように下方向に余白が含まれてしまいます。
例えば以下は、Illustratorを用いて文字を編集している画面です。
バウンディングボックス（オブジェクトを選択すると表示される外枠）というエリアに、ディセンダーラインによる余白が含まれていることがわかります。
その結果、天地中央に揃えたつもりでも、アイコンと並べたときに、位置がわずかに上にズレて見えてしまうのです。
しかし、こういったズレを解消したいときこそ、Adobe Illustratorが役立ちます。
Illustratorを用いて、和文フォントの天地中央を調整する
Illustratorでは、和文フォントで天地中央を調整したいときに、バウンディングボックスを基準にするのではなく、「見た目どおりの字形」を基準に調整できます。
方法はカンタンです。
整列パネルのメニューから「字形の境界に整列」をONにするだけ。
こうするだけで、文字の見た目を基準にして天地中央に揃います。
ただし、欧文テキストの場合は注意が必要です。
欧文テキストはベースラインに合わせるのが基本なので、「字形の境界に整列」をONのまま下揃えにすると、「y」や「g」の文字のディセンダー（最下端）に基準が合ってしまい、バランスが悪くなってしまいます。
解決策は和文フォントのときとは逆で「字形の境界に整列」をOFFにすること。
そうすることで、ベースライン基準で下に揃うようになります。
Illustratorを使えば、こうした細かな調整を状況に応じて選べます。
それがIllustratorが選ばれ続けるひとつの理由です。
2．複数のボタンの間隔はアプリケーションを用いて揃える
続いて2問目を取り上げます。
この問題では、webサイトのナビゲーションバーを取り上げました。
この問題の場合、Aのボタンの間隔がバラバラなのに対して、Bのボタンの間隔が揃っています。
つまり、視覚的に整理されているのは「B」となります。
では、この「A」のように間隔がバラバラになってしまうようなケースは起こり得るのでしょうか？
実は案外、こういったケースは現場で起こりがち。
その理由は、目分量で数値をコントロールしてしまっているためです。
Illustratorの「等間隔に分布」を用いて、アプリケーション上で揃える
作例のように、複数のオブジェクトの間隔を揃えたい場合、目で見て揃えることは避けるべきです。
どれだけ目利き力がある方でも、ちょっとしたことが原因で、ズレが残ることがあります。
そのため、アプリケーションを用いましょう。
Illustratorでは、整列パネルにある「等間隔に分布」の機能を用いることで、指定した数値でオブジェクト間の距離を揃えられます。
ここからはIllustratorを用いた間隔調整の方法をお教えします。
まず、間隔を揃えたい要素（今回は5つのボタン）をすべて選択したのち、「お問い合わせ」ボタンを再度クリックして、整列の基準となるオブジェクト（キーオブジェクト）に設定します。
次に、整列パネルの「等間隔に分布」の「数値の入力欄」に、設定したい間隔の数値を入力し、「水平方向に等間隔に分布」をクリック。
すると、「お問い合わせ」ボタンの位置は固定されたまま、残りのボタンがすべて等間隔に配置されます。
Illustratorを使えば、複数のオブジェクトをカンタンに等間隔で揃えられます。
3．視覚的な重心を意識して見た目を整えよう
最後に3問目を取り上げます。
3問目は、アプリのタブバーに5つのアイコンが並んでいるという作例でした。
AとBの違いは、3つ目の「動画レッスンのアイコン」と、4つ目の「コミュニティのアイコン」の整列状況です。
実はAの作例では、3つ目のアイコンが少し左に寄って見え、4つ目のアイコンも少し下によって見えています。
Bは見た目のバランスが整っているため、私なりの正解は「B」となります。
ちなみに、Aはアプリケーション上で天地中央に揃えたものでした。
アプリケーション上で揃えたはずなのになぜかズレてしまっている、なぜそのような問題が生じてしまうのでしょうか？
その理由について解説していきます。
整列しているのにズレて見える理由
以下の図は、「動画レッスンのアイコン」で使われていた右向きの三角形（▶）部分を抜き出したものです。
Aはアプリケーション上で天地中央にしたものですが、中心線を引いてみると、たしかに左に寄って見えています。
ただ、大きく拡大すると、実際は左右の幅は均等であることがわかります。
なぜ左に寄って見えてしまうのでしょうか？
その理由は私たちの「錯視」にあります。
錯視とは、目から入った情報が実際とは異なって知覚される現象のことです。
Aの場合、三角形の左側の面積が広いぶん、重心が左に偏っているように見えてしまうのでした。
Illustratorの整列機能は、三角形の外形を基準にした計算上の中心で位置を合わせる仕組みです。
しかし、この三角形は左側の面積が広いため、以下のように重心をズレて感じてしまいます。
このような視覚的な重心がズレる場合は、重心のバランスをとるようにして配置し直します。
今回の作例だと、三角形をわずかに右へずらして配置し直せば、視覚的に自然な中央揃えになります。
次に「コミュニティ」のアイコンも見ておきましょう。
このアイコンは、下に人物シルエット、上に放射状の線が並び、重心が下方に集まりやすいデザインとなっています。
このような場合にアプリケーションの「整列」機能を用いると、計算上の整列は実現できても、見た目の重心は下へ引っ張られてしまいます。
そのため、アイコン全体をわずかに上にずらして配置し直す必要があります。
このように、デザイン要素の整列を行う際には、アプリケーションの機能だけでなく、自分の視覚を頼りにすることも大切です。
まとめ：整列のセンスを磨くポイント
今回は、デザイン要素を、まとまりや秩序をもって配置するための「整列」について解説しました。
最後に今回のノウハウのまとめです。
1．テキストは天地中央に揃えて配置する
- 和文と欧文では文字の設計が異なる
- Illustratorを使っていれば、「字形の境界に整列」のON／OFFを切り替えれば、和文や欧文の整列にスムーズに対応できる
2．複数のオブジェクトはアプリケーションを用いて等間隔に配置する
- 複数のオブジェクトの間隔を整える際は、目分量ではなく、アプリケーションを用いて間隔を数値で管理する
3．視覚的な重心を意識して見た目を整える
- アプリケーションによる計算上の天地中央と、視覚的に心地よい天地中央は一致しない場合がある
整列を意識したデザインは、見た目の安定感を高めるうえで大切です。
ぜひ、Illustratorの整列機能を使いこなし、洗練されたデザインを実現しましょう。
お相手はwebデザイナーの松下 絵梨でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。クイズの答えはひとつの参考としてください。
執筆：松下 絵梨
大阪出身大阪在住のweb/UIデザイナー、講師。株式会社ロクナナ所属。
成安造形大学准教授、Adobe Community Expert、京都芸術大学非常勤講師、帝塚山大学非常勤講師、CSS Nite in Osaka主宰。
『Adobe XDではじめるWebデザイン＆プロトタイピング 一歩先行く現場のスキル』の著者。