情報の◯◯を◯◯するだけで、あなたのWebサイトはだんぜん見やすくなる
家族や友人から、次のようなLINEが送られてくること、ありませんか？
買い物お願い！
ナス、ビール、日本酒、ケチャップ、キュウリ、トマト、お酢、醤油、レモンサワー
思いついた順番に、そのまま書き出した感じですね（笑）買い物を頼まれたほうは、このメモを片手に、スーパーの中を回るのはちょっと大変です。
まあ、休日に、家族にLINEで買い物をお願いするくらいなら、このような書き方でもたいした問題ではありません。
ただ、企業や公的機関のWebサイトでも、（このお買い物メモほど極端ではないにしても）乱雑な構成のまま、ただ情報を羅列してしまっている事例を、ちょくちょく見かけます。
このような見せ方だと、なぜ、見づらくなってしまうのでしょうか？デザインセンスが悪いからでしょうか？
どうすれば、見やすくできるのでしょうか？
その本質的な解決法は、じつは次の一文で説明できます。
あなたが伝えたい情報を、ヒトの脳が好む構造に整理して視覚的に表現すること。
これに尽きます。
人の脳は、情報を「グルーピング」して理解したがる
人の脳は、情報を「グルーピング」して理解したがる傾向があります（ここ大事！）
「グルーピングって、どういう意味…？」
百聞は一見にしかず。
先ほどのお買い物メモを例にとって、グルーピングしてみましょう。
ナス
キュウリ
トマト
ビール
日本酒
レモンサワー
ケチャップ
お酢
醤油
いかがでしょうか。
買ってきてほしいものをグループ別（野菜、お酒、調味料）に仕分けするだけで、だいぶ伝わりやすくなりませんか？
ただ、これだけだと、おもてなしとしては、ちょっと不十分。
読み手（ユーザー）の脳への負担をさらに軽くするために、出来ることがあるのです。
グループの「名前」を提示する
ここからは、作り手側にちょっと抽象的な思考作業が必要になります。ガンバリどころです。
先ほどのメモを、もういちど見てみましょう。
ナス
キュウリ
トマト
ビール
日本酒
レモンサワー
ケチャップ
お酢
醤油
まだ、ちょっと不親切なところがありますよね。
そう。この書き方だと、どのようなグループに分類されているのか？をユーザーのほうで「考える」必要があります。
ちょっとややこしい表現になってしまうのですが…ユーザーの脳に「抽象的思考」を強いてしまうわけです。
「考える」作業をユーザーに押しつけてはダメです。「考える」のはあなたの仕事です（笑）
グループ名を最初から示すことで、ユーザーのストレスをさらに軽くしましょう。
野菜:
ナス
キュウリ
トマト
お酒:
ビール
日本酒
レモンサワー
調味料:
ケチャップ
お酢
醤油
いかがでしょうか。
だいぶ読みやすくなったのではないでしょうか。
ただ、ここで終わりではありません。
さらに見やすくするために、まだやるべきことが残っています。
情報の構造を「視覚的に」表現する
最後の仕上げです。
ここでのコツは、情報の「階層」をデザインでハッキリと表現すること。
先ほどのメモに手を入れてみましょう。
【野菜】
・ナス
・キュウリ
・トマト
【お酒】
・ビール
・日本酒
・レモンサワー
【野菜】
・ケチャップ
・お酢
・醤油
まず、グループ名はカッコ【】で囲みました。
それぞれの具体的な事物は、冒頭に中黒（・）をつけ、さらに、グループ名のひとつ下の階層の情報であることを示すために右側へインデントしました。
こうすることで、情報の階層構造がパッと見るだけで伝わります。
目から入ってきた情報の意味をユーザーの脳が解釈する処理を、視覚的なデザイン要素を活用することでお手伝いできるわけです。
情報の構造を「視覚的に」表現する、のイメージがなんとなくお分かりいただけたでしょうか。
最後に、くり返しになりますが。
あなたが伝えたい情報を、ヒトの脳が好む構造に整理して視覚的に表現すること。
これを意識するだけで、あなたの自社サイトのページは、だんぜん見やすいものに改善できるはずです。
ちなみに、この考え方が使えるのは、Webサイトのデザインだけではありません。
日々の仕事て作るPowerPointの資料であったり、なんなら、メールやSlackでやり取りするメッセージにも応用できます。
今回の記事が、少しでもあなたのお役に立てたらうれしいです😌