« ブログのトップページに戻る

デザイン4原則でラクラクデザイン -その2:近接-

   投稿者 : 2015年4月17日 By

イメージ画像

UI(User Interface)デザインの基本としてあるのが、「近接=グループ化」するという方法だ。近接とは、関連する要素と要素どうしを近くに配置し、関係の薄いものは遠ざけるという原則である。
今回は前回の「整列」に引き続き、デザイン4原則「-その2:近接-」について見ていこう。

1.見やすい画面デザインをおこうための基本=近接の原則

画面デザインでは情報をグループ化する「近接の原則」は最も活用される手法だ。
この原則はゲシュタルト心理学の近接の要因「近接しているもの同士はひとまとまり=グループ化され認識される」から導きだされている。
つまり、同じ性質、要因のものは、視覚的、デザイン的に近くに配置し、関係の薄いものは離して配置することで、関係性が強化され認識しやすくなるのだ。認識しやすい=見やすい画面デザインを構築することができる。
下の例を見てみよう。(図1)のように情報の配置がバラバラだと、どこをどう見たらよいのか、情報がどうなっているのか、何をしたらいいのかユーザーには伝わらない。ユーザーは目的を達成するためにどうしたらよいか戸惑ってしまうだけである。
そこで、「近接=グループ化」を行い、ユーザー視線を考え、優先順位をつけて配置してみる。
(図2)のように情報をグループ化し、視線の順序を意識し、レイアウトすることで意味のある余白が生まれ、ユーザーに見やすい、伝わるデザインに改善することができる。情報のグループ化はとても重要なのである。

時計の購入内容の比較

「近接」とは、関連する情報をグループ化することである。関連する情報は近づけ、関連しない情報は遠ざける。さらに、優先順位を決め、視線の流れを意識して配置すること。

2.似た要素のものをまとめる

類似要素をグループ化し、関連性の少ない要素は離して配置する。「情報の階層化」も近接の手法の一つだ。
下の例を見てみよう。(図3)のように均等にバラバラにあるものは、文頭から中身をすべて読んでゆくことになり、知りたい情報を探すのに時間がかかる。右(図4)のように似た要素はグループ化し情報の階層化することで、情報が視覚化され、情報を素早く正確に伝え、欲しい情報が見つけやすくなる。

テキストを階層化

3.まとめ. 近接=関連する要素は近づけける

  1. 関連するものは近づけて、関連の薄いものは離す。
  2. 要素間に均等な空白を作らない。
  3. 優先順位を決め、視線に考え配置する。
  4. 似た要素はグループ化し固まりとして見せる。

近接の原則は、内容を理解し、情報の整理、整頓をすることが第一義である。整理したうえで、関連あるものはグループ化し、その塊(グループ)を意図して配置し、さらに関連あるもの、関連ないものに余白を作り意味づけする。
この原則を用いてデザインすることでサイトを訪れたユーザーが直感的に各要素の構成、内容を容易に理解することができる。
WEBデザイナーはECサイト構築の際、サイトの情報を整理し、関連性の高い要素をグループ化し配する、この「近接の原理」を基本とし訪れたユーザーにとって理解しやすいサイトを構築していただきたい。
次回は「3.繰り返し」について説明する。

関連する記事

もう対応してる? モバイルフレンドリー... 最近は電車のなかでスマホを見てる人が多くなった。外出先でもインターネットが当たり前の時代だ。Googleの発表によると、スマホからの検索数がPCからの検索数を超えたようだ。スマホの重要性は今後、ますます高いものとなるだろう。そのようなスマホユーザーに確実に良い情報検索結果が表示されるように、Go...
質問に答えれば欲しいドレスにたどり着く!ありそうでなかった便利アプリ... 欲しい服のイメージはあるのに、それをお店やオンラインで探すのは非常に困難という経験をした方は多いのではないでしょうか。今回は、そんな悩みを解決する便利アプリ、「Donde」を紹介します。質問に答えればわずか15秒で欲しいドレスが見つかるというこのアプリ。 米テクノロジーメディアのTechCr...
Live Commerce 対訳エンジンベータ版 開発のお知らせ... 海外向けECサイトを構築する上で、コストとなるのが翻訳です。 そこで、何とか翻訳費用を圧縮できないかと、さまざまな翻訳クラウドサービスをこの数年使ってみたものの、機械翻訳と人力翻訳の両輪でやっても、なんとなく違和感が残ります、、、。 どんなやり方にせよ、人を介する間は翻訳費用がゼロになること...
ECサイトへのアクセスは何から行われ、何がよく買われているか?... 我が国のインターネット環境は、ますますスマートフォン主流の時代になりつつあるようだ。 その内容を裏付けるのが、7月13日に公表された、「MakeShop」のECサイトへのアクセス数の統計データである。この内容を見ると、ECサイトへのアクセスディバイスはパソコンからスマートフォンへシフトして...
2017年の訪日外国人客数と図表で見るインバウンド対策の現況... 日本政府観光局(JNTO)が2017年の外国人観光客数の発表した。2017年の訪日外国人数は前年比19.3%増の2,869万人と好調をキープしているという結果であった。 結果を見ると、ここ数年は韓国から観光客数が急激に増加しており、前年比40%増の714万人と、韓国人観光客が訪日観光客数の...
日本で買った商品の6割以上が帰国後、再購入されている... 今週10月1日から8日まで、中国の国慶節(日本の建国記念日)、祝日による大型連休があり、日本へ多くの中国人観光客が訪れ、その動向はメディアなどでも紹介されている。 中国人観光客は2015年のような爆買いは見られないものの、多くの中国人が日本各地を観光し、お土産を買い、祝日を満喫しているよう...
このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。