Design Stock

デザインのアレコレ

  1. HOME
  2. レイアウト
  3. デザインの基本原則①:「近接」で情報を正確に伝えよう

デザインの基本原則①:「近接」で情報を正確に伝えよう

こんにちは、フリーでデザイナーやってます TAKAです。

今日はデザインの勉強をしたばかりの人が最低限意識するべきポイントの一つ、「近接」についてご紹介したいと思います!

デザインの目的は、伝えたい人に伝えたい内容をきちんと伝えることですよね。

すると、どのようにしたら情報を読んでいる(見ている人)に適切に伝えることができるのかが重要になってきます。

その方法が10も20もあると覚えるのがとても大変になってしまいますが、

大切なポイントは実際限られているのです。そのポイントとは、

  1. 近接
  2. 整列
  3. 反復
  4. コントラスト

の4つだけです。

言い換えると、この4つを意識するだけでデザインの優劣は生まれるかもしれませんが、デザインの目的はほとんど達成することができます。

ということで、今回はまず「近接」について見ていきましょう!

近接の原則って?

近接の原則とは、関連する項目をまとめてグループ化することです。

人間は無意識に同じ形をしたものや近くにあるものを一つの「まとまり」として認識しようとします。

ゲシュタルトの法則」とも言いますね。

人間のこのような本質的な性質を利用して、近接の原理をデザインに活かすと情報をすばやく伝えることできます。

下の例を見てください。

f:id:mtk-hcwj:20180228200454j:plain

こちらは名刺の作成例なのですが、二つを比べるとわかる通り右側の方が理解しやすいですよね。

左側は視線が分散してしまい脳にストレスがかかってしまいます。

右側は情報が二つにグループ化されているので、視線が2回止まるだけで済みます。

とても読み手に親切なデザインになっていますね。

このように近接は関係性をあらわします。

どの情報とどの情報が同じグループで、他のグループとは異なるのかという要素同士の関係性です。

つまり、近接の原理をデザインに活かすためには制作する前に情報を正しく理解する必要があります。

名刺の例では

  1. 人物:名前、肩書き
  2. 個人情報:電話番号、メールアドレス、SNS

といった整理です。

情報整理のコツはこちらの記事を参考にしてみてください。

www.design-stock.jp

注意すべきポイント3つ

同じ性質の要素をまとめる

読者が情報を認識しやすくなるよう、関連性の高い情報同士を近くに配置します。

それにより情報が組織化、構造化され知覚的にも視覚的にも認識しやすいレイアウトを作ります。

関係性の低い要素を繋げない

関係性の低い情報をまとめてしまうと、読み手が混乱してしまいます。

読み手の混乱してしまうのは、デザイナーがきちんと情報を整理しなかったためです。

正確にわかりやすく伝えられるよう、適切な距離をおき関係性が低いことを明示しましょう。

余白を意識する

余白を意識することも大切です。

デザインでは「要素をどのように配置するか」と同時に「余白をどのように作るか」という意識も大切になってきます。

余白の効果や活かし方は以下の記事に書いてあるので参考にしてみてください。

www.design-stock.jp

近接の方法3つ

f:id:mtk-hcwj:20180302170851j:plain

①接近

接近した要素は同じグループだと認識されやすくなります。

②類似

同じ色や形をした要素も、同じグループだと認識されやすくなります。

③閉合

【】のような閉じた形の要素は同じグループと認識されやすくなります。

一方、脳は】【を同じグループとは認識しません。

まとめ

いかがでしたでしょうか?

デザインでは「近接」を意識するだけで情報を伝えやすくすることができます。

自分が制作したデザインで同じ情報はきちんとグループ化されているかもう一度見直す癖をつけることが大切ですね。

今日はここまで

バイバーイ