はじめまして。デザイナーのまきこです。
デザインしているときに気をつけることはたくさんありますが、その一つが「グルーピング」。わたしがデザイナーになったときに先輩から何度も繰り返し指摘されたのも、このグルーピングについてでした。
今回は、グルーピングについての基本的な考え方と、グルーピングしたいときに使えるテクニックをご紹介します。情報を整理してわかりやすくするという点では、本格的なデザインだけでなく、書類作成の際などにも使える方法です。
デザイナーの方もそれ以外の方も、ぜひ参考にしてみてください！
グルーピングって？
デザインやレイアウトの際にいうグルーピングとは、情報をグループに分けて、視覚化することを指します。
こちらは、グルーピングの一例です。バラバラな情報を分類してひとまとまりにし、主従関係を明確にしてみました。適切なグルーピングを行うと、ひとめ見ただけで認識しやすく、わかりやすくなりますね。
グルーピングをするには、まずは制作物の趣旨や情報の意味についてしっかり理解することが必要になります。
例えば、「スパゲッティー」がどこの国の料理なのか分からなければうまく分類できません。また、制作物によっては、国ではなくて「好きな料理」「苦手な料理」といった分け方が適切な場合もありますよね。
レイアウトに取りかかる前に、何を目的とした制作物なのか、そこに載せる要素はどんな意味を持つのかを、きちんと把握することが大切です。
グルーピングで使えるテクニック6例
1. 空間でグルーピング
意味や性質の近い要素同士を、近い距離に配置します。逆に、関連性の薄い要素同士はしっかりマージンを取ります。
要素を配置する空間に余裕がある場合に、使いやすいテクニックですね。
余計な装飾をふやしたくないときに有効で、簡単にとりいれやすい方法でもあります。
2. 大きさを変えてグルーピング
要素の主従関係をはっきりさせたり、優先順位をつけたりするときに使えるテクニックです。
見出しなどの主となる要素や、特に見てもらいたい要素を大きく配置し、その他は小さくします。
長い文章のなかでメリハリをつけたり、同じ構造のグループをいくつか反復させて探しやすくしたいときなどに有効です。
3. 見出しをつけてグルーピング
バラバラな情報を分類し、内容に合った見出しをつけてまとめます。
まとめた情報に特定の意味を持たせたいときなどに、使えるテクニックです。
さらに見る人の興味を引きたい場合は、たとえば見出しを「栄養分高め！醸造酒」のようにキャッチコピーっぽい文言にするといいかもしれません。
4. 線でグルーピング
情報のグループのあいだに、境界線を引きます。
空間だけでグルーピングするほどのスペースはないけど、シンプルに見せたいときなどに有効なテクニックです。
空間をあけるだけよりも、要素のまとまり感をハッキリ出すことができる方法です。
5. 囲ってグルーピング
罫線や図形で、情報のグループを囲うテクニックです。
線で区切るよりも、さらにまとまり感が強くなります。
また、制作物のテイストに合わせた装飾がしやすいのもポイント。
明確にグループ分けしたいときや、要素にアイキャッチ的な役割も持たせたいときなどに有効な方法です。
6. 色でグルーピング
関連性のある要素に同じ色をつけたり、主従関係を明度で表したりします。
こちらも、グルーピングと同時にテイストに合った装飾がしやすい方法ですね。
関連性のある要素をひとまとめにして配置できないときや、見出しをつけるよりももっとやんわりとイメージ的な分類をしたいときに、有効なテクニックです。
実用するときは……
今回ご紹介したテクニックは、たいてい複数を組み合わせて使われます。例えば、分類した情報に見出しをつけて、見出しは文字サイズを大きくして、本文とは色を変えて……といった具合です。
まとめ
何よりもまず、制作物の趣旨と扱う情報への理解を大切に。その上で、情報を載せるスペースやテイスト、要素の性質などの条件に合わせてテクニックを組み合わせれば、きっとうまくグルーピングできるはず！
みなさんも、デザインや書類作成で情報をわかりやすく整理する際の一助としていただけるとうれしいです！
キャリアアップ
「Studio上野でWebクリエイターを目指す！」
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
