スマホECのコンバージョン率改善講座:効果的なスマホデザイン実例

少し前にスマホECのコンバージョン率改善、特によくあるユーザビリティ上の問題と解決策についての記事を紹介しました。第二弾として最新のスマホデザイントレンドを紹介する記事もあったのですが、何故か配信し忘れていたので汗、改めてここに紹介させていただきます。 — SEO Japan

How to Make Mobile eCommerce Convert: What’s Effective In Mobile Design Right Now

この投稿は、モバイルのコンバージョンに関する2部構成の記事のパート 2に該当する。パート 1では、モバイルコマースサイトでよく見られるユーザビリティの問題、そして、修正する方法を説明した。

パート 2では、モバイルコマースの最前線 — ユーザーテストで判明した、eコマースを根本から変える可能性を秘めたトレンドを紹介する。

サイト、そして、マーケットは、それぞれ異なる特徴を持つ。特定して、徐々に絞り込んでいく必要のある小さなユーザビリティの問題は、無限に存在すると言っても過言ではない。

このプロセスは、デスクトップでは数年を要した。モバイルでも同じように時間がかかると考えられる。我慢し、積極的にテストを実施して、ユーザーが動けなくなる場所、そして、その理由を正確に理解しなければならない。

PCの登場により、会計および文書の処理を見直さなければならなくなったように、モバイルデバイスの台頭により、買い物の仕組みを考え直さなければいけなくなったのだ。

Custoraによると、モバイルコマースの決済の額は、2010年の時点では、22億ドルであったものの、2013年には428億ドルに激増しており、2014年の年末には、500億ドルに達すると見られている。見て見ぬふりをすることは、もはや許されないレベルに達している。

Custora-mobile-report-revenue-600x219

弊社、User Testingは、多数のモバイルコマースのユーザーテストを実施し、効果的なモバイルUXにおける3つの目立つトレンドを発見した:

1. 検索と閲覧を歓迎する

Welcome Shopping & Browsing

ビジターは、通常、次の2つの理由のいずれかの理由でモバイルコマースサイトにアクセスする:

  1. 製品を見ながら、楽しく買い物をしたい
  2. 購入を検討している特定の製品を直接確認したい

明らかに、この2つの動機は矛盾している。「見る」は、のんびりと楽しむ行為であり、一方の「買う」は、特定の製品の情報に手っ取り早くアクセスすることを望む。

上の画像は、洋服を販売するサイトのモバイル版であり、「買う」と「見る」の双方に対応している。

ホームページには、目立つ検索ボックス(単純に「検索する」ではなく、問いかけている)が掲載され、さらに、店舗を探すツール、ホームボタン & ログインアイコンが用意されている。

Tillys top navigation

下の方には、無料配送を強調するメッセージに加え、イメージの半分を表示し、閲覧するユーザーに対して、下方向にスワイプすると、ストアの売り場に向かうイメージが表示されることを示唆している。

半分だけ表示された画像は、「奇妙」に見えるかもしれないが、ページの下にスワイプする上で効果が高いことを、多くのモバイルサイトのディベロッパーは把握している。

tillys scrolling navigation

モバイルのデザインにおいて、最初の画面に表示する機能とボタン、そして、サブメニューや二次的なスクリーンに隠す機能とボタンの決定は、非常に難しい。

例えば、eBayのモバイルサイトは、モバイルのビジターにとって、サイト検索が最も重要な機能の一つに数えられる点を理解しており、検索バーをページ上部の目立つ位置に配置している(さらに、ネイティブアプリのインストールを促すコールトゥアクションを掲載している。後ほど、アトリビューションを理解する上で、これは欠かせないアイテムとなる)。

eBay mobile

理想を言えば、モバイルのショッピングサイトやアプリの上部に配置する機能は、ユーザーの意図に合わせたいところだ。ユーザーが、「見る」気分なら、多くの製品の画像を掲載し、ストアの売り場の移動を楽にする構造が求められる。ユーザーが「買う」気になっている際は、絞り込み、そして、購入を促す情報を表示するべきである。

しかし、どうすればユーザーの気分を把握することが出来るのだろうか?心を読むことは出来ないため、完璧な答えは存在しない。それでも、ユーザーの意図を推測することは可能である。例えば、過去に閲覧したことがあるユーザーは、今後も閲覧する可能性が高い。

下の例では、「click the arrow for more like this」(矢印をクリックすると似ている製品が表示されます)は、「買う」モードにユーザーが入っていることを示唆する目安になり得る。Welcome Shopping & Browsing

具体的な製品をすぐに検索するユーザーは、「買う」気があり、適切に対応する必要があると言える。

履歴がない場合、ランディングページや最初のスクリーンをどちらの気分にも対応させるようにデザインし、選択を介して意図を表明してもらうことが出来る。Toys R’Usは、この取り組みを賢く & さりげなく実施している。

mobile-toysrus

image source

ニーズが変わる、もしくは、検討違いであった時のことを考えて、モードを楽に抜け出す手段をユーザーに用意しておこう。昨日「買う」気になっていたとしても、今日は「見る」気分になっている可能性もあるためだ。

2. デバイス間の買い物の仕組みを理解する

app-web

これは、最近のモバイルコマースの調査において、とりわけ注目を集めている領域である。購入のプロセスが単一のデバイスに限られないことが明らかになってきたのだ — つまり、スマートフォン、タブレット、そして、コンピュータをまたいで購入が行われる。

モバイルコンピューティングの分野を開拓した企業は、各種のデバイスが占めるユーザーの「スペース」を重視していた。スマートフォンはポケットやハンドバッグに入れられ、短時間のセッションに用いられる。コンピュータは、ユーザーが腰を落ち着けている際、比較的長く、集中して用いられる。

タブレットの居場所に関しては意見が割れているが、家のソファーのサイドテーブルの上に置かれ、テレビと注目を巡って争っていると言う意見が主流だ。

Tablet and smartphone access by location  - Source - Forrester Research (1)

購入プロセスは、3つのデバイスにまたがって行われる可能性がある。

例えば、靴に言及するメッセージが友達からスマートフォンに送られてくる。日中、ユーザーはこのメッセージをノートブックでチェックする。そして、夜になって、ワインを飲みながら、タブレットを介して、靴を注文する。

ショッピングの最適化を行うBloomreachは、プロム(卒業ダンスパーティー)のドレスの買い物には、2つのデバイス、そして、2名のユーザーが関与することを発見している。候補のドレスを娘がスマートフォンで探し、母親がコンピュータを使って、価格をチェックし、購入を行う。

以下の動画を見れば、この買い物の仕組みを飲み込めるはずだ

このタイプの購入プロセスを理解することに苦労している企業は多い。従来の分析では、コンピュータでドレスの購入が行われたと言う結論が出されるが、実際には、スマートフォンとコンピュータが関係している。

従って、複数のデバイスを利用する人物を計測することが可能な高度な分析が必要であり、また、双方のデバイスの買い物が、容易に連携するようにデザインするべきである。

編集者注: この分析を行う上で、KISSmetricsMixPanelHeap Analyticsは有効だ。

複数のデバイスにまたがる買い物の行動をテストするため、ユーザーテストを設定することも可能だ。

ネイティブアプリを用意すると、この流れを回避することが出来る。ネイティブアプリでは、(分野によって)毎回ユーザーにログインさせる、あるいは、購入を行う前にログインを求める。

この例では、Amazon Localからバーモントの週末旅行に関するeメールが送信されている。購入を完了するため、表示された画面を以下に掲載する。

ステップ 1 — 最初のEメール

 

offer email

 

ステップ 2: 提案を見る場所

アプリがインストールされると、Amazon Localは、たとえ厳密には「ログイン」していなくても、インストールされたデバイスのユーザー & 場所等を常に把握することが可能になる。アプリがインストールされていると、Amazonは、Eメールが開かれた時間、クリックされたリンク、アクセスされたページ等を理解する。

この流れの最後に行われる「ログイン」の指示は、実際にログインを促すよりも、支払いを安全に行うために提供される。

viewing option screen

 

ステップ 3: モバイルの製品ページ

ご覧のように、写真、レビュー、「See Options & Buy」が、このページの主な要素になっている。

mobile product page

 

ページをスクロールしていくと、追加の設備、その他のパッケージのオプション、そして、目的地への地図等、テキストによる詳細が表示される。しかし、7枚の写真、3.5の星による評価 & 価格が掲載されていれば、ほとんどのユーザーは、クリックして次のページに向かい、もう少し絞り込みを行うはずだ。

また、しっかりと整備されたナビゲーションにも注目してもらいたい。画面左上にあるAmazon Localの隣の左向きのV字型マークを除き、全てのアイテムが明白である。

また、製品ページのナビゲーション内の唯一のメニューが、右側のシェアのオプションである点にも注意してほしい。ここでは、ユーザーが、テキスト、ソーシャルネットワーク等を介して、シェアを行う度に、個別のシェアIDが最後に生成される。

最後に、シェアされたリンク経由のサインアップに関するデータが提供され、大方、電話帳のデータ & 他のログインしたユーザーの配送のデータに対する分析が行われ、(トミーが妻にこのツアーに関するページをシェアしたように)同じ家庭の2名のユーザーが、お互いに特売セールを共有しているかどうかの確認が行われる可能性がある。

ステップ 4: 購入オプションのページ

offer screen

このページは、このままでも十分に分かりやすいが、このタイプのページからは、ユーザーの収入のレベル、買い物の好み、そして、このケースでは、旅行の割くことが出来る期間等の情報も得られる。

すると、今後、モバイルUXのオプションをカスタイズし、総合的なパーソナライズされたマーケティングの取り組みを改善することが可能になる。

ステップ 5: ログイン

login screen

先程も触れたように、実際にログインを求めるよりも、どちらかと言うとセキュリティ対策に近い。

当然、マルチデバイスの買い物をデザインする方法は他にも数多くあり、その中には、この方法よりも簡単に実装できるものもある。

書籍「Designing Multi-Device Experiences」の中で、Googleのデザイナー、マイケル・レビンは、自分自身とのシェアの仕組みを例を挙げて説明している。

料理サイトのAllRecipesは、コンピュータで表示されると、レシピを探す意図を考慮して、最適化される。スマートフォンでは、レシピが選択されると、選んだレシピ(左下)から生成された買い物リストを作るために用いられる。その後、キッチンで、タブレットを使って、料理の手順を表示する(右下)。

Multi-site experiences

この類のマルチデバイスのUXは、モバイルとデスクトップのプラットフォームの良いところを失わずに、その能力をフルに活かしている。モバイルのUXを考え直すなら、この点を考慮すると良いだろう。

3. スマートフォンはスマートフォンらしく

大半の買い物サイトのモバイルコンバージョンを改善することは可能だが、モバイルのスクリーンに合わせてウェブの買い物を調整するよりも、モバイル固有の力を活用する新たな枠組みの買い物を作る方が、モバイルコマースを大幅に改善することが出来る。

スマートフォンの即時性、そして、個人に特化した特徴を活かしたフラッシュセールもその一つである。例えば、インターネット販売サイトに関するこの記事の中で、Rue La LaのCTOは、売り上げの半分をモバイルデバイスが占めていると報告している。フラッシュセールサイトのGiltは、2012年、平日の売り上げの25%、そして、週末の売り上げの30%は、モバイルで発生していると報告していた。

Gilt Mobile App

また、モバイルデバイスと実際の店舗の間の情報交換において、大きなチャンスをもたらす。

長い間、店内で用いられる場合、スマートフォンは敵対視されていた。店内で製品を見るものの、インターネットで注文されてしまうためだ。これは店舗にとってはリスクだが、弊社が行ったテストでは、買い物を助けるツールとして、スマートフォンを利用するアプローチを試す小売業者が増えつつあることが、明らかになっている。例:

  • 店員を探し回ることなく、製品の詳細を調べられるようにする(その一つとしてQRコードが用いられている)。
  • 会計に時間がかかる場合、製品をオンラインで注文し、配送してもらえるようにする。

モバイルショッピングにおいて、ここ最近、とりわけ注目集めている実験がある。それは、Amazonの最新のFire Phoneに搭載されているFirefly機能だ。Fireflyは、製品の写真や名前を認識し、すぐに注文することが可能なアプリである。ソフトウェア会社の中には、このタイプのアプリを過去に試した会社もあるが、スマートフォンに組み込んだのはAmazonが初めてであり、しかも、専用のハードウェアのボタンまで用意している。

User Testigが実施したFire Phoneのテストでは、Fireflyに幾つか問題があることが判明した。 ロゴが明白に見えない場合、製品を認識することが出来ず、また、スキャンした製品ではなく、似ている製品に導いてしまうこともある。それにも関わらず、スマートフォンの機能の中で、最も人気が高い機能に選ばれたのはFireflyであった。

Amazon Firefly

ミントの箱を認識するAmazonのFirefly。スクリーンの一番下に製品のリストが表示されている。タップすると、製品のレビューを読むことが可能であり、また、Amazon.comを介して注文することも出来る。

Firefly、そして、この系統の製品は、買い物のプロセスにおいて、かつてない強烈なインパクトを与える可能性がある。モバイルショッピングの未来は、ショッピングアプリの改善ではなく、ショッピングがデバイスの機能として設けられたスマートフォンそのものなのかもしれない(要するに、デバイスが店にアクセスするために用いられるのではなく、デバイス自体が店になる)。

これは地球上の全てのオンラインコマースサイトにとって、破壊的な変化をもたらすポテンシャルを秘めている。小売業者は、このタイプの最新のテクノロジーを注視し、どのような影響を与えるのか調査するべきである。また、AmazonのFireflyアプリの導入も検討する価値がある。このアプリは、独自の拡張機能を加えることが可能なAPIを持っている。

実在する店舗においては、恐れるよりも「展示」することが肝要だ。2013年にコロンビア大学が発表した調査では、モバイルデバイスによるサポートを受けた買い物客のうち、ひっきりなしに最安価格を探している客は、6.1%のみであった。

five types of mobile shoppers

モバイルの補佐を受けている消費者の大半が、今でも、最高の買い物の体験を求め、店舗内での買い物を好んでいる点は、意外な事実として受け止められるかもしれない。

いずれにせよ、Amazonやその他の企業が、モバイルデバイスでの買い物に革命を与える方法を編みだし、慌てて追いかけなければならなくなる前に、今すぐにこの実験を行うべきである。

結論: モバイルコンバージョンの行動計画

モバイルコンバージョンの問題は、すぐに解決することが出来るわけではない。簡単に修正することが可能な単一の問題ではなく、多くの小さな課題が存在する。モバイルサイトのデザインは、デスクトップよりも難易度が高い。なぜなら、スクリーンが小さく、モバイルのベストプラクティスが、いまだに見つかっていないためだ。

モバイルに不慣れであるため、多くの企業は、アウトソースする、もしくは、適応可能なデザイン等の単一の解決策に力を入れる傾向が見られる。

このアプローチは危険である。モバイルは、Eコマースのトラフィック全体から見ると、まだ未熟だが、急速に増加を続けている。FacebookやYelp等、一部の会社は、モバイルがビジネスの大部分を占めていると報告している。モバイルを準国民として扱うEコマースを提供する会社は、モバイル化が加速する中、自らを危険な状況に追い込んでしまう。

以下に、モバイルサイトを最高の状態にする方法を紹介する:

1. 用語を標準化する

standard language

ストアで利用する用語を、顧客が利用する用語と一致させる必要がある。これは、製品を特定するために用いるタグとメニューに、そして、ストア内のナビゲーションに用いるボタンの名称にも該当する。自信がない際は、一流の大きなEコマースサイトで利用されている用語を用いると良いだろう。大半の消費者は、この用語を見慣れているためだ。

2. メニューの利用を制限する

mobile menus

モバイルサイトでは、(それぞれのリストが1つのスクリーンを埋め尽くす)2段階のメニューを超えるメニューを作るべきではない。2段階以上のメニューを作る必要があるなら、2つ目の後にランディングページを設け、ビジターを正しい場所に導く必要がある。デパートのエレベータのようなメニューを意識すると良いだろう。

3. 全てタップ可能にする

Untappable items

モバイルの枠組みでは、戻る、進むではなく、タップ & 編集が主流である。請求先住所や配送先の住所等を、インターフェースから直接編集することが出来る環境を作ってもらいたい。

4.デスクトップ版のサイトへのアクセスを与える、ただし奇襲は避けること

target view desktop

 

モバイル版サイトでは掲載されていない重要な情報を考慮して、デスクトップ版のサイトの閲覧を望むユーザーは多い。だからと言って、デスクトップ版を無理やり押し付けるのではなく、サイトのフルバージョンを表示するリンクを与えるべきである。

5. 2つのタイプのモバイルビジターに合わせる

express mobile

「買う」ビジター & 「見る」ビジターに対して、異なるルートを提供し、UXを調整しよう。上の画像では、「Sale」ボタンをタップするビジターは、様々な売り場を閲覧するビジターよりも、早く購入すると考えられる。

モバイルは、即時性、そして、パーソナライゼーションを土台としており、モバイルの顧客の閲覧パターンを分析し、「見る」から「買う」に切り替わるタイミングを見出し & 質的なフィードバックループを使って、顧客がモバイルデバイスでの買い物をスムーズに行うために何が必要なのか学ぶと良いだろう。

6. モバイルの長所を利用する

off-season

モバイルデバイスでの買い物は、「触れる」を実感することが出来る。モバイルデバイスをコンピューターに苦労して変えようと試みるのではなく、モバイルの長所を考慮して最適化しよう。楽しく利用することが可能であり、サイトで「遊ぶ」とご褒美を貰える感覚をユーザーに与えてもらいたい。まだ実施したことがないなら、フラッシュセールの実行を薦める。

7. 買い物を複数のデバイスに統合する

google-universal-analytics

デバイスのタイプをまたがってユーザーを追跡し、発見や買い物のセッションをシェアしやすい環境を作って、後に別のデバイスで再開してもらおう。

まずは、ユニバーサルアナリティクスを試すと良いだろう。しかし、KISSmetricsHeap Analytics等のツールを使うと、さらに明確に全体像をとらえることが出来るようになる。

8. モバイルを考え直す

これは最も難しい。しかし、最も重要でもある。モバイルが買い物のプロセスを変える仕組みを学ぶ必要がある。また、Firefly等の実験を調査し、実際の店舗を運営しているなら、モバイルが店舗内の買い物を補う方法を試してもらいたい。

スマートフォンのユーザーが、どのようにコンバートするかではなく、ストア全体がどのようにコンバートするのかを考えるべきだ。

9. 思い込みに頼らず、何でもテストする

デスクトップにおいて、Eコマースサイトが成功を収めているなら、オンラインショッピングにおける「するべきこと/さけるべきこと」をある程度推測することが出来る。その一部は、モバイルにおいても的を射ているかもしれないが、中には完全に誤っていることもある。

残念ながら、事前に正誤を判断することは出来ない。 モバイルでは、分析およびユーザーテストと仮説を組み合わせて、テストする必要がある。分析データは、ユーザーがどんな行動を取っているのか、そして、ユーザーテストは、なぜその行動を取っているのかを教えてくれる。

特にモバイルアプリを作っている場合、テストは尚更重要である。ウェブの世界では、原案のウェブサイトをリリースし、改善を繰り返すアプローチが許される。一方、モバイルアプリでは、一度、または、二度試してうまくいかない場合、ユーザーは利用を止める。オンラインのレビューは、初日からユーザーを満足させることの出来ないアプリに容赦なく罰を与える。

従って、とりあえず立ち上げて、修正を繰り返すのではなく、App Storeに提出する前に、開発のプロセス全体を通して、早く、何度もテストを行うべきである。


この記事は、ConversionXLに掲載されたHow to Make Mobile eCommerce Convert: What’s Effective In Mobile Design Right Now」を翻訳した内容です。

実例ベースの解説とアドバイスが満載、モバイルサイト運営やデザインに関わっている人はじっくり読みたい記事でした。 — SEO Japan

コンバージョン最適化の鉄則ルールが鉄板でない8つの事例

エコンテ設立でコンテンツマーケティングネタ寄りに偏り過ぎた感が出てきたので、昨年後半から多目に投稿してきたコンバージョン最適化関連の記事も今回は。SEOにしろ、コンテンツマーケティングにしろ、そしてコンバージョン最適化でも、それだけは守っておきたい基本ルールが良く取り上げられますが、前者2つ以上にそんな「鉄板ルール」が実は鉄板ではない可能性が高いのがコンバージョン最適化。初心者マーケッターには「え?!そんなこといわれても」と怖い話ですが、その道のプロ中のプロがその理由を語ります。 — SEO Japan


When Conversion Optimization Best Practices Fail

コンバージョン最適化の鉄則を全て挙げようとすれば、日が暮れてしまう。しかし、その中には絶対的な存在として君臨する鉄則が幾つか存在する。例えば、

このようなアプローチは多くの実験で明らかになった一般的なトレンドであることが多く、大方効果がある。そのため、この類のケーススタディは説得する際の主な材料として用いられることが多い。

しかし、この考え方はある問題を見落としている。通常効果があると言っても、全てのサイトで有効に働くとは限らない。ウェブサイトによって、ターゲットのオーディエンス、マーケティング、ポジショニング、価格、製品の選択、季節性は異なる。 大方、それぞれの置かれている状況に左右される。

「ページが異なれば目標も異なる。従って、フリーサイズ的な戦略を適用することは出来ない」– グレッグ・シオッティ

そして、人間ならではの問題も垣間見られる。特定の鉄則が何度も取り上げられ、何度も実施されていると、当該の鉄則が高く評価された要因、つまり、説得力のある要点を見失い、闇雲に従うだけになってしまう。

つまり、成功の原因ではなく、つまり、兆候ばかりに目がいってしまうのだ。

この記事では、鉄則が鉄則ではなかった例を幾つか挙げ、大事な点を誤って理解してしまった理由を解明していく。さらに、過ちから教訓を得て、闇雲にベストプラクティスに従う方針を変え、収益を増やすにはどうすればいいのかを検討していく。

鉄則の失敗例 #1: スライダーは不要

スライダーは、コンバージョン率最適化(CRO)コミュニティの間で、最も嫌われているデザインの要素だと言えるかもしれない。しかし、一様に効果を疑問視され、また、効果がないことを証明されているにも関わらず、実はスライダーが有効に働いたケースが存在する — Device Magicは動画をスライダーに置き換えることで、コンバージョン率を30%アップさせていた

image15

画像ソース

この鉄則が失敗した理由: スライダーの方が情報を適切に伝えることが出来るケースもある

通常、モーションは気を散らす原因となり、複数のヘッダーの利用は混乱を招く。また、ヘッダーの一部はユーザーとは関係がないこともある(スライダーが役に立たない理由を詳しく知りたい方は、この記事で確認しておこう)。

Device Magicのスライダーを用いたバージョンは、邪魔なものを省き、明確で有益なタイトルと目立つグラフィックを残してスライダーならではの問題を解決していた。

押し並べて、スライダーは邪魔なアイテムを加え、重要なコンテンツから注目を奪ってしまうものの、このケースでは、余白を多く確保し、また、無関係な要素を除外していた。箇条書き、タブ、そして、動画を持つコントロール(オリジナル)と比べ、このシンプルなスライダーを用いたバージョンは、とても分かりやすい。その分かりやすさこそが説得の第一歩目となる。

さらに、スライダーのバージョンは動画よりも早く情報を伝えている。提案する価値を伝える時間は10秒間のみであり、動画の周りのサムネイルとコピーは第一印象にとって重要な役割を担う。コントロールのページでは、サムネイルが乱雑であり、ヘッドラインは — 良い第一印象を残すことを考えると、少し複雑過ぎる。

また、リサーチの結果、実際に動画を視聴しているのはユーザーの30%であること、また、Wistiaが行った調査では、動画を見るユーザーであってもすぐに視聴を止める傾向があることが分かっている。

image20

画像ソース

動画が長ければ長いほど、オーディエンスはすぐに視聴をやめる。4分以上の動画はユーザーおよびコンバージョンを失う可能性がある。

ただし、このケーススタディは、1つ目のスライドが利用するヒーローの画像が、コンバージョンにどのような影響を与えているのか精査していない点に注意してもらいたい。ユーザーは通常スライダーをクリックしないため、Device Magicは画像よりも大きな効果、あるいは、画像と同じ効果を得ていた可能性がある。

重要なポイント: スライダーは役に立たないかもしれないが、乱雑なページはさらにコンバージョンを下げてしまう

Device Magicのケースでは、分かりやすく、目立つ第一印象を与えると言う説得力のある良識 — 通常はスライダーが不得意にする領域 — を利用したため、スライダーは動画を上回る結果を残していた。

このケーススタディが証明しているのは、効果を左右する上で大事なのは、ページの機能ではなく、機能がどのように組み込まれているか、と言うことだ(スライダーの画像、スライドの順番、動画の長さ、動画のサムネイル、動画の質等)。

長ったらしい動画やコンバージョンを狙った動画よりも多少効果のあるスライダーをデザインすることは可能だ。しかし、どのように組み込むかが結果を左右することを覚えておこう。

ただし、このケーススタディは、スライダーの方が動画よりも優れている点ではなく、あくまでも、スライダーが過去のページよりも30%コンバージョンをアップさせた事実を証明しているだけだ。

鉄則の失敗例 #2: トラストシール

トラストシールは、会計のフローの主要なパーツとして高く評価されている。なぜなら、ページの信頼度を高める効果があるためだ。しかし、トラストシールがコンバージョンを1.6%近く下げてしまった

image05

画像ソース

また、トラストシールを削除したところ、コンバージョンが3.5%上がったとエリック・ハンセンもツイートで報告していた。

この鉄則が失敗した理由: トラストシールは信頼が重視される場合のみ有効に働く

通常、買い物をするユーザーを安心させるため、トラストシールはプラスに働く。ユーザー自身が、セキュリティーを評価する際の手段としてトラストシールを参考にすることが最も多いと示唆している。image17

画像ソース

しかし、気をつけなければならない点がある: ユーザーはトラストシールを理解していない。ユニバーシティカレッジロンドンが行った調査では、ユーザーはトラストシールの意味を大きく誤解していることが判明している。

トラストシールが、技術面でのセキュリティが問題ないことを意味するとは、ユーザーは理解していない。トラストシールを信頼性の代わりと見ている。従って、信頼性の欠如がコンバージョンの足を引っ張っている時のみ効果を発揮する。

セキュリティが重要ではない場合、余計に不安を煽るため、コンバージョンを下げてしまうこともある — WhichTestWonはフォームからトラストシールを外したところコンバージョン率が12.6%高くなったと報告している。

image01

共有される情報が機密情報ではないため(そして、フォームはその他のより大きな問題を抱えているため)、トラストシールの利用は理にかなっていない。その結果、懸念を高めてしまうため、コンバージョンを低下させてしまう。

会計のケーススタディで起きた現象もこれで説明がつく — トラストシールの大きさは、ページでこのシールが最も重要なアイテムであると示唆している。その結果、セキュリティの問題に注目が集まり、コールトゥアクションからユーザーの注意を逸らしてしまう。

重要なポイント: 必要な場合のみトラストシールを利用する

鉄則に頼るのではなく、質的なユーザー調査を行い、ユーザーが経験している障害を解き明かし、その後、適切なツールを選んで当該の問題を解決しよう。

トラストシールは信頼性の問題を解決するツールであるため、ユーザーが信頼性を疑問視していないなら、妥当ではなく、注意を逸らしてしまう。

ちなみに、視覚的なデザイン推奨レビュー等、信頼性の問題を解決するツールは他にもある。トラストシールは、他の要素が欠けている場合、信頼性を作るツールとしては適切ではない可能性がある。

鉄則の失敗例 #3: 大きなボタン

理論上、大きなボタンはユーザーの注目を集め、コンバージョンアップにつながる。しかし、現実には、ボタンを大きくした結果、コンバージョン率が10%以上落ちてしまったサイトが存在する。

image10

画像ソース

このテストを実施した会社は、ボタンを大きくして、さらにコピーを変えた。すると、ボタンのサイズを変えただけでは、コンバージョン率が10%低下することが判明した。

この鉄則が失敗した理由: 重要なのは大きさだけではない

目立ち、注目を集めるコールトゥアクションボタンはコンバートしやすいと言うのが、コンバージョンの最適化の常識だ。 サイズはボタンの重要度を容易に示すことが出来る。

しかし、ユーザーがページを読むパターン、そして、視覚的な階層を決めるアイテムに関しては、別の要素も絡んでくる。

まず、ユーザーは情報の場所に関して一定の期待を持っている。VWOがホームページの変更をテストした際に明らかになったように、サイズに関わらず、ユーザーはその場所を最初に見る。

image02

画像ソース

メインの中央のコールトゥアクションボタンを大きくしつつ、ユーザーが無料のトライアルボタンが掲載されていると期待する右上にもボタンを用意した。無料のトライアルを望むユーザーはまずこの場所を見る。その結果、この小さなボタンが3倍以上のクリックをもたらしたのであった。

視覚的な階層を確立するために大きさをいじると、乱雑な状態を作ってしまうリスクがある。SmartWoolのケースでは、画像のサイズを統一し、ページをシンプルにしたところ、ビジター一人当たりの収益が17%アップしていた。

image14

画像ソース

画像のサイズを変えるとページの視覚的なリズムを崩し、障害を生む。シンプルにしたページは、バラバラ感を取り払い、ページのリズムを取り戻していた。

その他の要素と不釣り合いな画像は別の面でも新たな障害を与えてしまう: 売ろうとする魂胆が丸見えであり、魅力に欠ける。

