WD Online

サイト改善基礎講座 Web Designing 2016年2月号

最短で効果の出やすい改善ポイントとは? 効果的なデジタルコミュニケーションを知るための分析と対策

現状の集客と回遊状況を土台に、最短でWebサイト改善の成果を出したいのであれば、「新規会員登録」や「カートへ入れる」といった意思決定を示すボタン「CTAボタン」の改善を真っ先に検討するのが効果的だ。その検討ポイント、そしてGoogleアナリティクスのWebテストを用いての効果検証手順を紹介していこう。

Illustration:goo

CTAボタンとは?

Webサイトを訪れたユーザーが「新規会員登録をする」「カートに入れる」といったボタンをクリックする行為は、「ユーザーが態度変容を起こした」と捉えることができる。Webサイトへ訪問しコンテンツを閲覧するうちに興味が高まり、ビジネス成果へとつながる行動をとろうとした意思表示であり、集客やコンテンツを通じた商品やサービスのアピールがうまくいった結果だと言える。

こうした意思決定を示すボタンは「CTA(Call to Action)ボタン」と呼ばれている。CTAボタンをクリックするかしないかは、ユーザーが判断を下す分岐ポイントとなる。そしてこの、CTAボタンを変更するだけで、サイトのコンバージョン率は格段に変わると言われているのだ。

 

効果的なCTAボタンにするための3つのポイント

CTAボタンを検討する際には、「役割」「文言」「デザイン」の3点が重要なポイントとなる。

役割とは、ボタンの機能を何にするのかということだ。「メルマガ申し込み」「資料請求」「セミナー参加」「見積り依頼」「購入/申し込み」など、CTAボタンと呼ばれるものにもさまざまなタイプがある。こうしたボタンをクリックすることの心理的なハードルの高さは、ビジネス成果と相反する。たとえば、「メルマガ申し込み」は心理的ハードルが低くクリックされやすいが、ビジネス成果は少ない。

be616c58f62ec11fdb7c61b436cb157a.jpg
CTAボタンでは、クリックすることの心理的なハードルの高さとビジネス成果は相反しがちだ。そのサイトに対してどの役割がふさわしいかは、取り扱う商材の計画購買性(購買をもともと予定していたか)に着目して検討していくといい

 

不動産や金融のように、購入決定までの検討期間が比較的長い商材の場合は、心理的なハードルの低い「メルマガ申し込み」「資料請求」といった役割のCTAボタンが相応しい。しかし、日用品や食品のように検討期間が短い商材は、直接的にビジネス成果となる「購入/申し込み」などのCTAボタンの方が適切だろう。このように、ユーザーの購入決定に至るまでの気持ちの変化に寄り添いつつ、ビジネス成果を得るまでのプロセスを検討して、適した役割を持たせるようにしよう。

CTAボタンに表記する文言は、単にボタンの役割を明記するだけではなく、内容を具体的にしたり、訴求を絡ませたりすることで、ユーザーのクリックを誘発しやすくする効果がある。たとえば、「資料ダウンロードはこちら」と「コンバージョン率を10倍にした説明資料ダウンロードはこちら」を比較すれば、後者の方がクリックが多くなると感じられるだろう。

e2c0d6d56bcad6d9d161e6b004549d8e.jpg
CTAボタンの文言に、内容を具体的に示したり、訴求内容を盛り込んだりすることでクリックされやすくなる。広告バナーを作るような感覚で、コピーを調整してみるといいだろう

 

デザインについては、ページ内で背景と同化しないよう目立たせ、視認しやすくクリックしやすい大きさのボタンにすること。そして、PCでは定番の表現ではあるがオンマウス時のインタラクションで好意的な印象を持たせ、ユーザーの視線に入りやすい動線に設置することが重要だ。ユーザーがせっかく商品やサービスへの関心を抱いても、検索エンジンや他サイトへ遷移してしまっては、ビジネス成果へと結びつかない。ページ内でCTAボタンを目にとめ意識させることで、ユーザーの気持ちを揺さぶり判断を迫る。

 

コンバージョン率の高いCTAボタンを見極める

