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

イメージ画像

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

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

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

時計の購入内容の比較

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

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

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

テキストを階層化

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

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

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

関連する記事

圧倒的に強い!世界を牽引する中国EC市場 その強さの理由とは?... 7月8日、三菱UFJ銀行 国際業務部は「MUFG BK CHINA WEEKLY」公表した。その中では、2019年の中国の越境EC輸入額についても報告されていた。 中国の越境EC小売額は前年比38.3%の1,862.1億元となっている。伸び率は2018年の49.3%増から鈍化したものの高成...
必見!Eコマースサイトのデザイントレンド... スマートフォンの普及により、Eコマースにおいては、モバイルを含むあらゆる端末からスムーズに閲覧できるサイトが増えつつある。今回はそうした流れを踏まえつつ、2015年のデザイントレンドを紹介する。 1. 必要な情報を隠す!? メニューアイコン サイトのナビゲーションのように、ウェブサイトにおい...
起業家が成功するための6つの重要スキルとは?... ウェブサイトで今や起業も簡単にできるようになり、世界各国で起業家を目指す人が増えている傾向があるが、成功するかしないかは運? 人脈?それとも特別なスキルがあるのだろうか? まず、起業家として成功するための6つの大切なスキルをまとめてみた。   1. 絶好の機会を逃さない ...
海外販売に関する補助金・助成金情報(2017.March)... 日本政府は、国の成長戦略の1つとして2020年までには、中堅・中小企業の輸出総額を2010年度比の2倍にするとの目標を掲げている。 そのため、今年はさらに、国、地方自治体は海外販売、海外進出を行おうとする企業に対してさまざまな支援、サポートを積極的に行おうとしている。その一例が補助金・助成...
スモールビジネスの最初のステップーブランドを構築するには?... インターネット技術の急激な発達とイノベーションは、スモールビジネスに大きな変革とチャンスをもたらしている。従来のマーケティング活動といえば、予算のある大企業だけのマーケティングだったが、現在は、起業家も自らホームページを作成することが容易な時代である。 自由に予算内で自分に合ったWebマー...
2020年ネット広告は動画広告が牽引 嫌悪感も多いネット広告のあるべき姿... 以前のブログ、「2020年の日本の広告費 広告メディアを牽引する運用型広告とは」で記したが、2020年の日本の広告費は6兆1,594億円(2019年は6兆9,381億円)と前年比88.8%となり、9年ぶりに減少となった。 広告費全体では減少する中にあって、インターネット広告費(インターネッ...

コメントをどうぞ