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

イメージ画像

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

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

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

時計の購入内容の比較

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

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

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

テキストを階層化

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

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

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

関連する記事

ebayで人気のある日本の商品は何か?を調べてみた... 日本でのインターネットオークションサイトでは、ヤフーオークションが有名だが世界的にはebayオークションサイトが有名である。アメリカのebayに出品することで、世界中から注文が入ってくる。日本の商品はebayでは人気が高い。 そこで今回は今、ebayではどん日本の商品がよく売れているのか? ...
色の持つイメージ:ピンク色は女性、幸福をイメージ... 色が何らかのサインを送りだしていることは誰もがよく知っている。誰がどんな色を選ぼうと、共通しているのは、その色に対して人は反応するということだ。私たちは色に対し条件反射し、気づくこともない。色に対する反応は直観的反応とも言われ、個々の色は人の本能的な反応と密接に関係し、その反応は生理的、感情的、...
観光庁がインバウンドで推進する「日本版DMO」って何?... 2017年はインバウンド旅行者数は2,869万人となった。日本政府は2020年、オリンピックイヤーでは、4000万人を目標としている。 充分に目標達成はされる数値であるが、政府は数値目標として、三大都市圏(埼玉、東京、千葉、神奈川、愛知、京都、大阪、兵庫の8都府県)以外の地方部へのインバウ...
海外展開に関する補助金・助成金情報 (2016.Sep)... 9月の補助金・助成金の募集状況を紹介する。 補助金・助成金は国や地方自治体から支援される「返済不要なお金」である。助成金は要件が合えば基本的には受給でき、補助金は審査があるため、要件が合っても受給出来ない可能性がある。 今回は海外展示会、見本市出展に対するものや海外向けホームページ構築な...
令和3年度 年末年始休業のお知らせ 平素は格別のお引き立てを賜り、厚く御礼申し上げます。 弊社では、誠に勝手ながら下記の期間を年末年始休業とさせていただきます。 何卒、ご理解賜りますよう宜しくお願い申し上げます。 記   【休業期間】 2021年12月28日(火)〜2022年1月3日(月)   ...
海外販売に関する補助金・助成金情報(2018.February)... 今年も早いもので、もう2月に入り1月の30日には平成29年度補正予算も成立となり、新たに補助金・助成金の募集が開始されるようだ。 補助金・助成金とは国や地方自治体から民間企業へ資金支援する返済不要のお金である。 補助金と助成金の違いは、補助金には予算があり、要件が合致しても受給できない可能...

コメントをどうぞ