コピーを長くして、併せて、ボタンを大きくするなら筋が通る。テキストにスペースを与える必要があったからだ。一方、オリジナルのコピーを維持した状態で、ボタンの大きさを変えてしまうと、ユーザーの注目を集める意図があからさまになる。また、押しつけがましくなり、視覚的な魅力が落ちてしまう。

視覚的なデザインによって引き起こされる感情はユーザーの行動に大きなインパクトを与える。失敗例では、ボタン自体に過剰に注目を与えてしまい、ユーザーをうんざりさせてしまった可能性がある。

重要なポイント: コンバージョンと平行してユーザー体験を考慮する

上記の例では、ボタンの大きさの変化によって作り出された視覚階層が、何らかの理由でユーザーに障害をもたらしていた。魅力が下がり、また、バランスを崩してしまったため、ボタンを大きくしたバージョンは失敗したのだ。

従って、ページをデザインする際は、ユーザー体験にとって有益な視覚階層を作りだす必要がある。つまり、期待、視覚的なリズムに注意を払い、総合的なデザインを心掛ける姿勢が求められる。

鉄則の失敗例 #4: コールトゥアクション(CTA)は1つ

CROのエキスパートは、選択肢を多く用意するとユーザーの気を散らすと指摘するかもしれないが、デンマークのショッピングサイトは、買い物かごのすぐに上にCTAを1つ加えることでコンバージョン率を17%アップさせた。

image21

同様に、Get Responseもセールスのコンバージョンに変化を加えずに、ホームページのメインのCTAの右隣に「FREE Trial」ボタンを 追加するだけで、トライアルの登録数が158%増加していた。

image09

画像ソース

この鉄則が失敗した理由: 常にトラフィックのターゲットが絞られているわけではない

公正を期するために言っておくが、CTAを一つに限定する鉄則は、通常、ランディングページに当てはまる。ランディングページでは、特定のページから特定のトラフィックが関連性の高いページにもたらされる。これはランディングページの長所だと言える。

しかし、単一のCTAの概念はホームページやサイトの別のコンテンツにも適用されるようになり、一部の企業はユーザーを単一の明確な次のステップに導くことで、ホームページのコンバージョン率を大幅に高めることに成功している

残念ながら、あまりにも大きくスイングしてしまうケースも見られる — つまり、全てのビジターを対象としたページから、すぐに大きく前進し、コンバートする準備が整ったほんの一握りのビジターに対するページへと移そうとする。

サイトのページへのトラフィックは、様々なソースから到着しており、また、Googleのカスタマージャーニーツールが示しているように、業界、規模、そして、地理によって、異なるソースから導かれたトラフィックは、セールスファンネルの異なる段階に位置している可能性がある。

image24

画像ソース: ConductorGoogle

2つ目のCTAを介して、コンバートする準備が整っていないユーザーもセールスファンネルの次の段階へと進むことが出来るようになる。

上の例では、2つ目のCTAをテキストリンクにすることで、あるいは、控え目な色を用いることで、視覚的なデザインによってCTAとCTAの間に階層を作りだしている。要するに、コンバートする用意が整っているユーザーには次のステップを明確に伝え、その一方で、まだ心構えができていないユーザーにも別の選択肢を用意している。

重要なポイント: ページのソースに応じてコンバージョン戦略を調整する

ページを特定のアクションに集中させ、不要なアイテムを取り払うと、より多くのユーザーを最も望ましいアクションへと導くことが出来るものの、様々なソースからトラフィックが寄せられるページに対しては、ユーザーの大半を引き寄せる上でCTAが一つでは足りない可能性がある

このようなケースでは、重要度の差を作りだす視覚的なスタイルを介して、CTA間で階層を確立させるべきだ。また、ページを作り、トラフィックを導く際は、ソース別のコンバージョンの差を考慮すると良いだろう。

鉄則の失敗例 #5: 人物の写真を利用する

一部のリサーチによると女性の写真
(および赤ちゃんの写真と魅力的な人物の写真)は製品を売る効果があるらしいが、人物の写真を削除し、CTAを変えることでFelix + Irisのコンバージョン率は72%改善された。

image07

画像ソース

 

この鉄則が失敗した理由: 視覚的な手掛かりが複雑で、気を散らす可能性がある

人間の脳は非常に早いスピードで視覚的な情報を処理する。早さに関しては議論の余地があるが、MITによると、人間はわずか13ミリ秒で視界に入った画像を特定するようだ。また、取り上げられることの多い3Mのレポートでは、人間はテキストと比べて6万倍のスピードで視覚的なデータを処理すると報告されている。

脳に障害を負った患者に関する調査では、人間の顔に反応する特定の経路が脳に存在することが判明しており、また、一部の脳に関するリサーチでは、新生児は無表情およびネガティブな顔の表情よりも好意的な表情を早く処理する点が明らかになっている。

要するに、視覚的な情報 — とりわけ人間の顔の情報 — は注目を引き寄せる効果がある。事実、一部のコンバージョンの専門家はランディングページに掲載する人物の写真を増やし、さらには、異なる人物やムードの写真を試すなどして、成果を挙げている。

しかし、誤った方向に狙いを絞っている場合、説得力は消えてしまう。感情と信憑性が重要ではない場合、顔の写真はビジターの気を散らしてしまう可能性がある。

image23

 

画像ソース

上の指標追跡ヒートマップは、顔が注目を集めるセオリーを裏付けているものの、この場合、顔の写真は製品とCTAからビジターの注目を逸らしてしまっている。

次のテストは、マーケッターがユーザーに見てほしい主要なメッセージの方向を見ている写真を用いる、視線による合図の効果を証明している。このテクニックは気を逸らす程度を軽減することは出来るかもしれないが、根拠は明確ではない。

リサーチによると、確かに他の人が見ている方向を見る傾向があるものの、有益と見られる場合のみに用いられるべきであり、自閉症の尺度の違いによって効果はまちまちだ。また、性別、さらには、政治の考え方にも左右される。その上、EyeQuantが実施した指標追跡調査では、視線の手掛かりおよび顔写真は、マーケッターが望むほど効果は高くないことが明らかになっている。

あるコンバージョンテストでは、視線による手掛かりは、効果が相反し、また、CTAを見る好意的な画像が、ユーザーを見る好意的な画像をパフォーマンスの面で上回ったケースもある。

image18

画像ソース

こういった調査を参考にする限り、視覚的な処理が非常に複雑であり、テストしなければならない点が示されていると言えるだろう。

Felix + Irisの例では、人物の写真はページに対する説得力を後押ししていない。バリュープロポジションおよびCTAは感情と信憑性と関係がないためだ。製品の写真に切り換えた結果、明確になり、気を散らす原因を取り払うことが出来た。

重要なポイント: 適切ではない写真には説得する効果はなく、気を逸らすだけ

人間はテキストよりも画像を遥かに早く処理するため、写真を通じて多くの情報を伝えることが出来る。しかし、よく考えた上で、そして、慎重に用いる必要がある。なぜなら、注目を引き寄せる写真の力を誤って利用すると、ビジターの気を逸らしてしまうためだ。

写真を選ぶ際は、画像が独自のバリュープロポジションを強化するか、あるいは、ビジターの注意を逸らしてしまうかどうか考えてもらいたい。バリュープロポジションにとって感情が大事なら、顔写真は効果的だ。大事ではないなら、製品の写真や情報を示すグラフィックの利用を検討するべきだ。

鉄則の失敗例 #6: フォームを短くする

フォームのデザインに対する鉄則は多いが、その中でも有名なのが、短いフォームはユーザーの抵抗を減らすと言うものだ。しかし、フォームを短くしたところ、コンバージョンが29%落ちてしまったケースがある。

image03

画像ソース

この鉄則が失敗した理由: 因果関係と相関関係が複雑

短いフォームの鉄則は、行動に対する障害を行動を起こす欲求が超えると、行動が起こされると指摘するFoggの行動モデルをベースにしている。

フォームの入力欄を減らすと、行動を活性化させるはずである。なぜなら、入力欄はユーザーが歩む道の障害物となるためだ。確かに短いフォームは障害の少なさと相関関係があるものの、必ずしも障害を少なくする要因となるとは限らない。

短いフォームを用いると、分かりやすくなる。視覚的にシンプル(入力欄、アイテムが減る)になり、そして、典型的なデザインに近づく(短いフォームは定着しつつある)。シンプルさと典型的さはサイトに関する「予感」を磨く効果がある。

image06

画像ソース

ビジターはページを短時間で評価するため、この前向きな予感は重要だ。しかし、短いフォームがシンプルで、典型的なフォームとは食い違う場合、この理論は成立しなくなる。

このケースでは、3つのページを1つにまとめ、買い物の流れにおいてユーザーが慣れ親しんでいる順番を排除している。そして、恐らく、見慣れないページを作りだすことで、障害を増やしてしまった可能性がある。

また、複数のページを1つのページに崩したこのケーススタディでは、最終的なフォームの情報量が多くなり、この視覚的な散らかりがネガティブな予感を導き、その結果、コンバージョンが減った可能性がある。

重要な選択肢を少なくすることで、フォームを短くした結果、障害を増やしてしまうケースもある。あるテストでは、入力欄を1つ削るだけでコンバージョン率が40%も落ちたことが明らかになっている。

image25

画像ソース

このシナリオでは、オリジナル版に加えた唯一の変更は、望む購読期間を選択するドロップダウウンを削除しただけであった。この選択肢がなくなっただけでコンバージョン率は大幅に下がってしまったのだ。

重要なポイント: フォームの入力欄は必ずしも障害を生むわけではない

障害が発生する要因を単純に入力欄の数に限定することは出来ない — ニーズを満たす方法を容易に、そして、早くユーザーに理解してもらうことが肝要だ。ユーザーが求めている主なオプションが存在しない場合、あるいは、複雑、もしくは、見慣れたオプションと異なる場合、コンバージョンは下がってしまう。

フォームを作成する際は、ユーザーに相談し、異なるオプションを試して最も分かりやすいフォーム、つまり、最も典型的でシンプルなフォームを作るべきだ。

鉄則の失敗例 #7: ページを短くする

フォームを短くする鉄則と同じく、大勢のコンバージョンの専門家が、元来、ページは短い方が良いと信じている。しかし、初期のMoz(有名なSEOサイト)では大幅に長いページがコンバージョン率を50%アップさせていた。Crazy Eggでも同じ現象が起き、ページを大幅に長くすることで、なんとコンバージョン率が363%も増加していた。

image13

画像ソース

この鉄則が失敗した理由: 説明を多く必要とする製品もある

インターネットユーザーは読むのではなく、ざっと目を通す傾向がある。その結果、ページが短ければ、早く吸収することが出来ると言う常識が定着した。そのため、短いページの方が長いページよりもコンバートしやすいと言う理論が成立する。

しかし、実際には、ページにとっての理想的な長さはそれほど単純ではない。なぜなら、ユーザーを説得するまでにかかる時間は、認識の度合い、製品の複雑さ、そして、価格によって異なるためだ。

ページの長さは、ユーザーの認識度を反映している必要がある – 製品、または、解決する問題のことをよく知らないユーザーはより多くの情報を必要とするため、必然的にページは長くなる。一方、製品を熟知し、買いたい衝動に駆られているユーザーに対しては、それほど入念に説得を行う必要はない。

Mozの例でも、CrazyEggの例でも、初期において長いランディングページはコンバージョン率をアップさせていた。初期の顧客は認識度が低かったため、コンバートする前により多くの背景を把握しておく必要があったのだろう。

このアイデアを基に、CrazyEggは数年後にページの最適化を実施し、現在、短いバージョンをテストしている。

image16

画像ソース

このテストでは、コンバージョン率を13%引き上げたバージョン D(一番右)が最も良い成績を収めた。このブランドは息が長く、製品に詳しいビジターが増え、買うべき理由を長々と説明する必要がなくなった。

価格と製品の複雑さもまたセールスページの長さに影響を与える。単純に「より複雑で、より高額な製品は、判断を下すための情報はより多く求められる」。

また、ブランドもまた判断にインパクトをもたらす — 購入の決定にブランドロイヤリティが大きな役割を担っている業界は、短いページに向いていると考えられる。McKinsey & Companyも指摘しているように、各段階での購入の割合を複雑さと価格のみをベースに割り振ることは出来ない。

image11

画像ソース

自動車業界では、たとえ製品が複雑であり、高価であっても、消費者の大半はセールスファンネルの早い段階で製品を購入していた。自動車保険の場合、消費者は時間をかけて様々な製品を比較していた。

一部の複雑な製品に対しては、消費者はブランドに頼って近道をしている可能性がある。つまり、この場合短いページが有効に働くと考えられる。

消費者がどのぐらいの量の情報を必要としているのかを解明するには、認識、価格、ブランドのロイヤリティ、さらには、層(店舗で製品を確認した後、オンラインで購入するタイプは女性よりも男性に多い)、季節性(休暇シーズンの買い物客はお買い得に敏感)の複雑な組み合わせを理解しなければならない。

重要なポイント: 必要とされるコンテンツと長さを合わせる

ページの長さはコミュニケーションの有効性を判断する目安には向いていない。MozやCrazy Eggの例に反映されているように、より多くの情報を求めているユーザーは短いページではコンバートすることが出来ない。

簡潔により多くの情報を伝えることが出来れば最高だが、簡潔なページで多くの情報を伝えられないケースもある。同じように、長いページでも少ない情報しか伝えることが出来ない可能性もある。真剣に精査する度合いが高い場合、より多くの情報が求められると言える。

そこで、ページの長さにばかり気を取られるのではなく、何を伝えようとしているのか、そして、その情報をどうすれば明確に伝えることが出来るのかを本気で考えてみよう — 場合によっては、長いページが必要とされる可能性もある。

鉄則の失敗例 #8: CTAを上半分に掲載する

インターネットのユーザーはスクロールしないと言う説が一般的だが、CTAを下半分に動かしたところ、コンバージョン率が304%もアップしたサイトが存在する。

 

image22

画像ソース

この鉄則が失敗した理由: ユーザーは実際にはスクロールしている

「上半分」理論は新聞紙を発端としており、今でも上半分に注目の80%が注がれている

確かにユーザーは上半分に注目していても、行動を起こす準備が整っていないケースもある。行動を起こす動機が存在しないなら、CTAはきっかけとして有効に働かない。

「顧客候補の意思決定プロセスを最も効果的に補う場所にCTAを配置するべきだ」 — マイケル・アーガード: ContentVerve

ページの長さに関するポイントと共通することだが、アーガードは「製品/提案の複雑さとCTAの理想的な配置の」相関関係を調査し、複雑な製品の場合、下半分のCTAの方がコンバートすると報告している。

ページの長さと同じように、理想的なCTAの配置は、製品と問題の認識度、そして、ブランドと業界に左右される可能性が高い。この調査のケースと同様に、ユーザーがより多くの情報を必要としている場合、CTAを低い位置に配置するとプラスに働くことがある。

CTAをページの低い位置に掲載すると、直線的なAIDAのプロセスを辿る時間をユーザーに与え、購入するよう説得することが出来る。

image00この画像は鉄則の失敗例を説明するために掲載している。幾つも欠点があるので、単純にこのレイアウトをコピーするべきではない。

画像ソース

この直線的な説得のプロセスを用いて、最後のきっかけに導きながら、買い手のモチベーションを高めることが出来る。

コンテンツを下半分に移すと、上半分をスッキリさせる効果もある。その結果、より明確になり、第一印象を改善し、コンバージョンを増やす効果が見込める。

しかし、この鉄則の失敗はユーザーの行動における変化に起因している可能性もある。現代のユーザーはスクロールに慣れ、スクロールすることが当たり前になっている。

頻繁に言及される先程の80%のスタッツは、注目に焦点を絞ったNielson Norman Groupの調査結果で報告されているものだが、同社はスクロールが改ページよりも効果的であり、また、スクロールさせるように作られたページは実際にユーザーをページの下へと導くとも指摘している。

別のデータでは、ユーザーは76%の確率で少なくとも多少スクロールし、22%の確率で一番下までスクロールすることが明らかになっている。一番下まで到達したユーザーがわざわざ上までスクロールし直して、CTAボタンをクリックする可能性は極めて低い。

重要なポイント: 説得の流れにフィットする場所にCTAを掲載する

鉄則に従うよりも、情報の流れを考慮し、コンバートする前にどれぐらいの量のコンテンツを必要としているのかをテストして、その結果に応じてCTAを配置するべきだ。

結論: 相関関係の存在

コンバージョン最適化の鉄則は、大方、大半のユーザーにおいて、多くのページで有効に働く便利な近道に過ぎない。既存のデータがない、もしくは、意味のあるテストを実施する上で必要なトラフィックを持ち合わせていないサイトにとっては、良い出発点となる。

しかし、鉄則が必ずしもそのページで、そのユーザーに対して、そして、その期間において効果を発揮するとは限らない — また、たとえ効果があったとしても、他のアプローチの方がより高い効果をもたらす可能性もある。

闇雲に鉄則に従うのではなく、鉄則を生み出した説得心理を考慮し、以下の点に注意してもらいたい:

  1. スライダーはページを見にくくしてしまうことが多い → ページの見やすさを保ち、気を散らすアイテムは置かない
  2. トラストシールは信頼度を高める → 信頼できるサイトを作ろう
  3. 大きなボタンは注目を集める → 次のステップをユーザー自身が解明しなければならない状況は好ましくない
  4. CTAを1つだけ用いると次に取る行動が明確になる → 視覚的な階層を用いて、次のステップが目立つようにデザインしよう
  5. 人物の写真は目立ち、感情を表現する効果がある → 適切な訴求力(感情、論理、信頼)にユーザーの注目を集めよう
  6. 短いフォームは障害を減らす → 分かりやすいフォームを用意しよう
  7. 短いページは消化しやすい → 飛ばし読みすることが可能な、分かりやすいページを作ろう
  8. 上半分のCTAは視界に入りやすい → CTAを目立たせ、ページの流れにおいて最も妥当な場所に配置しよう

メインの画像のソース


この記事は、ConversionXLに掲載された「When Conversion Optimization Best Practices Fail」を翻訳した内容です。

どれも事例ベースだけに説得力がありますね。鉄板ルールであっても、最後に説明されているように、それが持つ意味を深く考えた上で、時には鉄板ルールにチャレンジしてでもコンバージョン最適化に取り組みたいところです。テストを繰り返させるのがウェブの強みなわけですし、時には常識を越えてこそ真のグロースハックを極められる?! — SEO Japan

コンバージョン率改善で最初、二番目、三番目にテストするべき3項目

コンバージョン祭Weekにお届けする今回の記事は、テストを行う際に、どこから始めたら良いの?というコンバージョン改善初心者に贈るコンバージョン率改善の基本ステップ的な記事を。事例も含めわかりやすい内容になっており、SEO Japanで紹介している記事がディープすぎるという初心者テスターの方には最適かも。 — SEO Japan


What to Test First, Second, Third

ウェブサイトのテストは、非常に重要度が高い。しかし、どうでもいいことに貴重な労力を投じている人達は多い。ボタンの色を変えたところ、1.2%改善したものの、オファーを手直しすれば、320%改善する可能性もある。 結果を大幅に改善する変更のテストから着手するべきである。

コンバージョンの最適化のことがよく分からないなら、まずはこの記事を読むべき(日本語)だ。

何を最初にテストするべきか?

最初にオファーをテストするべきだ。オファーは、ビジターに与えるモノではなく、ビジターが — 特定の行動を起こすことで(ニュースレターに参加する、製品やサービスを買う、無料トライアルを始める等)ビジターが得られると理解するモノである。

実際に得られるものと、ビジターが得られると考えているものは大きく異なることが多い。オファー、そして、伝えるアプローチが、大きな違いをもたらす。

以下にニュースレターへの参加を呼び掛けるオファーを掲載する:

説得力に溢れる(?)オファーだったのではないだろうか?残念ながら、この手のオファーはとても多い。「Join our FREE newsletter」(無料のニュースレターに参加しましょう)とオファーで言っておきながら、実際にはニュースレターを購読させている。

コールトゥアクションボタンの色を緑やオレンジに変えてテストすることも出来るが、インパクトはとても小さい。オファー「JOIN MY FREE NEWSLETTER」が駄作であることは明白である。

Eメールの購読率をアップさせたいなら、良質なオファーを考案(& 提供)しなければならない。

最高のオファーをいきなり作ることが出来る可能性は非常に低い。必ず2つのオファーを用意し、スプリットテストを行うべきだ。オーディエンスが何を求めているのかを発見することが、主な目的である。オーディエンスの望みとニーズにオファーがマッチしているなら、結果に出るはずだ。

効果の高いオファーを見つけたら、さらに結果を良くする努力をしよう。チャレンジャー(新しいバージョン)を作り、効果の高かったオファーのバージョンと同時にテストにかけ、比較してもらいたい。

あらゆるタイプのコールトゥアクションに同じ原則が当てはまる。

製品を買ってもらいたいなら、お金を払って何を得られるのか明確に伝える必要がある。あるいは、オファーを異なる方法で提示するべきだ。オファーを改善する上で役に立つこの11点のチェックリストを参考にすると良いだろう。

オファーをテストしていこう。コンバージョン率に大きな影響をもたらすはずだ。

二番目に何をテストするべきか?

ヘッドラインと価値提案をテストする

ヘッドラインは、ビジターが最初に目にする要素である。価値提案は、「競合者ではなく、このサイトからなぜ買うべきなのか?」と言う疑問への答えを提示する役目を持つ。

この例を確認してもらいたい:

上の画像では、ヘッドラインは、大きなフォントを用いたテキストであり、その下のテキストの段落、そして、右側の画像が、価値提案を構成する。

消費者は気が短く、ページの最初の一部分しか読んでくれない。ヘッドライン、もしくは、価値提案が、注目を掴むことが出来ない、そして、もっと知りたいと思わせることが出来ないなら、その時点でセールスは見込めない。

上の例では、もっと良いヘッドラインを用意することが出来たはずだ。分かりやすいが、インパクトが薄い。コンバージョンと結果を改善する効果にもっと焦点を絞ると、もっと良いヘッドラインに生まれ変わる気がする — なぜなら、それがサービスを依頼する理由だからだ。

