タグ: デザイン

  • Webサイトの表示速度改善方法を徹底解説!たったこれだけで滞在時間が約5倍に-画像編

    Webサイトの表示速度改善方法を徹底解説!たったこれだけで滞在時間が約5倍に-画像編

    「自社サイトの表示速度が、他のサイトに比べて遅い気がする・・」そんなお悩みはありませんか?
    表示速度が遅いと、ユーザーにストレスを与えるのはもちろん、SEO対策の観点においても大きなマイナスとなります。表示速度が遅くなるのには様々な原因がありますが、きちんと突き止めて改善すれば、アクセス数やCVが向上する可能性もあります。
    本記事では、表示速度を改善するメリットや確認方法と、画像の修正によって表示速度を改善する方法についてご紹介します。

    メリットしかない!Webサイトの表示速度を改善する重要性

    表示速度とは、サイトにアクセスした時やサイト内の遷移時の表示までにかかるスピードのことを指します。
    そしてこの速度は、速ければ速いほど良いとされています。

    Googleは、2018年にモバイルサイトの表示速度と直帰率について、以下のように発表しています。

    Find out how you stack up to new industry benchmarks for mobile page speed
    図1:Find out how you stack up to new industry benchmarks for mobile page speed

    出典:https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

    上記から分かるように、表示速度が遅くなればなるほど、ユーザーの直帰率は悪化しています。
    (直帰率:サイト内で1ページしか見ずにサイトから離脱してしまったユーザーの割合を表す指標)
    ページの表示速度が遅いと、それだけでユーザーのストレスになり、ユーザーに嫌われてしまいます。どんなに優れたコンテンツを作っても、サイト速度が原因でサイトを閲覧してもらえなくなるのは非常にもったいないです。また、表示速度が遅いとGoogleからの評価でも不利になる可能性が極めて高いと言えます。

    表示速度改善による具体的なメリットとしては、以下が挙げられます。
    ・ユーザーにとって快適なサイトになるため、直帰率が下がる
    ・Googleの評価が上がるため、検索順位が上がる。検索順位が上がることにより、アクセス数・CVが上がる可能性が高い

    2021年6月(※1)よりGoogleの検索ランキング要因に取り込まれることが予定されている「コアウェブバイタル(Core Web Vitals)」(※2)というUXの3つの指標のうち、2つに表示スピードに関する指標が含まれており、今後表示スピードがよりSEOに影響することが確実視されています。そのため、今まで以上に表示速度の改善の重要性が高まってくることが予想されます。
    Webサイトの表示速度を改善する重要性を踏まえて、次項からは自社サイトの状態を確認してみましょう。

    ※1. Googleの発表では2021年5月から導入予定の発表でしたが6月予定に変更となりました。
    ※2. Core Web Vitalsは、下記、3つの指標により評価されます。

    コアウェブバイタルの指標
    図2:コアウェブバイタルの指標

    参照:https://web.dev/vitals/

    LCP: 読み込みパフォーマンスの測定になります。ブラウザ表示領域においてもっとも大きな画像などのメインコンテンツが表示されるまでにかかった時間になります。ページの読み込みが最初に開始されてから2.5秒以内にすることが求めらます。
    FID:クリックしてからの挙動スピードを測定するもので、ユーザーが第一印象として感じる、反応速度になります。100ミリ秒以下でことが求められます
    CLS: 視覚要素の安定性を示す指標になり、本記事の表示速度とは関係ない指標になります。

    無料かんたんチェック!Webサイトの表示速度の確認方法

    Page Speed Insightsを使う方法

    まず、Googleが無料で提供している Google PageSpeed Insights(https://developers.google.com/speed/pagespeed/insights/)というツールからご紹介します。
    URLを入力するだけでGoogleの評価に沿ってモバイル・PCの表示速度を100点満点で計測し、具体的な改善点の提案をしてくれるので、慣れない方でも簡単に利用することが可能です。

    Page Speed Insightsのページ

    GTmetrixを使う方法

    次に、GTmetrix(https://gtmetrix.com/)での確認方法についてご説明します。
    GTmetrixは、PageSpeed Insightsと同様に表示速度計測ができる無料ツールです。
    日本語表示には対応しておりませんが、ページごとの表示時間をタイムラインを見たり、結果をPDFで出力することができます。結果をより細かく分析したいという方におすすめです。

    GTmetrixのページ

    さっそく実践!Webサイトの表示速度改善方法(画像編)

    表示速度が遅くなる原因はサイトによってさまざまですが、今回の記事では、画像のサイズや形式が原因の場合の表示速度改善方法に絞ってご紹介させていただきます。

    特に、容量の大きい画像を使用しているサイトや、画像をたくさん使用しているサイトでは大きな効果が見込まれます。「画像が原因かどうか分からない」「画像はおそらく大丈夫」と思っている方も、自社サイトで使用されている画像に以下の対応がきちんと実施できているかを確認してみてください。

    サイト内で使用している画像の容量を削減する

    近年はRetinaディスプレイ対応のため、実際に表示されるサイズよりも画像を大きく書き出してサイトに掲載しているサイトが多くあります。画像はサイズ・解像度が大きいほどきれいに見えますが、必要以上に大きい容量のまま使用してしまうと画像の読み込みに時間がかかってしまい、結果的にユーザー体験を損ねてしまいます。
    画質を落とせば画像容量が下がって読み込み速度が改善されますが、それでは視認性が落ちてしまいますので画質を保ったまま容量を圧縮する必要があります。
    画像一つ一つをPhotoshopなどの画像編集ツールで手作業で調整する方法もありますが、時間がかかってしまいます。そのため弊社では下記のような画像圧縮ツールで容量を圧縮するようにしています。少ない手間で、かつ画像の劣化を最小限に抑えながら容量を落とすことができます。
    ・Compressor.io (https://compressor.io/
    ・Optimizilla(https://imagecompressor.com/ja/

    Retinaディスプレイ対応の場合もそうでない場合も、実際のサイトでの表示サイズで見た時に画質が粗いと感じない範囲内で、容量削減の対応を実践してみてください。

    画像情報に応じた適切な書き出し方に変更する

    次に、画像を適切な書き出し形式に変更する対応をご紹介します。画像には以下のようにそれぞれ最適な書き出し形式があり、内容に合わせて設定をすることで画質を保ったまま容量を落とすことができます。
    ・JPEG:色数の多い写真など
    ・SVG:文字やアイコンなど、色数が少ない単純な画像
    ・PNG:キャプチャ画像、図など

    PNGは扱える色数も多く、透過が可能、「可逆圧縮」の画像形式なので低画質で保存しても元の画質に戻すことができるなど、非常に便利な拡張子です。そのため、つい「とりあえずPNGにしておくか」となってしまいがちですが、反面、他の拡張子に比べて書き出しの際に容量が大きくなってしまうことが多いという難点があります。

    その点、JPEGやSVGはPNGに比べて容量が比較的削減できる場合が多いため、色数が多い場合はJPEG、少ない場合はSVGなど、画像の情報によっては書き出し形式をJPEGかSVGにすることをおすすめします。
    ※それぞれの拡張子には強みと弱みがあるので、画像によってはJPEG・SVGにすることでかえってPNGの時よりも容量が大きくなってしまう場合があります。必ず画像の情報によって使い分けの判断をするようにしましょう

    以下の表を参考に、現在サイト上で使用している画像に最適な書き出し形式を検討してみてください。

    画像の拡張子使い分け表
    図5:画像の拡張子使い分け表

    【事例】画像を改善して平均ページ滞在時間が約5倍に!

    次は、本サイト「Digitoo」で、画像の容量・書き出し形式の修正によって表示速度が改善された事例をご紹介します。

    実施内容

    ・画像圧縮ツールを使用し、画像の容量をできる限り圧縮
    ・画像情報に応じた適切な書き出し形式に変更
    ・容量の大きい写真素材はPNG →JPEGに修正

    実施結果

    実施後の計測結果は下記の通りでした。

    ①PageSpeed Insightsの計測結果、改善前と改善後で38ポイントアップ!
    まだ改善の余地はありますが、画像の対応だけでも表示速度が大幅に改善され、以前の3倍近くまでポイントをあげることができました。

    PageSpeed Insightsの計測結果

    ※実際は、技術的にもまだまだ対策が必要なポイントになります。

    ②Googleアナリティクスでの計測結果、直帰率の低下と平均ページ滞在時間が約5倍にアップ
    blogの平均ページ滞在時間は実施前の1月と比べて1分10秒から5分24秒にアップ、変化率は366%!
    直帰率・離脱率に関しても30%以上の低下を実現しました。

    Googleアナリティクスでの計測結果

    表示速度改善(画像編)のまとめ

    本記事では、表示速度を改善するメリットや確認方法と、画像の修正によって表示速度を改善する方法についてご紹介しました。

    前述の通り、表示速度が遅くなる原因はサイトによって様々ですが、画像の改善をするだけでも、表示速度とユーザビリティを大幅に向上させることができます。
    現在、表示速度の遅さに悩まれている方は、一度自社サイトの画像が適切な状態になっているか、チェックしてみてはいかがでしょうか。

    「Webサイトの表示速度改善方法を徹底解説-ソースコード編」ではソースコードを修正して改善できる方法をご紹介します。

  • 画像SEOに最適なアイキャッチ画像・図版の事例

    画像SEOに最適なアイキャッチ画像・図版の事例

    5Gによって高解像度の画像が多用される時代に

    2020年から5G(第5世代移動通信システム)時代に突入し、通信速度での懸念が少なくなったことにより、高解像度の画像や動画といったビジュアルコンテンツをよりユーザーに届けやすくなっています。こういった通信環境の進化が加速していることから、近年Webサイトはリッチコンテンツ化が進み、写真や図版といった画像が多く使われる傾向にあります。VENNGAGEの調査結果によると、ビジュアルコンテンツは2018年から2019年にかけて10.5%増えていることが分かりました。たった1年間で10.5%増えていることを考えると、今後さらにビジュアルコンテンツが増えることは間違いないでしょう。

    画像はSEOとしても重要

    Googleは画像もコンテンツとして認識している

    少し前まではSEOにとって重要なのはあくまでテキストで、画像はそこまで重要視されていませんでした。画像に記載されたテキストはGoogleが読み取れないため、alt属性(代替テキスト)に記載することでSEO対策はするが、効果はあまり期待できないといった風潮がありました。しかし、Googleの機械学習の進化により、alt属性がなくともGoogleはその画像が何であるかを認識することができます。

    どのくらいGoogleが正しく画像コンテンツを認識できるのか、GoogleのCloud Vision API(機械学習画像識別ツール)を使って調査してみました。Cloud Vision APIのデモに猫の画像をアップロードすると、次のようになりました。

    Cloud Vision APIで「子猫」画像を試した結果

    Witskers(ひげ)96%、Small To Mediumu-sized Cats(小型~中型の猫)96%、Cat(猫)96%、Carnivore(肉食動物)96%、Felidae(ネコ科)96%、Vertebrate(脊椎動物)95%、Kitten(子猫)89%、Beige(ベージュ)83%という結果でした。
    Cloud Vision APIは、alt属性ではなく、画像そのものを見て、対象物が何であるかを判別しています。猫であることだけでなく、子猫であることまで正確に認識できていることが印象的です。

    子猫の画像では、今のGoogleにはさすがに簡単すぎるため、難易度をあげて、文字とアイコンだけの図版で試してみました。

    Cloud Vision APIで「図版」を試した結果

    ブロックごとにパラグラフを抽出し、日本語の文字まで適切に認識できていました。これは驚くべき結果です。
    図版は文中に補足説明として挿入されることが多いですが、その図版であっても、Googleはそこに何が書かれていて、何を伝えようとしているのかを読みとることができています。Googleは私たち人間と同じように、テキストだけでなく画像からも内容を読み取っていることが分かりました。

    画像検索のマーケットシェア率

    2019年の検索エンジンのマーケットシェアを見ると、Google画像検索のシェア率は20.45%で、Google Web検索に次いで2位でした。

    検索エンジンのシェア
    出典:https://sparktoro.com/blog/less-than-half-of-google-searches-now-result-in-a-click/

    上記のグラフデータから分かる通り、画像検索の需要は高く、画像検索に対する最適化(=画像SEO)は軽視できません。この記事を読んでいるあなたも、Googleで画像を探す機会が多いのではないでしょうか。日本の人口は1.2億ほどですから、その20%以上が画像検索を活用していると考えると、画像検索のマーケットの大きさが分かります。

    SEOでもっとも大切なことはユーザーに有益な情報を届けること。
    記事のテキスト内容だけでなく、画像でもユーザーに有益な情報を届けることを意識すると、Googleから良い評価を得られるでしょう。また、画像SEOで成功することができれば、その画像が掲載されているWebページ自体の評価にも貢献できます。

    画像SEOで期待できる流入数の増加

    Googleの検索結果画面のいたるところに画像は表示されています。あなたのサイトの画像がSEOで評価されれば、検索結果画面のいたるところに画像が表示され、サイトへの流入数増加が期待できます。検索結果画面に表示される画像エリアをご紹介しながら、画像SEOで期待できる流入について解説します。

    ・通常の画像検索結果画面(SERP)
    画像検索結果画面とウェブ検索結果画面

    画像検索結果画面には画像がたくさん出てきて、ファーストビューで表示される枚数は15以上になります。(図:左)一方、通常のWeb検索結果画面は1列に記事が出てくるため、ファーストビューで表示される記事数はウィンドウの高さにもよりますが2~4個ほどです。(図:右)

    Web検索結果画面は検索順位が下がることでクリック率が如実に下がります。しかし画像検索の場合は、順位も大事ですが、一覧で画像が表示されているため、画像の質を見てユーザーはクリックするかどうかを判断しています。

    ・強調スニペット

    強調スニペットに表示される画像

    強調スニペットとは、検索したユーザーに対してすばやく回答するためにGoogleの検索結果の上部に表示されるエリアです。強調スニペットの一般的なタイプには、パラグラフ、リスト、テーブルがあります。このうち、パラグラフタイプがもっとも表示されることが多いとされています。画像はこのパラグラフタイプのときに表示されます。強調スニペットはクリック率が高いため、画像が強調スニペットに表示されればサイト流入増加が大いに期待できます。

    ・Web検索結果画面のサムネイル画像

    ウェブ検索結果に表示されるサムネイル画像

    検索クエリ(検索エンジンでユーザーが検索する際に使用したキーワード)によっては、通常のWeb検索結果画面にも画像のサムネイルが表示されます。画像検索タブで検索しなかったユーザーにも画像が表示されるのです。ここで、ユーザーに興味のある画像を出すことができれば、ユーザーはクリックしてくれ、あなたのサイトに流入するきっかけになります。

    一般的な画像SEOのポイント

    SEOに最適な画像を作成する際に気をつけるポイントには以下があります。

    • ユニークな画像を作成する
    • 画像を関連テキストの近くに配置する
    • Webページのタイトルやメニュー項目などの重要なテキスト要素を画像に埋め込むことは避ける
    • 画像にalt属性を設定する
    • さまざまなデバイスに対応できる画像を提供する
    • 画像に内容とマッチしたファイル名を付ける
    • XMLファイルに画像の情報を追加する
    • 画像品質の低下を最小限に抑えながら、最高の圧縮を提供できるファイルタイプを選択する
    • ベクター画像を使えるのであれば優先してベクター画像を使用する

    上記はもはや常識のため、ここでは内容は掘り下げません。
    ただし、ひとつだけ重要なポイントを追加します。それは、質の高い画像を作成すること。質の高い画像というのは、画像解像度や写真のきれいさではなく、コンテンツの内容とマッチした画像であること、ユーザーにとって分かりやすい図であること、などです。2-1で解説した通り、現在のGoogleは画像の内容まで認識できるため、手抜きの画像を掲載するとそれを見抜かれます。また、コンテンツ内容と関係のない画像を掲載すると、それも見抜かれます。きちんと画像のコンテンツとしての品質を保つことも、画像SEOの重要ポイントだと弊社は考えています。

    SEO対策したアイキャッチ画像・図版の事例

    アイキャッチ画像

    アイキャッチ画像とは、Webページやブログなどで挿入される画像のことを言います。その名の通り、「視線をとらえる」「人目を引く」という意味があります。明確な定義はないですが、ブログなどの記事ページの1番最初に出てくる扉画像のことを指す場合が多いです。
    扉画像として使われるアイキャッチ画像は記事冒頭部分だけでなく、記事一覧ページやサイドナビでもサムネイルとしても掲載されることが多いです。そのため、ユーザーはアイキャッチ画像を目にする機会が多く、重要なビジュアルコンテンツ要素だということが分かります。

    記事冒頭とサムネイルとして表示されるアイキャッチ画像

    では、次にアイキャッチ画像はSEO対策のためにどんなことを意識すれば良いのかをご紹介します。 下記は本記事のアイキャッチ画像です。

    画像SEO対策のアイキャッチ画像

    まず、この記事は「画像 SEO」や「アイキャッチ SEO」といったキーワードでの流入を狙った記事になります。このアイキャッチ画像を作成する前に「画像 SEO」「アイキャッチ SEO」で検索し、どんな画像が検索結果画面に表示されるのかを確認しました。
    「画像 SEO」で検索した場合は、抽象的なフリー素材の画像が多く表示されました。「SEO」自体に物体がないため、概念を伝えるための抽象的な画像を用意しているサイトが多いようでした。抽象的なフリー素材が多いため、どの記事をクリックしようか決めにくいと感じました。一方、「アイキャッチ SEO」で検索した場合は、デザイナーが作成したバラエティー豊かなオリジナル画像が多く表示されました。しかし、SEOよりアイキャッチデザインに焦点を当てた画像が多く、SEO部分を表現している画像が少ないようでした。こういった状況から、今回はフリー素材に対抗すべく、タイトルを読まなくても「質の良い情報が得られそうだ」と思ってもらえるようなデザインを目指してアイキャッチ画像を作成しました。また、SEOという物体のない概念を少しでも具体的に表現するためにGoogleカラーを取り入れたり、検索結果画面のイラストを挿入しました。
    「狙いたいキーワードの検索結果画面の状態」と「ユーザーの検索意図」を考えながらアイキャッチ画像を作成することがSEO最適化に繋がることでしょう。

    図版

    構造や仕組みなど、文章では伝えきれない内容をユーザーに届ける手段となるのが図版です。図版を文中に掲載することで、ユーザーにより分かりやすく情報を届けることができます。MDGAdvertisingの調査結果で、「関連画像のない記事と比較すると、関連画像のある記事は、平均して94%多く視聴されている」ことが分かりました。このように、テキスト内容を補完する図版があると、ユーザーの興味度や満足度があがり、結果としてPV数の増加にもなります。
    では、次に図版では、SEO対策のためにどんなことを意識すれば良いのかをご紹介します。 下記は「SEO最適化を意識した図版作成の流れ」の記事(ごく一部)と図になります。

    SEO最適化を意識した図版作成の流れ

    ① キーワード予測

    図版周辺の記事内容を確認し、作成する図版はどんなキーワードで流入が見込めるのかを予測します。キーワードを予測しておくと、ユーザーの検索意図を考えられることが可能になります。

    ② 競合の画像確認

    ①で予測したキーワードで実際に画像検索をしてみます。そこで上位に上がってくる画像はあなたの競合となるサイトの画像です。競合の画像にはどんな傾向があるのかを確認します。

    ③ 方向性検討

    競合の画像の状況をふまえ、どういったデザイン方針でいくのかを検討します。

    * * * * * *

    図版作成の際のポイントは、記事の内容と図版をマッチさせることです。具体的には、図版と図版前後の文章で同じキーワードを使うことです。上記の図版では、キーワードをテキストで入れましたが、テキストである必要はありません。Googleはイラストや写真であってもそれが何であるかを認知できるからです。要は、図版前後で登場するキーワード(そのキーワードに関連したイラストや写真、テキスト等)を図版の中に挿入することがポイントです。
    そうすることでGoogleに、図版が記事テーマの内容に関連していることを認知してもらいやすくなります。
    ここで気をつける点は、図版だけで説明を終わらせないことです。図版はあくまで補足説明の材料です。
    たとえば、「下記の図版にある通り~」などと図版の解説をきちんと行うと、図版で使用されているキーワードが記事の説明文にも自然と登場するはずです。

    本記事では画像SEOの重要性と、SEOを意識したアイキャッチ画像・図版の事例をご紹介しました。SEO対策の一環として、今回ご紹介したノウハウやポイントをご活用いただければ幸いです。

  • 他社と差をつける!マーケティング×デザインでワンランク上の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回は無料で実施していますので、詳しい内容につきましては下記から資料をダウンロードください。