デザインのこと、日常のこと―ワカイ日報III

今日は情報整理とレイアウトに欠かせない、グルーピングについて。

グルーピングとは、情報をグループ分けすること。情報を整理し、視覚的に分類することで見た人の理解の速度と深さをあげることができる。配置、大きさ、形状、色、フォントその他、いろんな方法でグルーピングできる。

どのようにグルーピングするかは目的によって異なる。上の画像では数字とアルファベットに分け、それぞれにタイトルをつけたが、１A、２B、３C、４Dのようなグルーピングの仕方もあるだろう。その場合は意図が変わっている。

次の画像は、A～Fについて整然と並べたものと、それを意図を持ってグルーピングしたもの。

図B-1はすべてが並列な関係。
これに対して図B-2は関係性が複雑になるが、視覚的にどれとどれが関係性が深いのかが感じられる。A、B、Cでひとつのグループ、D、E、Fでひとつのグループになる。

このように、グルーピングで関係性がわかりやすくなるが、できているつもりでもできていなかったり、意図しないグルーピングが行われることもあるので注意したい。

このB-3には、いくつかの問題がある。

TITLEはこの図版の全体のタイトルなのか、Aのタイトルになのかわかりづらい。Aと同じ幅なのが原因だ。

Aの下にはキャプションとしてAの下に文章を入れたが、Aとキャプションの間隔がキャプションの行間よりも短いため、キャプションの1行目とAがひとつのグループに見えてしまう。

BとCにもそれぞれキャプションをいれたのだが、どちらのキャプションなのかがわかりづらい。AとBの縦サイズが同じなので、調整の仕方によっては、今度はそれがグループに見えてしまう場合もある。

これらの問題点は気づけば回避できるので、どれをグルーピングし、どれをグルーピングしないかを意識しよう。