関連する項目はまとめよ!デザインの基本原則「近接」とは?

悩む人
悩む人

情報がうまくまとまらない・・・。

わかりやすいデザインを作るにはどうすればいいのかな?

そんなお悩みを解決します!

こんにちは!現役デザイン学生のなかあ(@nakablog_)です!
デザインの大学に通いながらブログを書いたりTwitter発信をしたりしています。

情報がうまくまとまらないときは、デザインの4つの基本原則のひとつ、「近接」を意識しましょう!

デザインの4つの基本原則はノンデザイナーズ・デザインブックという本が起源で、今ではデザインの世界で当たり前に使われている原則です。

4つの基本原則は、デザイナーも非デザイナーも覚えておくだけで、必ず役に立つのでぜひ最後まで読んでください!

今回は「近接」について解説します!

4つの基本原則をまとめた記事はこちら↓

デザインの基本原則「近接」とは

「近接」とは、関連する項目は近づけて視覚的にグループ化しましょう、というものです。

関連する項目を近づけてグループ化すると、デザインを見る人にとってわかりやすいものになり、読んでもらえる、覚えてもらえる可能性が高くなります。

近接を意識したデザインとしていないデザイン

まずはこちらの2つのデザインをご覧ください!

デザインの違い、わかりますか??

1枚目は近接を意識したデザイン2枚目は近接を意識していないデザインです。パッと見たときのわかりやすさが全然違いますね。

意識していない方は、値段がどのドーナツのものなのか一瞬で把握できません。

具体的な違いとしては、Whiteとドーナツとの距離が離れてる、ドーナツと値段との距離が同じになっています。

項目の関連度で距離を考える

2枚目のデザインがなぜわかりにくいかというと、関連する項目が視覚的にグループ化されていないからです。

このデザインで関連する項目は、①ドーナツとその値段②同じ色のドーナツ同士③違う色のドーナツ同士です。これらが適切な距離でないと、ドーナツの値段がすぐにわからなかったり、Whiteの文字の意味がわからなくなったり、不親切なデザインになってしまいます。

適切な距離は項目の関連度で決めます。

このデザインだと、①のドーナツとその値段のグループがいちばん関連度が高いので近づけます。次に②の同じ色のドーナツ同士、その次に③の違う色のドーナツ同士です。

このように、関連度を考えて高いものは近くに、低いものは遠くに項目を視覚的にグループ化させることで、情報がまとまって、見る人にとってわかりやすいデザインになります。

基本原則の「近接」まとめ

「近接」とは、関連する項目を視覚的に近づけてグループ化し、情報をわかりやすくまとめるためのものです。

それぞれのグループの項目を近づける距離は関連度で考えます。項目と項目の関連度が、高いものは近くに、低いものは遠くに配置することで、情報の構造化ができて、見る人に親切なデザインになります。

最後まで読んでいただきありがとうございました!

Twitterもやっているので覗いていてください~!

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