ヘッドライン、または、価値提案が曖昧になっているかどうか(「もっと力をつけましょう」、意味のないものになっているかどうか(ようこそ!)、そして、そもそも、存在するかどうかを確認してもらいたい。

(製品のカテゴリーによっては)大半の顧客は製品を購入する前にリサーチを行い、様々なサイトをチェックする。そのため、オファーだけでなく、ヘッドライン、そして、価値提案を差別化する必要がある。

ウェブデザインサービスを提供する会社にとって、ウェブサイトを作りますと言う価値提案は、稚拙だと言わざるを得ない。なぜなら、全ての競合者が全く同じことをするためだ。しかし、どんなことをするかを告知しているだけの企業はとても多い。これだけでは不十分である。

どのように優れているのか、どのような違いがあるのかを説明しなければならない。ヘッドラインを若干曖昧にすることは不可能ではないが、続いて、明確で具体的な文章を用意する必要がある。

三番目に何をテストするべきか?

大きく、目立つボタン、および、ボタンのコピーをテストする

目立たせるだけ?– その通りだ。効果はあるのか?– 驚くほどある。

アンネ・ホーランドにインタビューした際、次のような話をしてくれた:

私達は、毎年テストアワードを開催しているのですが、今年は、幅が300ピクセルのワイドなボタン(既に割と大きい部類に入ります)を3倍大きくしたサイトに、最優秀テスト賞を送りました。あんなに大きな投稿ボタンは見たことがありません。画面の半分近くを占めていました。しかし、驚くことに、反応率はアップしたのです。

ボタンの色をあれこれと気にするのではなく、サイズにこだわろう。ページの上半分に、大きく、明確な言葉のボタンを掲載しよう。クリックした後に起きることを明確に伝えると、クリックしてもらえる確率は高くなる。

SAP BusinessObjectsは、通常の青いリンクを大きなボタンに変えて、コンバージョン率を32.5%改善することに成功した。この例に習い、主なコールトゥアクションを目立たせ、見つけやすい場所に置き、様々なアイデアをテストしよう。

コンバージョンをアップさせる原則

上述したポイントを考慮する際は、次の原則を常に頭の片隅に置いておこう:

  • 分かりやすさは、説得力に勝る。曖昧なメッセージを避け、具体的に説明するべきだ。また、不必要に大袈裟なメッセージも回避しよう。
  • ユーザーは会社に関心があるのではなく、ユーザー自身、そして、問題に対する解決策を重視している。この点をコピーに反映させよう。
  • 過ぎたるは及ばざるがごとし。邪魔をする可能性のある余分なアイテムは全てそぎ落とすべきだ。 ユーザーをコンバートさせる上で貢献する要素のみを維持しよう。ユーザーを適切な方向に導いてあげるのだ。
  • ユーザーが必要とする情報を全て提供するコピーこそが、最高のコピーである。情報不足によって、セールスの半分が失われる。ユーザーが自分自身を納得することが出来る情報を与える前に、「買ってくれ」と頼むべきではない。

トラフィックが少ない場合

トラフィックが少ないなら、狙いをより十分に絞る必要がある。登録ボタンを黄色にするか、または、オレンジ色にするか等、たいして重要ではない変更に貴重な時間を費やすことは許されない。

Amazonのようなサイトなら、1%コンバージョン率がアップするだけで、利益が大幅に増える。小規模なビジネスにとって、1%の増減は、ほとんど影響がない。1%よりも、100%の改善を目指そう。

テストの結果が妥当かどうかを判断する前に、統計的な有意性を達成する必要があり、トラフィックが少なければ少ないほど、この有意性を得るまでにかかる時間は長くなる。 信頼のおけないデータに基づいてビジネスの決定を下すと、自滅する可能性が高いため、テストをスピードアップすることは出来ない。

トラフィックが少ないなら、多変量テストを避け、スプリットテストにこだわろう — 遥かに早く最終的な回答を得られるためだ。

MarketingExperimentsは、良い例を紹介している: 3000/月のビジターを獲得し、過去のコンバージョン率が7%の場合、6つの組み合わせ(2の支払いのデザイン x 3つのカートのデザイン)をテストすると、妥当な結果が得られるまで、最長で3年間を要することもあり得る。

最後のアドバイス

  1. 一度に1ページずつ最適化しよう。コンバージョンに出来るだけ近いページ(製品ページや買い物かごの画面等)を選び、コンバージョンを解決するべきだ。なぜなら、最も利益を増やすポテンシャルが高いからだ。
  2. ウェブサイトが目も当てられないくらいひどいなら — テストしても時間の無駄だ。新しいサイトを作ろう。ちょっと調整するだけでは、見にくいアヒルを白鳥に変えることは出来ない。

この記事は、ConversionXLに掲載された「What to Test First, Second, Third」を翻訳した内容です。

コンバージョン率改善というと、どうしてもボタンの色や写真、コピーなどミクロ的な話が注目されがちですが、最初にテストすべきなのは「オファー」であり、それが最も重要、という点は意識したいですね。テストは多数やっていても、肝心のオファーはそのまま、というテストおたくな方も意外といるのではないでしょうか。初心者もベテランも読みたい記事でした。 — SEO Japan

コンバージョン最適化の予算を上司に承認してもらう方法

今週はコンバージョン祭ウィーク、ということで、LPO関連の記事を多目に配信していきます。A/Bテストを始め、コンバージョン改善への注目度が集まりつつある日本のウェブマーケティング業界ですが、そのために特別な予算を割いて取り組んでいる企業はまだまだ数少ないのが実情ではないでしょうか。そしてそんな状況で常に課題となるのが、上司や会社にコンバージョン最適化の予算を認めてもらうこと。今回はそんな悩めるウェブマーケッターへのアドバイス記事を。 — SEO Japan

How To Sell Conversion Rate Optimization To Your Boss

大きな企業で働いている方が聞いたら「当たり前だ!」と怒られてしまうかもしれないが、コンバージョンの最適化、および、テストに誰もが賛成してくれるわけではない。

理想としては、データドリブンのアプローチ & コンバージョンの最適化を初日から組織に浸透させたいものだ。

しかし、現実は甘くはない。

組織には、エゴ、反対意見、縦割り主義、そして、自分が誤っている可能性がほんの少しでもあると極度に怯えてしまう経営陣が存在する。

縦割りが浸透している企業– つまり、デザイナーはここに集まれ、マーケッターはここで仕事をしろ、ITはこの物置で働け、等の風習が染みついている企業 — の場合、部門をまたいだコンバージョンチームを結成すると言うアイデアを伝えるだけで、笑われてしまう(もしくは、却下されてしまう)。

ConversionXL コンバージョンコースの生徒の中にも、この状況に遭遇し、次の疑問を持った方がいた:

「リサーチ & データドリブンの仮説をテストする試みを承認してもらうには、どうすればいいのだろうか?

コンバージョン率の最適化(CRO)は、理解するには時間、労力、そして、経験が求められる特殊な分野であることを説得する必要がある。そして、自分達で勝手に決めるのではなく、CROを信頼してもらわなければならない。

私の会社では、ウェブデザインやUXは、そこら辺の人がGoogleでちょっと検索を行えばマスターすることが出来ると考える人達がゴロゴロいるが、コンバージョン率の最適化に対しても、全く同じ考えを持っている気がする。」

最適化を実施している会社を探す

これは今まで遭遇したことがない大きな問題であったため、私はTwitterで質問を投げ掛けた:

CROを社内に浸透させる取り組みに関する記事で、大企業で従業員として最適化を担当するスタッフを探しています。ご存知の方いませんか?

この情報提供には、以下の基準を設けていた:

  1. 社員が100名以上在籍する
  2. コンバージョンのテストを頻繁に行っている
  3. 以前、結果を出し、取り組みを拡大する計画を持っている

反響は大きかったものの、時間を割いて、コンバージョンのテストを始める試みを理解する上で支援してくれた会社はたった2社であった。

航空会社にCROを浸透させた経緯

Adria Airways

同じような経験をしたことがある方もいるのではないだろうか?

マーケティング部門は、Eコマースを「担当」していたが、Eコマースの売り上げは芳しくなかった。

マーケティング部門は、自分達のやり方でEコマースを運営しようとしている。ITは聞く耳を持たず、対立は深まるばかりであり、何も対策が行われずに時間ばかりが過ぎていった。

045ff13これは、アドリア航空で、現在、IT & マーケティングディレクターを務めるイズトク・フランコが、社内で「コンバージョン率の最適化」のアイデアが浮かぶ前に直面していた状況であった。

アドリア航空のEコマースのコンバージョン率を改善する方法を見つけ出すため、イズトク・フランコは検索を行い、最終的に私が綴った本「How To Build Websites That Sell: The Scientific Approach To Websites」を発見した。

フランコは、この本、そして、CROの概念をすぐに気に入った。具体的で、計測可能で、結果をベースにしているためだ。

当時、アドリア航空は、単純な公式でEコマースをまとめていた:

ビジター *コンバージョン率 *平均の発注規模 = 収益

当初、社内のスタッフの反応を尋ねたところ、フランコは次の画像を送ってくれた:

Dilbert

「広告キャンペーンは大成功だったよ」
「大成功って、具体的に言うと何?売り上げはどれだけ増えたの?」
「計測してないよ」
「でも、今回のキャンペーンは大きな話題になったよ。翌日Eメールが大量に届いたんだ。」
「何本届いたんだい?」
「6本だよ。でも、トピックは1つだったんだよ。6本で十分多いうちに入るでしょ。」
「6本のうち従業員から届いたメールは何本だった?」
「エンジニアを招待したのはどこのどいつだ!」
「あなたと同じ意見だと思ったんだけどね」

CEOを説得

意外にも、CEOはすんなりと納得してくれた。

イズトク・フランコ曰く、「コンバージョン率の改善はセールスを増やすことを確約した。まず、簡単に得られる利益を与え、テスト中毒になるほど分析をプッシュした」ようだ。

私達はCROが単なる流行りの業界用語ではなく、Eコマースビジネスを運営する手段の一つだと説明した。その後は、雪ダルマ式に展開していった。CEOは、初期の結果、そして、「数字に基づく」構造化されたアプローチに満足し、後押ししてくれた。

幾つか利益を実際に出すことで、インハウスのCROがまぐれ当たりではないことを証明したフランコは、「セールス & コンバージョンを改善する」と言うモットーを掲げ、IT、Eコマース & マーケティングを単一の組織にまとめた。

EコマースをマーケティングとITの焦点として議題に上げることで、組織の焦点を再び明確に示し、一つの目標に統一することで、前途有望な成長(倍増)がもたらされた、とフランコは語っていた。

効果のあった取り組み: 有望な結果を見せた

イズトク・フランコは、CROが組織全体で時間をかけて取り組む価値があることを経営陣に納得してもらうために、小さな利益を探し求めた。また、既得権益を守るための意固地な討論を行うのではなく、実際のデータを用いて、考えを裏付けていった。

Avvoがコンバージョン率の最適化を導入した経緯

Avvo.com

Avvo – 法律分野のディレクトリ、無料の法律アドバイス、弁護士によるQ&Aプラットフォーム – は、製品/マーケットを適合させて、良質な製品を作り、自然に成長していく段階からステップアップしようとしていた。そこで、CROに力を入れるようになった。

2abe228Avvoのセンディ・ウィジャヤは、ページのタイプによって、広告クリックのコンバージョンに違いがある点に気づき、CROを提案した。

例えば、一部のディレクトリページは、アドバイスのページよりも、広告のコンバージョンが高かった。

 

 

Real Estate Lawyers量的なデータによって、この事実が裏付けられただけでなく、質的な根拠によっても説明することが出来た。

法律のアドバイスを求める顧客は、通常、情報を検索し、一方、特定の地域や分野で弁護士を検索する顧客は、取引の検索を行う可能性が高い。

CEOを説得

Avvoは、スタートアップの段階であり、あらゆる手段を用いてトラフィックを増やすことに力を入れていた。しかし、闇雲にトラフィックを増やそうとした結果、実際には、最適化を通じて実現することが可能であったコンバージョンを失ってしまっていた。

関係者全員を味方につける際に大活躍したのは、ページのタイプごとに絞り込んだ既存のコンバージョンのデータであった。

実際にコンバージョン率を目にすることで、デザイン、コンテンツ、そして、最適化への投資のROIを推測することが可能になった。

Landing Pages

 

CROは完全に浸透したため、Avvoは、もっとコンバートさせることが出来ると考えていたランディングページの最適化に取り掛かるようになった。

効果のあった取り組み: ROIに賢く対処した

Avvoは、割と正攻法なやり方で、コンバージョンのテストを採用した。既存のデータを使って、同社は次の分析を行った:

  • 現状
  • 理想
  • 理想に辿り着くための計画
  • 関係者
  • コスト
  • 目標達成時のROI

また、Avvoが、コンバージョンだけではなく、ユーザー体験全体を重視していた点も注目に値する。

複数の部署からスタッフに参加させることで、「正解」が存在しないものの、誰もが成功の当事者意識を持つようになり、Avvoの強さを増す上で貢献した。その結果、適切だと思える場合、仮説をテストするアプローチが浸透していった。

photo「個人的には、コンバージョン率の最適化は、有益なスキルであり、企業は採用するべきだと思う。CROを支援してもらうことで、プロジェクトマネージャーは、ディレクトリページに用いた反復的な手法を、ビジターを魅了し、トラフィックをコンバートさせることを意図した新しいタイプのページに適用することが可能になった。」– シャオハン・ザン SEO/CRO @ Avvo

エキスパートの意見

CROに対する支持を社内で得る点に関して、エージェンシー、とりわけ、もともと社内で経験を積んだことがある人物の意見を聞きたくなった。

アンジー・ショットミュラー — Three Deep Marketingの見解

Angie Schottmuller

「私はITアプリケーションディベロッパーとしてキャリアを始め、その後、オンラインマーケッターに転身した。この2つの職種を経験した結果、コミュニケーションにおけるギャップを認識し、マーケティング部門と技術部門に理解してもらうため、そして、効果的に利用するために、情報をリクエストし、提示する方法を個別に指導することが出来るようになった。

経験上、インハウスのCROは、複数のサイトを運営するオンラインマーケティング部門、あるいは、Eコマース部門から提案されることが多い。また、分析チーム、または、計測チームを持つ会社が、テスト/最適化のストラテジスト、または、ディレクターの役割を導入するケースも増えてきている。

リサーチ & データドリブンの仮説をテストする取り組みを支持してもらうには

主要なスペース、ページのレイアウト、コピー、画像を巡る争いは絶えず行われており、複数の部門で構成されたチームのパフォーマンスとメンバー間の関係に負の影響を与えてしまうことが多い。

CROのコンセプトを導入するには、とりあえずテストすることを提唱して、主観性を除去するアプローチが最も効果が高い。

大半の従業員は、このアプローチを支持し、データを使って判断を下す方針に魅力を感じる。テストを行い、注目に値する結果が出ると、経営陣はすぐに興味を示し、さらにテストを要求する声が必ず上がるようになる。テストの対象は広範にわたるため、次のステップに賢くアプローチする必要がある。

Image-43

画像ソース

次の2つの原則が当てはまることに私は気づいた:

  1. 最適化テストの主な目標が、学ぶことになるように調整する。
  2. 改善における最高の機会を与えてくれる可能性がある学習計画を戦略的に立案する。

私はこの取り組みを実施する全ての方法を完全に伝えている。厳密に言うと、自分達だけで情報を使って、計画を立てることは不可能ではない。しかし、吸収するべき新しい展開は多く、また、あまりのデータの多さに困惑してしまうこともある。自分達だけで試みるよりも、私に尋ねた方が無難なケースもある。

CROの未経験者は、ヒートマップに感心することが多い。しかし、ヒートマップは複雑であり、理解するのは、X線を読むのと同じぐらい難しい。また、視覚要素を見て、色や細部に興味をそそられる人もいるが、その意味を全く理解していない。heatmap-16

知識と見解を分かち合うことで、CROが非常に専門的なスキルである点を分かってもらえるようにしている。CROのエキスパートは、事実上、マーケティングサイエンスのエキスパートだと言えるだろう。

Peep Laja

Peep Laja

ピープ・ラジャがMarkitektのクライアントの仕事を通して得た教訓

まずは、テストを知らないだけなのか、あるいは、テストに対して反対しているのか特定する必要がある。

最適化に苦戦している企業は、2つのタイプのいずれかの問題を抱えている — それが、無知と反対だ。そのため、まずは、どちらの問題に対処するべきなのか特定しなければならない。特定後、正しいアプローチを選択することが出来るようになる。

無知の方が、対策が取りやすい。つまり、CEOをはじめとする経営陣は、最適化に反対しているのではなく、最適化に関する知識がない、もしくは、誤った考えを持っているケースである。

大きな銀行をクライアントに抱える最適化のエキスパートに聞いた話だが、この銀行のCEOは「テスト文化」ではなく、「最適化文化」を浸透させたいと主張していたようだ。

どんな違いがあるのだろうか?CEO曰く、何でもテストするのではなく、最適化を通して、サイトを改善するアプローチが適切だそうだ。これは、無知の典型的な例である。悪気はないのだが、何も分かっていない。

無知が問題なら、教育が解決策となる。 <- ツイートで拡散しよう

このケースでは、CEO、または、マーケティングの責任者を賢い人物(彼らが効く耳を持つ人物 — 部下ではなく、社外のコンサルタントが該当することが多い)、鋭い見解が綴られた本、あるいは、質の高いカンファレンスに接してもらう必要がある。適切な方向に無理やり動かしてでも、最適化を理解するチャンスを与えるべきだ。

格言にもあるように、誰が功績を認められるのか気にしなければ、多くの偉業を成し遂げることが出来るのである。

データと感情面での手腕を組み合わせて反対に対処する

テストに反対する姿勢が問題なら、苦労する。これは難問である。考え方を変えるのは容易ではない。感情的な理由やエゴが絡んでくることが多い。不可能ではなくても、感情的な考え方を変化させるのは至難の技である。

重役から支持を得るためのアドバイスを幾つか提供する:

  • うまくいくことを証明する証拠を見せる。セールスが漏れている最大の穴を見つけ、穴を埋める努力をするべきだ。その際、テストする(理想 — しかし、テストツールを購入する予算が与えられない可能性がある。ただし、Google アナリティクスのウェブテストは無料で利用可能)、もしくは、穴を閉じてくれる可能性がある取り組みを実施することになる。うまくいったら(そして、仮説に対して自信が持てるように多くのデータを集める必要がある)、分かったことを、考案した解決策を、そして、有望な結果を上司に伝えよう。改善されたコンバージョン率ではなく、常に収益が増加した額を示してもらいたい
  • ケーススタディを紹介する。 データを持っていない場合は、コンバージョンの最適化を実施して素晴らしい成果を上げた同様の会社のケーススタディを紹介すると良い。ただし、非現実的な期待をさせて、求めた結果が得られない場合、コンバージョンの取り組みの閉鎖を命じられる可能性があるので、十分に注意してもらいたい。
  • 競合者がCROを実施している点を伝える。経営陣は、競合者に懸念を持っている。競合者がCROを実施している点を証明することが出来れば — Optimizelyのコードがウェブサイトに埋め込まれている、もしくは、プレスリリースでCROが話題に上がっている等 — 大いに役立つ。置き去りにはされたくないはずだ。「競合者は、顧客獲得コストを下げ、コンバージョンを改善しています。このままでは負けてしまいます」と言うセリフは、抜群の効果を発揮する。
  • いつでも正しい判断をする上司を知っているなら、その仮説をテストし、結果を公表する。何がうまくいくのか必ず言い当てる上司がいるなら、上司のアイデアを基にした対策を立て、テストを行い、現在のアイデアと比較しよう。適切にテストを行い、上司の仮説が3-5回連続で外れたら、データで裏付けた仮説の実施を認めるようになるだろう。その際は、堅実な仮説を立てる必要がある。「だから言っただろ」と言うセリフは聞きたくないはずだ。テストすることに同意してもらえない場合は、隠れてテストを実施しよう。その後、上司の意見を採用した結果と証拠を基に確立した仮説の結果を比較すると良い。

駄目な時もある

「社内をブラブラ歩き回って会社を経営する」タイプのCEOもいる。CEOが、最適化に関するミーティングに飛び入り参加し、自分の意見をごり押しする。このタイプのCEOは、自尊心が強く、何が最適なのか常に分かっている(と思っている)。反対すると、解雇につながる、または、聞き流されてしまうだろう。残念ながら、このタイプの上司を持つと、仕事が全く捗らない。 とりわけ、CEOが設立者の場合、会社を去る可能性がないため、大いに苦労する。

このようなケースは珍しくはない。

あるクライアント(年間の売上が3000万ドルのソフトウェア会社)のケースを紹介する。この会社のホームページの直帰率は、とにかくひどかった(85%前後)。そのため、サイトを分析し、(ブランドのガイドラインを参考にして)デザインを変更したところ、あらゆる基準において、現行のホームページを30-40%上回った。大成功だ。

しかし、その頃、この会社は非公開株式会社に買収され、新たなCEOが就任した。このCEOは、新しいホームページのデザインを気に入らなかった。その後、社内のデザイナーに新たにホームページをデザインさせた(会社のガイドラインは全く無視したデザインであった)。そして、私達はいつの間にか解雇されていた。

続いて、年間の売り上げが2億ドルに達する洋服販売サイトのケースを紹介する。この会社を作ったのはCEOであった。ホームページには画像スライダーが掲載されていた。データを見る限り、明らかにこのアイテムは効果を上げていなかった。しかし、CEOの妻がスライダーを気に入っていた。夫婦間の争いを恐れているため、CEOは、スライダーの削除には動かない。つまり、何をしたところで、CEOを動かすことは出来ない。以上。

どうしても分かってもらえない時はどうすればいいのだろうか?

馬鹿を相手にしていると、人生はあっと言う間に終わってしまう。そのスキルを評価しているところで仕事をするべきだ。

結論 — 最初はデータから & 少しづつ

まずは、持っているデータを活用し、従業員がテストに関心を持つように、小さな利益を証明する取り組みを行う点に関しては、意見はほぼ一致していたようだ。小規模なテストを実施し、小さな利益を証明することが出来るなら、社内のCROにさらに投資してもらえるようになる。

最後に読者の方々に問いたい。社内でCROを支持してもらう際に、どんな困難に直面したことがあるだろうか?

実際に、コンバージョンテストを実施することに同意してもらった経験があるなら、各種の部門をまたいで支持を得る上で、どんな取り組みが役に立ったのか教えてもらいたい。


この記事は、How To Sell Conversion Rate Optimization To Your Boss」を翻訳した内容です。

事例が豊富で中々のお役立ち記事でしたね。基本的にはデータで攻めるべきと思いますし、SEOなどに比べてもはるかに論理的に説明しやすいはずなのですが、これまで中々コンバージョン改善が導入されてこなかった背景を見ても、データだけで納得はしても予算承認してもらえるかまでは何とも言えない点があるのも悩ましいですけどね。。。その意味では、日本であれば今後は「コンバージョン改善のイベントで3日で400人以上も人が集まったそうです。今ちゃんと始めないと乗り遅れます!」と煽っていただくのも良いかもしれません・・・? — SEO Japan

ランディングページ最適化/LPOを理解する11ステップ

いよいよ今週末、コンバージョン祭が開催される、とのことで、今週はコンバージョン最適化に関する記事を多く発信していきたいと思います。まず最初はコンバージョン最適化に関するベストブログの1つといってもいい、ConversionXLからランディングページ最適化の基本を説く記事を。リソース記事なのですが、記事自体にも有益な内容が多く含まれているのが軽く一読を是非。 — SEO Japan

The Landing Page Optimization Guide You Wish You’ve Always Had

今回の投稿では、ランディングページの最適化に応用することが可能な、当サイト — ConversionXL — そして、その他の優れたサイトで見つけたリソースをまとめて紹介する。

最初のクリックから、最後のコンバージョンに至るまで、ランディングページでのビジターの体験をシミュレーションするアイテムをかき集めた。

このガイドを有効的に活用するため、各リソースを、一度にランディングページのUXの一つの領域に絞って、利用することを薦める。このガイドは、次に何をテストするべきか迷っている際に、絶対に役に立つ。

まずは、このページをブックマークして、新たにランディングページを作る際に参考にしてもらいたい。

ステップ 0 — ターゲットのマーケットを正確に理解せよ

 

Customer Survey

メソッド: マーケットを把握する必要がある。調査 & インタビューを実行して、顧客が抱えている問題を理解しよう。もう一歩踏み込みたいなら、ビジターがアクセスするウェブサイトをリストアップし、ビジターの「典型的」なUXを視覚的にとらえると良い。

次のような問いを用意すると良いだろう:

  • お客様のことを教えてください — 年齢、仕事、役職等。
  • 弊社の製品を何のためにお使いですか?
  • 製品のおかげで、状況はどのように改善されましたか?
  • 代わりの製品を検討されていますか?その理由を教えてください。

注記: スタートアップの場合は、今後獲得するビジターの共感を得られるような顧客獲得の問いを用意するべきである)。

この類の質問は、マーケット内のトレンドを見つけ出し、分析データだけでは得られない情報を掘り起こすことが出来る。これは、ターゲットのマーケットの期待に一致するランディングページのデザインを手掛けるための取り組みであり、コンバートする際の抵抗を軽減する上で大きな役割を果たす。

ランディングページのデザイン & 最適化において、ビジターのこと、そして、ビジターのウェブの利用レベルを理解していない状況は、致命的である。

Ask MetaFilter

例えば、FacebookとMetafilterをたまにチェックする、5人の子供も持つ54歳の母親が「魅力を感じる」ものと、Google Glassを装着し、聞いたこともないようなソーシャルネットワークを頻繁に利用する27歳の若者が魅了されるものとの間には、大きな違いがある。

hipster-the-coolest-new-underground-social-network-31829-1294853934-16

ランディングページのデザインは、デザインのテクニックを見せびらかす場所ではない。

ビジターとのつながりを持ち、メリットを出来るだけ早く伝える必要がある。自分ではなく、相手が望む通りにこのつながりを受け入れることが出来れば、ページは改善されていく。

参考になる記事:

ステップ 1 — 実用的な分析を設定せよ

 

メソッド: Google アナリティクスでコンバージョンの目標を設定する。

分析について問われたら、私は決まって次のように答える:

「メトリクス(計測基準、目安)は、実用的な見解を与えてくれる。メトリクスを見て、「それなら、どうすればいいのか?」と問い、答えを得る必要がある。」

「サイト上部のAdwordsのコンバージョン率が圧倒的に高いようだ。「それなら、どうすればいいのか?」– Adwordsの予算を増やせばよい」

このように、単純なコンセプトではあるものの、実際には、多くのサイトが「コンバージョン」分析を難解なプロセスと考え、このステップを飛ばして、収益の獲得に進んでしまう。

その考えは捨てて、分析に取り掛かろう。

実用的な分析データを持っていない状態では、結局、資金を無駄に使い、次に行う取り組みを当てずっぽうで推測するしかなくなる。

時間を割き、分析データを理解する方法を習得し、データを有効に活用してもらいたい。すると、マーケティングの予算を有効に活用することが出来るはずだ。

参考になる記事:

ga2

画像ソース

ステップ 2 — 広告のメッセージをランディングページとマッチさせよ

 

scent

画像ソース

メソッド: まずは、セールスを増やしたいランディングページの直帰率をチェックしよう。直帰率が非常に高く、コンバージョン率が低いなら、メッセージのマッチングにおいて問題が起きている可能性がある。

クリックスルー率が最も高いページに向かう広告をチェックしてもらいたい。

そのページは、広告と同様のメッセージを提供しているだろうか?ディスプレイ広告の画像は、ランディングページでも掲載されているだろうか?

この2つの問いに「はい」と答えられないなら、ランディングページはもともと失敗する運命にあったと言わざるを得ない。

その理由を説明しよう。

事実として、広告内のメッセージは、ページ上のメッセージに反映されていないことが多い。

広告の画像は、ランディングページの主要な画像と異なることが多い。広告のヘッドラインが、ランディングページのヘッドラインと一致しない場合、広告をクリックした際に期待したページとは違うページが表示された、とビジターは考える。

ビジターは、ランディングページに到着すると、宙に浮いたような感覚を味わう。注目を掴んだヘッドラインはどこに行ってしまったのか?少なくとも、ページの見やすい場所に、ビジターが検索したキーワードを盛り込んでいるだろうか?

この問いに対する答えが「いいえ」なら、コンバージョンの最適化を十分に行っているとは言い難い。

1つのページを作り、複数の漠然とターゲットを絞った広告を放り込むのではなく、一連のキーワードに固執した、徹底的にターゲットを絞った広告を幾つか作る方が効果は高い。予算に余裕があるなら、動的にキーワードを挿入するプラットフォームを試し、ランディングページに自動的にキーワードを挿入するアプローチを検討しよう。

参考になる記事:

ステップ 3 — ランディングページの第一印象を評価せよ

 

2-emotional-design-how-to-make-things-work-better

メソッド: ランディングページの主なキーワードを検索し、ラバイルが作成したページをクリックする。

と言っても、目的は、ライバルの取り組み(ライバルも理解していないため)をコピーすることではなく、第一印象を把握するためだ。

事実、イメージを特定するまでにかかる時間は、たった0.013秒であり、ビジターがランディングページに関する意見を頭の中でまとめるまでの時間は、たった0.05秒である。

0.013秒から0.05秒の間に無意識のうちに作る評価は、ページに滞在する間に下す決定の全てに影響を与える。

メッセージを緊密にマッチさせる必要があるのは、この第一印象を良くするためだ。また、ある程度、親しみを感じるようなページをデザインするのも、良い第一印象を持ってもらうためだ。

ユーザーが直感で分かるような配置を心掛けているだろうか?製品の写真の質は、ターゲットのオーディエンスが、ウェブを閲覧する際の基準に達しているだろうか?

脳は、ユーザーが感じるよりも早く情報をインプットするため、ページの要素がたとえ少しであっても「外れている」なら、コンバージョンまでの道は険しいと言わざるを得ない。

だからこそ、闇雲に問いに答えなくて済むように、ステップ 0でウェブサイトのリストを作ったのだ。

参考になる記事:

良い第一印象を残すページの例:

First Impression

画像ソース

First Impression 2

画像ソース

First Impression 3

画像ソース

ステップ 4 — 感情面での共感を得られるデザインを実現せよ

 



メソッド: この記事で紹介されている顧客獲得の手法を用いて、理想的なバイヤーペルソナのプロフィールを作成しよう。

このステップでは、ページのビジターの大半が共感する感情面の誘因を特定するための手掛かりを探す。

この試みは、第一印象と密接に関連しているが、両者を混合しないように注意してもらいたい。

全ての要素を見慣れた場所に配置して、第一印象を与えたら、要素を補強し、ムードを作り出して、ビジターを魅了し、ページの奥深くに引き込む — これが感情面での共感に該当する。

喜び、楽しさ、ショック、怖さ、期待感、近寄り難さ、驚き等の感情は、デザインの目的の一部に過ぎない。

ページのムードを選んでから、色、フォント、写真 & 動画を確認していく必要がある。

要素の間のバランスを取り、ランディングページのムードを支えるにはどうすればいいのか、考えてもらいたい。特定の感情を引き込むために、適当に色とフォントを選べばいいわけではない。青と信頼を機械的に結びつけるべきではなく、また、赤が必ずしも怒りを表すわけでもない。

各要素がどのように連動し、補い合うのかが、ページの総合的なムードを特定する決め手となる。

