こんにちはー！デザイナーのおまめ(@omame_creator)です🙌
デジタルデバイスのデザインをするときに、優先順位が高いもののサイズを大きくしたり、ボタンにシャドウをつけたり、モーダルを開く時は背景を暗くしたり…。他のサービスも全てそうだから、当たり前のようにデザインしていることはありませんか？
ただ、それら一つひとつに、「なぜそうするの？」と聞かれると、なかなか答えられないこともあるなぁと感じています。
また、データではピッタリ横幅を合わせているのに、目で見てずれているように見えることはありませんか？実はこれには錯視が関係しているのですが…。錯視については、記事で詳しく説明しますね。
今回は、データ上の見え方と人間の視覚を通した見え方の違いを整理し、それらの知識を実践できるものにという切り口から、実践できるものにまとめてみました！
なぜ視覚が重要なのか？
人間が外界を感知する感覚機能は、視覚・聴覚・触覚・味覚・嗅覚の5種類に分類され、五感と呼ばれています。
全て同じように知覚するのではなく、知覚の割合というものがあり、「視覚 83.0％、聴覚 11.0％、触覚 1.5％、味覚1.0％、嗅覚 3.5％」となっています。
判断に重要な情報を脳に与えるのは圧倒的に視覚が多いことがわかります。
錯視について
私たちの眼は、カメラのように外界の光景を忠実に写し取っているわけではありません。何かを「知覚する」という段階では、知覚した結果が実際の対象の物理的特性とは異なっています。この現象のことを、「錯視」と言います。
一般的な用語として、錯覚という言葉を「見間違い」という意味で使うこともありますが、心理学において問題となる錯覚は、間違いではなく、誰にでもおこる正しい現象です。錯覚量の違いはあっても、いつ見ても、何度見ても、誰が見ても、同じような錯覚が生じます。
錯視を考慮してデザインされているものも沢山あります。例えば、教会で結婚式を挙げる際、ウエディングドレスが真っ白だと目立たないので、薄めの黄色やグレーを入れています。
他にも、手術服が白ではなく青緑なのは、手術中に服の白と血を見続けていると、白いガンなどの小さいものを見つけづらくなってしまうからだそうです。
錯視の種類は、大きく分けて２つに分けることができます。
物理的な錯視
影・ななめ・色・うごきなどをずっと見ると、直接目に作用して、動いているように見えたりするものを指します。
理由は様々あるのですが、眼球運動によって引き起こされているものが多く、脳が目の動きを対象の動きと判断し、静止画なのに動いているように判断してしまう場合が多いです。
目のピントを真ん中の点に合わせると、蛇の円盤が勝手に回転して見えます。
脳波の研究結果から、「蛇の回転」には、脳の視覚野の神経を連続的に発火させる性質を持ち、色に対する時間差（黒→青→白→黄の順）が、回転感を生じさせていると考察されています。に
詳しくはこちらの論文で 解説されています。
文字列傾斜錯視
文字自体の高さは変わっていないのに、文字が斜めに見えてしまいます。
文字の平行線の部分が段々になっていることと、脳の機能によって文字を認知する時に文字の傾きや形など全体的な総量で判断するため、文字が傾いて見えるそうです。
ミュラー・リヤー錯視
線の長さは同じなのに、下の絵の方が長く見えてしまいます。
こちらも文字列傾斜錯視と同じく、脳が全体の総量でサイズをとらえるという性質を持っている為、水平線の長さを判断するときに、視覚システムが斜め線をも含めてしまうので、同じ長さでも斜め線分総量が大きい方が長く見えてしまいます。
奥行き
同じ長さなのに、奥にある線の方が長く見えます。
ポンゾ錯視とも呼ばれ、２本の線は奥行きが違うと脳が勝手に判断し、「奥行きが違うのに２本の線は同じように見えるから、遠くにある上の線は、実際は長い」と知覚してしまいます。
認知的な錯視
認知的な錯視は、目で受け取った情報を脳が無意識に立て直したり、前の情報に引きづられて勝手に補完されることを指します。
例えば、動物を見た後に、絵を見ると動物っぽく見えたりするような現象のこと。
有名なものでは、ペンローズの階段などがあります。
90度ずつ折れ曲がって、永遠に上り続けても高いところに行けない階段を二次元で描いたものをペンローズの階段と言います。本来であればありえないのですが、脳が勝手に前の情報を元に補完してしまいます。
ゲシュタルトの心理学
なぜ錯視が起きてしまうかの理由は、心理学と関連しています。
その中でも有名なゲシュタルトの心理学を用いて錯視について説明していきます。
ゲシュタルトの心理学とは、様々な錯視がおこる１つの中でも、人間を取り巻く世界をバラバラな「部分」や「要素」としてではなく、「全体性」や「構造」に重点を置いて捉える心理学です。
シュタルト心理学の基本的な考え方に、「人がものを見るときは、部分の理解を積み重ねて全体を認識するのではなく、最初から全体を捉えて認識している」というものがあります。
人は見たいものを見るために、勝手にパターン化やグルーピングを行っています。 例えば、「漢字」という文字を分解してみても全体が何なのか認識することは難しいが、全体を見ると文字を認識することは簡単です。
よく言われる「ゲシュタルト崩壊」とは、この心理が働かず、「持続的に注視すると、全体形態の認知が減衰してしまう」ことのことです。
「まとまり（ゲシュタルト）」として認識していた対象が、ばらばらのパーツの寄せ集めに思えてくる現象のことで、同じ「漢字」という文字も、じっと見つづけると、部首やつくりがバラバラに見えてきて、一つの漢字というよりも、線の寄せ集めに思える現象です。同じ漢字を約25秒間見つづけると、認知機能が低下し、ほぼ50％の割合でゲシュタルト崩壊が発生するとも言われています。
ゲシュタルトの３つの原則
具体化
具体化は、知覚が勝手に物事の輪郭を作り出してしまう側面がある原則を指します。
たとえば、上図の左では三角形が認識されますが、そこには三角形はありません。右では、3次元形状が見られますが、実際には描かれていません。
具体化は、視覚システムによって「実際の」輪郭として扱われるという特徴があります。
多安定性
ネッカーの立方体とルービンの花瓶が、多安定性を説明する有名な例になります。
多安定性(または多安定知覚) は、曖昧な知覚体験が、2 つ以上の代替解釈の間を不安定に行き来する傾向です。
たとえば、ここに示されているネッカーキューブとルビンの図/花瓶の錯覚です。
「ルビンの壺」は多義図形ですが、ある人は壺にも見えるし、またある人では二人の人物が向かい合っているように見えます。
どちらも正解ですが、「壺」だと思ってみると、壺にしか見えないし、「人物」だと思ってみると、そのように見えてきます。
つまり、人間は自分が興味を示す対象以外をその他と認知してしまうと、その他を自覚しなくなります。
不変性
不変性は、単純な幾何学的オブジェクトが回転、平行移動、およびスケールとは無関係に認識される知覚の特性です。弾性変形、さまざまな照明、さまざまなコンポーネント機能など、いくつかのバリエーションがあります。
たとえば、図の Aのオブジェクトはすべて同じ基本形状としてすぐに認識され、 Bのフォームとすぐに区別できます。それらは、 Cのように遠近法や弾性変形があっても認識され、 Dのように異なるグラフィック要素を使用して描写された場合でも認識されます。
創発、具象化、多安定性、および不変性は、必ずしも個別にモデル化するための分離可能なモジュールではありません。ただし、単一の統合された動的メカニズムのさまざまな側面である可能性があります。
ゲシュタルトの心理学に基づく、グループ化に関する10の法則
ゲシュタルトの原則では、無意識に見てしまう錯視に関する様々な要因をご紹介しました。
その原則にのっとって、グループと認識される法則がいくつもあります。
グループ化に関する法則は、「近接」「類同」「連続」「閉合」「共通運命」「面積」「対称性」「図と地」「過去の経験」など、10以上の法則があり、近年でも発見され続けています。
それぞれ紹介しつつ、デザインに応用する方法をご紹介していきます。
1. 近接の法則 (Proximity)
近接の法則は、距離が近いもの同士が同じグループだと考えるという法則です。
それぞれの要素数やオブジェクトの色、サイズ、形が異なっていても同じグループと認識します。
アイコンとテキストを数段に分けて並べたいときに、余白を取らず詰めて配置するとセクションが分かれて見えないことがあります。十分に余白を取り、同じ意味や内容のものを極力近づけて配置するのが大切です。
2. 類同の法則 (Similarity)
類同の法則は、同じ色や形、向きのもの同士が一つのグループだと認識されやすいという法則です。近接の要素同様、それぞれの要素数が異なっていてもグループと認識します。
アイコンやテキストを並べたいときに、一つだけ色や形が違うと、大きなグループの中で一つだけ別のグループのように見えます。
3. 連続の法則 (Continuity)
連続の法則は、別の経路または交差点に遭遇するまで、線、曲線、または交差点である連続した経路をたどるという法則です。
左はグループとして認識しやすく、右は認識しづらいですよね。
直線状の同様のオブジェクト、川のような滑らかな水の流れ、まっすぐで途切れのない道路は、現実世界も自然とみることができます。
実際のデザインにおいては、グリッドレイアウトでのデザインが連続の法則を利用していると言われています。例えば、Pinterestのフィードをパソコンのブラウザで見たとき、縦のコンテンツを1グループとして連続したものだと認識することができます。UIデザインでは、ナビゲーションメニューに矢印をおくことでさらにオプションがあることを認識させやすくさせるなど様々な箇所で活用されていることが多いです。
4. 閉合の法則 (Closure)
閉合の法則は、一部の要素が不足しているにもかかわらず、人間の脳がイメージを補完して完成させた状態で知覚するという法則です。
左では存在しない三角形を認識します。右では閉じた形をしているものは一つの同じグループだと認識されやすいので、【 】のような括弧が２つで１セットのように見えます。
これを応用したのが、モバイルデザインで流行中の水平スクロール(horizontal scroll)デザインです。Instagramの冒頭にあるコンテンツリストでは、最後のコンテンツが欠けているように見せています。こうすることによってまだ続きがあるように見せています。
また、企業ロゴにもよく利用されています。
スターバックスのロゴは、最初は全部描き切った形で表現されていましたが、最近のものはかなりシンプルで、ネガディブスペースを使用することでロゴがはっきり表現されています。
5. 共通運命の法則 (Common Fate)
共通運命の法則は、同じ方向をむいているものや、同じように動くもの、同じ周期で点滅するものなどが同じグループだと認識されやすいという法則です。
例えば、道路に連なっている自動車の向きが違えば、真逆の方向に向かっている２つのグループを認識することができます。
デザインで応用されている例で一番わかりやすいのが、ブラウザの右側に出てくるようなスクロールバーです。操作を行い、画面をスクロールすると、同じようにスクロールバーも上がったり下がったりします。これにより、全体の位置がわかったり、スクロールの方向が正しかったりするのかを認識することができます。
例えば、メニューも矢印をたどっていくと、すべて右側に下階層のメニューが出ることで、操作を認識しやすくしています。
6. 面積の法則 (Area)
面積の法則は、重なっている２つの図形では面積の小さいほうが手前にあるように見えるという法則です。
面積の法則は、ヒーロー画像におけるタイポグラフィに利用されています。全面的に画像を敷いてその上に文字を置くと、文字のほうが占有面積が小さいので、浮き出て見えるのです。
7. 対称の法則 (Symmetry)
対称の法則は、左右対称な図形ほど認識されやすく、バランスがいいと感じさせることができる法則です。有名な「ルビンの壺」の図はよく引き合いに出されますが、対称的な輪郭があると意図せずに壺の絵や人の顔を認識し、入れ替えて認識することができます。
重さを均等にするという表現もよくされ、要素の数だけではなく、要素の大きさトータルのバランスが重要になります。
８. 図と地の法則 (Figure & Ground)
人は複数の要素をもつ領域を形（図）と背景（地）に分けて認識しています。
一般的に背景と認識された要素は、ほとんど知覚されません。
ルビンのつぼを例に挙げると、白い部分を「図」・黒い部分を「地」と認識するとつぼの画像、逆に黒い部分を「図」・白い部分を「地」と認識すると向きあっている人の顔が見えます。
モーダルを出すUIでは、背景に半透明の黒幕を入れ、フォーム部分以外を「地」としてモーダル内部を強調する表現が多くなっています。
9. 過去の経験の法則 (Past Experiences)
要素は過去の経験に従って知覚されます。
以下は色の違う円が3つならんでいるだけですが、信号機と同じ色の並びなので、過去の経験を通して、これらをグループとして認識します。
まとめ
いかがだったでしょうか？ ただ表層を整えるだけでなく、人間の錯視も考慮して「見え方」をデザインする必要があり、デザイナーは人間の目の仕組みも理解する必要がありますね。
また、日々当たり前のように見ているUIも、人間の心理に基づいてデザインされていることがおもしろいですね。
個人的には、優先順位の高いものを目立たせるため、メリハリをつけてレイアウトすることは、ただサイズが大きいから目立つのではなく、大きさによって遠いか近いかという距離感を、人間の目が判断して認識するという話が一番面白いと思いました。デザインを2Dではなく3Dで捉えて考えると、表現の幅がまた広がりそうです。
ここまで読んでいただきありがとうございました！
