【前編】わかりやすいレイアウトのポイントとは？「整列」について、その効果や具体的な方法について解説します。

みなさん、はじめまして！
つながるデザイン研究所研究員のみどりです。
どうぞよろしくお願いします！

みなさんはわかりやすいレイアウトにするためのポイントをご存じでしょうか？
押さえるべきポイントはいくつかありますが、まずは「整列」について2回に分けて解説します。

1. 整列による3つの効果とは？

整列による効果は3つ挙げられます。

① 情報が整理され、理解しやすくなる
② 統一感のあるデザインになり、読みやすくなる
③ 見た目がきれいに整う

情報をわかりやすく伝えるために、どれもとても大切な要素であることがわかります。
では、具体的にどのように整列させればよいのでしょうか？

整列のポイントは「見えない線」でつなげることです。
この「見えない線」に沿ってレイアウトすることで統一感が生まれ、すっきりと整理することができます。
視線の基準となる「見えない線」は、「ブロックの端」・「文字の端」・「文字と画像の端」などをそろえることで生まれます。

①ブロックの端をそろえる
垂直のラインと水平のラインで一直線になるよう整列することが大切です。
基本の枠組みをしっかり整列させることで、すっきりきれいにまとまります。

②文字の端をそろえる
要素ごとに文字の端をそろえることで、整然とした印象を与えることができます。

③　文字と画像の端をそろえる
見出し・画像・説明文などをまとめてレイアウトする場合、それぞれの横幅をそろえ、ひとつの枠の中に収めるイメージで作成するときれいにまとまります。

今回は、「整列による3つの効果とは？」・「整列のポイントは『見えない線』でつなげること！」についてお話ししました。

次回、後編の「文字の整列の種類と特徴」・「整列にはグリッド線を使うと効果的！」をお送りします。

ありがとうございました！