Webの情報を「いかに読みやすくするか」上級編は、色や余白を使った「グループ化」

今回は、「第2回：情報もレイアウトしよう」を、目に見えた形で表現する場合のヒントについてお伝えします。整理した情報を「いかに読みやすくできるか」を考えてみたいと思います。

青森県産品を取り扱っているお店を例にしてみます。

さっそくページに入れ込みしてみましょう。

このままでもそんなにおかしくはないですが、箇条書きにした順番でそのまま掲載してしまったため、商品に統一感がなかったり文章だらけに感じます。また、パッと見たとき、りんごジュースとしじみ貝の写真が一緒に飛び込んでくるため、違和感を感じた方もいるかもしれません。

ここで重要なのが「グルーピング」です。

今回の商品内訳から分けられるのは

• (1) りんご
• (2) ジュース
• (3) アイスクリーム
• (4) しじみ貝

ですね。

さらに、(2) ジュースと (3) アイスクリームは、(1) りんご の中にも含まれます。
なので、

• (1) りんご
• ジュース
• アイスクリーム
• (2) しじみ貝

と、グルーピングをします。

そして、
※「第3回：文字もレイアウトしよう！」
※「第4回：文字もレイアウトしよう！(2)」
も意識しながら、レイアウトします。

すると、こうなります。

どうでしょう？
訴えたいことをどんどん書き連ねるのではなく、関連性の高いものをグルーピングし、まとめることで可読性が高くなります。

また、グループが変わるときは、スペースを若干多めに空けるとより伝わりやすくなります。
（上記の場合は「りんご」と「しじみ」の間）

店頭ではお客さまに、商品の特徴などを直接説明することができますが、ホームページ上では会話ができません。商品を買ってもらうためには、「ページの中でいかに接客するか」が重要なポイントになってきます。そのためにも、なるべく多くのテキストを読んでもらったり写真を見てもらったりするための、情報整理（グルーピング）をおすすめします。

次回も、レイアウトの工夫について、お伝えします。