参考になる記事:

  • ウェブサイトに感情を盛り込むには
  • セールスを増やす上で感情は必要なのか?
  • エモーショナルデザイン: 見慣れた物事が好き(嫌い)な理由
  • マーケティング & ブランディングにおける色の心理学
  • Emotional Resonance1

    画像ソース

    6-emotional-design-how-to-make-things-work-better

    ステップ 5 — 明確で説得力のあるバリュープロポジションを作れ

     

    メソッド: バリュープロポジション(提案するメリット/価値)に関して、次の問いを投げ掛けてもらいたい —

    1. 誰が顧客に該当するのか直接特定しているか(Stripe = Payments for developers)

    stripe

    2. 製品の機能を明記しているか(Markitekt = We make websites sell

    markitekt

    3. 他社の製品との違いを伝えているか(Meetingburner = Webinars and Screen Sharing Made Awesome — No instillation required)

    Meeting Burner

    4. 最終的なメリットを提示しているか(Airbnb = Find a place to stay)

    AirBnB

    ページが読み込まれ、第一印象が形成されたら、ビジターは、読む価値があるかどうかを無意識のうちに判断する。

    「戻る」ボタンをクリックしなかった場合、視線追跡調査によると、ビジターは、最も重要なヘッドラインを探す(バリュープロポジション)。

    この時点で、ビジターが唯一判断するのは、「このサイトは、私が必要としているものを提供しているかどうか?」、あるいは、「他の場所を探すべきかどうか?」のみである。既に批判はかわしているため、最初の判断が正しかったことを裏付けるだけで良い。

    バリュープロポジションが、上の全ての問いに答え、当該のページが、探していたページであったかどうかをすぐに判断する上で貢献していると、ページの残りにおいても、注目を維持することが出来る確率は高くなる。

    一方、上の問いへの答えを与えられない場合、コンバージョンは遥かに難しくなってしまう。

    参考になる記事:

    直接関係はないものの読んでもらいたい記事: バイラルなローンチ予告ページの要素とは?

    ステップ 6 — メッセージを補う画像を利用せよ

     

    Soundcloud Homepage

    メソッド: ページのムードを補強し、ターゲットのマーケットに直接語り掛ける画像を選択、デザイン、あるいは、手に入れる。

    上のSoundcloudのページを見てもらいたい。このサイトが10代後半/20代前半の、流行に敏感な音楽好き & サウンドマニアを対象としていることがよく分かる。

    Alexaのデータがこの主張を裏付けている。SoundCloudの主なオーディエンスは:

    • 男性
    • 大学で教育を受けている
    • 学校からサイトにアクセスすることが多い

    Soundcloud.com Site Info

    リファラーのサイトとリンクを張るサイトの上位を見ると、SoundCloudsのコアのオーディエンスが、流行に敏感で、トレンドの最先端を行くタイプであることが分かる。

    ターゲットのマーケットを代表する画像をランディングページに用意する努力をしてもらいたい。しかし、それ以上に、コンバージョン後の製品やサービスの感情面での価値をアピールする必要がある。

    画像は、自然な閲覧パターンを「ハック」して、シンプルな構図のルールに従い、次に見るべき場所を導くために用いることが出来る。

    先程のセクションで、ページが読み込まれた際に、ビジターは、メインのヘッドラインを探す習性があると指摘した。この習性は、実際の人物、または、「人間型ロボット」を投じた瞬間に破棄される。

    eyetracking

    画像ソース

    予算があるなら、視覚要素の作成は、プロと共同で行うべきであり、ストック写真の利用は避けた方が無難だ。

    しかし、自分で画像を用意しなければならないなら、あるいは、ストック写真を使わなければならないなら、Practical E-Commerceが提供するこのチュートリアルに従い、このページにリストアップされているストック写真を活用しよう。

    参考になる記事:

    ウェブの閲覧パターンに影響を与える画像のお手本

    37-signals

    画像ソース

    Ua02c

    画像ソース

    Brian Massey

    画像ソース

    ステップ 7 — エクスプレイナー動画を作成するべきかどうか判断せよ

     

    メソッド: 製品やサービスが、動きのないテキストと画像では伝えることが出来ない、独特な魅力を持っているかどうか考えてみよう。

    ストリーミングサービスのSpotifyにとって、オーディオ/視覚要素を盛り込み、バリュープロポジションに肉付けを行うアプローチは、理にかなっていた。

    一方、シニア世代向けのコミュニティサイト、Brookdaleの場合、動画に固執していたら、10万8000ドルの収益を失っていた

    Brookdale-WithVideo

    スタッツを見ると、動画のおかげでビジターが製品を購入する確率は64-85%増すものの、幾つか考えなければならない点がある。

    ターゲットのマーケットは動画を見るのか?

    顧客候補の現時点での環境によっては、動画がコミュニケーションのメソッドとして最適とは言えない可能性がある。

    例えば、静かなオフィスで働いている場合、あるいは、周りで子供が騒いでいる場合、動画の視聴は禁じられる、もしくは、視聴が難しいかもしれない。

    年齢、インターネットの接続環境が劣悪、もしくは、コンピュータのハードウェアの古さも、ビジターが動画を再生するかどうかに影響を与える。

    エクスプレイナー動画は宣伝祭ではない

    次のフレーズを繰り返して読もう。「オンライン動画はテレビのCMとは異なる」。

    テレビのCMは、注目を掴み、チャンネルを変えさせないことを意図している。

    エクスプレイナー動画では、ビジターはそのチャンネルを既に選択している。もっと見たいから「再生」ボタンを押す。そのため、スタイリッシュな動画を作ってもらいたい。宣伝攻めは薦められない。

    動画はビジターの体験をどのように高めるのか?

    ここで、先程の問いに再び注目してもらいたい — テキストと画像には出来ないものの、動画には出来ることとは何か?

    この問いに答えることが出来ないなら、動画の作成に取り掛かるべきではない。

    Dollar Shave Clubのような会社は、「1ドル/月で剃刀の刃を配送する」と言う、つまらない設定に対して、動画を介して、ユーモアを交えてビジターを魅了している。

    一方、Unbounceは、動画でKissMetricsのグロースハッキングを統括するネモ・チューをクローズアップし、エクスプレイナーと動画証言広告を組み合わせている。

    製品のコアの機能を説明する場面で、Unbounceに対するネモ・チューの熱意が存分に伝わってくる。また、Unbounceによって、2-3倍のグロース(成長)を達成したと示唆しており、「グロース」の職務を担当し、月々の料金を支払う価値を証明しなければならない顧客候補にとって、これ以上ないメッセージを送っている。

    理解しにくい製品を販売しているなら、実際に見せる必要があるなら、あるいは、ターゲットのマーケットが「会得」する上でもうひと押しを必要としているなら、動画の提供を検討する価値はあると言える。

    また、動画に関しては、必ずプロに製作を依頼してもらいたい。(興味があるなら)Startup-Videos.comにアクセスすれば、優れたエクスプレイナー動画のクリエイターを見つけることが出来るだろう。

    参考になる記事:

    素晴らしいエクスプレイナー動画の例:

    ステップ 8 — 社会的証明、オーソリティ、推薦の重要性を理解せよ

     

    examples-social-proof1

    メソッド: ソーシャルメディアの情報収集ダッシュボードを作って、ソーシャルウェブ全体でのブランドの言及を追跡しよう。

    続いて、Open Site Explorerを使って、リンクを張っているサイトの中で、オーソリティの高いサイトを探し出す。

    Coming From Unbounce

    ここから、ターゲットのマーケットに最も近い顧客 & オーソリティの高いサイトとターゲットのマーケットに見られているウェブサイトに接触していく。

    この取り組みは非常に重要度が高い。潜在エゴイズムと呼ばれる心理学的な現象が存在する。要するに、人間は、好きな自分自身が反映されている人物、場所、物事に引き寄せられる。

    レビューやオーソリティサイトにおいて「自分自身」を見出すと、ページを受け入れるようになる。

    image02

    Eメールを送信して、ランディングページの推奨メッセージの隣に画像やロゴを掲載しても良いか尋ねると良い。

    なぜ、このような面倒な作業を実施する必要があるのだろうか?

    あるリサーチによると、推奨意見広告を12%増やしたブランドは、平均で収益が2倍に増えたようだ。

    また、消費者の63%は、製品の評価とレビューを提供するサイトから購入する可能性が高いと示唆している。

    フィルターを幾つか設定し、Eメールを数本送るだけで得られる収益としては、破格だと言える。

    参考になる記事:

    社会的証明のお手本:

    Muck-Rack-Social-Proof

     

    Muckrack.com

    Sprout-Social-Social-Proof

     

    SproutSocial.com

    ステップ 9 — もっと読みたくなるコピーライティングを作成せよ

     

    B2B-Copywriting-Sweet-Spot画像ソース

    メソッド: 4-6名の仲間を集めて、ランディングページのヘッドラインと導入部の相互評価を行う。

    「もっと読みたくなるか?」と問い、感覚的なレベルで1(低)- 4(高)段階で評価しよう。平均のスコアが、3.2を下回るなら、何を変えるべきか具体的な意見を求めるべきだ。このプロセスの詳細に興味がある方は、このページにアクセスしよう。

    ビジターが、ランディングページに到着してから既に0.5秒間が経過しており、視覚要素を処理し、信頼に値するかどうかの判断を行っている。

    この時点で、意識が働き、ランディングページのコピーを消化していく。

    コピーを介してメリットを伝えたいはずだが、ビジターに完全に食いついてもらいたいなら、ランディングページの視覚要素によって確立されたトーンを補強するべきである。ビジターが味わえるように共感を誘おう。

    なぜなら、科学によって証明されているように、感覚を刺激する言葉を用いると、脳の感覚の中枢を活性化させることが出来るためだ。

    ランニングシューズを売りたいなら…

    汗が目にしみる。心臓がバクバクして、グランドを駆ける足音、そして、「ゴールはもうすぐ」と自分自身に呟く声以外何も聞こえない。

    参考になる記事:

    Leo Burnett Quote

    画像ソース

    ステップ 10 — 明確にメッセージを伝えるコールトゥアクションを提供せよ

     

    vimepro

    メソッド: コールトゥアクション(とその周り)が、どんな結果をもたらすのかを明確に伝え、反応を誘発し、サイトの残りと比べて目立っているかどうかを見直そう。

    ランディングページの総合的な体験は、ビジターとの双方向的な大きなストーリーに過ぎないと私は思う。ビジターは、問題を抱え、検索し、クリックし、読み、そして、判断する。

    ストーリーの細部にまで力を入れると、コールトゥアクションは、次の章への単なる入り口となってしまう。しかも、その章にはビジターが抱えていた問題はもう存在しない。

    参考になる記事:

    お手本:

    resumatorlogbook

     

    downloadbutton

    ステップ 11 — A/Bテストを始めよ

     

    three_screens

    image source

    メソッド: コピー、デザイン、画像等に対する代案を文書に全てまとめ、その案がうまくいく可能性がある理由に関して仮説を立てる。

    ランディングページを初めて作成する場合、次の2つのオプションから適切なものを選択すると良い:

    1. 既存のコンバージョン率が低いページに挑むページを1つ作り、テストし、データを集め、テストの終了後に所望する数値を改善する仕組みに関して仮説を立てる。
    2. 同じキーワードをターゲットにする同じぐらい強力な2つのページを作り、どちらも実施し、パフォーマンスを比較し、パフォーマンスの優れていたランディングページを最適化していく。

    どちらのシナリオでも、ターゲットのマーケットに関する仮説を立証する上で十分な量のデータを集め、目的、目標、そして、今後のテストのためのパフォーマンスの目安を策定する試みを行う。

    例:

    目的: 「ソフトウェアを購入してもらう顧客を増やす」

    目標: X(より分かりやすいコピーを挿入)を実施してY(「今すぐ購入」のクリック)を増やし & Z(買い物かごの放棄)を減らす。

    アイデアを文書に残すのは、効果のあったアイデアは何か & 何を増加させたのかを記録するためだ。アイデアの大半は、失敗 & 却下されることになるものの、収益を増やす可能性を持つ良いアイデアを忘れてしまうよりはまだ良い。

    参考になる記事:

    Screen-Shot-2012-10-22-at-15.35.09

    画像ソース

    test2

    画像ソース

    結論

    ビジターのランディングページの体験のほとんどは、1秒以内に発生し、ランディングページの多くがこの体験の誤った面に力を入れている。

    ランディングページを顧客候補の問題を解決するための手段と考え、テキストと画像を脳が処理する仕組みに関する知識を活用すれば、ビジターがさらに情報を欲しくなる「仕掛け」を作ることが出来るようになる。

    そう考えると、ランディングページの最適化は、話す度にストーリーを良くするための一つの手段でしかないと言える。


    この記事は、ConversionXLに掲載された「The Landing Page Optimization Guide You Wish You’ve Always Had」を翻訳した内容です。

    単なるリスト記事に終わっていない、記事自体も読みごたえ十分なのが、流石ConversionXLでした。LPOには長年関わってきた私ですが、改めて気づきがあった気もします。 — SEO Japan

10分で分かるコンバージョン最適化の基本

11月開催のコンバージョン祭に向けて私の意識もコンバージョン最適化モードにつき、関連記事を今後しばらく普段以上に配信していきたいと思っています。今回は、濃い記事を連投する前に、まずは基本を抑えようということで、コンバージョン最適化(ちなみにConversion Rate Optimizationの略でCROとも呼ばれます)を10分で理解できる優しい記事を。 — SEO Japan


What you have to know about conversion optimization

この記事を読めば、懐は温かくなる。コンバージョンの最適化 — 最高のリサーチと実験に基づくメソッド — を学ぶことが出来るためだ。

なぜ、コンバージョンを最適化するべきなのだろうか?オンラインビジネスの売り上げを増やす、最も安価で、最もスピーディーな取り組みだからだ。現在のコンバージョン率が1%(つまり、製品を購入するのはビジターの1%)だと仮定する。この場合、たった2%にアップしただけで、売り上げは倍増する。

コンバージョンの最適化とは、より多くのビジターをカスタマーに変えることを目標に掲げて、ウェブサイトやランディングページを調節する取り組みを指す。コンバージョン率(%)が高ければ高いほど、セールス(登録、購読等)は増える。

コンバージョンの最適化においては、テストが生命線となる。大半の企業は、オンラインのコンバージョン率に不満を抱えている、とEconsultancyは指摘している。コンバージョン率に満足している企業は、不満を持つ企業よりも、平均で約40%多くのテストを実施している。

テストをしない理由

考えられる3つの理由:

  • コンバージョンの最適化自体、または、その方法をよく理解していない。
  • 難し過ぎるイメージがある。
  • 時間がかかり過ぎると感じる。

実際には、それほど難しいわけでも、時間がかかるわけでもない。利益を得るためにビジネスは存在するのであり、コンバージョンの最適化は、そのビジネスがより多くの利益を得る上で貢献する。この取り組みに時間をかける価値がないなら、優先順位をはき違えていると言わざるを得ない。

十分なコンバージョン率とは?

ケースバイケースである。つまり、ビジターに取ってもらいたい行動、製品の価格、ビジターがアクセスしてきた場所等に左右される。

10万名をスパムしても、コンバージョン率は0%になる。一方、数年をかけて関係を構築してきた独自のEメールリストにEメールを送ると、10%以上が顧客になってくれるかもしれない。

購入に対するコンバージョン率は、平均で2%だと考えられているが、この考えにこだわる必要はない。2%以上に達したら、頂上に辿り着いたのであり、これ以上最適化を行わなくても良い、と言うわけではない。現在のコンバージョン率よりも良いコンバージョン率を常に目指すべきである。

注記: サイトに初めてアクセスしたビジターのほとんどは、何も購入しない点を肝に銘じておこう。そのため、すぐに売ろうとする姿勢は望ましくない。その代わりに、戻って来てもらうと言うアイデアを「売る」べきだ。つまり、Eメールリストに登録してもらう、RSSフィードを購読してもらう、Twitterでフォローしてもらう等を要請すると良いだろう。

テストのメソッドについて

ウェブページ(ホームページ、製品ページ、ランディングページ等)の複数のバージョン、あるいは、ページの一部(ヘッドライン、表現、コールトゥアクションボタンの大きさ、Eメールアドレスを入力する欄の場所等)の複数のバージョンを作成し、コンバージョン率が高いバージョン — 取ってもらいたい行動をより多くのビジターが取ってくれるバージョンを特定しよう。

ビジターは予想外の行動を取ることがある。だからこそ、テストを実施する必要があるのだ。また、自分自身は顧客ではなく、顧客が自分と同じようにサイトを利用すると考えると、恐らく、迷走することになるだろう。

テストしなければ、何がうまくいくのか分からない。

A/B テスト

テストの方法は2つある。A/Bテスト(スプリットテスト)では、ページのバージョンを2つ作る(ページ Aとページ B)。トラフィックの50%にはページ Aを、そして、残りの50%にはページ Bを提供する。この振り分けは、ソフトウェアが自動的に行う(この記事の最後でソフトウェアを紹介する)。

ユーザーがページ Aにアクセスすると、コンピュータにクッキーが保存され、再びページにアクセスすると、バージョン Aが必ず表示される。この仕組みにより、ビジターは、サイトのオーナーがテストを実施していることには気づかない。

技術的には、A/B/C/Dテストを実施することも可能だが、同時にテストするバージョンが増えると、ベストなバージョンを特定する時間が長くかかってしまう。統計的な有意性が必要とされるためだ。Excelの有意性計算機のスプレッドシ-トを使うと良いだろう。

Googleは、少なくとも100回コンバートしてから、ベストなバージョンを決める方針を薦めている。この目安に関しては賛否両論があり、個人的には25回のコンバートで勝者を見極めることが出来ると考えている(コンバージョン率を正確に割り出すには、もう少し時間が必要)。

各ページに対して2ページ以上をテストするなら、勝者を特定するまでにかかる時間は、遥かに長くなる。テストのスピードは重要であり、CとDは避けた方が無難だ。

多変量テスト

多変量テストは、同時に2つ以上の組み合わせ、そして、異なる組み合わせの組み合わせをテストすることが出来る。少しややこしいので、詳しく説明させてもらいたい。

ヘッドラインの2つのバージョン、コールトゥアクションボタンのテキストの2つのバージョン、そして、3つの異なる画像を同時にテストする状況をイメージしてもらいたい(上の画像を参照)。

この状況では、勝者の組み合わせは:

  • ヘッドライン 1、ボタン 2、画像 1
  • ヘッドライン 2、ボタン 1、画像 3
  • ヘッドライン 1、ボタン 1、画像 2

等々、様々な可能性が考えられ、勝者の組み合わせを特定するには、大量のトラフィックが必要になる。

そのため、大量のトラフィックが寄せられている場合のみ、多変量テストを行うべきである。トラフィックの少ないあまり多くないウェブサイトは、A/Bテストに固執するべきだ。

このコンバージョン最適化のレポートによると、コンバージョンに対して体系的なアプローチを持つ企業は、持たない企業と比べて、セールスが大幅に増える確率が2倍高いと見られている。そのため、闇雲にテストを行うのではなく、「体系的なアプローチ」を策定してもらいたい。

それでは、コンバージョンの最適化に利用可することが能なフレームワークを幾つか見ていこう。

RedEyeによる体系的なアプローチ

(上述したコンバージョンに関する調査を行った)RedEyeとEconsultancyが提唱する体系的なアプローチに関するレポートによると、RedEyeとEconsultancyが推奨するアプローチは、4ステップのループを採用する(計測-分析-テスト-最適化):

画像: RedEye

  1. 計測 計測することが可能なものしか改善することは出来ないため、何もかも計測するべきだ。ビジネスの目標を明確にして、競合者の基準を確認してアイデアを集め、ウェブ分析のデータを検証し、顧客調査を実施し、サイト上の検索行動を分析しよう。
  2. 分析 目標を把握したら、効果のあるもの、効果のないもの、そして、その理由を解明していく。関連性と明瞭度に対して、コンテンツの分析を実施し、ユーザーのニーズにマッチしているかどうかを確かめ、ユーザビリティテストを実行して、ユーザーパス/ジャーニーを解析しよう。
  3. テスト コンバージョンを改善する上で、A/Bテストと多変量テストは特に効果が高い。潜在的な価値とコストを考慮して、テストの優先順位をつけると良い。
  4. 最適化 テストを実施したら、効果の高かったデザインとコンテンツの変更をサイトに実装しよう。

Invespが薦めるコンバージョンのフレームワーク

Invespは、コンバージョンのフレームワークの中で、8つの原則を提唱している。

  1. バイヤーのペルソナを構築する。レイアウトのデザイン、コピーの作成等を行う際は、厳選した少数のペルソナに焦点を絞る。
  2. ユーザーに信頼してもらう。あらゆる信頼の要素を用いて、信頼してもらおう。
  3. エンゲージメントを強化する。ビジターにより長くサイトに留まってもらう、再び戻って来てもらう、ブックマークしてもらう、他の人達に紹介してもらう。
  4. 購入の段階のインパクトを理解する。誰もが初回の訪問で製品を購入するわけではなく、適切なセールスファンネルを構築し、代わりにリードを手に入れ、後に購入してもらおう。
  5. 恐怖、不安、疑念(FUD)に対応する。ユーザーの不安、躊躇、疑念を解決しよう。
  6. 懸念を和らげる。FUDに対応し、抵抗を和らげる上で、インセンティブが役に立つ。
  7. テストを何度も行う
  8. 繰り返す。小さなブロックを積み立て、小さな変更を加えたら、テストを行い、パフォーマンスを改善していこう。

C = 4m + 3v + 2(i-f)- 2a

これは物理学の講義ではなく、Marketing Experimentsが作ったコンバージョンの公式である。

幸いにも、上の公式を解く必要はなく、紙に書いて見えるところに貼っておけば良い(印刷して、パーティションオフィスの壁に貼り付けておこう)。それぞれのアルファベットの意味を説明していく:

C = コンバートする確率

m = ユーザーのモチベーション(When)

v = 価値提案の分かりやすさ(Why)

i = 行動を起こすインセンティブ

f = プロセスの抵抗を構成する要素

a = 情報を入力する行為に対する不安

つまり、コンバートする確率は、オファーとビジターの動機 + 価値提案の分かりやすさ + (今すぐに行動を起こすインセンティブ – 抵抗) – 不安によって決まる。アルファベットの隣の数字は、重要度を表す。

抵抗は、セールスや登録プロセスの所定の要素に対する心理的な抵抗を指す。不安は、セールスや登録プロセスの所定の要素によって促される心理的な懸念を意味する。この懸念を出来るだけ減らし、ユーザーの動機とインセンティブを高め、そして、価値提案を明確化しよう。

LIFT

WiderFunnelが考案したLIFTは、ランディングページを分析するフレームワークとして注目する価値がある:

このフレームワークは、バリュープロポジション(価値、メリットの提案)を、コンバージョン率のポテンシャルを与える輸送手段としてイメージする。LIFTでは、価値の提案が全ての土台となる。関連性と分かりやすさが、コンバージョンをアップさせ、不安と障害物はコンバージョンをリセットする。すぐに行動を取ってもらう上でキーとされているのが、緊急性である。

テストを成功に導く要素

テストによって効果は異なる。コンバージョンテストを成功させる上で重要なポイントを挙げていく:

  • 仮説を立てる。アイデアが実際にうまくいくかどうかを証明するためではなく、うまくいくかどうかを評価するためにテストを実施する。
  • 別のバージョンを別の時期に見せるテストを行っても(1週目にデザイン Aを見せて、翌週にデザイン Bを見せる)、正確な結果は得られない。
  • 失敗を恐れるな。テスト & 最適化において、失敗は、まさしく成功の元となる。醜く、ひどいデザインが、美しいデザインよりもコンバートする状況に私は何度も遭遇したことがある。
  • トラフィックが少ないなら、一度に多くのバリエーションをテストするべきではない。また、A/Bテストを行う際は、一度に一つの変更に限定するべきである — さもなければ、効果の高いバリエーションを判断することが出来なくなる。
  • 短期間でテストを終わらせるべきではない。統計的に見て有意な値が出るまでは、テストを継続しよう。
  • 「控え目な調整」を避ける ? つまり、大きな効果が表れない可能性が高い変更を加えるべきではない(後ほど詳しく説明する)。
  • テストを終わらせるべきではない。何をテストするか決断し、テストを実行し、変更を加え、再びテストしよう。

テストするべき重要な変更

全ての変更をテストすることも可能だが、80%の違いをもたらす20%をテストするべきである。

それでは、それぞれの領域を別々に検証していく。併せて、参考になる、最近行われた実験を幾つか紹介する。

価値提案

価値提案(バリュープロポジション)は、顧客候補が製品を購入する主な理由である。

(価値提案の策定に苦労しているなら、このワークシート(pdf)を参考にして、効果的に価値/メリットを伝える努力をしてもらいたい)。

次の画像で、価値提案を探してみよう。

見つからなかったのではないだろうか?このページのように、最初に会社名を記し、次に「最高品質」等の誇張した表現を並べたところで、説得力はない。

次のページで価値提案を確認してみよう。

このイメチェンを行ったバージョンは、コンバージョン率を145%アップさせた。

Marketing Experimentsは、まずはPPC広告を介して価値提案を試し、その後、ランディングページで効果の高かったバージョンをテストするアプローチを推奨している:

画像: Marketing Experiments

ヘッドライン

「平均で、本文よりも、ヘッドラインを読む人は5倍多い。ヘッドラインで製品のアピールに失敗すると、投じた資金の90%をどぶに捨てることになる。読者にメリットを約束するヘッドラインは、成功する確率が一番高い。」

– デビッド・オグルビ 広告王

良質なヘッドラインは、大きな効果をもたらす。ヘッドラインの表現を変えるだけで、コンバージョン率が127%も上がれば笑いが止まらなくなる。

ヘッドラインは、ウェブサイトやランディングページで、最初にビジターが見て、読む部分である。自己紹介の滑り出しであり、「ようこそ!」と言った時点で、そっぽを向かれてしまう。

ビジターが、有料広告を通じてランディングページにアクセスしているなら、ヘッドラインは広告のメッセージをより磐石なものとする必要がある — この説得の契機を活かそう。

記事のヘッドラインやEメールの件名をスプリットテストにかける際は、65文字の原則を忘れないでもらいたい。Googleは、検索結果に最大で65文字までしか表示せず、Gmail等のメールクライアントは、長い件名を省略する。また、Twitterでは、ヘッドラインが長過ぎると、他に何も書けなくなってしまう。

CityCliq: コンバージョン率を88.9%改善することに成功

 

右のヘッドラインの方が効果が高いことが判明した。

オファー

古いマーケティングの格言にあるように、混乱すると、必ず「No」と言う答えが返ってくる。

オファーとは、ビジターに提示する取引(売買等)を指す。明確且つ簡潔にまとめれば、ビジターは、何を提案しているのか悩む必要はなくなる。

ただし、オファーは「コールトゥアクション」ではないので注意しよう。コールトゥアクションに関しては、後程説明する。

コールトゥアクションボタン

コールトゥアクションボタンにおいて、特に重要なのは、見やすく、上半分に配置され、そして、理想としては1つのページに1つのみを与えることだ。選択肢の数が多いと、決断が難しくなる

人間の注目する時間は限られている。「投稿する」と記されたボタンが、実際にどんな結果をもたらすのか、考えなければ分からない状態は好ましくない。テストの結果を見る限り、「投稿」と言う言葉を使わないボタンの方がコンバートしやすい。「考えさせるな」と言った、ユーザビリティのエキスパート、スティーブ・クラグは正しかった。

反対に、「無料」は魔法のような言葉である。例えば、Firefoxは、「Try Firefox 3」(Firefox 3を試す)から「Download Now – Free」(今すぐ無料でダウンロード)にボタンのテキストを変えたところ、コンバージョン率が3.6%改善された(500回以上ダウンロードの回数に差が出た)。

ボタンの色は影響を及ぼすのだろうか?最近、大きなオレンジ色のボタンを利用するサイトが多い(Amazonを筆頭に)。しかし、その他にも効果的な色はある。このテストでは、赤が緑に勝ち、コンバージョン率は21%高かった(オレンジ色のテストは行われなかった):



画像: Hubspot

通常、大きなボタンは、小さなボタンよりもコンバートしやすい。Hubspotは、幅225ピクセル、高さ45ピクセルが理想的なサイズであったと指摘している。

また、「リセット」欄を用意する必要はない。フォームを埋めていき、最後にリセットするような人はない。万が一いても、再び入力をやり直す気にはならないはずだ。

抵抗

購入を要請する度に、抵抗が生じる。抵抗を軽減すると、反対に、投じた労力に対する見返りは増える。

抵抗は、次の2つの要素によって生じる:

長さ: 妥当と思われる以上の時間や情報を求めるフォームやプロセスによって生じる疲れ、苛立ち、または、ストレス。

&

難しさ: ユーザビリティの質が低い(答えが分からない問いを投げかける、製品の情報が不十分等)。

信頼の欠如も抵抗を生む — 信用、または、信頼することが出来ない状態では、ビジターはコンバートしない。

MarketingExperimentsは、次のケーススタディを紹介している。このオリジナルのページには、3つのコールトゥアクションが掲載されていた:

これが解決策だ:

最適化したフォームは、選択を1つに限定し、そして、コールトゥアクションには「Confirmation」(確定する)と言うシンプルな表現を用いて、難しさから生じる抵抗を軽減している。

オファーの価格をランディングページに掲載(さらに、注文プロセスのページを1つ削除)し、注文フォームでの決断の難しさによって生じる抵抗を軽減することで、無料のトライアル-登録のコンバージョンは65%アップした。

もう1点例を挙げる:

レイアウトを介して、単純に入力欄の数を減らし、さらに、ページの長さを大幅に短くすることで、全体的なコンバージョン率は77%増加した。

抵抗を減らす効果のあるアイデアを幾つか挙げていく:

  • 推奨広告/顧客によるレビュー
  • 過去の顧客のケーススタディ
  • メディアでの言及やレビュー等、第三者による紹介
  • 会社の連絡先情報、従業員の写真、経歴を見やすい場所に掲載する
  • サイトが安全であり、個人のデータを慎重に取り扱うことを裏付ける信頼の証
  • 短いフォーム(入力欄を加える際は、「売り上げを減少させても得る価値のある情報」かどうか考えてもらいたい」)
  • 分かりやすさ: ユーザーが何を得るのか、そのためには何をするべきかに焦点を絞る
  • 障害物の除去: オファーのページには、ユーザーをコンバートするもの以外は掲載しない
  • ターゲットのオーディエンスが良く知っている言葉を使う — 専門用語や社内の用語の利用は避ける
  • 保証: 90日間のリスクのないトライアル、100%返金保証、100%満足保証等、購入に保証を提案する
  • 美しいデザイン: 見た目の美しいウェブサイトは、信頼、そして、プロ意識を感じさせる
残念ながら、抵抗を完全に除去することは出来ない — これは販売において自然である。何かを買ってもらいたいなら、最終的にクレジットカードの番号、住所等の情報を求めなければならない。

Stanford Persuasive Technology Labのウェブ信頼性ガイドラインには、絶対に目を通しておこう。

価格

適切な価格は、コンバージョンの改善に大きく貢献する。価格の実験に関する記事を参考にしてもらいたい。

大幅な変更

1つの要素をテストするアプローチを超え、完全に新しく、異なるバージョンをテストすることも可能だ。

参考例(詳しい情報を知りたくなったら、それぞれのリンクをクリックしよう):

SEOMoz: 52% improvement in sales and $1 million dollars increase in revenue

画像: Conversion Rate Experts

SEOMozの取り組み:

  • ストーリーを伝えられる長さのウェブページを作成した
  • ヘッドラインに、あからさまな「買って」系の用語ではなく、好奇心をそそる言葉を使った
  • 各レベル(契約プラン)で顧客が得られるものを正確に説明した
  • 顧客が気にしているものの、SEOMozは当たり前だと思っていたことを説明した
  • 動画を使ってメッセージを補った
  • 無料の購読者に、30日間のフル機能付きメンバーシップを1ドルで提案し、リスクを軽減した

Highrise: 2点の大幅な変更が、それぞれ、37.5% & 102.5%コンバージョン率を改善した

画像: 37Signals

Highriseが得た教訓:

  • テストする必要性を改めて実感した — 長いフォームのページを用いたところ、元のバージョンと比べて、登録者が37.5%増加した。人物をクローズアップしたデザインは、元のバージョンよりもコンバージョン率が高かった。さらに、人物を強調したページの下に情報を加えたところ、コンバージョンは下がってしまった
  • 笑顔の顧客の写真は効果が高い(ただし、どの人物の写真を選ぶかはあまり重要ではない)

Performance Based Designの本: ランディングページのコンバージョン率を131.2%改善



 

Performance Based Designが得た教訓:

  • 適切なコピーを介して、ビジターにサイトを利用してもらうと、登録が100%以上改善された
  • 考え過ぎることもある。慎重に「デザインされた」ランディングページよりも、急ごしらえのランディングページの方が、コンバージョンが倍以上高かった。

コンバージョンの最適化に役立つツール

とても多くのツールが提供されており、WhichTestWon.comは39点のツールをリストアップしている。今回は、大企業向けの高額なツールは弾き、使いやすく、財布にやさしい個人的に好きなツールを幾つか紹介していく。

  • Google Website Optimizer(GWO)– GWOの一番の魅力は、何と言っても無料で利用することが出来る点だ。Google Website Optimizerを使えば、大抵のテストは実行することが出来る。しかし、ある程度の技術は要求される。Googleは、便利な動画のチュートリアルを用意しているものの、若干古く、また、音の品質は、はっきり言ってひどい。
  • Visual Website Optimizer(VWO)とOptimizely — 起業家向けの良質なサービスであり、どちらも使いやすい。VWOは49ドル(0.0049ドル/ビジター)~、Optimizelyは19ドル(0.0095ドル/ビジター)~で利用することが出来る。両社を比較したいなら、この記事を読もう。
  • ConversionDoublerも同じ分野に属するようだが、私自身は利用したことはない。
  • Zentesterは、無期限の無料のプランを用意しているが、テストの結果は公開されてしまう。
  • MaxA/Bは、A/Bテスト用のWordPressのプラグインであり、使いやすい。過去に何度か問題が生じたことがあるが、基本的に、十分に役割を果たしてくれる。

他のサイトのケーススタディが自分のサイトにも当てはまるとは限らない

別のサイトでうまくいったことが、自分のサイトでも同じようにうまくいくとは限らない。例えば、コールトゥアクションのサイズを小さくして、切迫感を醸し出すアイテムを削除したものの、コンバージョン率がアップしたケースもある。

ウェブサイト、そして、ユーザーは千差万別であり、ユーザーを理解し、最も適切な方法で狙いを絞ることが肝要だ。ビジターは、コンバートする前に、様々なアクティビティの影響を受ける — ウェブサイトのコンテンツ、ウェブサイトのユーザビリティ、そして、オフライン/オンラインの広告は、消費者が購入するかどうかの決定を行う上でインパクトをもたらす。

ケーススタディの良質なコレクション

コンバージョンの最適化に関するケーススタディの良質なリソースを幾つか紹介しておこう。

  • WhichTestWonは、A/Bテストおよび多変量テストのケーススタディを他のどのサイトよりも多く持っていると主張する(この記事を作成している時点で164点)。有料版では、詳しい情報を見ることが出来る。
  • MarketingExperimentsのブログは多数のケーススタディを提供している。中にはケーススタディとは呼べないものもあるが、大半はケーススタディである。
  • Visual Website Optimizerは、ケーススタディのユーザーフレンドリーなデータベースを用意している。無料で見ることが出来る。
  • ABtests.comは、あらゆるタイプのテストのケーススタディを提供している。自分のサイトで行ったテストの結果をアップロードすることも出来る。
  • WiderFunnelもケーススタディを提供している。現時点で、約30点のケーススタディを確認することが可能だ。

コンバージョンのテストを経験したことがあるなら、コメント欄で発表してもらいたい。


この記事は、ConversionXLに掲載された「What you have to know about conversion optimization」を翻訳した内容です。

10分で読み切れるかもしれませんが、初心者がしっかりと理解するには、それ以上に時間をかける必要がありそうですね。とはいえ、基本がほぼまとまった良い記事だと思います。途中のフレームワークでいきなり難しそうな雰囲気が出てしまいましたが、フレームワーク自体は追々ここで紹介されているようなものを参考に独自のやり方を作っていけばよいと思いますし、まずはテストあるのみ。ツールも多数紹介されていましたが、日本ならもちろんDLPOがおススメです?! — SEO Japan

ウェブデザインの8つの法則

ありがちなリスト記事タイトルですが、筆者がコンバージョン最適化のプロだけに、様々な法則を元にウェブデザインの効果的な手法を説いたユニークなアプローチかつ有益な内容の記事です。 — SEO Japan


8 Effective Web Design Principles You Should Know

ウェブサイトのデザインは、コンバージョンにとって、思っている以上に重要である。世界中のありとあらゆるコンバージョンを改善する手法を実行することは可能だが、サイトのデザインが劣悪なら、大した効果は期待できない。

デザインには、デザイナーではなくても対応することが可能だ。デザインはマーケティングでもある。デザインは製品であり、製品のメカニズムでもある。デザインのことを学べば学ぶほど、結果は良くなる一方だ。

そこで今回は、知ってもらいたい、そして、従ってもらいたい8つの効果的なウェブデザインの鉄則を紹介していく。

効果的なウェブデザインの鉄則 #1: 視覚階層

きしる車輪にはオイルが、そして、目立つ視覚要素には注目が注がれる。視覚階層は、良質なウェブデザインを支える要素の中でも、特に重要度が高い。視覚階層とは、人間の目が、対象物を把握する順番を指す。

練習問題 以下の円を重要度の高い順に並べよ:

この円のことを何も知らない状態でも、容易に順位をつけることが出来るはずだ。これが視覚階層だ。

ウェブサイトのパーツには、重要度に差があり(フォーム、コールトゥアクション、提案のコピー等)、重要度の低いパーツよりも、高いパーツにより多くの注目を集めたいはずである。ウェブサイトのメニューに10点のアイテムを用意しているなら、重要度は全て同じだろうか?どのアイテムをクリックしてもらいたいだろうか?重要なリンクをより目立つ位置に配置しよう。

階層と言っても、大きさだけではない。例えば、Amazonでは、コールトゥアクションボタンの「カートに入れる」を色を使って、目立たせている:

まずは事業の目的を考慮する

事業の目的に応じて、ウェブサイト上の要素の順位をつけていこう。具体的な目標がない場合、何を優先すれば良いのか分からない。

例を挙げて説明しよう。以下に、Williams Sonomaのウェブサイトのスクリーンショットを掲載する。同社は、アウトドア用の調理器具を販売している。

最も注目を集めるのは巨大な肉の塊であり(食べたくなる)、さらに、ヘッドライン(製品の説明)、そして、コールトゥアクションボタン(購入を薦める)が続く。4番目は、ヘッドラインの下にあるテキストの段落であり、5番目は、FREE SHIPPING(無料配送)のバナー、そして、最後に上部のナビゲーションが続く。これは、良く出来た視覚階層だと言えるだろう。

練習問題 インターネットを適当に移動し、視覚階層のランク付けを意識的に行おう。続いて、自分のウェブサイトを見る。重要度は高いものの、階層で高い順位に反映されていない要素を探してもらいたい(ビジターが求めていると思われる重要な情報)。見つけたら、変更する。

視覚階層の詳細

効果的なウェブデザインの鉄則 #2: 黄金律

見た目が美しくなる(と言われている)バランスの黄金律は、1.618 (varphi)である。

また、フィボナッチ数と呼ばれる、2つの項の和で次の項が決まる法則もある(0、1、1、2、3、5、8、13、21…)。この2つの法則は、全く関係がないように見えるものの、同じ数字を導き出す。

以下に、黄金律を表現したイラストを掲載する:

大勢の芸術家や建築家は、黄金律に作品を合わせている。古代ギリシャのパンテノン神殿が良い例だ:

ウェブデザインにも活用することは出来るだろうか?Twitterのスクリーンショットを見てもらいたい:

画像ソース

以下にTwitterのクリエイティブディレクターを務める@stopのコメントを挙げる:

#NewTwitterのバランスに興味を持っている方にとっておきの情報をお伝えしよう。実は、このバランスには意図がある。

もちろん、最も狭いUIにしか当てはまらない。ブラウザのウィンドウの幅が広いなら、詳細のウィンドウは拡大し、利便性は上がるものの、バランスは崩れる。比率に関して、最も幅の狭いウィンドウに、Twitterの原点が存在する。

幅が960pxあるなら、1.618で割る(593px)。すると、コンテンツの領域には、593px、そして、サイドバーの領域には、367pxを割り当てることになる。ウェブサイトの高さが760pxなら、470pxと290xに区切ることが可能だ(760/1.618=~470)。

参考になる記事

効果的なウェブデザインの鉄則 #3: ヒックの法則

ヒックの法則は、選択肢を増やすと、それだけ意思を決定する時間が長くなると指摘する。

レストランで何度もこの法則を経験しているはずだ。メニューにあまりに多くの選択肢が用意されていると、選ぶのに困る。2つしか選択肢がないなら、決定までにかかる時間は遥かに短くなる。選択肢の矛盾 — 選択肢を増やすと、何も選択しない確率が高くなる理論 — に似ている。

ウェブサイトを利用する際に、選択肢が多いと、使いにくくなる(あるいは、全く使ってもらえなくなる)。そのため、より楽しいUXを提供するため、選択肢を少なくする必要がある。ウェブデザインを改善する上で、気を散らす選択肢の削除は、継続的に実施しなければならない。

無限に選択肢が存在する現代においては、優れたフィルターが必要になる。大量の製品を販売しているなら、優れたフィルターを加えて、簡単に決定を下すことが出来る環境を作ろう。

Wine Libraryは、多種多様なワインを販売しているが、質の高いフィルターを提供している(左側):

ヒックの法則の詳細

効果的なウェブデザインの鉄則 #4: フィットの法則

フィットの法則は、ターゲットの領域(ボタンのクリック)に到達するまでに必要な時間 は、ターゲットまでの距離とターゲットの大きさに左右されると指摘している。要するに、ターゲットが大きければ大きいほど、近ければ近いほど、使いやすくなる。

Spotifyは、他のボタンよりも「再生」ボタンをクリックしやすくしている:

また、(フルスクリーンのデスクトップアプリ)では、左下の角 — 角は最もアクセスしやすい場所であり、一番価値が高いスペースと言われている — にこのボタンを配置している。しかし、ウェブデザインには、(スクロール、そして、OSの仕組みによって)この法則を当てはめることは出来ない。

大きければ、必ず良いと言うわけでもない。スクリーンの半分を占めるほど大きなボタンは、適切とは言い難く、そんなことは数式がなくても分かる。いずれにせよ、フィットの法則は、対数であり、オブジェクトの使いやすさは、直線ではなく、曲線上に伸びていくことに変わりはない。

要するに、極小のボタンを20%大きくすれば、クリックしやすくなるが、極大のボタンを20%大きくしても、同じような使いやすさのメリットを得られるわけではない。

これはターゲットサイズの法則に似ている。

ボタンのサイズを、推測される利用の頻度に比例させるべきである。そこで、スタッツをチェックして、最も利用される回数が多いボタンを特定し、人気の高いボタンを大きくすると良いだろう(クリックしやすくする)。

ビジターに記入してもらいたいフォームがあるとする。フォームの一番下には、「Submit」(投稿)ボタンと「Reset」(リセット)ボタンを用意した。

「Submit」ボタンをクリックしたいビジターが圧倒的に多いはずであり、従って「Reset」ボタンよりも大きくするべきである。

フィットの法則の詳細

効果的なウェブデザインの鉄則 #5: 三分割法

デザインに画像を利用するアプローチは、有効だ。視覚的な要素は、テキストよりも遥かに迅速にアイデアを伝えることが出来る。

良質な画像は三分割法を採用している: 2本の横線と2本の縦線でスペースを同じ9つの大きさに区切って考え、重要な構成要素を線、もしくは、線が交差する点に配置する手法である。

それでは、左側の写真よりも、右側の写真に関心を引かれる理由を考えてみよう。これが、三分割法の実例だ。

画像: Wikimedia Commons

美しく、大きな画像は、そのままでもデザインにプラスに働くものの(Pinterestの人気は高まる一方だが)、三分割法に従えば、さらに興味深い画像になり、ウェブサイトの魅力をアップすることが出来るようになる。

効果的なウェブデザインの鉄則 #6: ゲシュタルトの法則

ゲシュタルト心理学は、心と脳に関する理論である。ゲシュタルトの論理では、基本的に、人間は、物体を見ると、個別のパーツを把握する前に、物体の全体を理解する。

次の画像を見れば、私が言おうとしていることが、分かってもらえるのではないだろうか:

犬を構成する黒いスポットに注目することなく、犬がいることに気づくはずだ。

このように、細かい部分を見る前に、人間は、全体像を見る。つまり、ウェブサイト全体を最初に見てから、ヘッダー、メニュー、フッター等を識別していく。ゲシュタルト心理学の提唱者の一人、クルト・コフカは、全体は、パーツとは独立して存在すると主張している。

ビジターがアイテムを把握する仕組みを推測する上で役に立つ、8つの所謂ゲシュタルトデザインの法則が存在するので紹介していく:

1. 近接

人間は、近くにあるモノを一つのグループにまとめる傾向がある。すると、このグループは単一のモノとして認識される。

効果的なウェブデザインを実現するためには、関係のないアイテムが、一つのグループとして認識されないように注意しなければならない。同じように、特定のデザインの要素をまとめて(ナビゲーションメニュー、フッター等)、全体を形成している点を伝える必要がある。

Craigslistは、この法則を用いて、「for sale」に該当するサブカテゴリーがどれだか分かりやすくしている:

 

2. 類似

人間は、同じ様なモノを一つにまとめる。類似は、形、色、陰等の特徴において発生する。

下の画像では、黒い点を一つのグループに、白い点を別のグループにまとめる。なぜなら、黒い点は、お互いに似ているためだ。

Codeschoolは、推奨メッセージを掲載する欄を同じようにデザインしており、ビジターは、全ての推奨メッセージを一つのグループとして見る:

3. 閉合

人間は完璧を求める。物体に穴が開いていると、物体の一部が欠けていると、そのギャップを埋めようとする。次の画像を見ると、実際には存在しないものの、円と長方形に見えてくる。

閉合の法則が存在しない状態では、長さの異なる線にしか見えないが、閉合の法則により、線を組み合わせて、形として見る。

閉合の法則を利用すると、ロゴやデザインの要素をより魅力的に見せることが可能だ。1961年にピーター・スコット卿がデザインしたWorld Wide Fund For Natureのロゴが良い例だ:

4. 対称

人間は、物体を中央を境に対称的に見る傾向がある。オブジェクトを同じ数の対照的なパーツに分割することが可能な状態は、知覚的に満足感を与える。

つながっていない2点の対称的な要素を目にすると、知覚的につなげ、まとまりのある形を作ろうとする。

上の画像を見た時、6つの個別の括弧ではなく、3つの対照的な括弧のペアと認識する。

非対称的なモノよりも、対照的に見えるモノを人間は好む。BootBの見ていて楽しいウェブサイトには、バランスの取れた3つのカラムと円が用いられている:

5. 共通運命

人間は、道に沿って動く線として、物体を捉えることがある。同じ動きをする、つまり、同じ道を進む物体を一つのグループにまとめようとする。

人間は、心理的に、どこかに向いている棒、または、上げられた手を一つのまとまりとして認識する。この傾向を利用して、ユーザーの注目をある場所に導くことが可能だ(登録フォームや製品の提案等)。

例えば、1列に並んだ複数の点のうち、半分が上に向かい、残りの半分が下に向かっているなら、上に向かう点と下に向かう点を別々のグループと理解する。

6. 連続

人間は、線を見ると、定められた方向に続いていくと考える傾向がある。物体と物体が交差(線)していると、2本の線を2つの途切れることのない物体と認識する。重複しても、認識は明確に残る。

Fixelは、顔と経歴情報を結びつけるためにこの法則を利用している:

その他にも図形と地面の法則優れたゲシュタルトの法則(通常、単純、秩序正しいパターンを形成している場合、物体はグループとして認識されることが多い)等、ゲシュタルトの法則は存在するが、今回は、特に知っていると得をする法則を紹介した。

効果的なウェブデザインの鉄則 #7: 余白 & 清潔感のあるデザイン

余白(ネガティブスペースと呼ばれることもある)は、ページの「手をつけない」スペースである。グラフィック、縁、溝、カラムの間のスペース、そして、文字や視覚要素の列の間のスペース等が該当する。

「空白」のスペースと認識するべきではない — 余白はデザインにおける大事な要素の一つである。余白の中のオブジェクトの存在感を引き立てる効果がある。余白において鍵を握るのが、階層の利用である。文字であれ、色であれ、画像であれ、情報の階層が欠かせない。

テキストやグラフィックで埋め尽くされた余白のないページは、ゴチャゴチャした印象や散らかった印象を与えてしまう。また、そもそも、読みにくい(読もうとする人は滅多にいない)。これが、シンプルなウェブサイトが科学的に優れている理由だ。

十分に余白のスペースを確保すると、「清潔感」が生まれる。清潔感のあるウェブサイトは、明確なメッセージを伝える上で重要だが、コンテンツを少なくすればいいわけではない。清潔感のあるデザインとは、スペースを有効に活用するデザインを指す。清潔感のあるデザインを実現するため、余白を賢く使って、メッセージを明確に伝えてもらいたい。

Made.comは余白を巧みに活用している:

 

余白をうまく利用すると、ビジターは、主要なメッセージや視覚要素に集中することが可能になり、本文のコピーは読みやすくなる。

このように、余白は、気品とセンスを促進し、読みやすさを改善し、そして、集中をもたらす効果がある。

余白とシンプルなデザインの法則に関する詳細

効果的なウェブデザインの鉄則 #8: オッカムの剃刀

オッカムの剃刀とは、相対する仮説が存在する場合、人間は、最も仮定が少なく、最も要点がシンプルな仮説を選ぶ傾向がある法則である。このオッカムの剃刀をデザインに当てはめると、シンプルなソリューションが、通常、ベストなソリューションとなる。

(インキュベータの)Angelpadでの経験に関する記事の中で、Pipedrive(スタートアップ)の運営者は、次のように主張している:

Angelpadのチーム、そして、メンターは、様々な要求を突き付けてきた。「ホームページ上のコンテンツが多過ぎる」と言う主張には、当初、同意できなかった。しかし、テストを行う用意はあった。その結果、私達が間違えていたことが判明した。そこで、コンテンツの80%を削除し、サインアップボタン1つと「詳細」リンクを1本だけをホームページに残すことにした。すると、サインアップのコンバージョ率は、300%アップした。

見た目だけではなく、「メカニズム」が大きな意味を持つ。37Signals等の一部の企業は、「シンプル」をビジネスモデルとして活用している。以下に、書籍「Rework」(37signalsの創設者が執筆)の一部を掲載する:

競合者よりも、製品の機能が少ないため、弊社は大勢の顧客から白い目で見られた。お気に入りの機能の導入を弊社が拒むと、顧客は侮辱を受けたと感じるようだ。しかし、今の製品に、そして、今の機能に、私達は誇りを持っている。大半のソフトウェアは、あまりにも複雑 — 機能が多過ぎる、ボタンが多過ぎる、混乱を招く要素が多過ぎる — だと弊社は考えており、だからこそ、シンプルなソフトウェアを作っているのだ。

シンプルな最低限のデザインであっても、それだけで、役に立つデザイン、あるいは、効果的なデザインだと断言することが出来るわけでもない。しかし、経験上、シンプルなウェブサイトは、複雑なウェブサイトよりも優れている — よって、簡素化する努力を重ねるべきである。

結論

効果的なウェブデザインと芸術は、同じではない。

事業の目標を肝に銘じながら、ユーザーのためにウェブサイトのデザインに励もう。今回紹介したウェブデザインの鉄則を活用すれば、美的に、そして、金銭的に報われるのではないだろうか。


この記事は、ConversionXLに掲載された「8 Effective Web Design Principles You Should Know」を翻訳した内容です。

法則をベースにその意味と効果を説明する、読むだけで楽しい記事でした。デザインの世界では新しい分野のウェブですが、人類の歴史を通じて培われてきた(大げさ?)様々な法則を取り入れ、より効果的なデザインを行っていきたいですね。 — SEO Japan [G+]

コンバージョン率を改善する53通りの実例ティップス

コンバージョン祭 2014の告知をさせていただいたばかりですが、タイムリーにコンバージョン改善のティップスを53まとめた記事があったので紹介します。よくあるリスト記事ながら、コンバージョン最適化の大家ConversionXLのブログだけに、ほぼ事例に基づいた内容となっておりヒントが満載の内容です! — SEO Japan


53 Ways to Increase Conversion Rate

先日、コンバージョン率を上げるために出来ることを全て教えて欲しい、と頼まれた。効果が証明された過去の取り組みをまとめたリストは存在するのかどうか気になったため、探してみたが、見つからなかった。そこで、自分で作ることにした。

今回は、コンバージョン率を上げる53通りの方法、そして、実際の例を紹介していく。

それでは早速、順不同で紹介していく。

  1. 証拠を見つけて、伝えるホームページに証拠を加えたところ、voices.comのコンバージョン率は400%上がった。
  2. 積極的なライブチャットを用いる — ビジターとのライブチャットを開始する。Intuitは積極的にライブチャットを行うことで、211%コンバージョン率をアップさせることに成功した。
  3. ライブチャットは、基本的にプラスのインパクトを与える — Abt Electronicsは、ライブチャットが、コンバージョン率の増加につながることを見出した — Abt.comでは、ライブチャットに参加しなかった買い物客と比べ、参加した買い物客は、コンバージョン率が10-20%高いことが明らかになった。
  4. サイトのヘッドラインを変更する — ヘッドラインの内容を変えたことで、CityCliqはコンバージョン率を90%増加させた。
  5. ファンネルの中位で提供するコンテンツを増やす — ケーススタディ、Eブック、Eメールマーケティング等々、ファンネルを下に移動させるコンテンツを提供しよう。 Diteba Research Laboratoriesがこの取り組みに着手したところ、すぐにコンバージョン率は3倍に跳ね上がった。
  6. 重要なリファラーのソースに力を入れるQuanticateはLinkedinに投稿するコンテンツの質を上げ、さらに、量を増やし、AnswersとGroupsを活用したところ、トラフィックとコンバージョン率が10倍になった。
  7. Google Site Searchをサイトに加える — Google Site Searchを加えたことで、Waterfilters.netはコンバージョンを11%アップさせた。
  8. セキュリティに関する補償の証明を利用する — OrientalFurniture.comは、配送費を最大で500ドルまで負担し、さらに、サイトを使って消費者の個人情報が盗まれた場合、最大で1万ドルの補償を行い、その上、値下げを行った場合に、最大で100ドルの差額を支払うことを約束することで、コンバージョン率を7.6%増やした
  9. 切迫感を出すために、コールトゥアクションボタンに赤を用いる — イギリスの大手航空会社、BMIは、メッセージ「急いで下さい!あと…席しか残っていません!」の背景の色に赤を加えて、コンバージョン率を2.5%増加させた。
  10. 明確なユーザーフローをデザインする — Zen Windowsは、ウェブサイトのフローを変更し、ユーザーが探しているアイテムを見つけやすくることで、コンバージョン率を0.75%から2.95%に引き上げた
  11. 製品の動画を製品のページに掲載する — Ice.comはこの手法を用いて、コンバージョン率を400%アップさせた。
  12. ボタンの色を赤に変える — Performableは、ボタンの色を緑から赤に変えて、コンバージョン率を21%改善した。
  13. 推奨広告を用いる — WikiJobは、推奨広告をサイトに加えて、コンバージョン率を34%増加させた。
  14. 画像を変える — HawkHostは、ホームページの画像を変えるだけで、コンバージョン率を倍増させた。
  15. 価格の表示を変える — BaseKitは、価格のページを「濃く、鮮やかに、分かりやすく、親切に、明確に」することで、コンバージョン率を25%アップさせることに成功した。
  16. サイトにレビューを加える — Figleavesは、ウェブサイトにレビューを加えて、コンバージョン率を35%以上改善させた。
  17. 信頼を証明するシールを掲載する — Petco.comは、Hacker Safeシールをサイトに加えることで、売り上げを8.83%増やした。
  18. コールトゥアクションの表現を変える — TextMagicは、コールトゥアクションボタンのテキスト「Buy SMS Credit」から「View SMS Prices」に変えたところ、コンバージョン率が37.6%改善した。
  19. ホームページを簡素化する — Precedenは、ホームページを簡素化し、コンバージョン率を37%アップさせた。
  20. 値引き価格を表示する — The Corkscrew Wine Merchantsは、製品に値引き価格のステッカーを加えたところ、コンバージョン率が148.3%改善した。
  21. サイトのユーザビリティを改善する — Slideshop.comは、ユーザビリティの「ベストプラクティス」を採用(ナビゲーションメニューの利用)したことで、コンバージョン率を34%増加させた。
  22. コールトゥアクションをコンテンツの領域に配置する — Nature Airは、コンテンツの領域に前後関係を意識したコールトゥアクションを加えたところ、コンバージョン率が実に591%も改善された(3%から19%)。目立つ、明確なコールトゥアクションは、効果が高い。
  23. フォームの入力欄の数を減らす — ImageScapeは、入力欄の数を11から4に減らした。その結果、投稿されるフォームの数は、160%増加し、コンバージョン率は120%アップした。
  24. Eブックを販売しているなら、3Dのバーチャル表紙を用いる — Code Monkeyismは、3Dの画像を用いて、ダウンロード数を43%増やした
  25. 強い命令のトーンを用いる — ダスティン・カーティスは、フォロワーを招待する際に強く要求することで、Twitterのリンクのクリックスルー率を173%アップさせた。
  26. 価値提案を改善する — The Sims 3のウェブサイトは、価値提案を改善して、登録を128%増加させることに成功した。
  27. 会計ページを1ページにまとめる — Official Vancouver 2010 Olympic Storeは、複数のステップで構成される会計プロセスを1つのページにまとめ、コンバージョン率を21.8%改善した。
  28. ホームページで大きな顧客の写真を掲載する — 少なくとも、Highriseのコンバージョンを改善した
  29. 単一の行動に焦点を絞る — The Weather Channelは、ホームページを整理し、明確な、単一のアクションを提示したことで、コンバージョン率を225%アップさせた。
  30. ページの左側にコールトゥアクションを置くLess Accountingが行ったテストにより、コールトゥアクションを左側に置くと、右側に置くよりも、効果が高いことが判明した。
  31. 行動を重視したコピーを作る — L’Axelleは、コピーのトーンを「Feel fresh without sweat marks」から「Put an end to sweat marks」等に変えた。ヘッドラインおよびコピーの表現は、コンバージョンに大きな影響を与える — 「行動を起こす」感覚のトーンは93%コンバージョン率が高かった。
  32. 箇条書きでメリットを説明するUnionenが、メリットを箇条書きで説明するバージョンと文章で説明するバージョンを比較したところ、箇条書きは、コンバージョン率を15.9%改善した。
  33. コールトゥアクションボタンのサイズを大きくする — SAP BusinessObjectsは、通常の青いリンクを大きなボタンに変えて、コンバージョン率を32.5%改善した。
  34. 登録フォームを単一の列にするこの指標追跡の調査によると、単一の列のフォームは効果が高いようだ。
  35. 穴埋め式のフォームを試す — Vast.comは、このスタイルのフォームを採用し、サイト全体でコンバージョン率を25-40%アップさせた。
  36. バイヤーのペルソナを用いる — RightNow Technologiesは、ペルソナに焦点を絞ったサイトを作って、コンバージョン率を4倍に増やした
  37. 購入をすぐに呼び掛けない — ある会社は、ホームページの上部に掲載されていたコールトゥアクションを削除したところ、登録者は350%増加した。
  38. サイトに電話番号を加えるLessAccountingは、電話番号をサイトに加えたところ、コンバージョン率が1.8%増加した。
  39. ホームページに動画を加える — Dropboxは、ホームページに動画を加えて、コンバージョン率を10%アップさせることに成功した。
  40. 異なる動画のサムネイルを試すYobongoは、動画のサムネイルを変えた結果、コンバージョン率が70.9%増加した。
  41. 動画を短くする — Think Vitaminが、5分50秒の模範の指導動画を50秒間のサービスを説明する動画に変えたところ、コンバージョン率は24.4%改善された。
  42. サイトの検索ボックスに製品の画像を表示するBrickHouse Securityは、買い物客が、サイトの検索ウィンドウに用語を入力した際に、自動的に検索結果をドロップダウンメニュー形式で表示するシステムを採用し、その後、ドロップダウンメニューに製品の画像を表示したところ、コンバージョン率が大幅に上がった
  43. 大胆なイメチェンを行う — つまり、サイトの要素を一つ変えるのではなく、完全に新しく、異なるデザインを試す取り組みである。SEOMozは、大胆な変更を敢行し、売り上げが52%改善し、収益が100万ドル増加した。
  44. 製品の動画を提供する — 製品の動画を用意したところ、ジュエリー販売サイトのコンバージョン率は247%増加した。
  45. デジタルバッジを製品に利用する — デジタルバッジとキュレーションを採用し、Sheplersは「買い物かごに入れる」率を1.63%改善した。
  46. 「無料お試し」ボタンを加える — EメールマーケティングソフトウェアのGetResponseは、「今すぐ購入する」の代わりに「無料お試し」ボタンを表示し、トライアルの登録者を158%アップさせた(有料登録は減っていない)。
  47. ポップアップの登録フォームを加える — ポップアップは、Eメールの購読者を増やすことで知られているが、Visual Website Optimizerは、ポップアップの登録フォームを用いて、登録のコンバージョンを50%以上増やしている。
  48. ランディングページのコンテンツの一部を削る — AssessmentDayは、ランディングページのコンテンツの量を減らしたところ、セールスが62%増加した。ただし、削り過ぎは良くない。情報が欠如していると、コンバージョン率を大幅に下げてしまう可能性があるためだ。
  49. 翌日配送を用意する — SmileyCookieは、翌日配送(本日中にお買い頂いた商品は、翌営業日に配送します)をアピールしたところ、コンバージョン率が41%増加した。
  50. リンクに赤を用いる — ユーザビリティのテストでは、青いリンクが最も効果が高いことが判明しているが、Beamaxは、リンクを赤くすることで、リンクのクリックスルー率を改善した。
  51. (実在する)人間の写真を掲載する — (ストック写真ではなく)本物の人物の写真をランディングページに用いると、コンバージョン率が増加する。
  52. 願望に訴えかける画像とコピーを用いる — 栄養剤を販売する会社が、メリット主体のコピー、身体を動かすアクティビティを好むターゲットのマーケットを意識した画像、そして、大き目のコールトゥアクションボタンをページの上半分に掲載して、売り上げのコンバージョン率を50%アップさせることに成功した。
  53. 信頼性を強調する — American Expressの旅行部門が、信頼性に焦点を絞ったバージョンを試したところ、電話の問い合わせが48%アップした。

注記: 上述した手法は、実例で紹介したサイトには効果があっても、他のサイトには全くプラスに働かない可能性もあるので、テストを実施した方が良い。

また、いきなり、適当なアイデアをテストするのではなく、コンバージョン最適化への体系的なアプローチ学ぶことからスタートしてもらいたい。

尚、何をテストすればいいのか分からないなら、この記事「何を最初に、次に、その次にテストすればよいのか?」を参考にすると良いだろう。

最後に、実際に効果のあったテストのアイデアをコメント欄で紹介してもらえると嬉しい。


この記事は、ConversionXLに掲載された「53 Ways to Increase Conversion Rate」を翻訳した内容です。

圧倒的なボリュームですが、言い換えれば、この記事はサイトやウェブビジネスでコンバージョン改善のためにテストしえる要素を実例ベースで大量に紹介した内容といえます。記事最後にあるように、成功事例があるからといってあなたのサイトでそのまま通じるとは限りませんが、少なくともテストできる要素のヒントを得るには十分すぎる内容の記事でした。具体的実践手法について不安がある方は、もちろん、コンバージョン祭 2014に今すぐ登録して業界トップのコンバージョン改善のエキスパートから学びましょう (^^) と、宣伝を笑顔でごまかす私でした。 — SEO Japan

顧客エンゲージメントを向上させるエモーショナルデザインの3ステップ

横文字多用のタイトルで恐縮ですが、該当する日本語がなかったので。。前回、データドリブンなトラフィック獲得戦略という記事を紹介しましたが、その続編になるよりデザインに特化した記事を今回はお届けします。データドリブンだけでは測れない人の感情を理解してデザインに落とし込む作業について書かれたマーケッター&デザイナー共に勉強になる内容。 — SEO Japan

The 3 Step Approach To Successful Customer Engagement

データが解読を苦手としている分野がある — それは、人間だ。

コンバージョンを改善するためにデータを分析する際、エンドユーザーが、感情を持つ人間である点を忘れがちである。データは、様々な事実を明らかにしてくれるものの、人間の様子を理解する取り組みに関しては、アマチュア以下である。

デザイナーとコンバージョン最適化の担当者は、人間の脳の論理と感情、そして、顧客候補を魅了し、ビジターに行動を「起こさせる」デザインを両立させたいところだ。

しかし、これはあくまでも理想であり、両立させるのは、非常に難しいと言わざるを得ない。

Dave-McClure-example-conversion-metrics

今回は、データドリブンのトラフィック獲得に関する記事(日本語)の続きとして、顧客を「動かす」上で感情とデータを担う役割を検証し、デイブ・マクルーアのコンバージョンメトリクスを用いて、議論を発展させていく。

エモーショナルデザインへの3ステップアプローチ

3-step-emotional-design-process-CopyBlogger

CopyBloggerのSlideshareのスクリーンショット

ウェブページにやって来ると、ページのデザインを目にする。その後、ウェブページ上のコンテンツを読み、コンテンツを気に入った場合、最終的に、そのページのコールトゥアクションに従う

有効なエモーショナルデザインを利用する際、ほぼ同じプロセスを用いることになる:

  1. 見ることから始める — ビジターはデザイン、つまり、情報がどのように提示されているのか見る。これは、テキストを読む前に行われる。
  2. 意識にアピールする — ビジターは提示された情報を読む。そのため、有益なコンテンツと読みやすさが重要になる。
  3. 心をターゲットにする — 経験、ニーズ、そして、感情に触れる旅にビジターを導こう。

なんだかキャンプファイアの歌のようなフレーズだが、我慢してもらいたい。後ほど、必ず、意味が分かるようになる。

ステップ 1 — 見ることから始める

slide-6-638

今年の夏、家族とギリシャに行く計画を私は立てている。そのため、まず、Googleで「Greek travel」(ギリシャ 旅行)を検索した。

私は2本のリンクをクリックした。この2つのサイトは、とても対照的であった。最初にアクセスしたサイトのスクリーンショットを以下に掲載する:

Dolphin-Hellas-website

Dolphin Hellasのスクリーンショット

この1つ目の例では、残念ながら、コメントする点が見当たらない — テキストが壁のように立ちはだかるだけで、デザインに関して、他に要素が存在しない。最初のステップ「見ることから始める」を完全に無視している。

このページは、ギリシャ旅行の概要を全く説明せず、ギリシャに行く決断を下していなかった場合、ギリシャを候補地から外していた可能性があった(実際にちょっと外すことも考えた)

その次に訪れたサイト:

Visit-Greece-website

VisitGreeceのスクリーンショット

一方、VisitGreeceは、私がギリシャ旅行に抱く想像を完璧に理解しているように思え、期待と完全に一致する第一印象を築くことに成功していた。

このウェルカムスクリーンをクリックしたに関しては、幾つか変更した場所があったが、私の注目を掴み、引き込むには十分であった。

印象的な画像が用いられ、フォントは見る者に心地よさを与え、また、ギリシャに着いた時に味わえる安らぎ、そして、くつろぎを連想させる。これはすべて、最低限のテキスト、そして、さらに見たい気持ちにさせる視覚の体験によって、実現している。

視覚の体験を使ってビジターを引き込む

brahma-selecao-especial-website

ポルトガル語を読むことは出来ないが、これがビールに関するウェブサイトであることは、察しがつく。

しかし、単なるビールではない。これは、猛暑の中、妻、そして、二人の子供に少しでも楽な生活をさせてあげたい一心で、一日中、身体にムチ打って働く男のためのプレミアムなビールだ。

皆さんが住む家を建て、車で移動する道を舗装し、夕食の食卓に並ぶ動物を育て、快適な暮らしをするための機械を作った男のためのビールだ。

見返りや褒め言葉を求めているわけではない。名前を知ってもらえなくても構わない。このビール、そして、家族の愛があれば、それで十分幸せだ。

フォント、フォーマット、視覚階層、レイアウト、コントラスト、そして、配色から、このようなストーリーが思い浮かぶ。

レイアウトから着手するデザイナーもいるが、フォントから手をつけるアプローチを薦める

All Fonts Have A Purpose

画像ソース

デザイナーによって、アプローチは異なるものの、個人的には、最終的な目標が、ビジターに「行動を起こさせ」、ビジターの心に訴えかけることなら、フォントから取り掛かるアプローチを薦める。

フォントが感じ方に与える影響は以前詳しく説明したが、フォントから手をつけると、読者が、ほとんどサイトを実際に利用したことがなくても、テキストから、ウェブサイトの内容をある程度理解することが可能になる。

パット・フリンが運営するSmart Passive Incomeを例にとって、考えてみよう。

パット・フリンとチェイス・リーヴズが、サイトのデザイン変更を計画している際、リーブズは、最初に、複数のフォントのペアをフリンに提案し、フォントのような些細なことが、ページの内容に関する感じ方に影響を与えることを実証した:

role-of-typography-examples-SMI

画像ソース

白の背景に黒いテキストを用いた状態でも、ヘッドラインと本文のフォントの相互作用が、ページに特徴を完全に変える効果がある点は明白だ。

フォントのペア作りは、確かに難しいが、現実として、伝えようとする情報の詳細は、テキストを経由する。テキストが、適切な所謂「ボディーランゲージ」を用いていない状態では、デザインの別の領域で埋め合わせなければならない。

下のPinterestのボードは、2つの異なるフォントの良質な関係を堂々と勘違いしているデザイナーが大勢いる現実を指摘している。

Follow Amanda’s board Fonts on Pinterest.



Justmytype.comを運営するダニエル・エデンは、フォントの生み合わせは、科学よりも芸術に近く、主観が大きく影響するため、大勢のデザイナーが後回しにするのではないかと考えている。

pairing-typefaecs-is-hard

画像ソース

フォントのトーンと響きは、顧客開拓インタビュー、または、フィードバックループを介して得た顧客に関する情報を反映させる必要がある。

推奨する参考資料:

ワイヤーフレームを使ってページの流れをデザインする

フォントを通してページの「個性」を決めたら、ワイヤーフレームを行い、実用的で、使いやすいページの概要を組み立てるプロセスに移る。

デザインのプロセスの早い段階であっても、ワイヤーフレームは、最終的なデザインの使いやすさの良き目安となる。

Loop11が提供するこのケーススタディは、旅行関連のウェブサイトが、ワイヤーフレームを用いて、単純なユーザビリティテストを実施し、パフォーマンスの高いプロトタイプ — そして、特定のプロトタイプのUXにおける潜在的な欠点を見つけ出した事例を紹介している。

バージョン A

Wireframe-1

 

Reporting-1 Reporting-3

バージョン B

Wireframe-2

 

Reporting Dashboard 2 Reporting-4

このユーザビリティテストで、プロトタイプ Aの方がパフォーマンスは高かったものの、2つを除く全てのタスクを完了するまでに、随分と時間がかかっていたことが判明した。

「Events」が最も多くの利益をもたらすセクションだとしたら、どのような影響が出ていただろうか?データを参考にする限り、タスクの完了にかかる時間が長くなればなるほど、完了する人数は少なくなる。

このような基本的なレベルのユーザビリティの問題に対処するアプローチは、強固な基盤を確立し、いきなりビジターに反感を持たれる事態を避ける上で有効である。

ecommerce-site-wireframe-home-page

redmonkeygooが提示する例には、ワイヤーフレーム & フォントの選択が、「行動を促す」UXを作る仕組みが明確に表れている。

ecommerce-site-wireframe-product-page

また、色や画像が確定していない状態であっても、ページ上で視線を導く視覚階層が存在する点に注目してもらいたい。

そのため、「私を選んで!」と主張する製品の写真やボタンの色がなくても、重要な要素に関する手掛かりを感じ取ることが出来る。

注目に値するワイヤーフレームツール:

ビジターを行動に突き動かす際の色と画像の役割

MiBolsa   Red Womens Genuine Leather Handbag

MiBolsaの最終的なウェブサイトのデザインは、最初のワイヤーフレームとほとんど変わらない。

マイクロコピーを少し加えて、無料配送 & 返品のポリシーに関する情報を伝え、また、価格のフォントを換えているものの、このページの主な目的 — 製品の展示 — は今でも明確である。

色を使って、当初のワイヤーフレームでも既に明確であった目標をさらにプッシュしていた点に私は興味を覚えた。赤いバッグは、ビジターを引き込む効果があるが、その他にどんな工夫が加えられているのだろうか?

discount

ヘッダーのロゴの真下、つまり、通常、ビジターが真っ先に見る場所に値引きの情報が強調されている。

Product view

現在展示されている製品は、同じピンクのシェードで目立つように工夫されている。

why choose

MiBolsa & Free Shippingの免責条項も同じ色で強調されており、ビジターは、その重要性をすぐに理解することが出来る(意識して読まなくても)。

また、第一 & 第二のコールトゥアクションも、すぐに分かる。

Primary CTA Secondary CTA

製品の説明を全く読まなくても、このページの一番大事な要素を理解することが出来る。なぜなら、色が、ページの特に重要な部分に目を導くためだ:

  • 製品
  • 値引き
  • 現在の写真(代わりの写真)
  • アドオン
  • 購入

一瞬で全て視界に入る。

論理的な思考が始まる前に、このバッグを欲しいかどうかが分かるのだ。

色を巧に利用すると注目を集めることが可能

信じられないかもしれないが、これから説明していくように、同じ原則が、家具のEコマースサイトにも当てはまる。World Marketは、インテリア製品、絨毯、そして、家具等を販売するEコマースサイトである。

私がデスクを探しており、このサイトで最終的に次のページに行き着いたと仮定する:

world market screenshot

画像ソース

検索バー、ADD TO CARTボタン、SAVE 25%、FREE SHIPPING — 全て同じ色とスタイルが用いられており、注目を集めつつ、重要なアイテムを明確に示すことに成功している。

ヒートマップのデータの力を少し借りて、私がこのページで何を「目にしている」のか確かめていこう:

world market screenshot with heatmap overlay

画像ソース

私はロゴ、製品、そして、無料配送、25%引き等の関連する情報を見ている。つまり、「見る予定」であった場所を見ていることになる。

一方、視覚階層、そして、色と画像の役割に時間を割いて取り組んでいない場合、注意する必要がある。ビジターに「買い物カゴに入れる」ボタンを気づいてもらえない可能性があるためだ:

national-business-furniture-website

目を通しておいてもらいたい参考資料:

ステップ 2 — 意識にアピールする

slide-9-638

サイトにアクセスした際、目にしたものに好感を持った。デザイン、視覚階層、そして、全体的な眺めは、製品に対する期待を抱かせた。今のところ、問題はない。

ここから会計まで、ビジターの論理 & 感情は容赦ない戦いを繰り広げることになる。そして、論理は、殴り合いにマシンガンを持ち出す。

ここで、「ちょっと読んでみるか」と言う気持ちになり、論理的思考が、連続モードに入り、一秒間に多数の問いを発する。

  • 内容を理解しているのか?製品を明確に理解しているのか?
  • 役に立つのか?
  • 必要としているのか?
  • 、必要なのか?
  • 幾らするのか?
  • 他の人達はどんな感想を持っているのか
  • 無料で配送してくれるのか?
  • 割引はあるのか?
  • どんな保証がついてくるのか?
  • 代わりの製品にはどんなものがあるのか?
  • 何日で届くのか?

ビジターが、既に見たものに魅力を感じていたなら、製品ページや会計ページに向かうにつれ、上の問いとその他の無数の問いが、脳に次々と浮かんでいく。

そのため、脳の思考回路が動き出した際に、出来るだけ多くの問いに対する答えを提供することが重要な鍵を握る。MiBolsaの製品ページをもう一度確認してみよう。どんな情報が見えるだろうか?

MiBolsa   Red Womens Genuine Leather Handbag

  • 25% Saving(割引)
  • The bag is $280(バッグの価格)
  • Red Women’s Genuine Leather Handbag(赤が似合う女性のための本革ハンドバッグ)
  • Free Delivery(Witin Australia)(無料配送)
  • World Wide Shipping Available(国外配送も可能)
  • 30 Day Simple Returns(30日間のシンプルな返品保証)
  • 100% Genuine Leather(100%本革)
  • Ggoes great with…(バッグに合うスタイル)
  • 製品の寸法(現実的な人のため)

MiBolsa specs

このようなちょっとした情報をとても視覚的な方法で提供すると、購入の決定を下す際に、脳の論理 & 感情の橋渡し役を務めてくれる。

興味深いことに、このような些細なコピーは、Forrester & UPSが、インターネット上の買い物を戸惑う主な理由の多くを網羅していた。

shipping-graphs

画像ソース

「無料配送/配送料の値引きを加えたけど、コンバージョン率の改善には役立たなかった」と言う声を良く聞くことがある。

サービスを用意するだけでなく、ビジターの目が辿る道筋の最も重要な場所に置き、知ってもらう必要がある。

超有名ブランドであっても、このコンセプトを理解しているようには思えない。提案自体は存在するものの、どこにあるのかすぐに分かるだろうか?

Gucci product page

私がMiBolsaのウェブサイトをこれほど気に入っているのは、意図的に、「的」のような色に視線を釘付けにして、この的に消費者が懸念を持つ情報が含まれているためだ。

情報を無意識のうちに吸収し、論理的な思考回路を安心させ、クレジットカードを用意させるようなものだ。

読んでおいてもらいたい記事:

まあまあのデザインとダメなコピーが出会うとき

少し脱線するが、別の角度で見てみよう — まあまあのデザインが、ダメなコピーと出会うのは、どんな状態のときだろうか?:

TeamColony

デザインにおいては問題はない。もっとひどいデザイン(例: 先程のギリシャのツアー会社)、そして、良いデザインに何度も遭遇したことがある。すぐにサイトを去りたくなるようなレベルの低いデザインではない。

そこで、このページのコピーを読み始める。すると、失敗に気づく

提示された情報だけでは、ソフトウェア/サービス内容が分からなかった。

What does this even mean

このサイトは、ターゲットのオーディエンスを理解していない典型的な例であり、このページを見ただけで、コピー/メッセージを明確に決める前に、色とレイアウトを決めたと言い切ることが出来る。

幸いにも、解決の糸口がないわけではなく、フィードバックループを使って、コンバートしないビジターが抱える問題を理解すると、コピーを分かりやすくするために用いる必要があるフレーズを見つけられる。

ちなみに、顧客のことをもっと良く理解したら、今回紹介したプロセスを用いて、サイトを作り直すべきだと私は考えている。

絶対に目を通しておいてもらいたい記事:

ステップ 3 — 心をターゲットにする

slide-12-638

プロセスの重要な最終段階 — 心について検証していく。

目は、気に掛けるべきかどうかを判断し、コピーを読んだ後、内容、そして、メリットを理解したかどうかを決める。

しかし、最後に難問が残っている — 実際に行動を起こすほど、提示された情報に関心を持たせることに成功しただろうか?そのサイトだけが満たすことが出来る望みとニーズを作り出しただろうか?

MiBolsaのページをもう一度だけ見てみる。イメージを把握し、そして、マイクロコピー、および、デザインによって、論理思考が落ち着きを取り戻した後、最後に、製品の説明を見る段階を迎える。

MiBolsa handbag copy

女性のカバンを買いたいわけではないが、製品を説明するコピーを使って、再び感情に訴えかける手法には感服した。

「アルゼンチン製」等のワードは、魅力 & 異国情緒を感じさせ、「衝撃的」、「人目を引く」、「スタイリッシュ」等のフレーズは、私がカバンを持っていると、注目を集め、恐らく、他の女性がジェラシーを感じるのではないかと思わせる効果がある。

興味深いことに、フレーズ「売れ切れ間近」は、切迫感を醸し出し、また、「他の人達とは、かぶらない」気持ちにさせる。つまり、一人で二役をこなしている。

傍注: 推奨広告が役に立たない領域

長時間このページを見ていて気づいたのだが、このページには、顧客の推奨広告が存在しない。しかし、このバッグを買う女性は、このバッグを他の人達に持って欲しくないのではないかと思うようになった。

良い買い物であることを保証する必要はない。自らトレンドを作り出すタイプであり、注目自体 を必ずしも求めているわけではなく、また、ファッションセンスの良さ、そして、280ドルのバッグを買えるステータスを他の人達が羨んだとしても、嫌な気分はしない。むしろ、快感を覚えるタイプだ。

掘り出し物感、独占、そして、ステータスもこのバッグの魅力の一部である。

MiBolsaのバッグを買う女性にとって、次の製品はダサく見える:

Always in stock

振り返ると、この女性のために、全体のユーザー体験を一から構築していたことが分かる。

魅力的で、自分だけが持つ喜びを反映させている — もちろん、秘密を打ち明けたくなるほど気に入ってしまう可能性もあるが ;-)

