整列を利用して、デザインをきれいにしてみよう

今回のテーマは「整列を利用して、デザインをきれいにしてみよう」です。

整列がなくて課題のあるデザインを、Figmaを利用してきれいにしていきます。

整列とは？

「整列」とは、並べて強い線を出すことで意味をつくる手法です。
しっかりと要素をそろえて配置されていることで情報が整理されて、分かりやすくなります。

Before/Afterを確認する

今回扱う題材のBefore/Afterはこちらです。

下の画像を見て、課題をどのように改善し、整ったデザインにしているのか一度立ち止まって考えてみてください。

NG要素を確認する

それではこれから、どのように課題を改善していくのかについて説明していきます。
まず、どのようなNG要素（課題点）があるのか、理由とセットで確認しましょう。

今回のNG要素：「テキスト要素がそろっていない」
画像では、要素ごとの左端に沿わせる形で赤い線を引いています。 こうするとパッと見ただけでも分かるかと思いますが、線がジグザグになっていて、全体的に揃っていません。 揃っていないことで、関連している情報であることが見たときに分かりづらくなってしまっています。

改善の方向性

「テキスト要素がそろっていない」ことに課題があったので、 縦に垂直に伸びる一本の線にテキストの左端を寄せるようなイメージで配置してあげることで、分かりやすくなりそうです。

（画像に引いた緑色の一本の線が左端として揃えたい位置になります）

デザインする

実際に左端を揃えながら、配置を整理していきます。先ほどの緑色の線がある想定で、全体の要素を揃えていくイメージです。

デザインステップ：
・テキスト要素を左端を揃えることを意識しながら配置する
・テキスト要素の多くが左側に寄ったため、全体のバランスを整えるため、右側にある図のアイコンも左に寄せる

Figmaの整列機能の活用

Figmaなどのツールでは、2つ以上の要素をまとめて揃えてくれる機能を使って簡単に「整列」させることができます。


プロパティパネルの上部にあるオブジェクト整列機能を使って、中央寄せ、左寄せ、右寄せなどが簡単にできます。

動画の通り、いくつもの要素を一瞬で左揃えにすることができました。
中央寄せ、左寄せ、右寄せなどを使う場合は、どれか一つに合わせることが多いです。

まとめ

以上が「整列」を利用したデザインの整理です。

次は、「近接」を利用したデザインの整理を確認していきます。