デザインでグループを作ろう!

Pocket

こんにちは!今回のテーマは「デザインでグループを作ろう!」です。
デザインでグループを作るとは何か、どのような時に使うのかお話していきたいと思います。


デザインでグループを作る

デザインでグループを作るとは、「情報をグループ化すること」です。
関連する情報は近くに、関連しない情報は離すなどして、項目や特定の意味ごとにグループを作ります。
こうすることで視覚的に見やすく、わかりやすくすることが出来ます。


なぜグループを作るの?

何故グループを作る必要があるのかと言うと、見た目にわかりやすくなるのは勿論のこと、要素が持つ意味を直感的にわかりやすくなるからです。
こうすることで、ユーザーにとってストレスのないデザインにすることが出来ます。

まず、下の図を見てみて下さい。乱雑に配置された情報を、共通する項目ごとに整理してグループを作りました。

「“りんご”と言う単語を探して」と言われた時に、探しやすいのは右側のグループ化された方かと思います。
「“果物”のカテゴリがあるから“りんご”はきっとそこにあるだろう」と想像し、順序立てて探すことが出来るので、ストレスなく見つけることが出来ます。

グループ化されていないと、気付きのキッカケがない上に目線も定まらず、わかりづらくストレスに繋がってしまいます。


更にもう1つ図を見てみて下さい。

バラバラに並んでいる情報を、共通の項目でグループに分け、規則的に並べ替えました。
グループ化されていない状態だとなんの意味も感じられなかったかと思います。ですが、グループ化することで「赤と黄色と青のグラデーションになっているんだ」と一目でわかったかと思います。

このようにグループ化することで、言葉がなくても視覚的に、要素の持つ意味や関連性を伝えることが出来ます。


グループ化の方法

代表的なグループ化の方法3つを使い、下にある、要素がぐちゃぐちゃで見づらい図を整えていきたいと思います。

1.近くに配置してグループを作る

要素と要素の近さでグループかそうでないかを表します。最も簡単でポピュラーな方法です。
グループ化したい物は近くに配置して、そうでない物は十分なホワイトスペースを確保してあげましょう。

2.見出しを付けてグループを作る

テキスト要素でよく使うグループの作り方です。
見出しとなるテキストのサイズを大きくすることで、メリハリを付けて文章を読みやすくします。
また、タイトルの優先度を上げることで視線を誘導することも出来ます。

3.色を付けてグループを作る

タイトルやカテゴリ名など、近接していなくても同じ意味を持つものに色を付けます。
同じ意味を持つ要素に統一した色を付けることで、「この色は○○を表しているんだ」と自然とユーザーに覚えてもらうことが出来ます。

完成!

これで完成です!
最初の無秩序な配置と比べると、格段に分かりやすくなったのではないでしょうか!


おわりに

いかがでしたでしょうか?
グループを作ること事体はそんなに難しくないと感じてもらえたのではないでしょうか。

グループを作る為には、まず作り手側が要素の意味を理解しなければなりません。
要素や関係性を理解して配置することで、ユーザーにとってわかりやすいデザインを作ることが出来ます。

「デザインを考えてみたけど、どうしたらもっとわかりやすくなるかな…」と悩んでしまった時は、ぜひ思い出してみて下さい!

それではまた!デジマースのコンでした。

Pocket