ecommerce-site-wireframe-product-page

Aarron-Walter「エモーショナルデザインは、気まぐれなユーザーをファンに変え、その楽しい体験談を周りの人達に伝えさせる。」

アーロン・ウォルター UXデザイナー @ MailChimp

画像ソース

次の一手

MiBolsa Added to Cart

この時点で「初めての楽しい訪問」の基準は、全て満たしている。

私は十分な量のページを見て、膨大な時間をこのサイトで過ごした。

買い物カゴにバッグを加えなかったものの、広告リターゲティングキャンペーンを実施して、サイトに再び戻す基準は大いに満たしていると言える。SeeWhy.comによると、99%は初回の訪問では購入しないようだ。

New-Visitors-Abandon-Carts-e1374008200289

画像ソース

MiBolsaにとって幸いなことに、私はこのバッグを今から購入する。そして、「Checkout」(会計)をクリックすると、次のページが表示された。

MiBolsa   One Step Checkout

このフォームに対しては、気に入った点と気に入らなかった点があった。上部のセキュリティ機能、そして、30日間の返品に関するメッセージには好感を持った。

MiBolsa security reminders

しかし、3つのカラムのレイアウトが用いられている点、記入欄が余分に用意されている点(例えば、ファーストネーム/ラストネームは1つの欄で間に合う)、そして、電話番号等を入力する必要がある理由を説明するマイクロコピーが存在しない点は、改善してもらいたいと思った。

