デザイン初心者のはじめの一歩 ~ デザインの基本「④近接」

はじめに

デザインの基本について書いてきましたが、今回が最後です。今回はデザインの4つの基本の中から「近接」について紹介します。

これまでのあらすじ

①  デザイン初心者のはじめの一歩 ~ デザインの基本「整列」
②  デザイン初心者のはじめの一歩 ~ デザインの基本「反復」
③  デザイン初心者のはじめの一歩 ~ デザインの基本「コントラスト」
④  デザイン初心者のはじめの一歩 ~ デザインの基本「近接」

「近接」

(参考:誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック)

「近接」は、「関連する要素は近づけ、そうでなければ離す」ことです。言い換えると「グルーピング」することです。

「近接」の目的は、情報を組織化です。ページの内容をうまく組織化することで、見る人がページの内容を認識する手助けとなります。

「近接」のポイント ~ 「余白」

「近接」を使いこなすために、人間の認識のメカニズムについて少し触れたいと思います。下の図を見てください。

同じ直径の円が並んでいますが、左右でグループの数が違って見えるのではないでしょうか?(左:1グループ、右:3グループ)。

グループの数が違って見える理由は、「人間は近い要素は関連があると無意識に判断する」からです。

グループ数の認識の違いを生み出す大きな要因が「余白」です。「余白」をうまく使うことが「近接」の大きなポイントです。

「近接」の例 ~ 入力フォーム

次に、実際の例を見ながら「近接」の使い方を見ていきましょう。

2種類の入力フォームのデザインを作ってみました。それぞれのデザイン上の違い「近接」が使われている部分を考えてみてください。

では、自分なりの解説をしていきます。

まず左のデザインは、各要素が密集しているため、要素の関連性を認識しづらいです。そのため、「入力欄はどこか?」「何を入力すれば良いか?」などのページ認識に対する負荷が大きいです。

次に右側のデザインは、「余白」を使って関連する要素の「近接」ができているので、ページの内容を簡単に認識できます。具体的には、以下のユーザーの認識の流れがスムーズにできるようになっていると思います。

①このページの目的を認識(ユーザー情報を送信するページ)
②実行するべき操作を認識(ユーザー名とメールアドレスを入力し、送信ボタンをクリック)
③実際の操作を実行

まとめ

今回はデザインの基本の1つである「近接」について紹介しました。

「近接」についてまとめると、以下の通りです。

・「近接」は関連する要素を近づけることで、情報を組織化すること
・「近接」のポイントは、「余白」をうまく使うこと

終わりに ~ アウトプットの大事さ

今回の「近接」の記事で、当初の目的だった「デザインの4つの基本」を全て紹介できました。

記事としてアウトプットすることで、自分の中の曖昧だった部分をしっかり自分で考えて、言語化できるようになったと思います。

また、嬉しいことにNote公式から、今回のデザイン初心者記事を『#デザイン 記事まとめ』に選んで頂きました。そのおかげで、たくさんの方が自分の記事を読んでくださり、すごく嬉しかったです。感謝、感謝です。

自分が学んだことをしっかりアウトプットして発信することは、改めて大事だと感じました。今後も、継続的にアウトプットをしていきます。

宣伝

ちょっとした宣伝ですが、2018/11/30(金)に「デザインの基本」についての勉強会に、講師として登壇します。発表する内容は、このNote記事で書いた4つのデザインの基本について話をします。今回の記事以上の内容は話さないので、あしからず。

以上です。最後まで読んで頂きありがとうございました。

参考文献

ノンデザイナーズ・デザインブック / Robin Williams (著)

やってはいけないデザイン/ 平本久美子(著)

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

スキ、ありがとうございます( ´ ▽ ` )
4

shinji.uyama

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。