タグ: UI/UX

  • 他社と差をつける!マーケティング×デザインでワンランク上のUI /UX改善

    他社と差をつける!マーケティング×デザインでワンランク上のUI /UX改善

    マーケターがデザインの知識を身に付けるべき理由

    かつてはデザインに関する知識は、デザイナーだけにあれば良いとされていました。しかし、マーケターが自社サイトで成果を出すためには、必ずデザインの知識が必要になります。
    なぜなら、88%のユーザーはサイト上で悪い体験をした後、そのサイトに再訪しないというデータがあるためです。

    ユーザーエクスペリエンスがマーケティングにとって重要である理由
    図1:ユーザーエクスペリエンスがマーケティングにとって重要である理由

    出典:https://www.webfx.com/blog/marketing/user-experience-matters-marketing/

    この資料は、アメリカでWebマーケティングを専門としているWebFX社が発表した、優れたUI /UXに含まれるさまざまな要素と、UI /UXがマーケティングの目標と戦略にどのように影響するかが記されたデータです。

    さらに、このデータは下記も示しています。

    • サイトの第一印象の94%がデザインに関連している
    • サイトの信頼性の75%は、サイト全体のデザインによって判断される

    つまり、ユーザーに信頼してもらい、自社サイトのファンになってもらうためには、たとえマーケターであってもデザインについて十分な検討をしなければならないということです。

    そうでなければ、たとえばコンテンツマーケティングを実施しようとして、有益な情報を顧客に提供しようとしても、デザインが理由で内容を読んでもらえなかったり、せっかく作ったコンテンツにたどり着いてもらえない、などの事態が起こってしまう可能性があります。これでは多大なリソースを使ってコンテンツを作成しても、見てほしい顧客に見てもらえないということになり、当然成果も上がりません。
    しかし、実際は多くのマーケターが自社サイトのデザインをどう定義すればいいかについて、悩んでいるのではないでしょうか?

    悩んでいる人が多いからこそ、マーケターがデザイン能力を身に付けることができれば、他社と大きな差をつけることができます。

    マーケティング視点でデザインを考えることは、ユーザーの体験価値(UX)の向上につなげ、最終的にユーザーをCV (コンバージョン)に導くための近道になります。

    マーケティング視点でデザインを考える3つのメリット

    メリット1.ビジネスの目的に合致した「正しいWebデザイン」ができる

    ここ数年で経営に対するデザインの重要性に注目が集まっています。デザイナー向けのプロトタイピングツールを提供するInVisionが24産業、77カ国、2,200社を対象に実施した調査結果によると、70%の企業が「積極的に経営に対してデザインを活用している」と回答し、さらに全体の3/4の企業が「デザインによって製品やサービスの品質が向上した」と回答していることがわかりました。

    ただしデザインは、ただ見た目のきれいさなどを追求していくと、きれいにすることに意識が集中してしまい、サイトの方向性が気づかないうちに、本来の目的からそれてしまう場合があります。マーケティング視点でデザインを考えれば、ゴールがはっきりしているので、ビジネスの目的にきちんと合ったデザインを作り出すことができます。

    InVisionによるデザイン成熟度モデル
    図2:InVisionによるデザイン成熟度モデル

    出典:https://www.invisionapp.com/design-better/design-maturity-model/


    メリット2.デザイン検討の段階で、ビジネスの課題が見えてくる

    特にデザイン改修の際には、サイトを立ち上げた当初と目的や企業にとってのサイトの立ち位置、業界の状況が大きく変わっている場合があります。その際にきちんとマーケティング視点でデザインを検討してから制作を進めると、デザイン以外の課題や方向性の修正点などが見えてくる場合があります。

    デザイン検討の段階で、ビジネスの課題が見えてくる

    メリット3.デザインに「説得力」が生まれる

    例えば外部に依頼したデザインに関する意見が社内で割れたときや、上司からデザイン変更の要望があった場合に、なぜこの場所にこの要素があるのか、なぜこの情報が配置されているのか、説明が必要な場面も多いと思います。

    その際に、マーケティング視点から根拠を提示することができるようになります。そうすることで、デザインへの説得力が生まれます。

    アート思考からのデザインアプローチではなく、このように、デザインをマーケティング視点から考える手法は、実は昔から根強くあります。

    たとえば、デザイン思考(※)も、ユーザーやビジネスのニーズなどを基盤に設計していくという点では同じ考えであり、Googleなどの多くの企業が取り入れています。

    スタンフォード大学にあるHasso Plattner Institute of Design
    図3:スタンフォード大学にあるHasso Plattner Institute of Design(通称d.school)にて撮影(https://dschool.stanford.edu/

    デザイン思考については、2019年に編集部のチームでアメリカのd.schoolに訪問しておりますので、別途ご紹介いたします。
    ※デザイン思考:デザインの思考方法と手法を活用して、ビジネスの課題を解決するアプローチのこと

    実際にマーケティングをデザインに活用してみる

    マーケティングをデザインに活かすにはさまざまな方法がありますが、今回の記事では第一歩として、デザインに活用できるペルソナ・カスタマージャーニーマップを作成する方法についてご説明します。
    ペルソナ・カスタマージャーニーマップは、見た目のデザインだけでなく、サイトとして重要なUIUXを高めることにも役立ちます。

    ペルソナ・カスタマージャーニーマップを作成してユーザー像を明確にする

    ■ ペルソナ作成

    ペルソナ作成の方法や無料テンプレートのダウンロードは以下の記事からご確認ください。
    【テンプレート付き】実践版!オウンドメディア戦略におけるペルソナ設定手法

    デザイン・UIUX改善のためにペルソナを作成する場合には、単純にユーザー視点に立って考えるのではなく、具体的なユーザー像を絞った上で考える必要があります。作成したユーザー像をもとに「どんなことをすれば価値のある体験をしたと感じてもらえるか?」と考えることで、明確な判断基準を持つことができ、UXを効率的に高めることが可能です。

    ■ カスタマージャーニーマップ作成

    UXの向上を図るためには顧客とのタッチポイントを正確に把握し、適切なタイミングでサービスを届ける必要があります。このタッチポイントを明確にするのがカスタマージャーニーマップです。
    Webサイト内におけるユーザーの行動や、Webサイトに訪問するまでの行動など、あらかじめ予測を立てることで、顧客に最適な体験を提供することが可能になります。
    以下では、既存サイトのリニューアルをする際のカスタマージャーニーマップ作成において、マーケティング×デザインの観点からポイントをご説明します。

    カスタマージャーニーマップの基本的な考え方や、テンプレートのダウンロードは以下の記事からご確認ください。
    【テンプレート付き】カスタマージャーニーマップ作成方法と3つの事例を解説

    <ポイント1>サイトの目的に応じてフェーズを設定する

    既存サイトを改善する場合、まず既存サイトのカスタマージャーニーマップを作成します。作成する上で、特に重点的に検討する必要があるのが、フェーズの部分(横軸)になります。この部分の細かさや名称は、自社商品やサービスの目的、設定したペルソナによって大きく変わります。

    フェーズを決める際に重要になるのが、サイトの目的を再確認することです。
    たとえば、BtoCのアパレルメーカーのECサイトのカスタマージャーニーマップを作成する場合、購入もしくは購入後のリピート化や他者との共有(口コミ、SNSへの投稿)までをゴールとして設定するケースが多いと思います。しかし、BtoBの法人向け会計ソフトを紹介するサイトの場合は、会員登録をしてサービスを利用してもらう、またはその後も継続的に利用してもらえるようなサイトにすることがゴールとなる場合が多いです。

    顧客にどんな状態になってほしいのかを想定し、そこに至る行動をプロットしてから、カスタマージャーニーマップの範囲を決定していきましょう。

    カスタマージャーニーマップテンプレート

    <ポイント2>ユーザーの行動を具体的に書き起こす

    既存サイトのカスタマージャーニーマップの「状態」の行にペルソナの行動を書き込んでいきます。
    「Webで検索した」「問い合わせをした」など、想定されるペルソナの行動を考えながら埋めていきましょう。これにより、現在のサイトに訪問しているペルソナの動きを可視化することができるようになります。
    そして、行動を見ながらどの部分に問題があると考えられるか、改善の余地があるかを見つけていきます。
    作成していく中で、サービスを提供する側の目線として「ここでこの行動をとって欲しい」という理想が出てきてしまうことがあるかもしれません。しかし、ここでは現時点でのサイトの問題点を発見するために、あくまで理想ではなく現実を書き込んでいくようにしてください。

    <ポイント3>ユーザーの気持ちになって現在のサイトの良い点、悪い点を洗い出す

    実際のペルソナの立場になって、サイトを利用する上で良い点、悪い点をユーザー心理の観点から洗い出していきます。

    例えば、「安い買い物ではないから、他の商品と比較して検討するために一旦一覧画面に戻りたいと思ったのに、会員登録画面に遷移してしまって『ストレスに感じた』」「Webには疎いけど、メニューがわかりやすいから目的のページに簡単に遷移できて『嬉しい』」など、<ポイント2>で考えたペルソナの行動に合わせたユーザーの感情を「マインド」の行に書き出します。
    このとき、ペルソナに近い人に依頼してユーザーインタビューを実施するのもひとつの手段です。「この部分を押すときにどんなことを考えているか」「どの機能が使いづらいと感じるか」「ここがこうなっていたらいいのに」などをできるだけヒアリングし、顧客の体験に共感を深めることで、改善すべき点が少しずつ見えてきます。

    カスタマージャーニーマップの作り方や無料テンプレートのダウンロードは以下の記事からご確認ください。
    【実践版】オウンドメディア戦略におけるペルソナ・カスタマージャーニーマップ設定手法

    上記を意識してカスタマージャーニーマップを作成することで、デザイン段階でのブレが生じにくくなり、よりターゲットを離脱させないWebサイトに近づけることができます。

    ペルソナ・カスタマージャーニーマップから考えるデザイン改善の例

    下記は、Web上で採用管理ができるサービスサイトの改善で、ペルソナ・カスタマージャーニーマップを作成・活用した例です。作成したことにより見えてきたサイト上の問題点と、その改善策をご紹介します。

    問題点① 登録後のTOP画面で次に起こすべきアクションがわからない

    カスタマージャーニーマップ一部抜粋
    図4:カスタマージャーニーマップ一部抜粋

    改善策:チュートリアルボタンのデザイン変更

    チュートリアルはすでにありますが、ボタンが英語表記でかつアイコンなども無く、色も背景と同化しており分かりづらい状態でした。ペルソナは、今までの採用管理に苦労している多忙な採用担当者を想定しています。そのため、できるだけ短時間でサービスを使いこなせるようになりたいと考えており、「とりあえずいろいろ押して試してみよう」というよりは「すぐに活用したい」という気持ちであることが考えられました。デザイン変更の案としては、「チュートリアルが表示される」ということが探さずとも一目でわかるデザインに変更することが効果的であると判断しました。

    チュートリアルのデザイン変更
    図5:チュートリアルのデザイン変更

    問題点② 下層ページに遷移しないと現在の採用状況が分からない

    カスタマージャーニーマップ一部抜粋
    図6:カスタマージャーニーマップ一部抜粋

    こちらのサイトでは、採用管理ツールとして受信メール件数、エントリー者数など、さまざまなデータが管理できるようになっています。既存サイトの仕様では、TOPはスケジュール管理がメインになっており、他の情報はサイドナビから下層ページに遷移することで確認できるようになっていました。
    たとえば、「選考が始まるまでのやりとりを担当する人」「選考開始から最終選考までを担当する人」のように、各フローで細かく分業化がされている場合はこの仕様でもあまり問題はないかと思います。しかし、ペルソナは3人しかいない採用チームに所属している想定のため、1人で全ての範囲を担当する、つまり全てのデータを把握する必要があると考えられました。その場合、現在の仕様では採用状況の全体を把握するには、何度もクリックして各ページに遷移しなければならず、それがユーザーにとってストレスに感じる可能性があるということが、カスタマージャーニーマップによって見えてきました。
    そこで、アクセスしてすぐ、TOPページを見ただけで現在の採用状況がわかるようなパネルの設置と導線を追加するデザインに変更しました。

    TOPページの構成変更
    図7:TOPページの構成変更

    このように、ペルソナ・カスタマージャーニーマップをもとにデザインを作成すると、サイト内の具体的な問題点や、改善箇所が見えてきます。
    今後新規サイトの立ち上げや、既存サイトのデザインのリニューアルをする際には、ペルソナやカスタマージャーニーマップの作成を実施し、マーケティングの視点からUXの向上を検討することをお勧めします。

    現在トランスコスモスでは、BtoBコンテンツマーケティング施策を成功に導くための「マーケティング講座」のうち第1回を無料で実施しております。全5回を受講いただくと、ワークショップによってカスタマージャーニーマップが完成します。

  • 認知心理学でサイトを改善?ユーザー心理を理解する3つのヒント

    認知心理学でサイトを改善?ユーザー心理を理解する3つのヒント

    「オウンドメディアを始めてみたが、なかなかコンバージョンに繋がらない」
    「コンテンツは作成しているが、その中で製品・サービスをどのように紹介すれば効果的かがわからない」 集客を図るためにオウンドメディアを活用することが増えた現在、このような悩みを抱える担当者の方は多くいらっしゃいます。

    ユーザーが必要としている情報を届け、良い印象を持ってもらった上で自社製品の購入やサービスの契約に繋げるためには、まずはユーザーのことをよく知る必要があります。
    そんなときには、認知心理学を知ることで思わぬヒントが見つかるかもしれません。

    この記事では、オウンドメディアなどのサイト改善でお悩みの方に向けて、認知心理学という新しい視点から改善方法や事例をご紹介します。

    認知心理学とは?

    「改善方法として、心理学と言われてもあまりピンとこない」という方も多いのではないでしょうか。
    また、心理学を取り入れるとなったときに、何をどのように取り入れればよいか、それはどのような効果があるのかを想像するのは簡単ではありません。
    本章では、心理学の中でも特にサイト改善に応用しやすい認知心理学に焦点を当てて、心理学の中の位置づけや、それをサイト改善に取り入れるメリットをご説明します。

    認知心理学の位置づけ

    はじめに、心理学とは精神と行動を科学的に研究する学問です。研究分野は幅広く、その中で社会心理学・消費者心理学・人間工学など多くの専門分野に分かれており、認知心理学もそのひとつです。
    認知心理学では、人間の認知(思考・意思決定・問題解決・注意・記憶などのすべての精神的能力)について科学的に研究します。簡単に言えば、人間が何かに注意を向け、それを見たり聞いたりして得た情報に関して、何かを考えたり記憶したりする、そのプロセス全体を研究対象としているのです。
    その歴史は比較的若くはありますが、「現代心理学において主流」といわれる注目すべき学問です。

    認知心理学で研究対象としている人間の認知に関するイメージ
    図1:認知心理学で研究対象としている人間の認知に関するイメージ

    サイト改善に認知心理学を取り入れるメリット

    サイト改善のためにはユーザーについて知ることが重要であることは先ほども述べました。 自社サイトを見ているユーザーの心理を想像してみてください。下記のような疑問が思い浮かぶのではないでしょうか?

    • ユーザーが自社や自社の製品・サービスに対してどのような印象を持つのか?
    • ユーザーの注意を引くコンテンツは何だろう?
    • ユーザーはどのような思考プロセスで購買を決定するのか?

    実は、これらはすべて認知心理学で研究されてきた精神的プロセスの一部なのです。 認知心理学でこれまで研究対象とされてきた人間の精神的能力で表すと、下記のようになります。

    • ユーザーが自社や自社の製品・サービスに対してどのような印象を持つのか? … 感覚・知覚
    • ユーザーの注意を引くコンテンツは何だろう? … 注意、記憶
    • ユーザーはどのような思考プロセスで購買を決定するのか? … 思考・意思決定

    つまり、人間がさまざまな概念をどのように知覚し、何が彼らの注意を引き、どのように意思決定するかを研究する認知心理学を学ぶことで、ユーザーを知ることに繋がり、それがコンテンツやデザイン、ひいてはオウンドメディアの改善に役立つのです。

    認知心理学をサイト改善に取り入れる方法

    「認知心理学がサイト改善に役立つ」ということは前章でお伝えしましたが、この章ではより詳しく、どんな研究があって、それがどのように役立つのかをご説明します。

    認知心理学がサイト改善にどのように応用できる?

    心理学は人間の精神的な面に焦点を当てた学問ではありますが、その研究は数字に裏付けされた定量的なデータです。
    ユーザーを理解した上でサイトの問題点を見つけ出し解決するための知識として、マーケティングやデザインと同じように、認知心理学も活用できます。

    サイト改善だけでなく、日常生活にもよく活用される認知心理学の例として、“マジカルナンバー”があります。
    これは記憶に関係する言葉で、一般的には「人間が短期記憶で保持できるチャンクの限界」を表しています。チャンクとは、「情報のかたまり」を意味します。
    有名なのは、認知心理学者であるジョージ・A・ミラーが提唱した“マジカルナンバー7±2”ですが、近年はミズーリ大学の心理学教授ネルソン・コーワンが2001年に発表した“
    マジカルナンバー4±1”が主流になっています。

    わかりやすい例としてよくあげられるのが電話番号や郵便番号です。
    左が数字を羅列しただけの場合、右がチャンキングした(いくつかのチャンクに分けた)場合です。明らかに右の方が見やすいことが分かると思います。私たちは日常生活でも自然と“マジカルナンバー”に沿って、短期的に記憶しにくい数字などをチャンクに分けて認識しやすくしているのです。

    郵便番号や電話番号などにもマジカルナンバーが活用されている
    図2:郵便番号や電話番号などにもマジカルナンバーが活用されている

    “マジカルナンバー”はもちろん数字だけでなく、サイトのUIUX改善にも応用できます。 下記の図を見ていただければ、サイト内の情報をなるべく少ない数のまとまりにチャンキングするだけで、格段に情報は記憶されやすくなり、ユーザーは回遊しやすくなることが分かると思います。

    雑多に並んだコンテンツもチャンクに分けるだけでユーザビリティが向上
    図3:雑多に並んだコンテンツもチャンクに分けるだけでユーザビリティが向上

    ここで大切なのは、“マジカルナンバー”が7±2か4±1かというよりも、「人間には短期記憶の容量に限界があり、情報をいくつかのチャンクという『情報のかたまり』にまとめることが有効だ」ということを知っているかいないかです。
    “マジカルナンバー”の数自体は、受け手の年齢・チャンクの複雑さ・提示される情報の種類などによって変化します。しかし、チャンキングの重要性については上記の2つの例で明らかです。

    これを知った状態でぜひ、自社のオウンドメディアをチェックしてみてください。情報はいくつかのチャンクに適切に分けられていて、わかりやすいサイトになっていますか?

    上記のように実際に認知心理学の研究を用いてサイトを改善する事例については、第3章でも詳しくご紹介したいと思います。

    サイト改善にすぐに応用できる認知心理学の研究7選

    この章では、サイトを改善するのに応用しやすい認知心理学の研究を7つご紹介します。

    色彩心理学

    色彩心理学では、「色が知覚や行動にどのように影響するのか」を研究しています。
    人間は、自分以外の人間や物事と最初に出会ってから90秒以内にそれを評価していて、その評価の内の約62~90%は色にもとづいていると言われます。
    Webサイトにおいてもそれは同様であり、それだけ色の選択は慎重に行うべきということなのです。
    詳しい改善事例について、第3章でご説明しています。

    認知バイアス

    認知バイアスとは、「人間が情報を処理・判断したり意思決定を行ったりするときに発生するエラー」のことを指します。そのようなエラーは必ずしも悪いわけではなく、多くの場合、情報処理を単純化しようとする脳の働きの結果とも言えます。
    バイアスの種類はさまざまですが、身近な例としては“後知恵バイアス”があります。これは、「ランダムに起きる出来事であっても、それが実際よりも予測可能な出来事であると見なす傾向」のことです。
    アメリカで行われた実験で、当時候補者であったクラレンス・トーマスが最高裁判所の陪席判事に当選するかどうかを大学生たちに予測してもらったところ、58%が当選するだろうと答えました。しかし、実際にトーマスが当選した後に再度大学生に当選を予測していたかを聞いたところ、78%が当選を予測していたと回答したのです。
    皆さんも、「あの製品は売れると思っていた」「このニュースは話題になると思っていた」と後から感じることはありませんか?もちろん本当に予測が当たっていた可能性もありますが、もしかしたら、“後知恵バイアス”かもしれません。
    認知バイアスに分類されるさまざまなバイアスを応用したサイトの改善事例については、第3章でもご説明しています。

    バンドワゴン効果

    認知バイアスにも関連しますが、バンドワゴン効果とは、「自分の信念に関係なく、他人がそれをしているという理由で自分もそれをする」という心理的現象のことです。
    たとえば選挙では、人々が「勝っている」と思う候補者に投票する確率が高くなるという調査があります。バンドワゴン効果には負の側面もあり、人々は候補者自身の考えや功績ではなく世論調査の結果によって、自分が投票しようとしていた候補者を変えてしまうということが起こるのです。
    他には、お店である商品の購入を検討しているときに、棚に豊富にある商品よりも、ある程度減っている商品の方がなんとなく人気商品であるように感じてしまったり、他の買い物客がカゴに入れた商品を見て自分も同じ商品を選んでしまったりといった身近な例もあります。
    バンドワゴン効果を有効に活用する事例については、第3章でご説明しています。

    ヒックの法則

    「人間が何かを決定するのにかかる時間は、その選択肢の数と複雑さに比例して増加する」という法則です。
    1952年に心理学者のウィリアムエドマンドヒックとレイハイマンによって発表されました。
    要するに、多くの選択肢や複雑なインターフェースであるほど、ユーザーがそれを処理する時間を長くしてしまうことを意味します。
    詳しい改善事例について、第3章でご説明しています。

    認知的負荷

    作業記憶によって使用されている、精神的な処理能力のことを認知的負荷と言います。
    私たちの脳は、処理能力が限られているという点でコンピューターと似ています。入ってくる情報量が、利用可能な容量を超えると、認知的負荷が発生します。認知的負荷が発生すると、パフォーマンスは低下し、タスクはより困難になり、Webサイトであればそこで離脱が生じる恐れがあります。
    詳しい改善事例について、第3章でご説明しています。

    選択的注意

    「人間が何かに注意を向け続けられる時間の平均は金魚よりも短い」という神話があります。この神話の真偽は定かではありませんが、人間の集中はそう長く続かないことは真実です。
    また、私たちは毎日、少なくとも1,000件以上の広告に接しています。しかし、そのほとんどを覚えていないと思います。私たちはひとつのことに長時間注意を向けることが難しい分、情報を取捨選択して注意を向けているのです。
    広告に限らず、Webサイトでも同様です。サイトを閲覧しているときに文章を全て読み、ページにあるすべての情報を確認するユーザーはほぼいません。
    そこで、情報に優先度をつけて徐々に詳細を開示したり、色を使って重要度の高い箇所に注意を向けたりすることでユーザーの選択的注意を向けさせることができるようになるのです。

    系列位置効果

    系列位置効果はドイツの心理学者ヘルマン・エビングハウスによって提唱された記憶に関する研究で、「リストの最初と最後の項目を、中間にある項目よりも覚えている心理的効果」のことです。
    系列位置効果には、“初頭効果”と“新近性効果”が関連しています。
    “初頭効果”とは「最初に起こることは、次に来ることに影響を与えるため最も重要であるという想定のもと、リストの最初にある情報をより記憶しているという傾向」を指します。
    “新近性効果”はその逆で、「リストの最後にある情報をより重要視して記憶する傾向」のことを指します。この2つを組み合せたものが系列位置効果です。
    この効果を応用した例としては、たとえばコンテンツの最初と最後にそのコンテンツ内容の概説を配置して、ユーザーが内容を大まかに理解し記憶しやすくするといった方法があります。

    認知心理学を用いた3つのサイト改善事例

    2章でご説明した認知心理学の原理の中から3つ、実際の事例と併せて詳しく解説します。

    色彩心理学×デザイン

    2-2で述べたように、色はユーザーの印象の最大90%に影響します。

    Webサイトにおいては、製品・サービスや企業・ブランドの印象など、応用できる範囲は幅広く、ときには他社との差別化まで担う要因となり得ます。それほど色は人間の印象に影響を与えるものなのです。

    今回は、そんな色彩心理学のデザインに関連した事例をご紹介します。

    色が人間に与える印象はさまざまで、使われる場所や、一緒に使われる色によっても変わります。

    Color Emotion Guide
    図4:Color Emotion Guide

    出典:The Logo Company

    下記に、色の組みあわせを変えた2つのバナーがあります。それぞれのバナーにどのような印象を持つでしょうか?
    内容は同じですが、使われる色が違うだけで印象ががらっと変わるのではないでしょうか。
    1のバナーを見たユーザーは、落ち着いた色合いから「このシステムは高性能そうだからビジネス向けだろうか?」といった印象を抱く可能性があります。
    また、2のバナーを見たユーザーは、明るく爽やかな色味から「この製品は初心者向けで使いやすそう」と感じるかもしれません。
    製品・サービスに合った色を選択していくことは、ユーザーに製品・サービスに合った印象を与えるために大切になります。

    色の心理学の効果で、色合いが違うだけでもユーザーに与える印象が変わる
    図5:色の心理学の効果で、色合いが違うだけでもユーザーに与える印象が変わる

    次に、ページデザインの中でも重要な要素のひとつであるコンバージョンボタンについて、よく引用されるわかりやすい事例をご紹介します。
    下記のサイトでは、元々緑だったボタンを赤に変えると、コンバージョンが21%も増加しました。
    ポイントは「赤がコンバージョンを増加させる色である」ということではなく、「元々サイトのメインカラーが緑で、コンバージョンボタンも緑であったため埋もれてしまっていた」ということです。緑の補色である赤に変更したことで、他の要素とコントラストが生まれたのです。
    このように、色は人間が受ける印象だけでなく、何かに注意を向けたいときにも効果をもたらします。

    コンバージョンボタンの色に関するA/Bテスト(緑と赤の違いについて)
    図6:コンバージョンボタンの色に関するA/Bテスト(緑と赤の違いについて)

    出典:HubSpot

    色彩心理学では、「コンバージョンボタンはこの色が一番良い」「自社のバナーに使用するならこの色が一番良い」などの答えはひとつに絞ることはできません。
    何故なら、色が人間に与える影響は確かに存在しますが、それはブランドカラーやデザイン、ターゲットユーザーによって変わるからです。
    しかしその中で、ユーザーが企業や製品・サービスに抱く印象とデザインに使われる色がマッチしたときに、色は大きな効果を発揮するのです。

    認知バイアス×製品・サービスページ

    自社製品やサービスをオウンドメディアで紹介するときには、なるべく魅力的で信頼できるものであるように見せたいのではないかと思います。
    そのように製品やサービスに好印象を持ってもらいたいとき、ユーザーのバイアスが助けになるかもしれません。

    バンドワゴン効果×顧客の声

    2-2でも簡単にご紹介しましたが、バンドワゴン効果とは、他の人が何かをしているという理由だけで自分もそれを行う傾向があることを指します。

    ① ユーザーの声(レビュー)を掲載する

    消費者の82%は購入を決定する前にレビューを読み、そのレビューの内容が購入決定に影響すると答えたユーザーは93%に上るという調査

    があります。この調査からわかるように、レビューは購入や成約に非常に大きな影響を及ぼすのです。
    製品・サービスページには、ユーザーの声を積極的に掲載するべきであるということは明らかです。

    ② 成約数や販売数、もしくは顧客の企業のロゴを掲載する

    これは、信頼性を表すのに有効な方法です。「これだけ人気がある製品なのか」「こんな企業もこの製品・サービスを使用しているのか」という情報は、ユーザーにとって時には製品仕様よりも購入の意欲を高める要因になります。

    HubSpotでは顧客数とロゴを大きく掲載している
    図7:HubSpotでは顧客数とロゴを大きく掲載している

    内集団バイアス×コンテンツ

    ユーザーのインタビューを掲載したり、アンケート結果のような定量データを掲載したりするのも有効です。
    そんなときのポイントのひとつに、内集団バイアスの活用があります。

    内集団バイアスとは、「何かを判断したり、行動したりするときに、自分が所属する以外の集団よりも、自分が所属する集団に関する情報を肯定的に捉える」という傾向のことで、こちらも認知バイアスのひとつです。

    ユーザーの声を紹介するときには、ターゲットユーザーが所属する集団(年齢・性別・業種など)に絞って掲載すると、自分が所属するグループの他のユーザーの声に影響を受けやすくなります。

    また、コンテンツの文章も、ターゲットユーザーに合わせた口調にすると効果があるという調査があります。
    下記の2つのバナーを見比べてみてください。
    あなたはパソコンを買い替えようと考えている30代の男性だとします。その場合、どちらの製品が魅力的に見えるでしょうか?1の方が魅力的に感じませんか?

    キャッチコピーの口調が違うだけで、そのコピーが響くターゲットは変わる
    図8:キャッチコピーの口調が違うだけで、そのコピーが響くターゲットは変わる

    上記は極端な例ですが、このように自社のペルソナで設定したターゲットユーザーに合わせた文章にするのも、説得力を上げるひとつの方法になります。
    ペルソナの設定方法についてはこちらで詳しく解説しています。

    現状維持バイアス×無料トライアル

    「ここまで書かれていたことを全て実践しても、なぜか問い合わせが増えない」
    そんなお悩みをお持ちの方もいらっしゃるかもしれません。

    そもそもユーザーは「新しい製品やサービスを購入・契約して損をしたくないから今のままでいいか」と考える傾向にあります。
    そしてもしすでに利用している製品がある場合には、それ以外の新しい製品に変更するよりも、今の製品のままでいたいと思う傾向が高いのです。
    このような傾向は現状維持バイアスによるものです。

    現状維持バイアスとは「人々は物事が現状のままであること、または現在と同じ状況が続くことを好む」という傾向を指します。何か決定しなければいけない場面になったとき、私たちは新しい選択肢よりも現状維持を選びがちです。たとえば、行きつけのレストランでメニューを選んでいるとき、食べたことのない料理を試して失敗するのを避けるために、ついいつも頼んでいるメニューを注文してしまうことはありませんか?
    ポイントは、新しい選択肢を選ぶことでコストが削減されたり、利益がもたらされたりするとしても、ときに現状のままでいることを選ぶことがあるということです。
    製品やサービスがどれだけ高品質で素晴らしいものであったとしても、このようなバイアスによってお問い合わせされないということがあり得るのです。

    そんな現状維持バイアスを逆に利用して、製品・サービスの魅力を伝える方法があります。
    それは 「ユーザーに対して無料のプレゼントを贈ること」です。

    この方法をより強固にする研究に、“損失回避”と“保有効果”という行動経済学とも関連する概念があります。
    “損失回避”とは、「何かを選択するときに、自分がどのような利益を得られるかよりも、自分がすでに手に入れたもの(製品・サービスはもちろん、地位や名誉なども含まれます)を失う可能性の方が際立って感じられること」を言います。
    また“保有効果”とは、「自分がすでに所有しているものについて、その市場価値よりも高く、しばしば非合理的に評価してしまうというバイアス」のことです。行動経済学者のダニエル・カーネマンによる実験で、グループAの学生にはマグカップを無料でプレゼントし、Bグループには何もプレゼントしないという状況で、Aグループには「いくらならこのマグカップを売るか」、Bグループには「いくらならこのマグカップを買うか」と質問しました。すると、同じマグカップであるにも関わらず、マグカップを無料でもらっていたAグループが付けた値段は、もらわなかったBグループの付けた値段より2倍以上高い結果となりました。このように、私たちは自分がすでに所有しているものについては実際よりも高い評価をしてしまう傾向にあるのです。

    保有効果と損失回避によって今の状態のままでいたいと感じる現状維持バイアスの例
    図9:保有効果と損失回避によって今の状態のままでいたいと感じる現状維持バイアスの例

    これまでご紹介した例を製品やサービスに置き換えると、「無料トライアル・無料クーポン・無料で提供されるお役立ち資料などを試したユーザーは、一度所有した製品・サービスや情報を高く評価する傾向にあり、結果その製品・サービスを選びやすくなる」ということがわかります。

    現状維持バイアスを製品やサービスの魅力を伝えるために応用するイメージ
    図10:現状維持バイアスを製品やサービスの魅力を伝えるために応用するイメージ

    製品やサービスは十分魅力的なはずなのになぜかその魅力が伝わらないと感じるときには、まずはユーザーに無料でプレゼントを贈り、製品やサービスを試してもらうのもひとつの手かもしれません。

    ヒックの法則・認知的負荷×お問い合わせフォーム

    お問い合わせフォームで、入力を面倒に感じたことのある方は多いのではないでしょうか。
    自社サイトのお問い合わせフォームで、それと同じことをユーザーに強要すべきではありません。

    人間の処理能力には限界があり、情報量や選択肢の数が増えるほどパフォーマンスが低下することは2-2のヒックの法則、認知的負荷でご紹介しました。

    ここで面白い例をひとつご紹介したいと思います。

    祖父母の「インターフェース」を簡素化するために加工されたテレビのリモコン
    図11:祖父母の「インターフェース」を簡素化するために加工されたテレビのリモコン

    出典:The Psychology of Design

    これは個人的な見解ですが、一人一個は購入してから一度も押したことのないリモコンのボタンがあるのではないでしょうか。
    悲しいことですが、ユーザーの利便性を考えて作られたリモコンであっても、人によっては認知的負荷を生じさせる要因になります。

    それと対照的なのが、Apple TVのリモコンです。
    絶対に必要なものだけにリモコンのボタンを簡素化した結果、認知的負荷が大幅に軽減されます。
    複雑さをTVインターフェース自体に移すことにより、情報を効果的に整理し、メニュー内で段階的に開示することができるようになったのです。

    Apple TVリモコンは必要なものだけにボタンを簡素化することで認知しやすい
    図12:Apple TVリモコンは必要なものだけにボタンを簡素化することで認知しやすい

    「情報量や選択肢が多い方が便利なわけではない」というのは、認知心理学の重要な教えです。
    それを踏まえて、お問い合わせフォームの改善事例をご紹介したいと思います。

    項目数やステップ数が違う2つのフォームの例
    図13:項目数やステップ数が違う2つのフォームの例

    例として、上記にA・B、2種類のフォームがあります。
    明らかにAのフォームは情報量も選択肢も多く、送信完了まで辿りつけそうにありません。

    ユーザーの認知的負荷を最小限に留めるためには、まず入力項目の削減から取り掛かるべきです。
    QUICKSPROUTの調査では、入力項目を3つだけにした場合はCVRが25%に、最大5つの項目の場合は20%、6つ以上の項目の場合には15%と、入力項目が増えるほどCVRが減少することがわかっています。

    入力項目が3つと6つ以上のときではCVRが約10%変わる
    図14:入力項目が3つと6つ以上のときではCVRが約10%変わる

    出典:QUICKSPROUT

    1ページの情報量を減らすこともユーザーに入力の手間をなるべく感じさせないようにするには有効です。
    Aのように、「現在どのくらい入力が進んでいるか」といった表示もない場合には、1ページの情報量が多いほどユーザーはフラストレーションを感じ、離脱する可能性が高くなります。
    入力項目を減らすことが難しく、どうしても1ページに収まらない場合には、いくつかのステップに分けて、その分1ページの情報を少なくする方が情報を段階的に開示できるため、ユーザーに負荷をかけにくいといえます。

    2-1でご紹介した“チャンキング”はここでも活用できます。
    情報をいくつかのまとまりとして見せることで、ユーザーの処理能力の容量をなるべく圧迫せずに入力してもらうことができるのです。

    認知的負荷が高いタスクは、学習曲線が急になるため時間がかかり、複雑であるため、ユーザーはフラストレーションを感じます。それとは逆に、最小限の認知的負荷でのタスクは、シンプルで明確で、すぐに完了します。

    お問い合わせフォームはコンバージョンの「最後の砦」となる重要なページです。
    離脱をなるべく減らすためには、「ユーザーの認知的負荷を減らす」ことが解決策のひとつです。

    ここまで、認知心理学を活用してサイトを改善する方法について、事例を交えてご説明いたしました。
    冒頭でも述べましたが、オウンドメディアの改善のためには、ユーザーを知ることが一番大切です。
    ユーザーの求めるコンテンツを、適切なUIで、適度な情報量で掲載する必要があります。

    今回は認知心理学の面からご紹介いたしましたが、マーケティングの側面から解説している記事もございますので併せてご参照ください。
    【テンプレート付き】コンテンツ戦略におけるコンテンツマップ作成法

    また、BtoBマーケティング施策を成功させるためにもユーザーの理解は重要となります。
    マーケティング講座では、BtoBマーケティングについての講座を5回に分けて開催しており、最終的にはターゲットユーザーの理解に不可欠なカスタマージャーニーマップをワークショップで完成させます。
    第1回は無料で実施していますので、詳しい内容につきましては下記から資料をダウンロードください。