また、「アカウントの作成」にもっと力を入れるべきであり、そのメリットを説明してもらいたかった。

Create an account for later use

しかし、「アカウントの作成」は、買い物客が、現段階で、わざわざ時間を割いて行いたいと思うような取り組みではないとMiBosaは考えたのかもしれない。後ほど、アカウントを作るメリットを説明してくれるのかもしれない。

「subscribe to newsletter」(ニュースレターに購読する)の選択肢を自動的にチェックしており、もう二度と連絡を取らないわけでもない。

MiBolsa subscribe to newsletter

もしかしたら、一連のEメールのオンボーディングを用意し、私を再びサイトに呼び寄せ、常連の顧客にする可能性もある。ちなみに、次の投稿では、この点を取り上げることになるだろう ;-)

結論

データと感情は、一見したところ、調和しそうには思えないかもしれない。しかし、この記事で検証してきたように、調和する可能性はある。実際に、少し観点を変えるだけで、新しい世界が、目の前に広がる。

まずは「目」を意識しよう — サイトを見ただけでビジターが虜になるデザインを目指そう。言葉を用いらずに、フォントを使って伝える試みを行い、感じることが出来るようなレイアウト、色 そして、イメージを通して、ビジターが求める経験を与えて、導くべきである。

ビジターの心を掴んだら、確実に提案を理解してもらう必要がある。すると、最後のステップ — つまり、行動をスムーズに取ってもらえるようになる。これでミッションを完了したことになる。

この記事は、ConversionXLに掲載された「The 3 Step Approach To Successful Customer Engagement」を翻訳した内容です。

相変わらずの濃すぎる内容、移動時間ではなく一度腰を落ち着けてじっくり読み込みたい内容でした。人の感情を重視するとはいえ、その詳細へのこだわりは正にデータドリブンですね。。。私もECサイトを運営していますが、改めてこの記事を参考にデザインを見直してみたくなりました。いえ、思うだけでなくちゃんと実践します! — SEO Japan

スマホECのコンバージョン率改善講座:よくあるユーザビリティ上の問題と解決策

ECサイトを運営している方であれば、昨今スマホ経由のアクセス比率が大幅に高まっていることを皆が実感していることと思います。そこで悩みなのが、スマホ経由のアクセスは、PCサイトに比べてコンバージョン率が低くなりがちなこと。デバイスの特性、利用シーンを理由に諦めることは簡単ですが、努力次第で改善できることも実はあるかもしれません。コンバージョン率改善のエキスパートが多数のユーザー調査を元に解説するスマホECサイトのユーザビリティの問題とその解決法を。 — SEO Japan

How To Make Mobile Convert: The Most Common Mobile Store Mistakes

この投稿は、モバイルのコンバージョン、そして、その改善する方法を紹介する2部構成の記事の1本目に当たる。この記事は、モバイルアプリとウェブサイト向けのユーザビリティテストにおいて業界をリードするUserTestingが実施した多数のテストを基に作成した。

モバイルマーケットでは、絶えず変化が起きているものの、モバイル eコマースのコンバージョンが、PCのコンバージョンよりも低い点に関しては、異論はないはずだ。

スマートフォンは、特にコンバージョン率が低く、タブレットもまた、通常のコンピュータと比べると、コンバージョンが低いと見られている。

例えば、Monetateは、PC用のウェブサイトのコンバージョン率は、モバイル用のウェブサイトのコンバージョ率よりも3倍高いと報告している:

monetate conversion graph

Monetate 2013年第4四半期

その他のデータでも同じ様な傾向が表れている:

Mobile Conversion Rates Mobify

「事業の分野に関係なく、モバイルのコンバージョン率は、スマートフォンに最適化したサイトであっても、1%をきっている可能性が高い。」

Mobify 2014年2月

crate and barrel research

「Crate & Barrelは、タブレットのコンバージョン率は2.35%だが、スマートフォンのコンバージョン率は0.92%に過ぎないと報告した。」

Wired 2014年2月

モバイルがコンバートしない理由

モバイルのコンバージョンが低い点に関しては、納得してもらえると思うが、理由については、様々な意見が挙げられる。

一般的には、「スマートフォンは、購入するよりも、閲覧する、または、リサーチするために用いられる」ことが理由として挙げられる。しかし、この理由は、とがった角がないため、卵は丸いと言っているようなものだ。状況は適切にとらえているものの、発生している理由を説明するまでには至っていない

また、「裕福な人ばかりがタブレットを利用している」と言う指摘が根拠に挙げられることも多い。タブレットを持つ一部のグループは、何においても高級志向であるため、コンバージョン率が高い、と言う考え方だ。

この考え方が的を射ていた時代もあったが、現在では、タブレット、スマートフォン、そして、コンピュータは、先進国では全て幅広く普及している。

tablet & smartphone ownership

Pew Internet米国勢調査局によると、アメリカの家庭の約79%は、PCを、58%はスマートフォンを、そして、42%はタブレットを所有しているようだ。

スマートフォンは移動中、つまり、買い物をする時間のない時に使われる点も理由に挙げられる。しかし、スマートフォンのユーザーが、スマートフォンで全く買い物をしないなら、スマートフォン経由のeコマースサイトへのトラフィックは存在しないはずだ。しかし、Forrester曰く、メジャーなウェブサイトに寄せられるトラフィックの最大30%が、モバイルデバイスを経由している。

また、「移動中」が、スマートフォンを利用する唯一の時間ではないことは、利用のパターンを見れば分かる。

Tablet and smartphone access by location  - Source - Forrester Research (1)

それでは、リサーチから購入への移動を妨げているモバイル特有の特徴とは、何なのだろうか?

UserTestingでは、この問題を数年間に渡って分析してきた。大小のeコマースサイトに対して、多数のユーザーテストを行ったところ、3つのコンバージョンの問題が繰り返し発生していることに気づいた:

  • モバイル特有の問題もある。実際に、購入を妨げる、モバイルデバイス、とりわけスマートフォンの特定の機能が存在する。しかし、これは主な要素ではない。さらに重要度の高い問題を挙げていく:
  • モバイルデバイスでの購入体験がスムーズではない。これは、eコマース業界全体で、サイトをモバイルのニーズに適応させていないことが原因だ。
  • 大方、モバイルのセールスは、実はコンバートしているものの、現在の計測の技術では、反映することが出来ない。

それでは、なぜこのような現象が起きているのか、そして、この問題を修正するにはどうすればいいのか、これから検証していく。

問題 1: コンバージョンに害を与えるスマートフォンの機能

購入のコンバージョンを妨げるモバイルデバイス特有の欠点が2つ存在する。1つは明らかな欠点だが、もう1つの欠点は、分かりにくいかもしれない。

画面のサイズが買い物に向いていない

これは明らかな違いだ。PCは、情報を表示するスペースが遥かに大きく、この追加のスペースは、eコマースにプラスに働く。コンピュータのユーザーの方が、製品を並べて比較しやすい。

参考情報、レビュー、製品の画像等、購入を促す情報を見ることが出来る。また、絞り込みのボタン等、選択肢を選ぶ上で役に立つツールを容易に見つけることが可能だ。

Zappos desktop vs smartphone

反対に、モバイルデバイスの小さなスクリーンでは、同じ情報を一度に見せることは不可能である。製品の比較を行うことは難しく、補足の情報が欠けている、または、隠れていることがあり、そして、絞り込みのツールの機能は制限されていることが多い。

その結果、購入を行う上で十分な情報が提供されていないとユーザーは感じる。

ユーザーテストでは、スマートフォンで購入プロセスの途中まで進み、その後、豊富な情報が用意されているPCのサイトで購入するために、プロセスを中断する傾向があることが判明した。

事実、Googleが2012年に行った調査「新しいマルチスクリーンの世界: 消費者のクロスプラットフォームの行動を理解する」によると、消費者の65%がスマートフォンで買い物を始め、61%はコンピュータで買い物を継続するようだ。

start on a smartphone continue on a computer

「PCでショッピングサイトを見ると、もっと製品の写真を多く見られるような気がする。そのため、待機し、PCで購入を行う。」

- UserTestingが行ったテストに参加したスマートフォンユーザーの声

ネットワークのスピードにより(不愉快になるほど)買い物が遅くなる

これもコンバージョンに歯止めをかけるモバイルデバイスならではの特徴である。大半のPCは、ケーブル、または、WiFiでハイスピードの有線インターネットに接続している。一方、大半のスマートフォンは、セルラーデータのネットワークを介して、インターネットに接続する。

セルラーネットワークは、ここ数年の間に大幅に早くなったものの、有線の接続と比べると遅く感じる。また、以前も指摘したように、スピードはコンバージョン率の最適化に大きな影響を与える

Radwareによる「This Spring 2014」レポートは、ビジターの大半は、読み込みに3秒間以上かかると、サイトを見捨てると報告している。また、以前、Radwareが実施した調査により、デスクトップのコンピュータと同じスピードで、もしくは、より速くサイトが読み込まれると期待するビジターは、85%に達することが判明している。

TTI

モバイルデバイスは、有線接続よりも、待ち時間が長い、つまり、ウェブページの読み込み等、ネットワークのリクエストへの対応が遅くなることも問題を悪化させている。

さらに、ガイ・ポジャナニが指摘しているように、レスポンシブデザインをベースに作られた多くのモバイルサイトは、スクリーンにほとんど表示されなくても、デスクトップのページ全体、もしくは、大半をダウンロードする。

2013-page-size-per-resolution

待ち時間の長さ、ネットワークスピードの遅さ、そして、不要に多いダウンロードの量が重なり、スマートフォンでのウェブサイトの閲覧、および、購入の実施が遅くなってしまう。弊社が実施したテストでは、このような小さな遅れが積み重なり、瞬く間にユーザーにフラストレーションを与えていることが明らかにになった。

タブレット vs スマートフォン

Flurry-Smartpones-vs-Tablets-App-Engagement

スクリーンの大きさ、そして、待ち時間の問題は、タブレットのコンバージョン率が、PCには負けるものの、スマートフォンを上回る理由を説明している。

タブレットは、スマートフォンよりもスクリーンが大きく、ユーザーは一度により多くの情報を閲覧することが出来る(ただし、コンピュータと比べると少ない)。また、タブレットは、WiFiを介してネットワークに接続することが多く、より早く、より反応が良い環境で買い物を楽しむことが出来る。

従って、タブレットでの、コンピュータに近い買い物は、コンピュータに近いコンバージョン率をもたらす。

しかし、モバイル広告を提供するFlurryが実施した調査(上)により、デバイスを利用するパターンにも大きな違いが存在することが分かった。

Flurry-Smartpones-vs-Tablets-Category-Usage

