「集合」「近接」でスッキリ見せよう
Webページに載せる内容は、多くなればなるほどゴチャゴチャしてしまうもの。メニューや見出し、画像、キャプションなどの各要素を見やすくレイアウトするには、「集合」「近接」のデザイン・テクニックが有効です。
具体例その1： イラスト画像とそのキャプション（説明文）のレイアウト
イラストの画像を数点並べて、さらにその名称と重さのキャプションも入れるレイアウトを考えてみましょう。
（アイコン素材提供：School Icons CLUBさん。ありがとうございます^ ^）
 人形 重さ：300g |
 ロボット 重さ：200kg |
 エンピツ 重さ：50g |
 雪ダルマ 重さ：500kg |
↑このレイアウトだと、なんとなくストレスを感じませんか？
意味が通らないことはありませんが、デザインとして各要素の位置づけがなされておらず、バラバラで散漫な印象が残ります。
そこで、このレイアウトに「集合」「近接」テクニックを適用してみましょう。意味／属性が同じものを探し出し、視覚的に接近させるのがコツです。
人形 重さ：300g |
ロボット 重さ：200kg |
エンピツ 重さ：50g |
雪ダルマ 重さ：500kg |
この例は分かりやすくするために単純化してありますが、意味が同じ要素を近くに引き寄せる形で配置すると、レイアウトがグッと引きしまって見やすくなります。
具体例その2： 見出しと本文のレイアウト
次のような文章があるとします。
本日のお料理レシピ：ごぼうのポタージュスープ
1 - 野菜を炒めて煮る
ナベにバターを溶かし、薄めに切った玉ねぎ→じゃがいも→スライスして水にさらしたごぼうの順に炒めます。煮立ったら、スープを加えてさらに煮ます。
2 - ごぼうのポタージュを作る
1をミキサーにかけてピューレにし、ナベに移して火にかけます。生クリーム、塩・コショウ（少々）を加え、さらにひと煮たちさせます。
3 - ほうれん草のピューレを作る
茹でたほうれん草の葉をミキサーに入れ、水大さじ2杯を加えてピューレにします。
このままでも十分意味は通りますが、ここでも「集合」「近接」のテクニックを活用して、レイアウトをよりスッキリ見やすくすることができます。
この文章の中で、意味的に近づけられる要素は何でしょうか？
そう、それぞれの小見出しは、後に続く本文とセットにできますね。ここを視覚的にもピッタリくっつけてしまいましょう。
本日のお料理レシピ：ごぼうのポタージュスープ
1 - 野菜を炒めて煮る
ナベにバターを溶かし、薄めに切った玉ねぎ→じゃがいも→スライスして水にさらしたごぼうの順に炒めます。煮立ったら、スープを加えてさらに煮ます。
2 - ごぼうのポタージュを作る
1をミキサーにかけてピューレにし、ナベに移して火にかけます。生クリーム、塩・コショウ（少々）を加え、さらにひと煮たちさせます。
3 - ほうれん草のピューレを作る
茹でたほうれん草の葉をミキサーに入れ、水大さじ2杯を加えてピューレにします。
このページでご紹介している例はいたって単純なものですが、「集合」「近接」のテクニックは本当に幅広く応用可能。
情報の相互関係を分析して、くっつけたり離したり。あなたのサイトを、さらにスリムに見やすくシェイプアップできるのです！
さらに突っ込んだデザインノウハウは、メルマガでお届けします！メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る
Powered by
