人間の脳は視覚から得た情報をどのように解釈しているのか、そしてそんな人間の脳の働きをどのようにWebデザインに活かせるのかをご紹介します。
Webデザインに求められることはシンプルに次の2つです。
『異なるコンテンツが並んでも統一感のあるデザインに仕上げる』
『UXを向上させるために、あえて統一感を崩し、ユーザーの導線を作る』
先ず前半では、これら2つの条件を満たすデザインを生み出すための基本原理をご説明します。
ここでは、ゲシュタルト心理学が提唱する「人間が視覚から得られた情報をどのように処理するのか」について、具体的な経験則と共に取り上げます。
創発の原理とは、細かい部分を理解する前にまずは全体を把握しようとする人間の特性のことです。
私たちはある物体を見たとき、まずその輪郭を捉えようとし、次にその輪郭を以前に見た他の物体と比較します。一致するものがあれば、それが何であるかを判断し、。具体的にその物体を理解しようとし始めます。一方で、一致しない場合は、全体を把握するために細かく部分部分を理解していくようになります。
ある種クリエイティブの考え方とはかけ離れますが、創発の原理に則すのであれば、見慣れていて容易に認識できる形にこだわるのが良いのです。
そのため、例えば「次のお問い合わせフォームのデザインでは思い切って奇抜なデザインにしたい」と思うかもしれませんが、人々がよく目にするようなスタイルにするのが一番良いということになります。
はっきりとした輪郭とラベルのついた入力項目を並べ、最後に「送信」ボタンを設置すれば、より「クリエイティブ（奇抜）」なデザインより分かりやすく、それがお問い合わせフォームして認識されるため、UXが向上することに繋がります。
しかしながら、これはクリエイティブ性を追求することを全否定しているわけではありません。
これがデザインの難しいところなのですが、創発とは物事を視覚的に解釈するための第1段階にフォーカスした原理です。人間は第1段階で全体観を把握し、第2段階で部分部分について細かく理解していきます。つまり、全体観が理解しやすいものであれば、個々の要素にはよりクリエイティブ（奇抜）な工夫を凝らしてもよいということになります。
よく、『シンプルなデザインほど優れている』と言われることがありますが、
これはなにも、【質素】なデザインを是としているわけではありません。
全体観を把握しやすい（ぱっと見で見慣れている）デザインが好ましいということです。
全体観を複雑にしてしまえば、それだけ人間はページを理解するのに苦労し、全体観をシンプルにすれば人間は労せずページを理解することができ、デザインのUX向上に繋がります。
具象化の原理とは、私たちの心が視覚から得られた情報のうち足りない部分を埋めて対象を理解しているというものです。
全体観が見えなくても、部分から全体を認識することができるということです。
また、全体がシンプル（見慣れている）ものであればあるほど、部分から全体を認識することが容易になります。
具象化とは、オブジェクトを識別するために、そのすべての要素（情報）を詰め込む必要がないことを意味します。
この原理を利用して、レイアウトのスペースを節約したり、カルーセルで次のスライドの内容を示唆したり、「近日公開」ページをよりわかりやすく魅力的にしたり、さまざまなことができます。
この有名なトリックアートは、なぜある人には顔だけが見え、ある人は花瓶だけが見え、両方が同時に見えることはないのでしょうか。それは、多重安定性が人間の心理に働いているからです。
人間の心理は不確実性を嫌うので、一つの見方に固執して、他の可能性を無意識に排除してしまうのです。
多重安定性は、Webデザインにおいて効果的に適用するのが難しいものです。なぜなら、理解よりも混乱を助長してしまう傾向があるからです。
しかし、長年にわたって何十ものロゴが証明してきましたが、例えを挙げるならばFedExのロゴのように、多重安定性を使うことで本当に記憶に残り、心地よい刺激を与えるデザインを作ることができます。
この矢印（EとXの間）は、一度見たら忘れられない印象力を持っています
不変性の原理とは、人間は似ているものと違うものを認識するのが得意である、というものです。つまり、同じようなものがたくさんある中で、何かを目立たせるのはとてもシンプルな構図で実現することができます。
マトリックスの赤いドレスの女性を覚えていますか？シンドラーのリストの赤いジャケットの少女はどうでしょう？あの2つは、白黒の背景の中で、鮮やかな色彩を放つことで、とても目立ち、印象に残っているのです。彼らが意味深く、私たちの注意を引く価値があることを示していると言えるでしょう。
デザインの領域では、均質な要素群の中に1つだけ異なる要素を取り入れると、視覚的に強力な効果を発揮することがあります。
例えば、商品の価格設定ページでは、色や大きさによって、ある列を他の列より目立たせることがよくあります。
他の列も微妙に色を変えていることもありますが、その違いがかすむほどに目立たせることで、視点を任意の列に誘導することができます。
このような例は、ウェブサイトのメインナビゲーションでも見られます。あるリンクを、より鮮やかな色や変形したデザインで目立たせているのです。
これにより、ユーザーはサイトの導線を感じ取ることができるため、UXの向上に繋がります。逆に、あえて異なる場所のボタンを同質にすることで、両方とも同じ遷移先のリンクであることを示唆できます。
一般的に、ゲシュタルトの原理は、私たちが視覚情報をどのように処理するかということを理解するのに役立ちます。
1. 全体から解釈を始めて、部分へ向かっていく。
2. 混乱した全体を、より単純な構成要素に分解する。
つまり、私たちは視覚情報を解釈するとき、その対象を理解するための最もシンプルな方法を常に探しているのです。
ゲシュタルト心理学者はこれをプレグナンツの法則と定めました。
人は、より分かりやすく解釈できる方を優先する。
例えば、下記図の「✕」は基本的に2本の線が交差しているものと人間は解釈します。従って、配色をBの様にしてしまうと、その基本的解釈からズレるため、「見る（理解しようとする）優先順位をAよりも下げてしまいます」
Webデザインでも同様です。
Aのお問い合わせフォームに比べて、Bのお問い合わせフォームの方がまとまりがあり、項目と入力フィールドの関係も見やすいため、ユーザーにとってより入力しやすいフォームと言えます。また、これがフォームであるということを理解するのにストレスが掛からないため、ユーザー感情も良好なままです。
このプレグナンツの法則は次の閉合の法則とも関連してきます。
私たちは、視覚的に情報が欠落していても、情報を補完し、解釈することができます。
閉合とは、視覚的な情報に欠落があるデザインを見たときに、足りない情報を補完し、対象物を理解することができることを指します。
たとえば、MLBのロゴですが、ぱっと見で「向かってくるボールを打ちにいくバッター」を表していると解釈できます。
複雑な形をした青と赤のボックスが並んでいるだけですが、隙間を埋めるように人間が解釈し、バッターのシルエットを導きます。全身を描画せずとも、バッターが構えている姿との類似性と白丸がボールを連想させ、まさに野球をしているワンシーンと人は解釈できるのです。
こうした閉合はインターフェースアイコンにも使用されています。
例えば、Googleスプレッドシートの「複製」のアイコンも2枚のシートが重なっているように見え、それが複製を連想させるものになっています。
しかし、2枚目のシートを描画しているのは単なるL字の線です。2枚目の描画の不完全な部分を補完して、私たちはそれがシートであることを解釈できるのです。
人は対称性に心地よさを感じつつも、一方でアンバランスな刺激も求めています
シンプルで調和のとれたデザインは、見る人に安心感を与えてくれます。ゆえに、シンメトリーの構図がWebデザインだけでなく、建築やDTPなどにも取り入れられています。
しかし、シンメトリーなフォルムは満足感がある反面、調和が取れている分、少し物足りなさや陳腐な印象を与えることもあります。動きやダイナミズムが感じられず、どこか不満足なデザインになってしまうこともあるのです。
従って、シンメトリーなデザインにアンバランスな要素を加えることで、そのアンバランスなポイントに注意を向けることが有効です。ユーザーにとってほしいアクションがあるのであれば、あえて秩序を部分的に乱すことで、そこに注意を向けさせ、行動を誘発することができます。
人は、物体を「対象（焦点）」と「地（背景）」のどちらかに分けて見ています。
いくつかの物体が並べられると、たとえ視覚的な手がかりがなくても、私たちは自然とそれらの物体になにかしら関係性を感じ取ることができます。つまり、ごく単純な物の配置でも、関係性の感覚、や意図を作り出すことができるのです。
その一つが、2つ（以上）の物体の大きさを比較して、小さい方を人物、大きい方を背景と自動的に判断する方法です。上の画像を見ればわかるように、どんな色であれ、私たちは常に小さい方の長方形を人物、大きい方を背景と見ているのです。
また、私たちはこのような関係性を作り出す際に、過去の経験を踏まえて、かなりクリエイティブに創造する傾向があります。
例えば、先の画像では、小さな四角形が、暗くなった空を眺める人物に見えるでしょう。
これをWebサイトのデザインに生かすと、大きな要素から小さな要素へと人の意識を動かすことができます。
例えば、画像で背景を覆った上にボタンを置くデザインがCTAなどでよく見られます。これは、ぼかした背景を背景として認識しつつ、その手前のボタンに焦点が行きやすくなるため、人の行動をより誘発しやすいデザインになっているのです。
私たちは、視覚的につながっている要素は、つながりのない要素よりも関連性が高いと感じます。
上の画像では、あたかも画像の上の女の子が下の画像を覗き込んでいるように見えます。あるいは人によっては、女の子が画像に「興味を持っているような印象」を受けるなど、より強い関連性を感じる場合もあるでしょう。
こうした効果を使い、例えば下の画像に見られるように、テキストと画像の接続に矢印がよく使われるのは、このためです。
矢印がなければ、「こことここがいい感じ」と対応する画像を結びつけることは可能ですが、その場合、「ここ」はタブレット、「ここ」はスマホを指していると、見る側がある程度推察する必要があります。矢印を使うことで、コピーと画像の結びつきが明確になり、全体が把握しやすくなります。
同じ領域で囲まれた要素は、グループとみなされます。
この視覚的なトリックはWebサイトをデザインする上で一般的に取り入れられている手法です。一方で、どのサイトでも取り入れられているため、デザインの均質化・既視感・陳腐化の原因にもなりえます。しかし、だからといってこの手法を用いて、要素間の関係性を生み出すUIの有効性は否定できません。
上のスクリーンショット（「Google Now」から引用）では、デザイナーが巨大なカードを使って、見出し、画像、段落がすべて関連していることを理解できるようにしています。「The right imformation at just the right time」が画像とその隣の文章のトピック（見出し）になっていることを示し、そして「Assistance around the block」がその下に画像と文章が続くであろうことを気づかせてくれます。
私たちは、遠くにある物体よりも近くにある物体の方が、強い関係性を感じます。
視覚的には、距離が関連性を規定します。近くにあるものは関連性があると見なされ、遠くにあるものは関連性がないと見なされます。
例えば、「Google Now」にある別の例を以下に見てみましょう。
「Spotify」というテキストは、「OpenTable」というテキストよりもカードに近いため、カードの中に入っていないにもかかわらず、下のカードのコンテンツと明らかに強い関係性を感じます。
また、近接領域と共通領域を組み合わせることで、より複雑な効果を作り出すことも可能です。
下の図では、「Our work」と「Strategy」に共通する特徴的なフォントを使用し、その下の文章と近接させることで、タイトルと文章のセットの関係であることが明確に示されています。
私たちは、直線や曲線上にある要素は、直線や曲線上にない要素よりも関連性が高いと感じます。
上の図を見ると、3つそれぞれが独立した業務ではなく、何かしら共通していることが分かります。
また、左上の「省エネ」という文字によって、3つそれぞれが環境分野における何かしらの区分であることを感じることができます。
静止している要素や異なる方向に動く要素よりも、同じ方向に動く要素の方が関連性が高い感じます。
この「The Boat」では、この共通運命を使って、視差スクロールにより、嵐の混沌とした揺れと、物語進んでいく様を表現しています。
そのため、画面中央のテキストが、その間にある2つの画像と関連していることを見落としてしまうかもしれません。しかし、船と荒波が画面の右側に移動するにつれて、テキストと画像の関係がより明確になります。また、スクロールするとテキストと画像が傾いたりずれたりするのは、デザイナーがドラマチックに演出したものです。
私たちは、平行な要素は非平行な要素よりも関連性が高いと感じます。
例えば、上記のモスバーガーの公式サイトでは、たくさんの文字を詰め込んでいるデザインになっています。
一見するとランダムですが、情報の種類ごとに、縦書き、横書き、横書きの縦並びなど並行と非平行を作り出すことで、各情報を分かりやすく区分しています。
乱雑なデザインにもかかわらず、デザインに安定感を感じるのはそのためです。
よりダイナミックな印象を与えることは、乱雑さ・混乱と紙一重ですが、この平行・非平行を用いることで、ダイナミックな中にもバランスを保つデザインを作り出すことができます。
イタリア未来派のF.T.マリネッティの代表的な映像詩「Parole in liberta」（「自由な言葉」または「自由の中の言葉」）は、パラレル・ポエムを実践する上で、これ以上の例はないと言えるでしょう。
この混沌としたテキスト群の中で，マリネッティは時折，数行の活字を並列に配置することで，（相対的に）明瞭さと関連性のある空白を作り出している。この平行線は、散在するテキストに緊張感を与えると同時に、ダイナミックな構成に馴染みのある読書体験を一瞬取り戻すことで安堵感を与えている。
私たちは、特徴を共有する要素は、そうでない要素よりも関連性が高いと感じます。
先程のモスバーガーの例を再度見てみましょう。
縦書きのテキストがいくつかありますが、配色を対照的にしています。これによって、大きい白抜き文字のテキストがタイトルであることを感じさせ、ユーザーの目線を誘導するようになっています。
また、左と右は配置もバラバラで、斜めの境界線を右のコンテンツははみ出していますが、要素ごとのスタイルを統一させることで、左と右がそれぞれ別々のコンテンツであることを感じさせ、目には見えない境界線を作り出しています。
強調されたり、違いがあったりすると、私たちの注意を集め、引きつけ、興味を高めることができます。
焦点は、Webデザインの多くの要素で重要な役割を果たすため、それをわざわざ取り上げるまでもないかもしれません。しかし、その重要性ゆえに、強調と差異をうまく意図的に適用することがより一層重要になります。
もちろん、デザインの中で強調を作り出すには、次のような様々な方法があります。
・CTAボタンやリンクにコントラストが強い色をつけるなど、色を大きく変える。
・ファーストヴューの見出しを72ptに設定するなど、サイズを大きく変更する。
・太字、斜体、全角文字など、タイポグラフィで強調させる。
・あえて大きく空白を作り出すことで、空白の中にぽつんとある要素を強調させる。
など
私たちは、過去の経験に基づいて物事を認識しています。
最後に、最も厄介な原則を紹介します。
これまで説明してきたビジュアルデザインの原則は人々に共通するものですが、この過去の経験だけは人それぞれ固有なものでありコントロールができません。
ここでできることは、平均的な過去の経験を踏まえた見せ方の工夫です。
たとえば、アイスクリームといえば、そのおいしさから来る本質的な喜びはもちろんのこと、自分へのご褒美などよりプラスな感情を連想する人がほとんどでしょう。アイスクリームコーンのイメージは、子供の頃の夏の日々へのノスタルジーや、家族や友人といった遊園地など非日常的な空間を想起させることに繋がるかもしれません。
しかし、知覚過敏や糖尿病の方にとっては、アイスクリームは不快なイメージを連想させるものかもしれません。
だからこそ、Webデザインをする際には、サイトのターゲット設定が必要なのです。また、国際的なユーザー、あるいは多様な年齢層のユーザーに向けてWebサイトをデザインする場合、イメージやデザイン要素の感情的・体験的な感情がターゲットによって異なることを強く念頭に置く必要があります。
いかがでしょうか。
当社では、Webデザイナーの方が意のままにサイト構築できる、次世代型ノーコードツール「Webflow」の無料説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。
Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営