対応策: 諦めない。内在する欠点に直面すると、どうしようもない問題として、モバイルデバイスのコンバージョン率の低さを受け入れがちである。事実、モバイルの優先順位を下げ、優秀なチームの担当から外す、もしくは、予算を削減した、と報告を受けることがある。

これは大きな誤りであり、20年前にインターネットの利用を拒んだ会社、あるいは、ソーシャルメディアが多くの業界にとって欠かせないことを認めない会社を思い起こさせる。

Ciscoによると、2013年、モバイルのトラフィックは、81%増加した。さらに、2000年と比べると、現在のモバイルのトラフィックは、インターネット全体のトラフィックの18倍に相当する。

cisco research

 

従って、モバイルを多忙を極めるチームのサイドプロジェクトに左遷するのではなく、ビジターがどのようにモバイルを使っているのか & 既存の利用パターンにフィットする体験をどのように作り出すことが出来るのか、時間を割いて調査することを薦める。

モバイルの欠点を克服する次善策は存在する

zappos desktop version option

例えば、ウェブサイトのフルバージョンでアイテムを閲覧する選択肢をユーザーに与える手が考えられる。モバイルデバイスで、PC形式のウェブサイトを無理やり使わせるべきではないが、選択肢を与えて、強制ではなく、サービスと考えてもらうと良いだろう。

少なくとも、重要な参考情報が提供されていることをユーザーに分かってもらい、モバイルでの購入を進めてもらう確率を高める効果はある。

モバイルコマースアプリを作成しているなら、待ち時間を遅らせるために出来ることは多数ある。例えば、ユーザーが求めている可能性のある情報を事前に読み込み、ネットワークを待機することなく、当該の情報を表示させることが出来る。ボタンやその他のスクリーンの要素をアニメ化させると、ネットワークにアクセスする間に、多少の遅れを誤魔化すことが出来る。

しかし、修正よりも重要なのは、モバイルコマースの問題の多くは、スクリーンの大きさや待ち時間によって発生しているわけではない点を理解することだ。モバイルのコマースアプリやコマースサイトにおいて頻繁に発生しているユーザビリティのちょっとしたミスが原因になっていることが多い。

問題 2: モバイルコマースサイトがユーザビリティのミスを犯している

買い物から楽しさを奪ってしまうミスである。モバイルコマースサイトをデザインする際に、最初に発生するミスは、「買い物」から「購入」に押し込もうと試みる行為だ。これは、最も大きなミスでもある。

PCでの買い物は、適切にデザインされていることが前提だが、消費者を楽しませる。通常、多くの製品が提供されており、また、見やすい。その上、デザインに数年間を費やしているため、流れがスムーズで、途切れることがなく、買い物を楽しむことが出来る。

一方、モバイルでは、流れが止まるだけでなく、販売業者によって妨害されていることもある。小さなスクリーン、そして、遅い接続に対応するため、モバイルの買い物体験を最低限に留めようとする企業は多い。最低限のタップ数で、購入を可能にすることに集中する傾向が見られる。以下に、コマースサイトへの一般的なアドバイスを紹介する:

「調査により、(モバイルの)コンバージョン率は、購入へのステップの簡素化の影響に左右されることが分かっているため、コンバージョンを3回のタップで実現させる必要がある。近い将来、2回が基準になるはずだ。」

-Adobe Mobile Consumer Survey 2013年

タップ数を少なくするアプローチは、間違いなく得策である — ただし、顧客が何を買うかを決めたでなければらない。

しかし、買い物のプロセスを、数回のタップに押し込もうと試みる会社が続出している。その結果、楽しく買い物してもらうのではなく、すぐに購入の決断を下させるモバイルアプリやモバイルサイトが誕生する。ユーザーにとっては、誘惑が、要求に変わるようなものだ。

弊社の調査では、サイトやアプリが、ユーザーが意思を決定する場所に適応している場合、最高の結果が生じることが判明している。何を買うかを決めたら、最低限のタップ数で買い物を完結することが出来るはずである。しかし、迷っている状態では、調査し、比較する自由を与えるべきだ。

Greats.comが、モバイル版のサイトで実施している取り組みを参考にしてもらいたい(以下のエンベッドしたサイトは、実際に動かすことが可能)。

PC向けの単一の土台のサイトを作り、レスポンシブデザインを用いて、モバイルに合わせることを望むため、多くの会社にとっては難しいアプローチだと言えるだろう。

UserTestingの調査によると、サイトのデザインを決定する前に、モバイルでの買い物のプロセスを、ボトムアップで考え直し、テストを行うと、コンバージョン率が上がる傾向がある。これは、多くの会社にとって、高額な投資であり、尚且つ不便であるが、デスクトップのトラフィックはモバイルに移行しているため、今後、その必要性は高まる。

デザイナーのヴァージル・パナは、魅力的なモバイルのUXの面白味と機能を実証するiPhoneアプリのアニメーションを提供している。

off-season

この基本的なデザインの問題の他にも、多くのショッピングサイトやアプリで、小さなユーザビリティの問題が存在する。

単独では大きな影響をもたらすわけではないが、少しづつコンバージョンを蝕み、全体として、モバイルコマースをフラストレーションの溜まる体験にしてしまう。以下に、調査で明らかになったモバイルコマースの欠陥の中から、特に多く見られたものを挙げていく:

ナビゲーション要素の混乱を招く用語はフラストレーションをもたらす

スマートフォンのスクリーンはとても小さいため、利用するワードは、慎重に検討する必要がある。

このポイントは、余分な情報を掲載するスペースがあるデスクトップよりも、モバイルにおいて、とりわけ重要になる。全てのユーザーに浸透していない用語を使って、店の売り場や製品のタイプを説明しようと試みる会社がある。

下の例では、ある洋服のメーカーは、大半の消費者に馴染みのない製品カテゴリーを用いている。テストで、ブーツを探すよう求められたユーザーは、メニューを見た途端、完全に身動きが取れなくなっていた。

Confusing Terminology

顧客が全員理解しているメニューを利用する必要がある。

このサイトの場合、中核となる顧客以外のビジターは、近寄りがたさを感じる。

教訓: ターゲットの消費者を深く理解し、自分の言葉ではなく、消費者の言葉を利用すること。

ナンバーパッドは便利な時に使ってもらえない

データをモバイルデバイスに入力するのは、面倒だ。

一般的に、入力する情報が多ければ多いほど、購入プロセスを諦める人は増える。そのため、郵便番号を入力すると、州と市が自動的に表示される等のタップ数を減らす手法が頻繁に用いられている。

下の例には幾つか問題がある。左側のスクリーンでは、自力で市と州を入力した後、郵便番号を入力する構造になっている。つまり、ユーザーの作業を楽にする機会を既に逸していることになる。

Number Pad Makes No Sense

 

この類の矛盾は、モバイルに関して、体系的な検討が行われていない何よりの証拠である。ユーザーテストでは、このようなミスが、ユーザーに大きなフラストレーションを与えることが判明している。

タップ不可能なアイテムはモバイルユーザーを混乱させる & イライラさせる

スマートフォンとタブレットのインターフェースは、直接操作のコンセプトをベースにしている。ユーザーが変更を望むスクリーン上の情報は、通常、タップ、または、スワイプして、編集することが可能である。モバイルデバイスのユーザーは、このタイプのインターフェースを期待する。

モバイルコマースを運営する会社は、タップすることが出来ない情報を提供し、この原則を破っていることがある。

ユーザーが変更したいなら、PCのサイトのように、戻るボタン、または、何らかのナビゲーションツールを使うと考えている。しかし、モバイルユーザーは、ナビゲーションのボタンを見過ごすことが多く、タップしても何も起きないと、ストレスを感じる。

下の例は、あるモバイルショッピングサイトの会計プロセスであり、ユーザーは請求先の住所を編集しようと試みている。ユーザーは何度も住所をタップしたり、上、下、左、右にスワイプするものの、何も起こらない。

Untappable items

請求先住所を変えるにはどうすればいいの?

とりわけモバイルデバイスでは、画像スライダーはコンバージョンに大打撃を与える

画像カルーセルはコンバージョンに大きなダメージを与える

モバイルでは、より大きな問題をもたらす。テストを行うと、PCのウェブサイトの画像カルーセルをそのままモバイルでも利用するサイトに頻繁に遭遇する。モバイルデバイスでは、テキストは小さく表示され、また、画像は混雑した印象を与えてしまうため、見にくい。

また、モバイルのカルーセルをサイトのナビゲーションを補うアイテムとして利用するサイトも多い。小さな画面のナビゲーションの構造にはフットしないPCサイトの機能が幾つかあるため、カルーセルと重なってしまう。

サイトのメインメニューを通じて、ナビゲーションが行われると推測する顧客は、当然混乱する。

Slider Carousels cause confusion

PCのサプライズ

PC向けのサイトでアイテムを閲覧する選択肢をモバイルユーザーに与えると、プラスに働くことが調査によって判明しているものの、他に選択肢を用意せず、警告なしで、PCのサイトを無理やり見せるアプローチは、有効ではない。

モバイルデバイスでPC版のサイトを読み込むと、テキストは小さく表示され、そして、ページをピンチ & ズームすることが難しくなるため、通常、ユーザーは、驚き、そして、フラストレーションを抱える。高速道路を走っていたら、アスファルトが、急に砂利道になってしまうようなものだ。

これは、PCサイトをモバイルでの利用にフォーマット変換する際に、レスポンシブデザインに依存している際によく発生する問題である。レスポンシブデザインは、何もしないよりは良いが、闇雲に用いるべきでもない。位置を変えるのではなく、完全にデザインを変更するべきかどうか、良く考える必要がある。

mobile store locator

右の例では、国際配送に対するモバイル形式のページが提供されていない。しかし、ユーザーをいきなりPC版のページに導く代わりに、メリットとして、この機能を提案し、同時にコンピュータ用にフォーマットされたページが表示される点を警告している。

教訓: 全てのスクリーンをモバイルを考慮して見直すこと。それが出来ないなら、いきなりPC版のページに導く前に、少なくとも警告を行うべきである。

メニューが意味不明 & ナビゲーションを混乱させる

大半のオンラインストアは、カテゴリで整理した、製品のリストで構成されている。このアプローチは、理にかなっているように思える。それでは、カテゴリーをリストアップする一連の階層のメニューを介して、ユーザーに移動してもらうことは出来ないのだろうか?

残念ながら、弊社が実施したテストでは、階層が2段階を超えるメニューのシステムを用いると、ユーザーは混乱してしまうことが明らかになっている。比較的短いメニューのリストであっても、見慣れない用語が含まれている場合、ユーザーは困惑する。

Poor Mobile Menu Vs Nice Mobile Menu

上の例では、左側の家電製品のサイトは、製品を論理的なカテゴリーで並べる試みを行っている。しかし、関連する製品の用語の迷宮と化し、大半のユーザーはナビゲートに苦戦する。

このメニューの構造を右側のサイトのメニューと比べてみよう。上下を指す矢印が、カテゴリーを拡大するために用いられている(右に向かう矢印を用いると、画面が右に動くと推測するユーザーがいる)。

左側のサイトのメニューは迷路、そして、右側のサイトのメニューはデパートの階を移動するエレベータと例えることが出来る。右のサイトは、何もかも説明しようと試みるのではなく、製品の幅広いカテゴリーを移動してもらっている。

検索 & 絞り込みの選択肢が多過ぎる、重複する、正確性に欠ける & 混乱を招く

モバイルコマースサイトをデザインする際に、最も難しい作業の一つに挙げられるのが、ナビゲーションの構造である。

コンピュータの比較的大きなスクリーンでは、一度に複数のナビゲーションツールを表示することが可能だ(例えば、売り場のメニューや絞り込みの選択肢を同じスクリーンに配置することが出来る)。一方、モバイルでは、このような機能は、通常、別のスクリーンに表示される。そして、弊社のテストでは、ユーザーはツールをなかなか見つけられないことが分かっている。

また、言い回しに関する問題も頻繁に発生している。たとえ開発者が、ボタンや機能に対して、伝わりやすい名称を選んだとしても、ユーザーが同じように理解するとは限らない。あるいは、ユーザーが検索機能を使って、特定の用語を検索するものの、在庫のアイテムが別の用語でタグ付けされているため、検索結果に反映されないケースもある。

トミー・ウォーカーが、サイト検索の問題 & デスクトップでの効果的なサイト検索のデザインを詳しく検証しているが、モバイルデバイス特有のその他の欠点により、この問題は悪化してしまう。

filter problems

例えば、上のサイトは、重複するナビゲートの手段を多数提供している。左上に検索ボタン(虫眼鏡)があり、Pants & Denimuの隣に「Shopボタン」と「+ボタン」、そして、「Shop by」ボタンと「Sort by」ボタンが乱立している。

テストを行った結果、ユーザーは、この5つの選択肢に困惑していることが明らかになった。1つか2つ試すものの、すぐに欲しい情報を見つけることが出来ない場合、諦めてしまう。

モバイルサイトの検索は強力であり、是非、活用してもらいたい。eConsultancyが実施した調査によると、モバイルサイト検索を優先している会社は7%に過ぎないようだ。

Mobile Isn't A Huge Priority

しかし、Googleの調査では、モバイルフレンドリーなサイトの場合、顧客の67%は購入する可能性が高いことが明らかになっている。

67 of Customers Report Being More Likely To Buy A Product When Site Is Mobile Friendly

 

慎重にサイトをテストして、ユーザーが最も慣れている用語を見つけ出す試みは、この問題の解決に役立つ(例えば、「ソートする」よりも「絞り込む」の方が分かりやすい)。

複数の関連する機能を一つのボタンにまとめ、ユーザーが誤ったボタンを押すことがないようにする手法も有効である。

例えば、絞り込みと分類を1つのスクリーンで組み合わせて、「絞り込み」ボタンを介して、アクセスさせているモバイルのショッピングサイトを見たことがある。これしか選択肢がないため、ソートしたいユーザーも「絞り込み」ボタンをタップする可能性は高い。

まとめ

今回の投稿では、モバイルコマースサイトによく見られるユーザビリティの問題を紹介した。しかし、サイト、そして、マーケットは、それぞれ異なる特徴を持つ。特定し、徐々に絞り込んでいく必要のある小さなユーザビリティの問題は、無限に存在すると言っても過言ではない。

このプロセスは、デスクトップでは数年を要した。モバイルでも同じように時間がかかると考えられる。我慢し、積極的にテストを実施して、ユーザーが動けなくなる場所、そして、その理由を正確に理解しなければならない。

モバイルコマースアプリを作っている場合、テストの実施は、尚更重要である。App Storeでは、リリース初日であっても、パフォーマンスが芳しくないアプリには、レビューのセクションで容赦ない罵声が浴びせられる。可もなく不可もない作品をリリースし、繰り返し修正を加えるのではなく、最初から優れた製品を立ち上げるべきだ。

そのためには、リリースする前に、大量のテストを実施しなければならない。ウェブ開発においては、「早くリリースして、修正を繰り返す」方針が浸透しているが、モバイルでは、「テストを行い、リリースする前に修正を繰り返す」が鉄則である。

この記事で紹介した例は、テストの実施に資金面で協力してくれた会社の許可を得て、再現したものだ。結果を共有してくれたBloomreachに参加する。 また、UserTestingのその他の匿名を希望するクライアントからも画像を提供してもらった。パート 2では、モバイルコマースの最前線を取り上げる — テストで判明した、モバイルのコンバージョンにとどまらず、Eコマース自体を根本から変える可能性を秘めたトレンドを紹介する予定だ。


この記事は、ConversionXLに掲載された「How To Make Mobile Convert: The Most Common Mobile Store Mistakes」を翻訳した内容です。

読み応えがありすぎる充実の記事でした。私も会社でECサイトを幾つか運営していますが、なんとなく「スマホ経由のコンバージョンが低いのはリサーチ目的が多いし仕方ない」と割り切って逃げていた側面もあるのですが、この記事を読んで改めて改善できる点は改善していこうと思いました。一度じっくり時間を取ってできることを考えてみたいですね。 — SEO Japan

疑う人を説得させる17通りの心理操作術

ウェブマーケティングの世界ではSEOに限らずコンテンツマーケティングが注目されていますが、それをビジネスに活用できるかどうか、つまり集客のみならずコンバージョンまでつなげられるかはコンテンツの質や有益性に加えて、情報発信者のオーソリティ、つまり信頼性が重要なのは皆の共通認識でしょう。しかし心理学をベースにした心理操作術を駆使すれば、十分なオーソリティがなくともコンバージョンに結び付けることができるかもしれません?!今回は、コンバージョン最適化のプロでもある筆者が教える様々な心理操作のテクニックについて。 — SEO Japan


How To Persuade People Online – 17 Lesser Known Jedi Mind Tricks

インターネットでオーディエンスを説得し、自分の思い通りの結果を得る方法を知りたいだろうか?

通常、成功する人物とその他大勢を分ける最大の要因となるのは、影響力である。今回は、心理学の研究を経て発見した戦略を幾つか紹介していく。恐らく、聞いたことがないものばかりだろうが、全て、説得力を高めるポテンシャルを持っている。

この投稿では、相互関係、欠乏、社会的証明等、よく知られている説得の原則を取り上げるつもりはない。このような要素については、既に良くご存知のはずである(あまり良く知らない方は、ロバート・チアルディーニ著のこの本を読んで勉強しておこう)。

1. 疑う人を説得する方法: 自信を持って、早く話す

同意することに消極的なオーディエンスを説得したいなら、早く話す戦法が最も効果的である。早口は、聞き手を迷わせ、議論の欠点を見つけにくくする効果がある。同意してくれそうなオーディエンスに話しかける際は、(当たり前だが)スピードを落とし、さらに同意してもらえるように時間を与えると良い。

また、説得力を高めたいなら、自信を持って話すべきだ。

カーネギーメロン大学の行動決定リサーチセンターに所属するドン・ムーアが発表した研究結果では、自信は、他者の信頼を勝ち取る上で、正確性に勝ることが判明している。

私達は、自信に満ちた人物からアドバイスを得ることを好み、過去の実績が惨めであっても許容してしまうこともある。ムーアは、競争において、この好みが原因で、アドバイスを送る側が、自信について大袈裟に表現することがあると指摘している。

通常、自信は専門知識と関連付けられる。製品、そして、そのメリットを熟知し、その効果を確信しよう — 真の自信は、自らの発言を知り、信じることから生まれる。説得するために、自信を聞き手に伝える必要がある。

2. 罵倒がオーディエンスの説得に貢献する

と言っても、軽く罵る程度に留める必要はある(やり過ぎると、信頼を完全に失ってしまう)。

88名の参加者を3つの若干異なる話し方に分割した研究が行われた。違いは、出だしで刺激の少ない不快な言葉を用いることのみであった:

…学費の値下げは、勿論良い案だが、それだけでなく、いい加減にしろ!と言いたいくらい、全ての関係者において、最も合理的なアイデアだと言える。

2つ目の話しでは、「いい加減にしろ!」を最後に置き、3つ目の話では、どこにも使わなかった。そして、参加者の態度を調べた。その結果、最初、もしくは、最後に罵る言葉が使われた話し方に、オーディエンスは影響を受けることが判明した。

「いい加減にしろ!」と言うワードにより、話し手の激しさがオーディエンスに伝わり、説得力がアップする。オーディエンス側の話し手に対する信頼は、変化しなかった。

この手法は、ゲイリー・ヴェイナチャックデイブ・マクルーアの成功を支えている。単純に優れた人物だと思っていたが、刺激の少ない罵るワードを使って、とても効果的に説得していることに私は気づいた。

画像

3. 最初に同意させる

メッセージを支持してもらいたいなら、オーディエンスが同意できることを最初に言おう。

ジン・シューとロバート・ワイラーが行った研究で、同意するメッセージの影響は長続きすることが判明した。あるテストの中で、参加者に、ジョン・マケイン、または、バラク・オバマのスピーチを聞かせ、その後、トヨタのテレビCMを見せた。

共和党の支持者は、ジョン・マケインのスピーチの影響を受け、反対に、民主党の支持者は、オバマのスピーチを聞いた後、CMに説得力を見出していた。

つまり、何かを売りたい時は、最初に顧客が納得することが可能な意見を出す、または、世論を反映させれば良い — たとえ、それが販売する製品とは全く関係がなくても構わない。

4. バランスの取れた主張は説得力がある

自分の取り組みが、批判を呼び起こす(または、呼び起こすきっかけを与える)なら、弱みを隠そうとする本能に逆らうべきだ。弱みについて話をすると、主張を弱めてしまうと恐れがちだが、説得する際にはプラスに働く。
Psyblogは次のように指摘している:

長年、心理学者達は、偏りのある主張と二面性のある主張を比較し、様々な状況において、どちらが説得する力が強いのかを確認する研究を行ってきた。イリノイ大学のダニエル・オキーフは、偏りと説得に関する107点の調査の結果をまとめた。実に過去50年を振り返り、2万111名の参加者のデータを集めた(オキーフ 1999年 Communication Yearbook 22 pp. 209 – 249)。

このメタ分析の結果自体、説得力のある内容であった。各種の説得力のあるメッセージにおいて、そして、様々なオーディエンスにおいて、二面性のある主張は、一方に偏った主張よりも、説得力が強いことが判明したのだ。

人は知性を持つ生き物である。説得する方法を知るには、まずは、聞き手が、考えることが出来る点を認めなければならない。主張の裏側に言及しないなら、信じてもらえる可能性は低くなる。

ウェブサイトで、製品の欠点に触れると良いかもしれない。

5. 証拠を見せると信じてもらえる

イエ・リー、エリック・ジョンソン、そして、リサ・ザヴァルが実施した調査研究は、温暖化、そして、現在の天候の維持に関する考えを検証するものであった。

この調査では、米国およびオーストラリアの参加者に、地球温暖化を信じているレベルを評価してもらった。また、当日、調査が行われた時期にしては、気温が高い、低い、あるいは、相応かどうかを尋ねた。気温が高いと考えた参加者は、低いと考えた参加者と比べて、温暖化を強く信じている傾向が見られた。

画像

関連する調査において、研究グループは、同じ質問を尋ね、さらに、温暖化と闘うNPOへの寄付を求めた。例年よりも大幅に暑い日は、低い日と比較して、寄付の合計が4倍も高いことが分かった。

メッセージを信じてもらいたいなら、主張を裏付ける状況で、購入を求めるべきである。インターネットでは、エモーショナルデザインストーリーテリング & ストーリーのお膳立てをするイメージの利用が、説得の鍵を握る。

6. 60%以下の価格の製品を合わせて売る

製品を購入する地点に達したら、信頼し、お金を支払っても良いと納得したに等しい。ここまで来たら、さらに多くの製品を売ることが出来る。

例えば、Tシャツを買おうとしている人には、スーツではなく、ネクタイを薦めるべきだ。

60%の確率で、もともとの買い物の価格の60%の価格の製品を売ることが出来る、60 x 60ルールの実績は申し分がない。提案するアップセルは、もともとの購入価格と調和していなければならない。

アップセルは、収益を手っ取り早く増やす効果があるため、利用したことがないなら、試してみよう(ご一緒にポテトフライはいかがですか?)。

7. 長所をアピールする

短所を指摘するのではなく、長所を強調すると説得力が増す。

ある分析が行われ、他の29回の調査に通じる結果が得られた — 合計で6378名が調査に参加した。この分析により、前向きなメッセージは、説得する際に、若干のアドバンテージがあることが分かった。

この調査は、日焼け止めの利用や健康的な食事の推奨等、病気の予防をテーマに掲げているが、その他の領域にも応用することが出来る。研究グループは、習慣を変えなければいけないことは、参加者にとっては受け入れ難い点を理由として挙げていた。

ポジティブな宣伝文句を心掛け(「時間を無断に過ごすべきではありません」ではなく、「毎日1時間浮きます」)、効果があるか確かめてみよう。

8. 選択の矛盾

この調査によると、選択肢が多ければ多いほど、選んでもらえる確率は下がってしまうようだ。

この調査では、カリフォルニア州の高級スーパーマーケットで、ジャムの試食コーナーを設け、時間に応じて、6種類のジャム、あるいは、24種類のジャムを提供した。その後、ジャムを試食した人達に、ジャムをお買い得価格で購入することが可能なクーポンを手渡した。

選択肢が多いと、注目する買い物客は多くなったものの、実際にジャムを購入した人は遥かに少なかった。選択肢を少なくしたディスプレイの方が、売り上げは多かった — 事実、24種類のジャムを用意すると、試食した人の3%のみがジャムを購入し、一方、6種類のジャムを用意したケースでは、30%の買い物客がクーポンを利用していた。

多数の製品を提供しているなら、決定を下しやすくなるフィルターを構築する取り組みに力を入れるべきだ。この点に関しては、この良質な本、または、優れたTEDのプレゼンを参考にすると良いだろう。

画像

9. 頻繁に起きると、最終的に納得する

繰り返しは、明らかに影響を与える。繰り返し同じ広告に遭遇していると、実際の製品を見にすると、頭の中に再び登場する。

ワードや視覚的なパターンの繰り返しは、覚えてもらうだけでなく(このポイントも説得につながる)、繰り返し発生するものを事実として受け入れさせる効果がある。

ChangingMindsは、ヒュー・ランクの説得に関する研究について(世論の説得に関する情報を伝える 1976年)、次のように説明していた:

人間の脳は、パターンをマッチさせる力を持ち、この有益なスキルを使うことに対して、見返りを与える。繰り返しは、パターンを作り出し、その結果、そして、自然に注目を掴みとる。

繰り返しは、親しみをもたらすが、この親しみは、軽蔑を生み出すのだろうか?その可能性はゼロではないが、現実の世界では、親しみやすさは、軽蔑よりも、好印象をもたらす方が遥かに多い。スーパーマーケットに足を運ぶと、たとえ実際に試したことがなくても、知らない会社の製品よりも、よく知っている会社の製品を買う確率は高い。

前回、靴を買った時のことを振り返ってもらいたい。何足か選び、試し履きする前に、元の位置に戻しただろうか?その後、再び履いてみただろうか?この行動を取る人達がほとんどのはずだ。納得するまでに、数足靴を履く人は多い。平均で3回履いてから、購入に踏み切るようだ。

画像

主要なメリット、または、キャッチコピーや広告キャンペーンが提案する長所を繰り返しアピールしてみよう。効果的な宣伝や選挙活動は、この手法を用いている(例: Geicoなら、15%以上お得です…)。親しみ、そして、その結果得られる好意を生み出すため、フレンドリーに繰り返すと良い。

別のリサーチでは、たとえグループの一人が意見を繰り返しているだけでも、グループの全体の意見と見られる可能性が高いことが明らかになっている。

10. 男性は向かい合って話すよりも、Eメールに反応する

グァダグノ & チャルディーニによる研究(2002年)では、男性はEメールに良く反応することが明らかになった。競争心を回避することが出来るためだ。 一方の女性は、面と向かっての会話に良い反応を示す。なぜなら、女性は男性と比べて「関係を大事」にするためだ。

この研究は、Eメールは、男性の競争心をかわす手段を提供する、と示唆している。しかし、これは、あくまでも、知らない相手とのコミュニケーションにのみ当てはまる。身近な人間との間では、面と向かっての会話を好む。

よく知らない男性を説得したいなら、Eメールから始めると良いだろう。

11. 量を制限すると、多く買う意欲が湧く

ブライアン・ワンシンク著の傑作「Mindless Eating: Why We Eat More Than We Think」(見境のない食欲: なぜ思っている以上に食べてしまうのか)の一節を紹介する:

以前、2名の教授の友人 – スティーブ・ホックとボブ・ケント – とチームを結成し、制限が、食料品店で購入する量に影響を与えるかどうか調査した。「お一人様につき12個まで」等、数字を含む看板を見た買い物客は、「お好きなだけお買い求め下さい」等の看板を見た買い物客よりも、多くの量を購入すると推測していた。

この心理を見極めるため、私達は、異なるスーパーマーケットとコンビニで、異なる数字、そして、異なる宣伝(例えば、「1個で1ドル」に対して「2個で2ドル」)を使って、異なる形式で、この調査を続けた。この調査を終える頃には、数字を含む宣伝を行うと、買い物客は、通常よりも30 – 100%多く購入することが明らかになった。

要するに、顧客が購入することが可能な量を数で制限、または、固定すると良い。

12. ストーリーはデータよりも強力

2007年に行われたカーネギーメロン大学の調査で、デボラ・スモール、ジョージ・ロウェンスタイン、そして、ポール・スロビッチは、ストーリーとデータの影響を比較した。

このテストでは、アフリカの危機的な状況に対して、寄付を募った。まず、マラウイで食糧不足が深刻化し、ザンビアでは雨が降らない日が続き、そして、アンゴラでは数百万人が住み慣れた場所を追われている等の状況を、具体的なデータで証明し、寄付を呼び掛けた。

2つ目のテストでは、ザンビアに住むロキアと言う名の飢えに苦しむ少女を取り上げた。写真を見せて、ロキアに直接寄付するよう求めた。

平均で、Save the Childrenのデータ主導の要請を受けた学生は、1.14ドルを寄付していた。一方、ロキアのストーリーを呼んだ学生は、約2倍の2.38ドルを寄付した。

3つ目のテストでは、ロキアのストーリーに加えて、持続的な日照り、農作物の欠乏、そして、食糧不足に悩む大勢のアフリカ人に関するスタッツを紹介した。ロキアのストーリーンのみを呼んだ学生は、平均で、2.38ドル寄付していたものの、ストーリーを読み、さらに、データを与えられた学生が寄付した金額の平均は、1.43ドルであった。