前述の検討ポイントを踏まえ、役割、文言、デザインのバリエーションをいくつか用意したCTAボタンを実際に試し、コンバージョンに効果のあるものを明らかにしていくことがサイト改善への近道だ。このテストには、Googleアナリティクス(以下GA)の分析メニューにある「ウェブテスト」の利用をオススメしたい。これを使うことで、調査対象となるオリジナルのページと比較対象のページを一定の割合で切り替え表示してくれ、どのページがより成果を出せるか比較することができる。A/Bテストができるサービスと似ているが、複数のパターン(最大10種)のWebページを比較することができる点が便利だ。ウェブテスト実施の流れは次のようになる。

 

1 テストページを用意する
オリジナルと同じドメインで異なるURLのページを作成する

2 テストページを正規化する
検索エンジンにインデックスされないよう重複コンテンツ対策を行う

3 GAでテストを設定する
用いる指標、トラフィック配分、しきい値などを画面に従い設定する

4 GAでテストコードを取得して設置する
オリジナルページのhead開始タグ直後にテストコードを追加する

5 GAでテストを開始する
GA画面上でテストコードの設置ができていることを確認し、「テストを開始」ボタンをクリックする

 

2について補足すると、重複するコンテンツページを配信することによってSEOランキングが下がらないよう、対策を行うことが望ましい。テストページでリンク属性 「rel="canonical"」を設定することで、テストページのコンテンツがオリジナルのページと本質的に同じであることを検索エンジンに示すことになり、SEOランキングへの影響を抑えられる。

39436a58104bd1945aaab0b820d30734.jpg
「ウェブテスト」は、Googleアナリティクスのレポートページで、左側に表示されるリストのうち「行動」メニューの中にある。画面に従って入力項目を埋めていけば、簡単に設定が完了する。テストページを表示する比率や複数あるテストページを均等に出し分けするなどの指示もできる。そして生成されたスクリプトを、テストをしたいオリジナルページのhead開始タグ直後に貼り付けることで、自動でオリジナルページやテストページの表示振り分けが行われ、どのCTAボタンがあるページが良い結果を得られたかが明らかになる

 

ウェブテストの結果を反映する

ウェブテストで、もっとも成果の高いCTAボタンが明らかになったら、それをオリジナルのWebページとして設定し、テストページはサーバから削除しておこう。ユーザーがテストページをブックマークしている可能性があるため、サーバサイドでオリジナルページへのリダイレクトを設定しておけば、テストによる影響を抑えることができる。

 

集客や回遊の改善は手間がかかるものだが、こうしたCTAボタンのちょっとした工夫は、コンバージョン率の改善に大きく貢献する可能性がある。テスト自体も、プロセスや結果が明確なので、PDCAサイクルを回しやすい。Webサイト改善とプロセス管理をこれから行っていきたいと考えている方々に、まず取り組んでほしいオススメのアプローチだ。

 

0d450eee41a6bb4094e835655d91dd08.jpg
Text:中川雅史
(株)アンティー・ファクトリー マーケティングリサーチャー&データアナリスト。前職の市場調査会社で身につけた定量・定性調査の経験をベースに、Webサイトのユーザー調査やデータ分析に携わる。また、一般社団法人 日本Web協会(JWA・旧JWSDA)Webアナリスト委員会委員長として、Webアナリティクスの手法や技術の発展に努めている。書籍『サイトの改善と目標達成のための Web分析の教科書』(弊社刊)を監修。 http://www.jwa-org.jp/

掲載号

Web Designing 2016年2月号

Web Designing 2016年2月号

2016年1月18日発売 本誌:1,530円(税込) / PDF版:1,200円(税込)

IoTの現在――その先にあるビジネスのヒント

サンプルデータはこちらから

■ 特集:IoTの現在
 その先にあるビジネスの「ヒント」

