デザインに一番大事なのはセンスだと思っていませんか？ ディレクターやエンジニアにも役立つ、Webデザインで使える心理学のルールとは？
ミズーリ工科大学の研究によると、Webサイトに対するユーザーの第一印象の94%以上はデザイン関連の要素で決まっているようです。また、なんと88%ものユーザーが、ユーザビリティの問題があったWebサイトを再び使わないと決めることも分かっています。
しかし、Webサイトのデザインには高度な技術力や美的感覚が必要だと思うのなら、考え方を変えてください。美的感覚は確かに重要ですが（なんといってももう2016年なのですから！）、Webサイトに必要なのは美的感覚だけではありません。実際、一番大事なことでさえありません。一番大事なのはユーザビリティであり、もっと実入りの多いWebサイトを確実に作るには、心理学のルールを使ってWebサイトをデザインしなければなりません。
ルール1：UXではコンテキストがすべて
上の画像は、数字の13とアルファベットのBとどちらに見えますか？
上の画像を注意深く見てください。なにが見えるでしょうか。アルファベットのA B Cですよね。では、下の画像を見てください。
おそらく、数字の12、13、14が見えていますよね。
下にあるのは、上の2つの画像を抽出したオリジナル画像です。
［ここまでの画像引用元：http://brainden.com/word-illusions.htm］
最初は、画像の文字を13またはBと読むかは、過去の経験や先入観に左右されたものでした。次では、AのあとにBが配置され、そしてCが続くので、A 13 Cと読む可能性は低くなっています。言い換えれば、13ではなくBと認識していることになります。
しかし、3つ目の例では、12と14が認知に影響を与えているため、12 B 14と読み取ることはほとんどありません。もし12が最初に、そして14が最後に来たなら、真ん中の読みにくい文字、あるいは数字はBではなく13なるはずですよね。
上の体験はなかなか分かりやすいものですが、次の少し微妙なものはどうでしょうか。
上の画像は、2つの顔、1つの花瓶、どちらに見えるでしょうか？
最近人との関わりが多かったのなら2つの顔が見え、一方で花瓶と関わることが多かったのなら花瓶が見える可能性が高くなります。
このセクションに使用した例は、パーセプチュアルセット理論に基づくものです。
心理学において、パーセプチュアルセット理論は、情報を予想またはすでに持っている情報に基づいた特定の方法で受け取る傾向を指します。パーセプチュアルセットは、たいていは文化や背景、あるいは過去にさらされた情報や状況による影響を受けています。
パーセプチュアルセットの良い点は、影響を受けやすいということです。2番目に登場した画像に12と14しか見出せなければ、その間にある読みにくい「数字」は13だと自動的に理解できます。もしAとBを見出したら、読みにくい「文字」はBであるとすぐに理解します。しかし、判別しにくい数字または文字だけを見せられた場合、自分の経験や先入観に基づいて数字か文字かを判断することになります。
これはWebサイトにどのように応用できるでしょうか。
UXの原則：Webサイトの見た目やおもしろさのために、確立したUXパターンを犠牲にしてはならない
クリエイティブな人がある分野の常識を改変し、劇的に変えたいと思うのは珍しいことではありません。しかし、そのような改革がWebデザインからのコンバージョンをダメにしてしまうことがあります。Webサイトを訪れる人は、ある特定の要素がある特定の場所または順番に納まっていると期待するからです。
たとえば、名前とEメールアドレスの入力フォームをデザインするとき、ユーザーは名前の入力が先に、メールアドレスの入力がその後に来ると予想します。こうした経験を何度も繰り返しているので、これらは先入観として成立しています。特にこれといった理由がない限り、こうした「常識」を勝手に変えてはいけません。
それでもがらっと変えようと思い立ったときは、新しく加えた要素がなにを意味するのかユーザーにちゃんと伝わるよう、ヒントやガイドを付け足してください。これはUXの基本中の基本です。
ルール2：画像配置によってユーザーの注意力が半減することがある
Webデザインには視覚的要素が必要不可欠です。しかし、ストック画像、撮影した画像のどちらを使う場合でも、Webデザインにおける画像の使用は、自分で思っているほど単純なものではありません。
下の例を見てください。
そのあと、こちらの画像を見てください。
どちらの画像も同じキャッチコピーで同じ商品を宣伝しています。変わっているのは赤ちゃんの画像の配置だけです。たとえば、元画像では赤ちゃんは前を向いています。その結果、ほとんどの人々は赤ちゃんのまなざしに集中することになります。しかし、2つ目の例では赤ちゃんは横を向いていて、そのため多くの人々の視線は横向きに誘導されます。赤ちゃんの視線の向きとまったく同じ方向です。
同じ原則を立証する例をさらに2つ紹介します。
下の画像には、こちらをまっすぐに見つめる女性の写真が見えます。
その下の画像では、商品に視線を送る女性の写真が見えます。
これはWebサイトにどのように応用できるでしょうか。
［この項の画像引用元：https://www.quicksprout.com/2013/08/01/7-conversion-optimization-lessons-learned-from-eye-tracking/］
UXの原則：画像を戦略的に使うこと
画像の使い方を誤ると、人びとに気づいてほしいメッセージがうまく伝わらなくなり、それによりコンバージョンが大幅に下がってしまうことがあります。
Webデザインに画像を使うとき、画像配置の影響力を理解することはとても大切です。Webページのキャッチコピーに視線を送る人の写真を使うと、見る人の視線はキャッチコピーに向かいます。登録フォームの方向を向いた矢印マークをランディングページに置けば、Webページを訪れる人びとに登録フォームに注目するよう促せます。使用する画像が注目してほしいコンテンツにきちんと誘導できているかどうか、しっかりチェックしてください。
ルール3：劇的なリデザインは避け、少しずつ変更すること
最大の規模と成功率を誇るWebサイトが大掛かりなリデザインをすることがほとんどないのはなぜでしょうか。また、大手のWebサイトがリデザインをすると、ほぼ毎回と言って良いほど多くの反感を買うのには理由があるのでしょうか。
これは丁度可知差異（ちょうどかちさい：気づくことができる刺激の程度）のヴェーバーの法則によって説明できます。ヴェーバーの法則によると「丁度可知差異は基礎となる刺激値の強度に常に比例し、『丁度可知差異』は『知覚経験において可知できる変化を生み出すために変化が必要な刺激の強度によって決められる最低値』」とされています。
もっと単純に言うと、ヴェーバーの法則では、人間は小さな変化をいつも感知できるとは限らないということです。例を挙げれば、10キログラム相当の物質を持ち上げているとき、0.1キログラム追加しても簡単には気づきません。しかし、1キログラム加えればその違いはさらに明確になります。この例では、10キログラムのものを持ち上げる人に違いを可知させることに成功した追加の1キログラムは「弁別閾（べんべついき）」と呼ばれます。
これと同じ原理はWebデザインにとっても効果的です。たとえば、Facebook、Twitter、グーグルあるいはほかの大手Webサイトが大掛かりなリデザインをすると、たいてい不満を買います。
人間が変化、特に大規模な変化を好まないことは心理学的に立証されてきたことです。2010年の研究では、人間は身の回りにいつもあるものに対して強い愛着を持つことが分かりました。たとえば、新しい授業の課題が以前より簡単で少なくなったときでさえ、従来の課題に愛着を感じることが証明されました。また、その習慣が長ければ長いほど愛着が強まることも分かりました。人間が変化に対して持つ抵抗感は進化や生存能力に結びついているのかもしれません。人はずっと続いているものの中に安全性を見出すために進化してきているので、そのほかのものには抵抗しようとするのです。
これはWebサイトにどのように応用できるでしょうか。
UXの原則：リデザインをゆるやかで微妙な程度にとどめること
グーグルやFacebook、そのほかの大手Webサイトが経験から理解したように（手ひどい経験をしたWebサイトも！）、変えるなら微妙でゆるやかなもほうが良いことが分かっています。
Webサイトの根本的なリデザインをあまりに早急にしようとするのはNGです。いろいろな要素を1つ1つ順番に変えていき、そのとき、変更に関するフィードバックを積極的に集めてください。大掛かりなリデザインをしたい場合は、ユーザーの一部を対象に何度かテストをします。その反応を観察して生かし、新デザインをユーザー全体にどのようにリリースするか考えます。
ルール4：読者の気分を明るくするフォントを使うこと
フォントサイズにも心理学が関係しているといったらどうでしょうか。大きなフォントと小さなフォントのどちらが良いのでしょうか。
2012年の研究によると、フォントサイズは重要で、大きいフォントは読者の心の中に強い感情を生み出すようです。おもしろいことに、コンテンツを作るときにWebデザインの専門家が勧めているのは、16px以上のフォントです。
とはいえ、研究ではフォントサイズによって読解力が変化することについては立証されていません。一方で、読みやすくシンプルなフォント（大きなフォントは読みやすいフォントではないのでしょうか）で書かれている指示のほうが伝わりやすく見え、それを読んでいるユーザーの気分を良くすると分かっています。
また、スキャンパスの概念の理解も必要です。スキャンパスとは、脳が普段情報を読んで処理する方法のことを指します。Webサイトやそのほかの場所でコンテンツを読むとき、「スキャンパス」と呼ばれる自然なパターンに沿って目を動かしています。目を小さくジャンプさせながらコンテンツを読んでいるのです。なにもかもがかすんで停止して見えるとき、脳は読んでいる文字の静止画を撮影し、それらを言葉としてアレンジし、その意味を解釈しています。これらはすべて一瞬で処理されるので、認識することはできません。こうしたジャンプは「サッカード（眼球の衝動性運動）」、停止状態は「凝視」と呼ばれていて、この2つがスキャンパス状態を形成します。
読者にとっての効果的なデザインの作り方を理解するためには、コンテンツを読むときの自然なプロセスの理解が大切です。スキャンパスはZ型のパターンに沿っていて、「パターンの中断」が起こらない限り、パターンを完全に「意識する」ことはほとんどありません。要するに、読者にWebデザインのあるテキスト要素にもっと注目してほしいなら、ほかと同じようなフォントサイズではいけないということです。
これはWebサイトにどのように応用できるでしょうか。
UXの原則：フォントを使うときはシンプルで大きなフォントを選ぶのが吉
デザインでもっと上手にフォントを使うには、次のコツがお勧めです。
- シンプルなフォントを使うこと：やたら派手でこだわったフォントを使うと、複雑すぎてすっきりしない印象を与えてしまう
- 大きいフォントを使うこと：コンテンツが読みやすくなるだけでなく、読み手の気分も良くなる
- 重要な要素を目立たせたいときはフォントを変え、大きく見せること：特にデザインの中に目立たせたいキー要素がある場合、Webページ内のフォントをすべて同じにしてしまうとコンバージョン率が下がる
（原文：4 Clever Psychology Rules for Making Better UX Decisions）
［翻訳：加藤由佳／編集：Livit］