アフリカの窮状、貧困との闘いは、あまりにもスケールが大きく、寄付したところで、あまり意味がないと感じる。その結果、助けたいと願う気持ちが弱くなるようだ。

マザー・テレサも、「大勢の人達を目の当たりにしたら、行動を起こす気は起きません。でも、一人だけを見れば、やる気が起きます」と言っていた。

13. 男性に売り込むなら、女性の写真を使おう

消費者信用業界における実地調査が行われ、女性の写真が、金利の低さと同じぐらい効果があることが判明した。

南アフリカの金融業者が、現在のクライアントに対して、適当に金利を選んで、多額の短期のローンを紹介する手紙を送った。この手紙には、無作為な心理的な「アイテム」が含まれていた。想像した通り、金利はローンの利用に大きな影響を与えていた。通常の経済論とは矛盾するものの、一部の心理的なアイテムもまた利用に大きな影響を及ぼしていた。

男性の顧客には、手紙に掲載した男性の写真を女性の写真に換えると、統計的な観点で、利用が大きく増えた。金利を4.5%低くするアプローチと同じ効果があった。女性の顧客については、女性の写真を利用しても、統計的に有意なパターンは見られなかった。

総じて、女性の写真を提案の手紙に乗せると、大きな効果があると言える。標準誤差により、この効果に対する単一の特定のメカニズムを分離することは出来ない。女性の写真には前向きなインパクトがあったことが、あるいは、男性の写真にはネガティブなインパクトがあったことが、男性の顧客に影響を与えたと考えられる。

このテストでは、割と大きな金利の変化 – 3.25%から11.75%を採用していた。女性の写真の効果は、ローンの金利の4.5%に等しかった。

従って、次回、何かを提案する際は、女性の写真を追加しよう。コンバージョン率が改善されるかもしれない。

因みに、この調査では、セクシーな女性の写真を用いたわけではない。ビキニを着たセクシーな写真は、効果があるのだろうか?

画像

ある研究によると、興奮すると男性は理不尽になり、決定の精度が低下し、視野が狭くなる。この効果は、短期的なものであると考えられ、衝動買いを行う際にクライマックスを迎える。

ビキニを着た女性が、男性の目の前で、製品を販売する状況が理想だ。男性のみを対象とした製品では、インターネット上でも、同じ取り組みを行うことが出来るのではないだろうか。

セクシーな広告は、男性に製品を記憶させる効果はない点が調査によって明らかになっている。セクシーな女性に釘付けになり、製品のブランドにまで注意が行き届かないのだ。

14. リーダーを説得したいなら、力不足を感じさせる

上司が自分の地位の力を実感している際に、新しいアイデアを分かってもらおうとするのは、理にかなっていない。この調査は、このような状況では、上司は耳を傾けないと指摘している。

「権力を持つ人物は、自分の考えに自信を持っている。アイデアに対する考えがポジティブなものであれ、ネガティブなものであれ、この見解を変えるのは容易ではない、と、この調査の実施に携わり、オハイオ州立大学で心理学を教えるリチャード・ペティーは指摘している。

この研究から、新しいアイデアをリーダーに検討してもらいたいなら、あまり力がないと感じる状況を作り出すと良いことが分かる。

リチャード・ペティー曰く、「我々の研究によると、力は、自分の考えに対してより大きな自信を持つきっかけを与えるが、自信に影響を与えるのは、この力のみである。そのため、上司が知らないもの、上司が確信を持てないもの、そして、上司の自信を軽減するものを持ち出す」と良いようだ。

さらにペティー教授は、「上司が自分の力について考えていないタイミングを見計らって、考えを述べ、良い主張を行った後に、権力を思い出させよう。すると、上司は、主張に関する自分自信の評価に自信を持つ。優れた主張を行っている限り、上司が納得する可能性は高い」と続けた。

まとめよう:

  • 知らないことを話題に上げて、力と自信のなさを上司に実感させ、可能ならば、オフィスの外(中立的な場所)で話し合いの場を持つ。
  • 主張を行った後、要請に対して行動を起こすことが出来るように、上司の立場を再び思い出させる。

15. サリバン式頷き術

レストランのコンサルティングを行うジム・サリバンが考案した、サリバン式頷き術は、様々な選択肢を列挙するものの、買い手に購入してもらいたいアイテムを紹介する際に、首を縦に振るアプローチである。少しだけ、頷いていることが分かる程度で構わない。そして、リストアップするアイテムは、5個以内の場合、とりわけ効果が高い。ジム・サリバンによると、60%の確率で成功するようだ。

接客係が、飲み物を提案する際は、必ず笑顔で対応させ、軽く頷かせるべきだ。身振りは強力であり、60%以上の確率で、ゲストは頷き返し、提案を受け入れることが調査により判明している。

宣伝目的の動画の中で、この手法を活用することが出来るはずだ。契約や提案について話をする際に、購入してもらいたいアイテムを紹介するタイミングで頷こう。

16. 分かりやすさは、説得力を凌駕する

Marketing Experimentsのドクター フリント・マクローリンは、「分かりやすさは、説得力を凌駕する」と指摘している。このフレーズを肝に銘じておこう。

説得は、それとなく、そして、巧みに実施すると抜群の効果を発揮する。やり過ぎると、買ってもらえなくなる。キャッチコピーを作る際、または、プレゼンを行う際は、分かりやすさを意識すると良いだろう。偽善者になることなく、そして、過大に宣伝することなく、十分な量の情報を与えて、オーディエンス自身に決めてもらうべきである。

17. 確率が記されていると、87%の人が信じる

…と、私は聞いたことがある。


この記事は、ConversionXLに掲載された「How To Persuade People Online – 17 Lesser Known Jedi Mind Tricks」を翻訳した内容です。

読み物として純粋に面白い内容でしたが、ウェブに限らず様々な局面で活躍しような心理操作術の数々でした。個人的には次のプレゼンで幾つか使ってみたいと思うテクニックがありましたね。。。オーソリティがなくとも心理操作でどこまでカバーできるか、試してみたいと思います。 — SEO Japan [G+]

ヒートマップテストで判明した19点の超重要データ

先日、アイトラッキングに関する記事を配信した所、予想以上の人気がありました。アイトラッキング以上に簡単に実施できるのが、マウスの導線を追うヒートマップテスト。様々なASPサービスも提供されており、低価格で導入できますよね。今回の記事では、数多くの公開事例や調査を通してヒートマップテストで会得した19のデータを紹介します。 — SEO Japan


19 Things We Can Learn From Numerous Heatmap Tests

ヒートマップは、ビジターの行動を分析する上で大いに役立つ。その他のメソッドでは得られない見解を導き出し、その結果、コンバージョン率を大幅に引き上げることが出来る可能性がある。

ヒートマップは、マウストラッキングとアイトラッキングの2つに分類される。大多数の企業は、マウストラッキングのヒートマップを利用している。費用対効果に優れているためだ。それでは、各種のヒートマップのテストで判明した重要な結果を検証してこう。

まず、マウストラッキングとアイトラッキングの一番の違いを挙げていく。マウストラッキングを利用する場合は、実際のビジターからデータを獲得し、一方、アイトラッキングを利用する際は、通常の環境では除外されることの多い人達のグループをサンプルとして用いる。そのため、後者の場合、結果が歪んでしまうことがある。その反面、アイトラッキングを採用すると、テストの主題に関しては100%近い精度の結果が得られる。マウストラッキングの精度は85-90%である。

それでは、テストで得られた見解を紹介していく:

1. ビジターの目的にとって、最も重要なコンテンツをページの上部に掲載するべき

heatmap-18

画像ソース

ビジターは、ウェブページをスクロールするものの、注目が持続する時間は短い — この調査では、ビジターがページを閲覧する時間は、ページの下半分に向かうと、大幅に短くなることが明らかになっている。80%の時間をページ上半分のコンテンツに割り当てている。そのため、ウェブサイトの目標にとって、最も重要なアイテムをページの上半分に掲載するべきである。

この調査では、ユーザーの閲覧時間は、次のように分散されることが分かった:

上半分: 80.3%
下半分: 19.7%

この調査は、1024×768の画質で実施されていた — 現在、大抵のウェブユーザーは、もっと高い画質のスクリーンを利用している。この点は、調査の結論に、本質的な変化を与えるわけではないが、比率が若干変わる可能性がある。大きなスクリーンで流動型なレイアウトが用いられていると、上半分のコンテンツの量が多くなる可能性があるためだ。

ページの下半分に差し掛かると、ユーザーの注目もまた下がる — ヘッダーから離れれば離れるほど、読もうとする意欲は薄れていく。そのため、最も重要な情報を上部に挿入しよう。

また、スクロールを促されると、ビジターはページをスクロールする点を覚えておこう。従って、長いページを用意しているなら、スクロールを促すデザインを採用してもらいたい。

ページの最後の要素に対する注目

この調査では、閲覧時間が、ウェブページの一番下の部分で大きく増えることも判明していた。つまり、ビジターの注目は、ページの一番下に到達すると、再び高くなるのである。 従って、良質なコールトゥアクション、または、関連するコンテンツをウェブページの一番下に置くと、コンバージョン率の増加につながると考えられる。

ついでに、親近性効果、要するに、最後に見たものが、心の中に残る効果も考慮すると良いだろう。時間を割いて、ページの最後を慎重に作り上げることが重要だ。

2. 見るものを買う — 急いでるときは、目立つものが選ばれる

heatmap-19

画像ソース

先日行われたCaltechの脳科学の調査では、早急な決定を行う際(急いでるとき、もしくは、集中力を妨げられたとき)、視覚的なインパクトが、消費者の好みよりも選択に大きな影響を与えることが分かった。 つまり、ビジターが急いでいる時は、個人の好みを軽視し、最も目についたものを基準として選択を行う傾向があるのだ。この偏りは、気が散っている状態では、さらに強くなり、各種の選択肢における好みがない際に、特に強い。

この事実は、大きなポテンシャルを持つ仮説をマーケッターに与える — オンラインショッピング等のとりわけ時間の制約があり、気が散る状況において、製品の視覚的なインパクトが、消費者の好みを上回るなら、ウェブサイトのデザインに戦略的な変更を加えると、ビジターの注目を著しく移すことが出来るはずである。

そのため、忙しさを増す環境で、ビジターが、探しているもの(もしくは、最も売りたいもの)をすぐに見つけられるように、ウェブサイトのデザインを最適化すると良いだろう。

3. ビジターは特にページの左側を見る

heatmap-13

画像ソース

複数の調査により、ウェブサイトの左側にビジターの注目が集まることが判明している。また、左側は、ビジターが最初に見る部分でもある。例外はあるが、左側を常に意識しておくと良いだろう。ウェブサイトの左側に最も重要な情報 — 例えば、独自の価値を表示する手が考えられる。

この調査は、ウェブサイトの左側が、閲覧時間の69%を占めると指摘している。ビジターは、右側と比べ、左側に2倍以上の時間を割くようだ。

4. ビジターはコンテンツをF字型で読む

heatmap-04
この調査の結果では、サイトのビジターが、テキスト主体のコンテンツをF字型に読む傾向があることが明らかになっている。F字型とは、どんな意味があるのだろうか?ビジターは、飛ばし読みしており、主な注目が、テキストの最初の部分に集中する。つまり、最も重要な見出し、そして、小見出しを読み、その後、テキストの大半を選択して、読んでいく。

そのため、テキストの最初の2つのパラグラフでは、最も重要な情報を提供する必要がある — ビジターが最も読む可能性の高いコンテンツがこの部分に該当する。

小見出し、箇条書き、そして、段落を使って、コンテンツを読みやすくするべきだ。ビジターは、飛ばし読みするため、重要な情報を箇条書きで提供すると、テキストに目を通す際に気づいてもらえる確率は高くなる。

ただし、F字型のスタイルは、写真ベースのウェブページには当てはまらない点を理解してもらいたい。この調査で証拠が提供されている。画像ベースのウェブページに関しては、水平方向に見ていく傾向があるようだ。

5. バナーブラインドネスはスペースの無駄遣いをもたらす

heatmap-17

画像ソース

バナーブラインドネスとは、ビジターが、広告のように見えると言う理由で、無意識のうちに、あるいは、意識的に、ウェブページの一部を無視する状況を指す。この現象は随分前から起きている — 大量の広告に毎日晒されているため、無意識のうちに、ウェブサイトの広告を無視する習慣がついたのだ。また、広告のように見える文章や画像も無視される。ビジターは、ほぼ確実に、広告のように見えるコンテンツには注目しない。

このヒートマップに関する調査は、広告をしっかりと注視する行為は存在しないと指摘している。ビジターは、情報を早く入手する必要がある場合、広告を無視する — 一方、ストーリーを読むことに集中しているなら、コンテンツから目を離すことはない。

ウェブサイトでバナーブラインドネスを回避するための方法が幾つかある — オンラインマーケティングの実績を持つデザイン会社に頼むことで、大抵の問題は防ぐことが可能だ。

6. デザインで人物の画像を利用する際は、視線に注意するk

heatmap-12

画像ソース

ウェブデザインで、人物を利用すると有効に働くことがある — 事実、ビジターの注目を集める上で効果的なデザインの要素の一つである。ただし、人物の視線が鍵を握る — 複数のヒートマップに関する調査で、ビジターは、モデルの視線を目で追うことが判明している。そのため、綺麗な女性の写真だけでなく、隣のコンテンツにも注目してもらいたいなら、モデルの女性が当該のコンテンツを向いている写真を利用するべきだ。

また、感情を伝えることも大事である。

感情を伝えると、コンバージョン率に大きくプラスに働く。この調査によると、落ち着いた人物の写真に対して、感情が伝わる人物写真を用いると、コンバージョン率が高くなるようだ。

この2つのアプローチを組み合わせると良い — つまり、感情を伝える人物が、ページの望ましい場所を見つめている写真を利用しよう。

7. 男性はビジュアルを、女性は情報を求める

heatmap-14

画像ソース

この調査によると、出会い系サイトで、プロフィールの閲覧を求められると、男女間で明確な違いが現れるようだ — 男性は、プロフィールの人物の視覚的な要素、つまり写真に注目し、一方の女性は、提供されている情報に関心を寄せる傾向がある。女性は、プロフィールの人物を評価することに、50%近くの時間を費やし、男性は、画像ばかりを見る。

別の調査では、男性は、女性と比べて、胸を眺めるために37%長く時間を費やし、一方の女性は、左手の薬指を見る時間が男性よりも27%長いことが判明した。 この調査は、「男性は変態で、女性は金目当て」と結論付けている。どちらの調査でも、男性が、ビジュアルを意識し、特定の身体の部分を中心に見る傾向があり、女性は、情報を求め、写真を見る際は、情報を得るためにざっと目を通す程度であると、まとめることが出来る。

8. クリックスルー率を改善するために、自動画像カルーセルとバナーを諦める

heatmap-11
この調査では、特定のタスクを抱えるユーザーが、2つのサイトを訪問した結果、メインのバナー、さらには、動画版のバナーも無視されることが明らかになった。この類のソリューションは、数多くのウェブサイトで用いられているが、一時的なブームに過ぎない。自動画像カルーセル、そして、バナーは、ホームページには向いていないと言えるだろう。バナーブラインドネスを導くため、ビジターに無視され、その結果、サイトの多くのスペースを無駄に使ってしまうだけである。

この現象に関しては、この記事で詳しく検証している。

この調査では、1点の例外の存在が明らかになった — ASOS(洋服のショッピングサイト)のホームページ中央のバナーは、その他のサイトと比べて、多くの注目を集めることに成功している。このサイトのバナーは何が違うのだろうか?テストで採用されたその他の画像カルーセルと比べて、ページに溶け込んでおり、バナーのようには見えないことが原因だと思える。その結果、バナーブラインドネスをそれほど多く生み出さずに済んだようだ。それでも、完璧なソリューションとは言い難い。

9. 色の対比を使って賢くビジターを導く

heatmap-05

Image source

techwyseは、ヒートマップを使ってランディングページのテストを行い、色の対比がビジターを導く上で重要度がとても高いと感じたようだ。 テストを行った結果、トップページのクリック不可能な、価格に関する情報が、最も多くの注目を集めていたことが判明した。これは、周りとの色の対比が原因であり、ページの残りの部分から、注目を逸らしていた。デザインを変更し、– トップページを大改造して、ビジターがページを見るパターンと、techwyseが見てほしい情報を合わせる取り組みを行った。

10. 60歳は20歳よりも2倍多くのミスをする

heatmap-06

画像ソース

ターゲットのオーディエンスが、高齢者なら、出来るだけ簡単に利用することが可能な環境を作り、余分な情報を排除するべきである。257名が参加した遠隔ユーザーテストで、タスクの失敗率が、25歳以下と比べて、55歳以上の参加者は1.9倍高いことが判明したためだ。 若いグループと比べて、55歳以上のグループでは、2倍近くの参加者が、タスクの遂行に失敗する、もしくは、タスクを諦めていた。

また、高齢者は、ネット上での動きが遅いことも分かった。若い参加者と比べて、タスクを完了するまでの時間が40%長かった。

タスクを難しいと感じた参加者が2倍多い — 自分にとっては簡単なタスクであっても、高齢者は、とても難しいと感じている可能性は高い。従って、高齢者をターゲットにしているなら、レイアウトを高齢者にテストしてもらおう。

11. 写真を使ってビジターに集中してもらう

heatmap-07

画像ソース

消費者は視覚要素に弱い — ウェブサイトは、インターネットが生まれた直後から、選りすぐりの写真を使って、コンバージョン率を上げる試みを行ってきた。そして、この試みは、ちゃんとした根拠に基づいている。厳選した画像を製品の提案に組み込むべきである。

実在する人物の写真を使う

実在する人物の写真に対するリアクションは高い。この調査により、テストの参加者は、ウェブページの大半を占めるコンテンツを読む行為よりも、従業員の写真を眺める行為に10%以上長く時間を費やしていることが判明した。反対に、「実在の人間」のストック写真には全く反応しない。私達は、どうにかして、実際の人間と「写真データベースの人間」を見分ける術を身につけたようだ。このブログの投稿は、ストック写真を利用した際のデメリットを指摘している。この点は、ストック写真にしか見えない実際の写真にも当てはまる — そのため、写真を過剰に編集するべきではない。

この調査は、LinkedInのプロフィールでは、写真は最も重要な要素だと結論づけており、この調査は、Facebookでも同じ相関関係があることを明らかにしている。

製品の写真を使ってコンバージョンを引き上げる

大きな写真は、適切に利用すると、ビジターの注目を確実につかみとる効果がある。37signalsは、Highriseでこの取り組みを巧みに実施している。

12. ブログでは記事全文よりも要約を掲載する方が良い

heatmap-10

画像ソース

この調査は、ブログのホームページでは、記事の全文よりも、要約を用いる方が、コンテンツを多く読んでもらえると指摘している。

ブログのホームページで、記事全文を用意しているなら、1本目の記事を面白いと思ってもらえない場合、ビジターを失うリスクを抱えることになる。1本目の記事を読むことに好奇心を「使い切って」しまい、ブログ、または、ウェブサイトの残りを読む余力はなくなってしまう。一番左の画像と、その隣の画像は、フロントページに記事の全文を掲載しているブログの画像である。どちらも、ビジターは1本目の記事を飛ばし読みするものの、他の場所は見ていない。真ん中の画像、そして、右隣の画像は、記事の要約のみを掲載するページの例である。Capgeminiのブログでは、ビジターは、10本の記事の要約が掲載されたページ全体に目を通している。一番右の画像(AOL)はハイブリッドのアプローチを採用している — 一部の記事は、短く、全てを表示し、長い記事は、要約を利用している。AOLの例は、また、写真ベースのブログが、ビジターの注目を集めることが出来る点も実証している — 被験者は、1万2000ピクセル以上に目を通し、写真のみを見て、テキストは無視していた。

したがって、ブログのホームページで、記事の全文の代わりに、要約を表示する方が良い。なぜなら、要約は、様々なトピックの選択肢をビジターに与えることが出来るためだ。記事の選択肢を広げることで、サイトを去るのではなく、ビジターが興味深い記事を見つけ出し、クリックして、残りの部分を読む確率は高くなる。

13. Eメールを読む時間は1分以下 — 早めに相手の注目を引き付けよう

この調査によると、ユーザーの67%は、ニュースレターの導入部には注目しないようだ。ニュースレター内の導入部の段落は飛ばし、コンテンツの残りにざっと目を通す傾向がある。ニュースレターに割り当てられる時間の平均は、51秒間であり、ニュースレターの19%のみを真剣に読む。大半の部分は、飛ばし読みされるため、ニュースレターを簡潔で、要領を得た内容にまとめ、明確なコールトゥアクションを用意しよう。

14. 効果を高めるためにA/Bテストとクリックマップを統合する

heatmap-08
A/BテストツールのVisual Website Optimizerの運営者は、ホームページのトラフィックの25%近くが、上部のメニューの小さな「価格」のリンクに向かい、トラフィックの大半を集めるために作った、大きな、主役のコールトゥアクションボタンは、クリック全体の5%しか獲得していないことに気づいた。この事実に気づいたVisual Website Optimizerは、このクリップマップの情報をA/Bテストと組み合わせて、効果の高い変更したホームページのバージョンを見つけ出す取り組みを行った。

ウェブサイトのスプリットテストでは、同じページの2つのバージョン、もしくは、それ以上のバージョンにトラフィックを導き、各バージョンの効果を分析することが出来る。例えば、ボタンの色、背景の色、コピー、または、アイテムの配置をテストすることが可能である。ページのデザインを少しいじっただけで、ビジターの行動に大きな変化が現れることもある — 一例を挙げると、ボタンの色の変更が、コンバージョン率を高くする可能性がある。クリックマップで得た知識をA/Bテストと組み合わせると、クリックマップの効果を何倍にも高めることが出来る — CareLoggerはコールトゥアクションボタンの色を変えて、コンバージョン率を34%を改善していた

15. 値引き価格の隣に元々の価格を表示すると購入の満足感が高まる

heatmap-09

画像ソース

ダン・アリエリ著の「Predictably Irrational」(予想通り不合理)に触発され、ロバート・スティーブンズは、ランダムに60名を選んでテストを行い、関連性が、日常的な決定にどのように変化を与えているのか調査した。人々は、世界に関する全ての情報に基づいて、決定を下しているのではない — 我々は、決定を下す際に利用可能な情報を基にして、決定を下しているのである。

このテストでは、スムージーの棚の2つのレイアウトが参加者に示された — 1つ目のバージョンは、値引きしたInnocentのスムージーのみを見えるようにして、定価のスムージーは載せなかった。2つ目のレイアウトでは、通常価格のスムージーも幾つか配置した。値引きしたスムージーの価格には手を加えなかったものの、元々の価格を把握している状態では、参加者は、購入に満足していた — リッカート尺度では、2.4に対して、1.7であった。

ニュースポータルサイトでのEyetrack IIIの調査

Eyetrack III リサーチでは、10数名のテストの参加者に、偽物のニュースサイト、そして、本物のニュースサイトを訪問してもらい、1時間にわたって観察する試みが行われた。

16. 最初にページの左上に視線が留まる — その後、右側の領域に移動し、続いて、ページの下の方を閲覧する。
17. 目立つヘッドラインを最初に見る — 特に左上の隅を注視している場合、この傾向が特に強い。
18. 集中して読んで欲しいコンテンツには小さなフォントを利用する — 調査により、大き目のフォントは、ページにざっと目を通す行為を導き出す。なぜなら、ビジターは、注目を引きつけるワードやフレーズを探しているためだ。一方、小さなフォントは、コンテンツに集中させる効果がある。
19. ヘッドラインの冒頭のワードは重要 — ヘッドラインの冒頭の幾つかのワードが、ビジターを魅了すると、引き続き読んでもらえる確率は高くなる。1秒以内に注目を掴まなければならない。

アドバイス: コンバージョン率ヒートマップを時間と曜日別に作る

時間、そして、曜日でコンバージョン率を詳しく確認したいなら、このチュートリアルを参考にしよう — Optimisation Beaconを運営するロバート・キングストンが、時間と曜日ごとにコンバージョン率を記すスプレッドシートの作り方を分かりやすく紹介している — 特にEコマースサイトに向いており、ピークのコンバージョンの時間をヒートマップのような形式でまとめることが可能だ。

ヒートマップテストのツール

今回紹介した調査結果により、効果のある取り組みに関して、重要な見解を得てもらいたいが、出来れば、自分自身でテストを行うべきである。ウェブページ用の優れたテストツールを提供する会社は多い。ここでは、より幅広く浸透しており、手頃な価格であり、尚且つ、設定が遥かに簡単であることから、マウストラッキングのソフトウェアに絞って、ツールを紹介していく:

Crazy Egg — マウストラッキングテストにうってつけのツールだ。クリックヒートマップ、スクロールマップ、そして、特定の要素のクリック数に対するオーバレイ(リファラーのソースに応じて、クリック数を見分けることが可能)機能を用意している。Crazy Eggは、アイトラッキングテストと比べて、88%のトラッキング精度を自負している。全てのプランは、30日間限定で無料で利用することが可能であり、その後は、9ドル/月~の料金が課される。

Mouseflow — このツールもマウストラッキングテストを行う際に、心強い助っ人となる。Mouseflowは、– クリック数、イベントのスクロール、キーの入力、フォームの記入等 — マウスの動きの再生と記録を行う機能をアピールしている。フォームを記入する際の、キーの入力を記録することも可能だ。料金は10ドル/月~に設定されているが、機能を制限した永久無料プランも用意している。

Clicktale — エンタープライズレベルのマウストラッキングソフトウェアであり、数々の大企業をユーザーに抱える。このソフトウェアは、マウスの動きを追跡するマウストラッキングスイート、視覚的なサマリーを特徴とするヒートマップスイート、そして、コンバージョン率最適化に良質な分析データを提供するコンバージョンスイートに分類される。400ページビュー/月限定の無料プランもある。ページビューを増やしたい場合は、見積もりを要請する必要がある。

Reinvigorate — このリアルタイムヒートマップツールは、登録したユーザーに名札をつけて、各ユーザーのサイト上のアクティビティを別々に確認することが可能な機能等、便利な機能を幾つか用意している。また、ウェブサイトにログインして、データを見ることに抵抗があるユーザーのために、デスクトップ配信も行っている。14日間は無料で利用することが可能であり、その後、10ドル/月~の料金を求められる。

Luckyorange — マウスの動きの記録に加えて、Luckyorangeは、リアルタイムのビジターマップ、ビジターの投票調査、そして、ライブチャットをソフトウェアに組み込むバンドルも用意している。7日間の無料お試し期間の後、10ドル/月~の料金が発生する。

無料ツール

Clickheat — オープンソースのツールであり、サイト上のマウスのクリック数を基にヒートマップを作成する。

Corunet — このツールを利用するには、コードの知識が必要になる。Clickheatと同じように、ページ上のクリックのデータを基にヒートマップを生成する。

まとめ

ヒートマップは、様々なデータから作成することが出来る。コンバージョン率の最適化について話をする際は、マウスの動きやクリックの回数のデータをベースに生成するヒートマップが、必ずと言っていいほど、話題に上がる。この2つのデータは、どちらもマウストラッキングから得ることが出来る。

  1. ビジターの目的にとって、最も重要なコンテンツは、ページの上部に表示する必要がある — ウェブサイトのビジターは、ページをスクロールするものの、注目の度合いは、スクロールするごとに下がっていく。
  2. ビジターは見たものを購入する — 視覚的な特徴を用いて、最も重要なアイテムを目立たせよう。 視覚的な特徴は、周りのアイテムから目立たせるオブジェクトの特徴的な性質(色等)であり、瞬く間に注目を掴み取る。この特徴を使って、売りたい製品を目立たせると良いだろう。
  3. バナーブラインドネスをテストする — ウェブサイトの要素が、バナー広告に似ている場合、得られる注目は少なくなる。
  4. クリックスルー率を改善するため、自動画像カルーセルを諦める — ユーザーは、具体的なタスクを意識している際は、カルーセルを完全に無視する。この件に関しては、この記事を参考にしてもらいたい。
  5. 写真を使って、注目を集め、ビジターを導く — ビジターは、実在する人物と良質な製品の写真によく反応する。また、視線の方向を通じて、ビジターの動きをリードすることも出来る。
  6. ブログでは、記事全文よりも、要約の方が良い — 要約を用いると、ビジターにもっとコンテンツを読んでもらえるようになる。なぜなら、記事全文を掲載すると、探しているものを見つける前に、ビジターの注目が枯渇してしまうからだ。
  7. A/Bテストとクリックマップを組み合わせて、効果アップを狙う — この2つのメソッドを1つの分析で併用すると、別々に利用するよりも、遥かに多くの情報を得られる。

メインの画像ソース


この記事は、ConversionXLに掲載された「19 Things We Can Learn From Numerous Heatmap Tests」を翻訳した内容です。

圧倒的なボリューム、かつ質も高い内容の記事でした。どれもいわれてみれば一般論としては納得できるものばかりに読めますが、シニアに関するデータは改めてデザインやユーザービリティの重要性を感じました。後半に少し書かれているフォントを小さくすることで注目させる効果がある、、、というのは、ユーザービリティ的には逆説的に聞こえますが、確かに小さいと注意して読むことは事実ですよね。滞在時間、コンバージョンなど総合的に考えた際にどうなるのか気になります。最後のツール紹介は英語圏のものばかりですが、日本語版が提供されているツールもありますし、ヒートマップツールは英語でも特に問題なく利用できますよね。アイトラッキングまでとはいかずとも、これを機にヒートマップツールの導入を検討してみてはいかがでしょう? — SEO Japan [G+]