Photoshopでトライ!デザインのドリル バナートレース #29【グルーピング】

デザインのドリル

こんにちは。Halcana(@halcana21)です。

今回はデザインのドリルの演習29です。レストランのメニューのトレースをしました!

振り返り

今回は120分といつもより時間がかかりました。ストライプ線の作り方をいろいろ試してみましたがなかなか思うようにできず、結局長方形にストライプのパターンを入れたもので代用しました。

オリジナルは線に少し丸みがあるように見えたのでそれを再現しようと思ったのですがうまくいかず。もう少しいろいろ実験してみようかと思います。

デザイン分析 – グルーピング

今回のデザインのポイントはグルーピングです。

グルーピングとは?

載せたい情報をグループごとに分け、それを視覚的にわかりやすいように配置することをグルーピングと言います。

適切なグルーピングを行うには、載せたい情報同士の関係をはっきりと理解することが必要不可欠です。

参考:株式会社LIG 「グルーピング」で情報をわかりやすく!資料作成にも使えるデザインテクニック6例

デザイン分析

今回のデザインでは、どこがグルーピングされているかな?

くまさん
くまさん
Halcana
Halcana

うーん…

繰り返し現れるデザインに着目するといいよ!

くまさん
くまさん
Halcana
Halcana

リボン型のセットメニュー名とストライプ線がよく出てくるね!

そうだね!1セットメニューごとに上下の横線で区切られているよね。

くまさん
くまさん

今回のデザインをよく見ると、セットメニューの説明がリボン型のセット名と上下のストライプ線でグルーピングされています。

大きさは異なっていますが、同じデザインが繰り返されることでセットメニューが3つあることがパッと見て分かるようになっています。

もう一つグルーピングされているところがあるね。

くまさん
くまさん
Halcana
Halcana

ピザの写真と吹き出しのセットも繰り返し出てきているね。

ピザの写真+その説明も吹き出しによってグルーピングされています。こちらはセットメニューよりもランダムな配置になっていますが、吹き出しが差している写真によって感覚的につながりが分かるようになっています。

デザイン分析のまとめ

グルーピングをするには、つながりが一目見て分かるようなデザインであること、そしてそれを繰り返ことで見る人にも情報の関係性が伝わるようにすることがポイントです。

また、適切なグルーピングをするには、情報同士の関係をしっかりと把握していることが大切です。

まとめ

今回は演習29に取り組み、グルーピングを学びました。

グルーピングの方法は、今回のデザインで取り上げた以外にもたくさんあります!複数の方法を組み合わせることで、多くの情報を載せる場合でもわかりやすく伝えることができます。とはいえ、まずは情報同士の関係性を理解することが一番だと思うので、デザインを作成する前に情報整理をしっかり行うことが重要ですね!

次回はついにデザインのドリル最後の演習です!

一つ前の演習28はこちらから、次の演習30はこちらからチェックできます!

コメント

タイトルとURLをコピーしました