整列【猫で学ぶ基礎デザイン講座：第2回】 #猫デザ

今回はデザインの基本4原則の一つ「整列」について紹介します。
その前に、初めての方でこの講座のことをよく知らないという方は、こちらの記事をご覧ください。

整列とは？

整列とは、全ての要素を秩序を持って配置し、視覚的な繋がりを持つようにして一体感を作ることです。なんとなく配置しないということが重要です。

整列のメリット

整列のメリットはこちらです。

・整列されて見やすくなることで情報の理解が早まる

文字だとイメージしづらいので整列のNG例を用意しました。このように一体感なく情報が配置されていると、スムーズに理解することが難しいです。

NGポイント
・全ての要素の配置位置に秩序がなくバラバラ
・文章の揃えに一貫性がない（右揃え・左揃え・中央揃えが混在）
・要素が散らばっていてどこから見ればいいかわからない（目の導線設計が考えられてない）
・全ての情報を見て理解するのに時間がかかる

そして、NG例を改善したものがこちらです。

イラストは左側、テキストは右側、テキストの揃えは全て左揃えになっています。秩序を決めて整列させたことで一体感が出ました。

目の導線も整えられ、情報の理解もスムーズになっています。ぱっと見でわかりやすくなりましたね。

基本的な揃え方の種類

要素を整列させる方法は何種類かあるので紹介します。

おそらく多くの方が使ったことがある中央揃え。この揃え方はフォーマルで落ち着いた印象を与えることができる揃え方です。

結婚式の招待状などはこの揃え方をしている場合が多いです。フォーマルで落ち着いた印象は裏を返すと、無難で退屈な印象を与える場合もありますので多用は禁物です。

デザインを始めたばかりの方は中央揃えを多用しがちなので、中央揃え以外の揃え方にチャレンジしてみてください。 Webサイトやスライド資料を制作される方は左揃えにチャレンジしてみるといいと思います。

右揃えは使い所によっては目の導線を混乱させる画面を作ってしまうので注意が必要です。（個人の経験として印刷物をデザインをする時に使うことが多いなと感じています。Webサイトやスライド資料制作で右揃えを多用することはあまりないです。）

また、縦方向だけではなく横方向の揃え方もあります。

強い整列には直線が隠れている

中央揃えは、整列の中でも一番マイルドな揃え方です。要素の縁がラインではなく、曲線なのがわかりますか？

強い整列というのは左揃えや右揃えのように要素の縁が直線を形作っているように見えます。この直線は慣れてくると自然と見える（気づく）ようになります。

改めてどのような直線が隠されているのか見てみましょう。

整列の応用問題を解いてみよう！

ここまで学んだ知識を使って、整列の応用問題を解いてみましょう！
トラネコの呼び分けについて紹介するスライドを作りました。さて、どこを改善するとよいでしょう？

応用問題のNGポイント・解答例

NGポイント
・文章が右揃えと左揃えで混在している
・リストが右揃えになっていて読みづらい

解答例1はこちら。まずはシンプルに文章を左揃えにして要素を移動させた改善案です。目の導線が左上から下へという流れになり、スムーズに情報を追うことができるようになりました。

こうなると右上の猫のイラストの扱いが気になってきます。ここだけ配置の根拠が薄く、「なんとなく配置している」感じがします。猫のイラストを入れる理由・意図に合わせて配置を考えてみましょう。

解答例2。「猫のイラストをあしらい（装飾）として使いたい」という場合は、このように大胆にトリミングをして背景にレイアウトしてみていいかもしれません。

解答例3。「一つの要素として猫のイラストはきちんと見せたい」という場合は、エリアをしっかり作ってレイアウトするのがいいでしょう。この時も整列の原則を使って、要素の縁がラインを作るようにレイアウトすると、見た時に理解のスピードがアップします。

今後、より楽しんで学べる講座にしていきたいと思っているので、感想や気づいたことがありましたら、ぜひTwitterやnoteでコメントをいただけると嬉しいです。皆さんと一緒に講座を作っていければと思います。ハッシュタグはこちらです。 #猫デザ

画像内の猫に関する文章は以下のウィキペディアから引用しています
「ネコ」（最終更新 2021年8月30日 (月) 14:44）『ウィキペディア日本語版』。