1.認知心理学とは？
「改善方法として、心理学と言われてもあまりピンとこない」という方も多いのではないでしょうか。
また、心理学を取り入れるとなったときに、何をどのように取り入れればよいか、それはどのような効果があるのかを想像するのは簡単ではありません。
本章では、心理学の中でも特にサイト改善に応用しやすい認知心理学に焦点を当てて、心理学の中の位置づけや、それをサイト改善に取り入れるメリットをご説明します。
1-1. 認知心理学の位置づけ
はじめに、心理学とは精神と行動を科学的に研究する学問です。研究分野は幅広く、その中で社会心理学・消費者心理学・人間工学など多くの専門分野に分かれており、認知心理学もそのひとつです。
認知心理学では、人間の認知（思考・意思決定・問題解決・注意・記憶などのすべての精神的能力）について科学的に研究します。簡単に言えば、人間が何かに注意を向け、それを見たり聞いたりして得た情報に関して、何かを考えたり記憶したりする、そのプロセス全体を研究対象としているのです。
その歴史は比較的若くはありますが、「現代心理学において主流」といわれる注目すべき学問です。
図1：認知心理学で研究対象としている人間の認知に関するイメージ
1-2. サイト改善に認知心理学を取り入れるメリット
サイト改善のためにはユーザーについて知ることが重要であることは先ほども述べました。 自社サイトを見ているユーザーの心理を想像してみてください。下記のような疑問が思い浮かぶのではないでしょうか？
- ユーザーが自社や自社の製品・サービスに対してどのような印象を持つのか？
- ユーザーの注意を引くコンテンツは何だろう？
- ユーザーはどのような思考プロセスで購買を決定するのか？
実は、これらはすべて認知心理学で研究されてきた精神的プロセスの一部なのです。 認知心理学でこれまで研究対象とされてきた人間の精神的能力で表すと、下記のようになります。
- ユーザーが自社や自社の製品・サービスに対してどのような印象を持つのか？ … 感覚・知覚
- ユーザーの注意を引くコンテンツは何だろう？ … 注意、記憶
- ユーザーはどのような思考プロセスで購買を決定するのか？ … 思考・意思決定
つまり、人間がさまざまな概念をどのように知覚し、何が彼らの注意を引き、どのように意思決定するかを研究する認知心理学を学ぶことで、ユーザーを知ることに繋がり、それがコンテンツやデザイン、ひいてはオウンドメディアの改善に役立つのです。
2. 認知心理学をサイト改善に取り入れる方法
「認知心理学がサイト改善に役立つ」ということは前章でお伝えしましたが、この章ではより詳しく、どんな研究があって、それがどのように役立つのかをご説明します。
2-1. 認知心理学がサイト改善にどのように応用できる？
心理学は人間の精神的な面に焦点を当てた学問ではありますが、その研究は数字に裏付けされた定量的なデータです。
ユーザーを理解した上でサイトの問題点を見つけ出し解決するための知識として、マーケティングやデザインと同じように、認知心理学も活用できます。
サイト改善だけでなく、日常生活にもよく活用される認知心理学の例として、“マジカルナンバー”があります。
これは記憶に関係する言葉で、一般的には「人間が短期記憶で保持できるチャンクの限界」を表しています。チャンクとは、「情報のかたまり」を意味します。
有名なのは、認知心理学者であるジョージ・Ａ・ミラーが提唱した“マジカルナンバー7±2”ですが、近年はミズーリ大学の心理学教授ネルソン・コーワンが2001年に発表した“マジカルナンバー4±1”が主流になっています。
わかりやすい例としてよくあげられるのが電話番号や郵便番号です。
左が数字を羅列しただけの場合、右がチャンキングした（いくつかのチャンクに分けた）場合です。明らかに右の方が見やすいことが分かると思います。私たちは日常生活でも自然と“マジカルナンバー”に沿って、短期的に記憶しにくい数字などをチャンクに分けて認識しやすくしているのです。
図2：郵便番号や電話番号などにもマジカルナンバーが活用されている
“マジカルナンバー”はもちろん数字だけでなく、サイトのUIUX改善にも応用できます。 下記の図を見ていただければ、サイト内の情報をなるべく少ない数のまとまりにチャンキングするだけで、格段に情報は記憶されやすくなり、ユーザーは回遊しやすくなることが分かると思います。
図3：雑多に並んだコンテンツもチャンクに分けるだけでユーザビリティが向上
ここで大切なのは、“マジカルナンバー”が7±2か4±1かというよりも、「人間には短期記憶の容量に限界があり、情報をいくつかのチャンクという『情報のかたまり』にまとめることが有効だ」ということを知っているかいないかです。
“マジカルナンバー”の数自体は、受け手の年齢・チャンクの複雑さ・提示される情報の種類などによって変化します。しかし、チャンキングの重要性については上記の2つの例で明らかです。
これを知った状態でぜひ、自社のオウンドメディアをチェックしてみてください。情報はいくつかのチャンクに適切に分けられていて、わかりやすいサイトになっていますか？
上記のように実際に認知心理学の研究を用いてサイトを改善する事例については、第3章でも詳しくご紹介したいと思います。
2-2. サイト改善にすぐに応用できる認知心理学の研究7選
この章では、サイトを改善するのに応用しやすい認知心理学の研究を7つご紹介します。
色彩心理学
色彩心理学では、「色が知覚や行動にどのように影響するのか」を研究しています。
人間は、自分以外の人間や物事と最初に出会ってから90秒以内にそれを評価していて、その評価の内の約62～90％は色にもとづいていると言われます。
Webサイトにおいてもそれは同様であり、それだけ色の選択は慎重に行うべきということなのです。
詳しい改善事例について、第3章でご説明しています。
認知バイアス
認知バイアスとは、「人間が情報を処理・判断したり意思決定を行ったりするときに発生するエラー」のことを指します。そのようなエラーは必ずしも悪いわけではなく、多くの場合、情報処理を単純化しようとする脳の働きの結果とも言えます。
バイアスの種類はさまざまですが、身近な例としては“後知恵バイアス”があります。これは、「ランダムに起きる出来事であっても、それが実際よりも予測可能な出来事であると見なす傾向」のことです。
アメリカで行われた実験で、当時候補者であったクラレンス・トーマスが最高裁判所の陪席判事に当選するかどうかを大学生たちに予測してもらったところ、58％が当選するだろうと答えました。しかし、実際にトーマスが当選した後に再度大学生に当選を予測していたかを聞いたところ、78％が当選を予測していたと回答したのです。
皆さんも、「あの製品は売れると思っていた」「このニュースは話題になると思っていた」と後から感じることはありませんか？もちろん本当に予測が当たっていた可能性もありますが、もしかしたら、“後知恵バイアス”かもしれません。
認知バイアスに分類されるさまざまなバイアスを応用したサイトの改善事例については、第3章でもご説明しています。
バンドワゴン効果
認知バイアスにも関連しますが、バンドワゴン効果とは、「自分の信念に関係なく、他人がそれをしているという理由で自分もそれをする」という心理的現象のことです。
たとえば選挙では、人々が「勝っている」と思う候補者に投票する確率が高くなるという
調査
があります。バンドワゴン効果には負の側面もあり、人々は候補者自身の考えや功績ではなく世論調査の結果によって、自分が投票しようとしていた候補者を変えてしまうということが起こるのです。
他には、お店である商品の購入を検討しているときに、棚に豊富にある商品よりも、ある程度減っている商品の方がなんとなく人気商品であるように感じてしまったり、他の買い物客がカゴに入れた商品を見て自分も同じ商品を選んでしまったりといった身近な例もあります。
バンドワゴン効果を有効に活用する事例については、第3章でご説明しています。
ヒックの法則
「人間が何かを決定するのにかかる時間は、その選択肢の数と複雑さに比例して増加する」という法則です。
1952年に心理学者のウィリアムエドマンドヒックとレイハイマンによって発表されました。
要するに、多くの選択肢や複雑なインターフェースであるほど、ユーザーがそれを処理する時間を長くしてしまうことを意味します。
詳しい改善事例について、第3章でご説明しています。
認知的負荷
作業記憶によって使用されている、精神的な処理能力のことを認知的負荷と言います。
私たちの脳は、処理能力が限られているという点でコンピューターと似ています。入ってくる情報量が、利用可能な容量を超えると、認知的負荷が発生します。認知的負荷が発生すると、パフォーマンスは低下し、タスクはより困難になり、Webサイトであればそこで離脱が生じる恐れがあります。
詳しい改善事例について、第3章でご説明しています。
選択的注意
「人間が何かに注意を向け続けられる時間の平均は金魚よりも短い」という神話があります。この神話の真偽は定かではありませんが、人間の集中はそう長く続かないことは真実です。
また、私たちは毎日、少なくとも1,000件以上の広告に接しています。しかし、そのほとんどを覚えていないと思います。私たちはひとつのことに長時間注意を向けることが難しい分、情報を取捨選択して注意を向けているのです。
広告に限らず、Webサイトでも同様です。サイトを閲覧しているときに文章を全て読み、ページにあるすべての情報を確認するユーザーはほぼいません。
そこで、情報に優先度をつけて徐々に詳細を開示したり、色を使って重要度の高い箇所に注意を向けたりすることでユーザーの選択的注意を向けさせることができるようになるのです。
系列位置効果
系列位置効果はドイツの心理学者ヘルマン・エビングハウスによって提唱された記憶に関する研究で、「リストの最初と最後の項目を、中間にある項目よりも覚えている心理的効果」のことです。
系列位置効果には、“初頭効果”と“新近性効果”が関連しています。
“初頭効果”とは「最初に起こることは、次に来ることに影響を与えるため最も重要であるという想定のもと、リストの最初にある情報をより記憶しているという傾向」を指します。
“新近性効果”はその逆で、「リストの最後にある情報をより重要視して記憶する傾向」のことを指します。この2つを組み合せたものが系列位置効果です。
この効果を応用した例としては、たとえばコンテンツの最初と最後にそのコンテンツ内容の概説を配置して、ユーザーが内容を大まかに理解し記憶しやすくするといった方法があります。
3. 認知心理学を用いた3つのサイト改善事例
2章でご説明した認知心理学の原理の中から3つ、実際の事例と併せて詳しく解説します。
3-1. 色彩心理学×デザイン
2-2で述べたように、色はユーザーの印象の最大90％に影響します。
Webサイトにおいては、製品・サービスや企業・ブランドの印象など、応用できる範囲は幅広く、ときには他社との差別化まで担う要因となり得ます。それほど色は人間の印象に影響を与えるものなのです。
今回は、そんな色彩心理学のデザインに関連した事例をご紹介します。
色が人間に与える印象はさまざまで、使われる場所や、一緒に使われる色によっても変わります。
図4：Color Emotion Guide
出典：
The Logo Company
下記に、色の組みあわせを変えた2つのバナーがあります。それぞれのバナーにどのような印象を持つでしょうか？
内容は同じですが、使われる色が違うだけで印象ががらっと変わるのではないでしょうか。
1のバナーを見たユーザーは、落ち着いた色合いから「このシステムは高性能そうだからビジネス向けだろうか？」といった印象を抱く可能性があります。
また、2のバナーを見たユーザーは、明るく爽やかな色味から「この製品は初心者向けで使いやすそう」と感じるかもしれません。
製品・サービスに合った色を選択していくことは、ユーザーに製品・サービスに合った印象を与えるために大切になります。
図5：色の心理学の効果で、色合いが違うだけでもユーザーに与える印象が変わる
次に、ページデザインの中でも重要な要素のひとつであるコンバージョンボタンについて、よく引用されるわかりやすい事例をご紹介します。
下記のサイトでは、元々緑だったボタンを赤に変えると、コンバージョンが21％も増加しました。
ポイントは「赤がコンバージョンを増加させる色である」ということではなく、「元々サイトのメインカラーが緑で、コンバージョンボタンも緑であったため埋もれてしまっていた」ということです。緑の補色である赤に変更したことで、他の要素とコントラストが生まれたのです。
このように、色は人間が受ける印象だけでなく、何かに注意を向けたいときにも効果をもたらします。
図6：コンバージョンボタンの色に関するA/Bテスト（緑と赤の違いについて）
出典：
HubSpot
色彩心理学では、「コンバージョンボタンはこの色が一番良い」「自社のバナーに使用するならこの色が一番良い」などの答えはひとつに絞ることはできません。
何故なら、色が人間に与える影響は確かに存在しますが、それはブランドカラーやデザイン、ターゲットユーザーによって変わるからです。
しかしその中で、ユーザーが企業や製品・サービスに抱く印象とデザインに使われる色がマッチしたときに、色は大きな効果を発揮するのです。
3-2. 認知バイアス×製品・サービスページ
自社製品やサービスをオウンドメディアで紹介するときには、なるべく魅力的で信頼できるものであるように見せたいのではないかと思います。
そのように製品やサービスに好印象を持ってもらいたいとき、ユーザーのバイアスが助けになるかもしれません。
バンドワゴン効果×顧客の声
2-2でも簡単にご紹介しましたが、バンドワゴン効果とは、他の人が何かをしているという理由だけで自分もそれを行う傾向があることを指します。
① ユーザーの声（レビュー）を掲載する
消費者の82％は購入を決定する前にレビューを読み、そのレビューの内容が購入決定に影響すると答えたユーザーは93％に上るという
調査
があります。この調査からわかるように、レビューは購入や成約に非常に大きな影響を及ぼすのです。
製品・サービスページには、ユーザーの声を積極的に掲載するべきであるということは明らかです。
② 成約数や販売数、もしくは顧客の企業のロゴを掲載する
これは、信頼性を表すのに有効な方法です。「これだけ人気がある製品なのか」「こんな企業もこの製品・サービスを使用しているのか」という情報は、ユーザーにとって時には製品仕様よりも購入の意欲を高める要因になります。
図7：
HubSpot
では顧客数とロゴを大きく掲載している
内集団バイアス×コンテンツ
ユーザーのインタビューを掲載したり、アンケート結果のような定量データを掲載したりするのも有効です。
そんなときのポイントのひとつに、内集団バイアスの活用があります。
内集団バイアスとは、「何かを判断したり、行動したりするときに、自分が所属する以外の集団よりも、自分が所属する集団に関する情報を肯定的に捉える」という傾向のことで、こちらも認知バイアスのひとつです。
ユーザーの声を紹介するときには、ターゲットユーザーが所属する集団（年齢・性別・業種など）に絞って掲載すると、自分が所属するグループの他のユーザーの声に影響を受けやすくなります。
また、コンテンツの文章も、ターゲットユーザーに合わせた口調にすると効果があるという調査があります。
下記の2つのサイトを見比べてみてください。
あなたはパソコンを買い替えようと考えている30代の男性だとします。その場合、どちらの製品が魅力的に見えるでしょうか？Aの方が魅力的に感じませんか？
図8：キャッチコピーの口調が違うだけで、そのコピーが響くターゲットは変わる
上記は極端な例ですが、このように自社のペルソナで設定したターゲットユーザーに合わせた文章にするのも、説得力を上げるひとつの方法になります。
下記の2つのサイトを見比べてみてください。
ペルソナの設定方法についてはこちらの記事で詳しく解説しています。
現状維持バイアス×無料トライアル
「ここまで書かれていたことを全て実践しても、なぜか問い合わせが増えない」
そんなお悩みをお持ちの方もいらっしゃるかもしれません。
そもそもユーザーは「新しい製品やサービスを購入・契約して損をしたくないから今のままでいいか」と考える傾向にあります。
そしてもしすでに利用している製品がある場合には、それ以外の新しい製品に変更するよりも、今の製品のままでいたいと思う傾向が高いのです。
このような傾向は現状維持バイアスによるものです。
現状維持バイアスとは「人々は物事が現状のままであること、または現在と同じ状況が続くことを好む」という傾向を指します。何か決定しなければいけない場面になったとき、私たちは新しい選択肢よりも現状維持を選びがちです。たとえば、行きつけのレストランでメニューを選んでいるとき、食べたことのない料理を試して失敗するのを避けるために、ついいつも頼んでいるメニューを注文してしまうことはありませんか？
ポイントは、新しい選択肢を選ぶことでコストが削減されたり、利益がもたらされたりするとしても、ときに現状のままでいることを選ぶことがあるということです。
製品やサービスがどれだけ高品質で素晴らしいものであったとしても、このようなバイアスによってお問い合わせされないということがあり得るのです。
そんな現状維持バイアスを逆に利用して、製品・サービスの魅力を伝える方法があります。
それは
「ユーザーに対して無料のプレゼントを贈ること」です。
この方法をより強固にする研究に、“損失回避”と“保有効果”という行動経済学とも関連する概念があります。
“損失回避”とは、「何かを選択するときに、自分がどのような利益を得られるかよりも、自分がすでに手に入れたもの（製品・サービスはもちろん、地位や名誉なども含まれます）を失う可能性の方が際立って感じられること」を言います。
また“保有効果”とは、「自分がすでに所有しているものについて、その市場価値よりも高く、しばしば非合理的に評価してしまうというバイアス」のことです。行動経済学者のダニエル・カーネマンによる実験で、グループAの学生にはマグカップを無料でプレゼントし、Bグループには何もプレゼントしないという状況で、Aグループには「いくらならこのマグカップを売るか」、Ｂグループには「いくらならこのマグカップを買うか」と質問しました。すると、同じマグカップであるにも関わらず、マグカップを無料でもらっていたＡグループが付けた値段は、もらわなかったＢグループの付けた値段より2倍以上高い結果となりました。このように、私たちは自分がすでに所有しているものについては実際よりも高い評価をしてしまう傾向にあるのです。
図9：保有効果と損失回避によって今の状態のままでいたいと感じる現状維持バイアスの例
これまでご紹介した例を製品やサービスに置き換えると、「無料トライアル・無料クーポン・無料で提供されるお役立ち資料などを試したユーザーは、一度所有した製品・サービスや情報を高く評価する傾向にあり、結果その製品・サービスを選びやすくなる」ということがわかります。
図10：現状維持バイアスを製品やサービスの魅力を伝えるために応用するイメージ
製品やサービスは十分魅力的なはずなのになぜかその魅力が伝わらないと感じるときには、まずはユーザーに無料でプレゼントを贈り、製品やサービスを試してもらうのもひとつの手かもしれません。
3-3. ヒックの法則・認知的負荷×お問い合わせフォーム
お問い合わせフォームで、入力を面倒に感じたことのある方は多いのではないでしょうか。
自社サイトのお問い合わせフォームで、それと同じことをユーザーに強要すべきではありません。
人間の処理能力には限界があり、情報量や選択肢の数が増えるほどパフォーマンスが低下することは2-2のヒックの法則、認知的負荷でご紹介しました。
ここで面白い例をひとつご紹介したいと思います。
図11：祖父母の「インターフェース」を簡素化するために加工されたテレビのリモコン
出典：
The Psychology of Design
これは個人的な見解ですが、一人一個は購入してから一度も押したことのないリモコンのボタンがあるのではないでしょうか。
悲しいことですが、ユーザーの利便性を考えて作られたリモコンであっても、人によっては認知的負荷を生じさせる要因になります。
それと対照的なのが、Apple TVのリモコンです。
絶対に必要なものだけにリモコンのボタンを簡素化した結果、認知的負荷が大幅に軽減されます。
複雑さをTVインターフェース自体に移すことにより、情報を効果的に整理し、メニュー内で段階的に開示することができるようになったのです。
図12：Apple
TVリモコンは必要なものだけにボタンを簡素化することで認知しやすい
「情報量や選択肢が多い方が便利なわけではない」というのは、認知心理学の重要な教えです。
それを踏まえて、お問い合わせフォームの改善事例をご紹介したいと思います。
図13：項目数やステップ数が違う2つのフォームの例
例として、上記にA・B、2種類のフォームがあります。
明らかにAのフォームは情報量も選択肢も多く、送信完了まで辿りつけそうにありません。
ユーザーの認知的負荷を最小限に留めるためには、まず入力項目の削減から取り掛かるべきです。
QUICKSPROUTの調査では、入力項目を3つだけにした場合はCVRが25％に、最大5つの項目の場合は20％、6つ以上の項目の場合には15％と、入力項目が増えるほどCVRが減少することがわかっています。
図14：入力項目が3つと6つ以上のときではCVRが約10%変わる
出典：
QUICKSPROUT
1ページの情報量を減らすこともユーザーに入力の手間をなるべく感じさせないようにするには有効です。
Ａのように、「現在どのくらい入力が進んでいるか」といった表示もない場合には、1ページの情報量が多いほどユーザーはフラストレーションを感じ、離脱する可能性が高くなります。
入力項目を減らすことが難しく、どうしても1ページに収まらない場合には、いくつかのステップに分けて、その分1ページの情報を少なくする方が情報を段階的に開示できるため、ユーザーに負荷をかけにくいといえます。
2-1でご紹介した“チャンキング”はここでも活用できます。
情報をいくつかのまとまりとして見せることで、ユーザーの処理能力の容量をなるべく圧迫せずに入力してもらうことができるのです。
認知的負荷が高いタスクは、学習曲線が急になるため時間がかかり、複雑であるため、ユーザーはフラストレーションを感じます。それとは逆に、最小限の認知的負荷でのタスクは、シンプルで明確で、すぐに完了します。
お問い合わせフォームはコンバージョンの「最後の砦」となる重要なページです。
離脱をなるべく減らすためには、「ユーザーの認知的負荷を減らす」ことが解決策のひとつです。
ここまで、認知心理学を活用してサイトを改善する方法について、事例を交えてご説明いたしました。
冒頭でも述べましたが、オウンドメディアの改善のためには、ユーザーを知ることが一番大切です。
ユーザーの求めるコンテンツを、適切なUIで、適度な情報量で掲載する必要があります。
今回は認知心理学の面からご紹介いたしましたが、マーケティングの側面から解説している記事もございますので併せてご参照ください。
⇨
【テンプレート付き】コンテンツ戦略におけるコンテンツマップ作成法
また、BtoBマーケティング施策を成功させるためにもユーザーの理解は重要となります。
マーケティング講座では、BtoBマーケティングについての講座を5回に分けて開催しており、最終的にはターゲットユーザーの理解に不可欠なカスタマージャーニーマップをワークショップで完成させます。
第1回は無料で実施していますので、詳しい内容につきましては下記の資料をダウンロードください。
⇨