2015年、「モノのインターネット」と訳される「IoT(Internet Of Things)」が急速に広まりました。「モノの価値が変わる」「ビジネスが変わる」「生活が変わる」など、さらなる期待が寄せられています。けれども、「IoT」というコトバだけが先行しつつあるのもまた事実。IoTが指し示すこと、そして本当の価値をあなたは理解していますか? ネットとモノ、ヒトとモノ、そしてモノとモノがつながることで生まれる新たな価値とはなんでしょうか。その恩恵を最大限に享受するためにも、いま知っておきたいIoTについて学んでいきます。

 第一人者に聞く基礎知識「「坂村 健先生、IoTってなんですか?」
 6つのキーワードから理解する「さまざまなIoTのカタチ」
 IoTによる課題解決と価値創造「ビジネスのIoT事例」
  e-kakashiが変える農業の姿/「ともだち家電」が提示する新たな価値
 「ユカイ工学」の青木俊介さんに聞く「作り手から見るIoTの未来」

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
有馬記念でさがせ!/早押しクイズ連動ドラマ「脱線刑事」/Slay Your Next Giant/おもてなでしこ伝承中/Bj?rk「Mouth Mantra」/Because Recollection/ztokyo/The Standing March/にこにこ小児歯科/Sagakeen 佐賀県×スプラトゥーン 公式サイト/OKINAWA: The Secret is Out

■ ビジネス・EC
 □ ECサイト業界研究
 AI/FinTech/配送 ――5年後を見据えた2016年のキーワード

 □ 月刊店舗設計
 和座本舗:複数店舗展開で石川県から全国・全世界へ届ける

 □ モバイルビジネス最前線
 アオイゼミ:「無料+ライブ動画+α」で急成長を遂げるオンライン学習塾アプリ

 □ 知的財産権にまつわるエトセトラ
 映画の著作権は誰のもの?

 □ Bay Area Startup News
 SNSメッセージ感覚で送金できる「Venmo」

■ マーケティング・プロモーション
 □ サイト改善基礎講座
 コンバージョン率改善の近道は意思決定ボタンにあり

 □ ハギハラ総研
 国境を越えたECは日本でも定着するか

 □ デジタルプロモーションの舞台裏
 日本全国にブランド認知を拡げた、福岡発のバス施策

 □ 行動デザイン塾
 初めての行為がなぜ習慣化していくのか?

 □ 課題解決のためのUI実装講座
 Webフォントが普及しても、まだ手放せない画像テキスト

 □ 解析ツールの読み方・活かし方
 サイトの改善ポイントを見つけるための現状把握

■ クリエイティブ・コラム
 □ ナビゲーターが選ぶ注目のデジタルコンテンツ
 [バズ施策]「 リアル」と「リアリティ」:Volvo Trucks 眞鍋海里
 [デジタルプロモーション]歯の健康をリンゴで診断:Dentapple 築地 Roy 良
 [Webサービス]指先で創作する時代:Adobe Post 仲暁子
 [IoT]インターネット的体験:Amazon Dash Button 神谷憲司

 □ モノを生むカイシャ
 NAKED Inc.:異次元空間を生み出す魔法の仕掛け人

 □ 清水幹太の「Question the World」
 Jamie Carreiro:芸人根性がつくり出したハイブリッドモンスター

 □ ツクルヒト
 宮本卯之助(神輿師):義を重んずる神輿ディレクター

 □ 最果タヒの「詩句ハック」
 第20回 今日は何の詩?

 □ デザインにできることMonologue
 Vol.145 物理的デジタル

 □ エキソニモのドーン・オブ・ザ・ボット
 人間のソースコードが編集可能に! 遺伝子操作による“デザイン”は是か否か?

■ インフォメーション
 □ Topics
 オトコ心をくすぐる、自走式&可変ロボット「Tipron」/VR ヘッドセット「Oculus Rift」今春発売/10年目のクリエイティブアワード。グランプリは踊る折り紙「DANCING PAPER」と「ちゃんりおメーカー」に

 □ Special
 クリエイターのためのプラットフォーム「DemoDay.Tokyo」レポート

 □ Movement&News
 第8回恵比寿映像祭「動いている庭」/ホキ美術館5周年記念展/宇宙から見たオーロラ展2016/祖父江慎+コズフィッシュ展/「YouFab Global Creative Awards 2015」受賞作品展 ほか
 2015年も続くPC→スマホの消費者動向、アプリは利用者数を大きく伸ばすものも/ITエンジニアが注目する、2016年世間を賑わすキーワードとは?/日本の労働人口の49%が人工知能やロボット等で代替可能に/IoT普及を強力に後押しする無線技術! 実用化に向け開発中 ほか

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています