Never Ending Re-InventionKaizen Platform オフィシャルブログ

「細かいサイト改善」で成果を出すための仕組みとは? CHINTAI社の細かいA/Bテスト事例(後編)

「細かい改善を積み重ね、成果を出す」ためにはどのような工夫・仕組みが必要か、2つの事例を紹介した前回の記事に続き、今回はその仕組みに焦点をあてていきます。

前回同様、株式会社CHINTAIの宮川様、安東様にご協力頂き、具体的な仕組みや考え方について詳しくお話頂きました。

案出しのやり方や、細かい改善で成果を出すためのポイントなどは必見です!

テスト実行までに時間をかけすぎない

20140918.time

ユーザーさんが多く通る場所に絞って改善する

細かい改善を実行する上で注意したい点は、「改善場所の選定や改善案の作成に時間をかけすぎない」こと。

CHINTAI社では改善する場所を”多くのユーザーさんが通る場所に絞る”ことで、改善点の選定に余計な時間を書けないように気をつけています。

参考事例のキャプチャを共有してナレッジを貯める

同業他社さんだけでなく、例えば保険やEコマースなど他業界のサイトからも積極的に学ぶようにしています。多業界の事例も参考にすることで、今までの枠に縛られず考える事ができています。

と宮川氏が話すように、業界に限らず様々な事例を研究し、積極的に活用することがポイント。

各担当者が参考になると思ったものは、キャプチャを1つの場所にためたり、MTGで口頭で共有することで、チーム内にナレッジを貯めていきます。

案出しや会議もスピーディーに

テスト案の検討は週に1回のMTGで決定するとのことですが、時間をかけすぎないような仕組みが構築されています。

毎回のMTGでは各メンバーが2つ以上A/Bテスト案をもってきて、30分〜1時間程でその場でどのテストを実行するかを決め、すぐテストをします。

各メンバーが毎週2案もってくることをルールにすることで、必然的に1つの案を作るのに時間をかけすぎないようになったといいます。

改善の型を作り、ひたすらテストを回す

実際に今回実施した2つのテストについても詳しく伺いました。

事例1:CVボタンの文言を研究し語尾を「名詞」と「動詞」で実験

20140820_chintai2_1

事例1では、、文言が「動詞」と「名詞」どちらで終わる方が効果が高いのかを試しました。以前は雰囲気で特に根拠がなく決めていたので、数字できちんと把握したいという意図がありました。それにボタンのサイズのテストを組み合わせて行いました。

文言に関しては、”名詞より動詞の方がより相手にアクションを喚起しやすいので効果的”とよく言われますが、今回のは最終的に文言を名詞にし、ボタンを大きくしたC案が最も良い結果がでました。

ただ、ページや時期ごとにも結果は変わってくるため、『あらかじめ「名詞」「動詞」など、いくつかパターンを作っておき、時間をかけすぎず何度もテストを繰り返すようにしている』といいます。

chintai_case1total

実際今回の事例においても、前段階でボタンの文言のみのテストをした際は、名詞より動詞の方がCVRが高いという結果がでており、この辺りは今後も継続的にテストを行っていくとのこと。

事例2:「エリア」と「都道府県」などの同義語で結果が変わるのか実験

20140820_chintai2_2
事例2は家賃相場を見た人はモチベーションが高く、CVRが高い傾向にあった一方で、ページの離脱率が高かったことからこのページの改善を決定。

仮説として、他のページとの違いが伝わらず、ユーザーが離脱してしまうのではないかと考えました。まずは文言に着目し、同義語に変えたり、事例1と同様「動詞」「名詞」を変えてテストをしました。

「調べたい」と「住みたい」や、「エリア」と「都道府県」など、文字の見た目やバランスのわずかな違いで最大5%の違いが生じました。

細かい改善で成果を出すための3つのポイント

細かい改善をする場合には、以下の点に注意する事でより成果に繋がりやすいです。

  • ユーザーがたくさん訪れる箇所に絞る
  • 同義語や「名詞」「動詞」など改善案の”型”を作り複数のページで試す
  • 案出しや会議の時間を極力減らし、とにかくテストをする

繰り返しになりますが。細かい改善だからこそ、最初にパターンを作ってスピーディーに、かつ地道にA/Bテストを積み重ねていくことで初めて成果をあげることができます。

皆様もCHINTAI社の事例を参考に是非チャレンジしてみてください。

また、KAIZEN platform Inc.では、そのような細かい改善からかなり大胆な改善まで、様々なサイトを改善してくれるグロースハッカーの皆様を募集中です。

成果に応じて報酬を得て頂く事も可能ですし、サイト改善のナレッジを蓄積できるというお声も頂いております。
是非こちらからご登録(無料)ください

「細かすぎる改善」で成果はでるのか?CHINTAI社の細かいA/Bテスト事例(前編)

chintaicase2_img

「細かい改善を継続することが重要」とよく言われますが、実際に本当に細かい変更で効果があるのか気になる方は多いのではないでしょうか。

今回は株式会社CHINTAI様にご協力頂き、“一目ではどこが変わったのかわからない”ような、細かい変更がどのくらい成果に繋がったのか、実例をみていきます。

細かい文言やサイズの変更で結果は変わるのか?

事例1-(1)

お部屋探しサイト、CHINTAIでの物件一覧ページ改善の事例です。
物件情報欄と、各物件情報欄の上部・下部の計3箇所の細かい変更で、20%の改善に成功しています。

case_test1.2nd

●上部のボタン文言改善
まずは上部の変更箇所を詳しくみていきます。変更点が3点あるので、是非探してみて下さい。

case1-A




●上部のボタン文言改善・答え
変更点はわかりましたでしょうか?変更されたのは全てボタン内の文言です。

case1-1_answer

A,Bでは「お問合わせする」だったボタン内の文言が、Cでは「お問合わせ(無料)」と”無料である”という情報が加わっています。

同じくA,Bでは「気になるリストに追加する」だったものがCでは「気になるリストに追加」に、「詳しい情報を見る」「さらに詳しい情報」に、それぞれコンパクトになっています。

事例1-(2)

●物件情報欄と、下部のボタン&文言改善
物件情報欄および、物件情報欄の下部でもボタンの位置と大きさ、文言の変更が行われています。

case1-2.2img

AとBは文言は全く変化がないものの、Bでは「お問合せする」ボタンのサイズが大きくなり、より強調されているのがわかります。

AとBは他の部分は全く同じため、このわずかな変更のみでCVRに15%の差がありました。

Cは上部の変更と同様、「お問い合わせ(無料)」「さらに詳しい情報」などボタン内の文言が微妙に変更されている他、Bと同様に、Aに比べ「お問い合わせ(無料)」ボタンのサイズが大きくなっています。

事例2.

次は「家賃相場から探す」ページの改善事例です。こちらも細かい変更で結果が最大5%変わっています。

chintaicase2_img

1番結果が良かったのは左上のキャッチコピーのみを変更したE案です。
B案、C案も同様に左上のキャッチコピーのみの変更でしたが、E案程は改善されなかったという結果に。

D案に関しては、キャッチコピーはA案と変えず、下部にある「家賃相場から探す」ボタンの色を赤色に変更したところ、E案には及ばなかったものの2番目に効果が高い案となりました。

細かい改善でも結果はかわる

最大で20%の改善

2つの事例とも、一目では気づきにくい「非常に細かい変更」でしたが、事例1では最大20% , 事例2では最大5%の違いがありました。

この事例を見てもわかるように、細かすぎる改善でも結果は変わる可能性があるとはっきりとわかります。

次回は細かい改善のポイントを担当者の方にインタビュー

とはいえこのような細かい改善を効果的にやっていくのは意外と難しいもの。

次回は実際に株式会社CHINTAIの担当者の方に伺った”変更案の出し方”や、”改善点の見つけ方”について紹介しますので、ご期待ください。

また、KAIZEN platform Inc.では様々なサイトを改善してくれるグロースハッカーの皆様を募集中です。

成果に応じて報酬を得て頂く事も可能ですし、サイト改善のナレッジを蓄積できるというお声も頂いております。
是非こちらからご登録(無料)ください

「失敗から何を学ぶか」がA/Bテストの鍵 |ルクサ社のplanBCD活用事例

最近A/Bテストの事例が紹介されることが増えてきましたが、そのほとんどはテストをした結果が向上した成功事例です。

毎回成功すればいいのですが、現実には当然ながら失敗することもあります。というより、むしろ実際は失敗することの方が多いです。

なかなか表にはでてきませんが、失敗事例は成功事例の数倍、数十倍あるもの。

だからこそ、そういった失敗も含めて結果を分析し、仮説の構築やテストの方向性を再設計していくことで最終的に成功に繋がることが大切です。

今回は株式会社ルクサ様にご協力頂き、数回のA/Bテストで成果がでず苦労をしながらも、失敗を糧にテストを再設計し成果に結びつけた事例を紹介します。

仮説を立て、繰り返しテストを実施するもなかなか成果が出ない

A/Bテストを実施したのは、高所得者向けセレクト・アウトレット型 EC サイト 「LUXA」のランディングページ。

ゴールを「新規会員登録件数」の増加に置き、外部のグロースハッカーからアイデアを募りテストをしました。

最初は”メインビジュアルの改善”に焦点を当て3回のA/Bテスト

最初は「メインビジュアルをより魅力的なものにすれば登録数が増えるのではないか」という仮説を立て、変更のポイントを主に背景の画像に置き、テストをしました。

気になる結果は、元案が最も高い登録率に。
1回のテストのみでは振り返りの材料が少ないため、同じ方向性のまま更にテストを2回実施しました。

luxatest1-3

合計3回のテストを実施し、複数案を試したものの、図の通り元案が最も登録率が高いという結果。

なかなか成果に繋がらず、ルクサの担当者様とKAIZENのコンサルタントで原因の分析や今後の方向性の議論を重ねます。

テストの方向性を見直したことで結果が一変

そうして迎えた4回目のA/Bテストで、遂に改善案が元案を上回るという結果に。

luxatest-4

それまでの案がメインビジュアルの変更にフォーカスしたものだったことに比べ、今回の案は「食べログ3.5のお店も50%OFF!!」というキャッチコピーをより強調したものでした。

3度の失敗と今回の結果から新たな仮説を構築

これまでの失敗と今回の結果を振り返る中で、「実は画像がキャッチコピーの魅力を阻害していたのでは?」と新たな仮説が浮かび上がります。

そこで改善の方向性を再度議論し、「キャッチコピーを強調すること、及びキャッチコピーも別のものを作ること」とグロースハッカー向けのテスト依頼を再設計。

この要件で新たな案を集め、5回目のテストを実行してみます。

方向性の見直しが20%の改善に繋がる

テストの結果は以下のようになりました。

luxatest-5

B案、C案ともに、文言の追加やフォントの拡大により、ユーザーが登録するメリットを強調する事で、20%以上の改善に成功。

失敗に終わった1-3回のテストの結果をしっかりと分析し、方向性を再設計したことが改善に繋がったと言えます。

継続的に結果を基にテストの方向性を見直し、最適化することがポイント

相性の良いグロースハッカーにより他のページも改善

今回のテストで効果の高かった案を投稿したグロースハッカーが他ページのテストにも参加し、改善案を投稿したところ、13%の改善に成功しました。

この事例を始め、それぞれのグロースハッカーに得意な分野やカテゴリがあり、得意な分野では高確率で効果的な案を出せることがわかりました。

KAIZEN platformでは今後「クライアントとグロースハッカーのマッチングの仕組み」を最適化することで、よりサイトの改善に繋がりやすい仕組みを作っていくので、楽しみにお待ちください。

ナレッジを溜め、さらなるスキルアップに繋げたいグロースハッカーの方は、是非こちらからご登録(無料)ください。

グロースハッカー直伝、まず試したい簡単で効果的な「鉄板」A/Bテスト案

20140909_22222
A/Bテストに興味があるものの具体的な改善案が浮かばない、もしくはそもそも何から始めたらいいかわからないという人も多いのではないでしょうか。

そこで今回は実際にplanBCDでご活躍中のグロースハッカーの方に、まず最初に試したい「鉄板」改善パターンを伺ってきました。

本稿では、その中でも「簡単」「すぐに実践可能」「結果がでる確率が高い」という観点から厳選した3つの案を紹介していきます。

1. ボタンの色を変える

20140904_1

まさにA/Bテストの鉄板中の鉄板と言える、「ボタンの色」の変更テスト。

どのページ、どのの箇所でも汎用的にテストをすることができ、かつ「どれかの色が」ほぼ確実に結果を出せる非常に優れた施策です。

同じサイトでも、ページの構成や背景などによって効果の高い色が変わってくるので、ページごとに全く結果が変わるのが奥が深い所です。

ボタンの色に関するテストに関してはまた次回以降のブログでも深堀していく予定です。

2. 重要な要素はファーストビューに設置する

20140909_22222

訪問者に押してほしいボタンやリンク、バナーなどは、ページのファーストビューに設置されているでしょうか?

ファーストビューとは、ページを開いた際に、スクロールしなくても目に入る画面の範囲の事です。

スクロールせずに直帰してしまうお客様は想像以上に多いもの。もしアクションに繋がる重要なボタンがページの1番下にあるという場合は改善のチャンスです。そのボタンを今すぐファーストビューに設置しましょう。

厳密には使用しているPCやブラウザによってもファーストビューは異なりますが、そこまで難しく考えずに、まずは自分のPCで試してみることから始めてみてください。

【応用編】重要な要素以外はファーストビューから消去する

また、応用編としては、重要でない要素を思いきってファーストビューから消去し、スッキリさせるというのも試してみる価値のあるアイデアです。

そもそもボタンをファーストビューに設置する目的は、ボタンを目立たせることで、訪問者にしっかりと認識してもらうため。

複数のボタンや無駄なテキスト、リンクなどがファーストビューにごちゃごちゃしている場合には、本当に注目して欲しい要素以外を消去することで、訪問者の関心を1点に集中させることができます。

3. CTAを明確にする

20140904_33

CTAとは「Call To Action」の略で、訪問者を特定の行動へ喚起することを指し、「購入」「無料登録」など、ボタンやリンクなどを用いられることが一般的です。

このボタンのリンクやテキストを変更し、CTAを最適化することでコンバージョン数が改善される事例が非常に多いです。

理由としては、運営者が思っている以上に、訪問者は「このページで何をしたらいいか」を分かっておらず、それをきちんとガイドできていないサイトが多いことが考えられます。

わずかな違いでも、「このページで何をしたらいいか」「このボタンを押すと何が起こるのか」などを明確にし、訪問者の不安を取り除くことが出来れば、結果が変わってくるので、試してみる価値の高い施策です。

複雑に考えすぎず、まずは試してみることが成功への近道

本稿では、簡単に実施ができ、かつ効果がでやすいアイデアを3つほど紹介してきましたがいかがだったでしょうか?

A/Bテストで成果を出すためには、まずはテストを実施し、その結果を見ながらテスト内容を改善していくことが必要です。

必要以上に複雑に考え、1回のテストに時間をかけすぎるのではなく、まずは簡単なものから複数試してみることをオススメします。

また、planBCDではA/Bテストをより効果的に行う手段として、世界中のグロースハッカーにUI改善を依頼できるOpen Offerという機能を準備しており、現在非常にグロースハッカーの方のニーズが高まってきています。

自身のUI改善のスキルをもっと生かしたいという方は、是非こちらからグロースハッカー登録(無料)をお願いします。

2014年9月4日、最新のオープンオファー情報をお届けします

KAIZEN platform では、多くのA/Bテストが世界中のデザイナーに情報を公開して「オープン」に行われています。

今回の記事ではそのいくつかをご紹介します。

「どれだけページを改善したか」によって報酬は山分けですので、腕試しをしたい方は是非こちらからグロースハッカー登録(無料)してみてください。

サントリーウエルネス様 ランディングページ改善

c1e0cf90f2bafbe3de1b55066322be8b69a65c4c
多くの広告のランディングページとして汎用的に用いられているページの改善です。現在ページ構成が長くなってしまっているため、興味を持ってくれたお客様に「端的に」商品の魅力を伝え、購入数の増加につなげる改善案をご希望です。

ココナラ様 会員登録ページ改善

 

bf9124914d0964ef66e10714b4064f3cab516deb
日本最大級の知識・スキルのマッチングサイト、「ココナラ」の会員登録ページの改善です。これまで改善活動はしていなかったとのことで、何と変更箇所やテキスト、ビジュアルの指定を特に設けず、今回のご参加となりました。

キーマンズネット様 会員登録ページ改善

e49e3ad8615bc14f24974a32d33a9cc574a8f5f1
最後はキーマンズネット様からのご依頼です。各製品ページに出る「オススメ製品情報欄」のキャッチコピーとレイアウト改善をご希望でらっしゃいます。こちらはCSSのみの作成となりますのでご注意ください。


 

いかがでしたでしょうか?

腕に覚えのあるデザイナーの方は是非こちらからグロースハッカー登録(無料)をお願いします。今後も定期的にオープンオファー情報をお届けして参ります。

 

要注意、A/Bテストがほぼ確実に「失敗」する3つの兆候

様々なメディアでA/Bテストの考え方や事例が紹介されるようになった今、A/Bテストが重要ではないと考える人はかなり少ないのではないでしょうか?

一方で、全ての企業がA/Bテストを成功させられるわけでないのも事実。コストをかけても効果がでないケース、結局始まりすらしなかったというケースもあります。

そこで本稿では、A/Bテストが失敗してしまう危険性の高い3つの兆候を紹介します。現在実施中、もしくは実施を検討していらっしゃる方は是非チェックしてみてください。

兆候1. A/Bテストの計画が1週間以内に決まらない

201409_abtest_mistake1

A/Bテストを実施する場合、そもそもどこのページでやるか、いつまでにやるか、誰が担当するのかといった大本となる計画を最初に立てる必要があります。

ただ、それらの計画が1週間以内に決まらない場合は、テストが失敗してしまう危険性がかなり高くなるので要注意です。

大本の計画が決まらないことには、具体的なテスト案の案出しや選定、実装を進める事もできません。

この状態に陥ってしまう多くの原因は、必要以上に複雑に考えすぎて先に進むのをためらってしまっていること、もしくは関係者が多すぎて調整に時間がかかりすぎていることのどちらかが考えられます。

この段階で1週間以上費やしてしまっている場合は、どちらにせよ結果をだすことが非常に難しいです。

兆候2. エンジニアとの協力体制が築けていない

201409_abtest_mistake2

A/Bテストと聞くと、マーケターがやることとイメージされる方が多いかもしれませんが、実際はエンジニアと協力することで成功の確率が高まります。

というのも、本格的にテストをやるとなると、頻繁にサイトの中身をいじることになり、それにはエンジニアの協力が不可欠。

例えば、JavaScriptコードの設置を依頼しているのに、それに1ヶ月を要するといった場合はかなり危険な状態です。

エンジニアが少なくとも1名以上いるチームが成功している事例が非常に多いため、A/Bテストのチームを作る際には是非参考にしてください。

兆候3. A/Bテストは量より質が重要だと考えている

201409_abtest_mistake3.2

A/Bテストをやる上で頭に入れておいて頂きたいのが、A/Bテストは基本的に失敗するということです。

1回のテストで効果があがるのは実は2~3割ほど。テスト設計時に様々なデータを基にしたとしても、成功率が1~2割あがる程度のため、回数をこなすことがポイントとなります。

質を重視すぎるあまり、難しいテストをやる方向に走ってしまうと、施行回数が減り一向に成功しないことに繋がるので注意が必要です。

また、基本的にA/Bテストは地味で心が折れやすい作業のため、例えば「部門ごとに大会のような形式でやる」などちょっとしたゲーム要素をいれてみるのもオススメです。
(実際に弊社のクライアント様が実施していらっしゃるユニークな仕組みです。)

着実に結果を出す仕組みづくりがポイント

A/Bテストが失敗してしまう兆候について、具体的な3つのパターンを紹介してきましたがいかがでしょうか?

以上のようにA/Bテストは失敗する確率が高いからこそ、ただやるだけではなく継続的に、かつ効果的に実施するための仕組みをつくることが重要です。

その仕組みをサポートするものとして、planBCDではOpenOfferという、世界中のグロースハッカーにUI改善依頼をできる機能を用意しました。

失敗する可能性が高いからこそ、UI改善のノウハウを持ったグロースハッカーのニーズが高まっています。

ノウハウを生かし、様々なクライアント様のUI改善のサポートをしたいという方は、是非こちらからグロースハッカー登録(無料)をお願いします。

「はたらいく」に学ぶA/Bテストで成果を出せる仕組みの作り方

hatalike_title2

頻繁にA/Bテストを行い、継続して成果をあげているリクルートジョブズ社が運営する求人・転職情報サイト「はたらいく」

今回は、はたらいくでA/Bテストを担当されている、鹿島拓也氏、飯野洋樹氏、佐瀬綾奈氏、佐藤陽一氏にA/Bテストのポイントや仕組みを伺ってきました。

特に案件出しから振り返りまでの一連のフローや実施ルールなど、A/Bテストを支える仕組みは是非参考して頂きたいポイントです。

case study-はたらいくのA/Bテスト事例-

今回は、『毎日、毎週、毎月変わる商材』×『求人への申込(応募)が最終的なCV』という事例です。

hatalike_format_growthhac_case

求人系のサービスだけでなく、ECサイトやメディアなど、頻繁に情報が変わっていくようなサイトを運営する方には、特に参考にして頂けるかと思います。
(*A/Bテストのケースに関して関心がある方はこちらのスライドを参照ください)

【概要】

[サービス概要]
  • 会社:株式会社リクルートジョブズ
  • サービス概要:地元・地域密着型の求人・転職サイト「はたらいく」
[A/Bテスト概要]

今回は以下の2つの事例を紹介します。

  1. メール登録文言のテスト
  2. 募集要項のレイアウトのテスト

■1.メール登録文言のテスト

求人検索結果ページに設置されている、求人情報を受け取るためのメール登録の導線となるリンクのテストです。

実践A/Bテスト

hatalike.ab1

変更ポイント

上記の4つのパターンでは以下を変えてテストをしました。
1.リンクのカラー
2.リンクテキストの文言
3.メールのアイコン

【結果】

改善案C『この検索条件の新着求人をメールで受けとる(無料)』が79%の改善

【解説・考察】

●リンクであることをきちんと強調する
ボタンやリンクについては、それがリンクであることを強調することが非常に大切です。

本事例では、一見改善案Aが枠などを使用していて目立つように感じますが、リンクであること(=クリックできること)が一目ではわかりづらいです。

一方で他の3パターンは青色の下線をつけるなど、リンクだとわかりやすかったことが結果に繋がったと考えられます。

■2.募集要項のレイアウトのテスト

次に紹介するのは、一覧ページでの各募集要項のレイアウトのテストです。

【実践A/Bテスト】

hatalike_abtest_case2

【変更ポイント】
  1. 表示項目のデザイン(文字数削減/項目ごとに区切り)
  2. ボタンの文言(「応募する」➡「詳細を見る」)
【結果】

改善案A、Bともに詳細ページへの遷移率が10%向上

【解説・考察】

●ユーザーにとって見やすい、わかりやすいことが不可欠

文量や行数、境界線などを微調整するだけで、情報が整理されて見やすくなり、詳細ページへの遷移率が向上しました。

また、このテストの前段階で項目量を調整したり(給与の欄をなくす)、写真をなくしたりしたところ、

  • 項目の量を減らした場合、わずかにページ遷移率向上
  • 写真をなくした場合、遷移率が減少したため中止

という結果がでました。

やみくもに情報量を減らせばいいわけではなく、ユーザーにとって必要な情報をわかりやすく伝える工夫が必要だとわかります。

はたらいく流A/Bテスト成功マニュアル

ここからは、はたらいくがなぜこのようにA/Bテストを上手く仕組み化して継続できているのか、その秘訣を紹介します。

A/Bテストの全体図

はたらいくのA/Bテストの仕組みを理解する上で、まず最初に押さえておきたいのがA/Bテスト一連の流れです。

hatalike_ABtestflow

A/Bテストを実施する頻度は1,2週間に1回程で、1つのテストに関しては、①〜⑧の全行程でだいたい2-3週間くらいをかけて行っています。

以下ではその中でも特に参考にして頂きたい「案件だし」「テスト&モニタリング」「振り返り」のポイントについてみていきます。

案件出し

案件出しの段階で重要となるのは、アイデアベースで様々な視点から少しでも多くの案を出すこと。

とくに職種やポジションなどに関わらず、思いついたアイデアを貯めていくことがポイントとなります。

はたらいくでは、Excelで案件だし専用のフォルダを作っていて、そこにどんどんA/Bテストのアイデアを貯めていくようにしているそうです。

とにかく思いついものからどんどん書き込みます。実際にどの施策をやるかは、その時々によって重要な指標が変わっていくので、それに合わせて決めていきます。

この段階で大切にしていることは、変更するポイントやデバイスなどの制約は特に設けず、まずは案をどんどん貯めていくことに重きを置いています。

hatalike_kaizenentry1

また実際のアイデアの出し方については、

  • 他社の事例を参考にする
  • 自分たちで頻繁にサービスを使ってみる
  • ユーザーインタビューの内容を参考にする
  • ユーザーテストの結果を参考にする

などが中心になるとのこと。

ページ全体のレイアウト変更といった大きめの改善から、事例として紹介したボタンの色やアイコンなど細かい改善まで、規模を問わず様々なテスト案をためていきます。

テスト実行&モニタリング

アイデアの絞り込みや準備が終え、実際にテストを行う際にポイントとなるのが、とにかくスピーディーにサイクルを回すこと。

テスト実施の翌日にまず初速の確認をし、テストを継続しても大丈夫かの判断をします。

全体でもだいたい1-2週間くらいで終わるようにしたいので、その期間で信憑性のある結果がでるようにCVの数などを調整することを意識しています。

大幅な改善をすることもあるからこそ、モニタリングやテストを中止するための要件を予め明確に定めておくことは必須です。

はたらいくでは、細かいA/Bテストのルールを明文化し、これに従い案件出しから振り返りまでのサイクルを回していきます。

hatalike_abtest.rule

振り返り

テスト終了後の振り返りは、結果が良くても悪くてもきちんと残しておくこと。

はたらいくで実施した施策が全て成功するかというとそんなことは決してなく、失敗することも少なくないといいます。

ただ、結果に関わらず必ずやっているのが、テスト結果をきちんと知見として貯めていくという点です。

結果が良い時はメールなどで速報で共有しますが、微妙な時は特に表立って共有はしません(笑)。

ただシートに記入していつでも見れるようにはしていますし、ある程度たまった段階で資料にして振り返り・共有をします。

はたらいくのA/Bテストを支える風土

RJB_HL
はたらいくの改善を担当する方々。写真左より、

  • 鹿島拓也氏(はたらいくWeb開発ディレクター)
  • 飯野洋樹氏(はたらいくエンジニア・スペシャリスト)
  • 佐瀬綾奈氏(はたらいくUI/UXスペシャリスト)
  • 佐藤陽一氏(メディア統括Web開発ディレクター)

コミットと権限委譲

このようにしっかりとした仕組みがあり、事業部全体でグロースハックなマインドが浸透しているはたらいくチーム。

ただ、もともと以前からこのような考え方であったかというと、決してそうではなかったといいます。

サービスを継続的に成長させることを考えた上で、2月くらいから少しずつ始めていきました。

その上で、やみくもにやっても枯渇するからきちんとルールを決めた上で、現場に権限移譲をした上でしっかりとコミットしようという流れになり、そこからは“スピード感をもってやりながら考える”という体制になりました。

はたらいくのA/Bテストのルールで是非とも参考にしたいのが”ルールの粒感”。

フローやテストを中止する際の要件など最低限の部分をきちんと明確にした上で、現場に権限を移譲することがスピーディーなサイクルを支えています。

成功事例がでたことから、より市民権を得た部分もあります。今では“頼みの綱のA/Bテスト”と思われる程、集客担当など、周囲からの見方も変わってきました。

社内の理解を得ることや、特定の個人ではなく、社内にグロースハックマインドを浸透させることが、継続的な改善活動を行っていく上で大きな鍵となります。

その際に「最低限の仕組みを作ってまずはチャレンジし、その結果を社内にナレッジとして蓄積・共有し続ける」という点は、是非参考にして頂きたいポイントです。

常に何かを動かしておく

最後に、実際にA/Bテストを継続する上で特に意識していることを伺うと、「とにかく止めないこと」だといいます。

気持ちの上では常に何かを動かし続ける、どんどん新しいことを試し続けるということを大切にしています。

一方で、テストをする回数が多ければ多い程いいというわけでもないので、現状ではテストの回数などをKPIに置いたりはせずに、しっかりと質を担保した上でテストを重ねています。

終わりに

今回は、『毎日、毎週、毎月変わる商材』×『CVが求人への申込(=応募)』の事例でした。
hatalike_format_growthhac_case

毎日、毎週、毎月変わる商材

はたらいくのような求人サービスでは、頻繁に商材(情報)が更新されていきます。

ECサイトなどもそうですが、こういった場合には、「全てに共通するようなフォーマットとなる部分をいかに最適化できるか」がポイントです。

各ページに共通するアクションボタンの変更や、募集要項のレイアウト変更など、フォーマット自体を改善するようなA/Bテストを行っていきましょう。

申込がゴール

今回の事例では、最終的なCVを申込としながらも申込ページへの遷移率や、メール登録数などその手前にある数値を目標としたテストも実施されていました。

最終的なCVRはきちんと追いつつも、その手前となる指標を見ながらテストをすることも大切です。

特に絶対的なCVが少なすぎる場合にはA/Bテストをしても結果の信頼度が落ちてしまうため、CV数が3桁以上になるようなCVを設定しA/Bテストをすることをオススメします。

はたらいくからのお知らせ

hatalike.saiyou
リクルートジョブズでは、はたらいくチームをはじめ、一緒にグロースハックしていく仲間を募集中とのこと。ご興味のある方は、まずは詳細をご確認ください。

hatalike_button

効果36倍のA/Bテスト方法ほか海外人気バイラルメディアに学ぶサイト改善の公式と施策

blog_upworthy_title

数多く存在するバイラルメディアの中でも、急激な成長率が話題となったUpworthy。良質なコンテンツはもちろんのこと、その成長の秘訣は「オリジナルのバイラルを起こすための公式」と、それに関する「細かい施策と考え方」です。

本稿では以下の項目に沿って、メディアを運営している人を始め、サービスの成長に悩んでいる方に参考になるポイントをお伝えします。

  • Upworthyのグロースの公式
  • 『Shares per view』(シェア数)を高める施策
  • 『Clicks per shares』(クリック数)を高める施策
  • その他の改善施策
  • Attention Minutesという新たな指標
  • 終わりに / 参考資料の紹介

グロースの公式の作り方

鍵を握る2つの指標

upworthy_test
(「How to make that one thing go viral just kidding」スライド3枚目参照)

まず押さえておきたいのが、Upworthyのグロースに関する考え方についてです。図を見ると、重要な指標として以下の2つが挙げられています。

  • Shares per view ➡ 閲覧数におけるシェア数
  • Clicks per shares ➡ シェア数におけるクリック数

そして、この2つの指標がどちらも高い数値をたたき出した場合にバイラルが発生するとしています。

参考にしたい目標の立て方

ここで参考にしたいのが、サービスのグロースを考える際に目標とする指標の立て方です。

ポータルサイトやメディアを運営される場合、PVやUUといった指標をKPIとして設定するケースも多いと思います。

Upworthyはそこから一歩踏み込んで、シェア数とシェアされたコンテンツのクリック数を1つの指標としています。

PVやUUという最終的な結果となる数値だけを追うのではなく、その結果に大きな影響を与える、もう一歩手前の数値を追っていくことで、より解決するための打ち手が考えやすくなり、最終的な成果にも結びつきやすいです。

実際Upworthyでは、それぞれの指標に対して以下のような施策を実施しています。

●Shares per view を高める

シェア数を高めるためのページの設計・A/Bテスト / シェアされるコンテンツ作り

●Clicks per shares を高める

クリック数を高めるためのタイトル・画像の最適化

ここからはそれぞれの施策について具体的に紹介していきます。

Shares per view を高める施策と考え方

シェア数を増やすために重要となるのが、シェアをしやすいページ設計をすること。Upworthyでは、各コンテンツページのデザインを何度もテストをし、最適化することで、シェア数の最大化を目指しています。

シェアボタンに関するA/Bテスト

upworthy_abtest1
これはUpworthyaのブログで公開されている、過去の改善例です。

「各ソーシャルメディア毎のシェアボタンを、コンテンツの真上と横の2カ所に設置」

するように変更したところ、Bの方がシェア数が50%以上も多かったという結果がでたという事例です。

  • アクションボタンをわかりやすい場所に設置 / 強調する
  • なるべくコンテンツの近くにアクションボタンを設置する

上記のような改善は様々な事例でも結果が出ている、まず最初に試したいポイントです。
Upworthyではさらにページのデザインを変更し、現在では以下のようになっています。

upworthy_case_contents

  • アクションボタンをコンテンツの下にも設置(上下と左横の系3カ所)
  • アクションボタンを大きくし強調
  • シェアボタンをポップアップの用に表示することで強調
  • 動画コンテンツ下にはFacebookのLikeボタン設置

とにかく各所にシェアボタン・Likeボタンを設置して何らかのアクションを促す努力をしています。特に3つ目のシェアボタンの強調方法は他のバイラルメディアではまだあまり見られない試みです。

Clicks per shares を高める施策と考え方

タイトル(ヘッドライン)の改善

シェアされた記事のクリック数を高めるのにUpworthyが注力しているのが、タイトル(ヘッドライン)の最適化です。

タイトルに対する考え方がかなり徹底していて、

  • 各記事ごとに25のヘッドラインを考える
  • タイトル毎のクリック数をテストする
  • タイトルを最適化するとともに、クリックされやすいタイトルに関するナレッジをためる

upworthy_title

例えば、上記の2案は同じ記事に対する25のタイトル案の内の2つなのですが、『Aのクリック数はBの36倍』とタイトルが違うだけでこれだけの違いが発生しています。

ソーシャルからの流入を増やしたい場合は、タイムラインに流れているたくさんのコンテンツの中でも、ぱっと見て「読んでみたい」と思われるタイトルを考えないといけません。

たった数十文字の文言が変わるだけで、クリック数も劇的に変わってくるだけに、このタイトルに対する執念は参考にしたい部分です。

タイムラインに表示される画像の改善

クリック数を改善するためにタイトルと同様に重要になってくるのが画像です。

upworthy_img
(「How to make that one thing go viral just kidding」スライド25枚目参照)

upworthyでは特徴的な画像が設定されているのが印象に残りますが、タイトルと同様に画像についてもかなり綿密に設計されています。

タイトルのように具体的な個数は明かされていませんが、同様に同じ内容の記事でも、いくつかの画像でテストをしながら最適化しています。

シェア時の文言を最適化

上記に加え、ソーシャルメディアでシェアする際の「テキスト」まで徹底的にこだわっているのがUpworthyのすごい部分。

国内ではマンガボックスの事例も話題になりましたが、ソーシャルメディアで注目を集めるために、シェアされる際の文言にまで気を配っています。

upworthy_tweet

自分で編集をしない限り、予め運営側で設定されたテキストが使われることになります。図の例も、Twitterでシェアする際には、タイトルとは違うTwitter拡散用のテキストがデフォルトで適用されていることがわかります。

その他の改善施策

シェア数・クリック数を増やすための代表的な施策を紹介してきましたが、Upworthyはそれ以外にも細かい施策を随所で実施しているので、いくつか紹介します。

動画視聴後のポップアップ

upworthy_case_moviepop

まず1つ目は『コンテンツ視聴後に表示されるポップアップ』です。動画を最後まで視聴すると、シンプルなポップアップでメールアドレス入力画面が現れます。

現在はメールアドレスの入力画面ですが、以前はFacebookページへのいいねを要求する内容のポップアップが表示されていて、何も表示しない時に比べ、420%アクション率が増加という結果が出ています。

動画を最後まで視聴した人に対してだけ表示するというのがポイントで、ある程度満足している可能性があるユーザーに対してアクションを要求することでより高い効果が見込めます。

例えば、”サービスの紹介動画を最後まで視聴したユーザーにポップアップで次のアクションを要求する”など業種や、目的のアクションに限らず応用できる施策です。

Facebookページのいいね数を増やすためのポップアップ

upworthy_case_rightpop
次に紹介するのは、『ページをスクロールすると表示されるポップアップ』です。

ページを下までスクロールさせると、右下にFacebookページへのいいねを求めるポップアップが表示させます。こちらもシンプルな施策ですが、設置前に比べアクション数が620%増加しています。

加えてこのポップアップに更なる改善を加えて結果を上昇させた点もポイントです。ここからさらにポップアップが表示されるのを16秒遅らせるパターンを実験し、70%アクションを増加させることに成功しました。

  • 第1段階 : スクロールした際に、右下にポップアップを表示することで620%改善
  • 第2段階 : ポップアップを表示するのを16秒後にすることで、更に70%の改善

Attention Minutesという新たな指標

様々な施策を用いて多くのユーザーを集めているUpworthyですが、現在はPVやUUに変わる独自の新しい指標、「Attention Minutes」を基に更なる成長を目指しています。

これは、動画であれば実際に再生されているか、ユーザーが複数タブを開いている場合はどのタブが表示されているかなど、従来の「ページ滞在時間」より詳細なデータに基づく、ユーザーが実際にコンテンツに注目している時間を測定するというもの。(「読まずにシェアする人は意外と少ない──Upworthy調べ」参照)

下のグラフは訪問者の内コンテンツをシェアした人の割合(縦軸)とAttention Minutes(そのコンテンツをどのくらい見たか / 横軸)で示しています。

upworthy_case_attentionmisutes
(読まずにシェアする人は意外と少ない──Upworthy調べ」参照)

このグラフから、コンテンツを最後まで読み切ったユーザーが特にシェアする割合が高いことがわかります。

Upworthyでは、シェアしやすいような工夫、シェアされたコンテンツがクリックされやすい工夫を最大にしつつ、「Attention Minutes」という新しい指標を基にしながら、ユーザーが最後まで読みたいと思うような質の高いコンテンツを作る事を大切にしています。

終わりに

Upworthyは自社のナレッジをかなりオープンにしていて、ブログやSlideshare上には参考になる資料がたくさんあります。

今回紹介した目標とする指標の立て方や、具体的な施策はもちろん、その背景にある考え方の部分までメディアを運営している方だけでなく、サービスのグロースに悩んでいる方は何かしら学べる点があると思うので是非チェックしてみてください。

ここでは本稿で参考にしたものを中心にいくつか紹介します。

Slideshare資料

UpworthyのナレッジはSlideshare上でたっぷり紹介されています。1度ご覧になってみて下さい。

ブログ『UPWORTHY INSIDER』

施策などの細かい内容というより、そもそもの考え方や哲学などはブログが詳しいです。

その他参考になるメディア

businessinsiderの記事は、簡潔にUpworthyの成長の流れが掴めるので、メディア運営者の方にはオススメです。また『メディアの輪郭』は国内外のメディアのトレンドや成長の秘訣がまとめられたブログで、非常に勉強になります。

Webマーケターの人向け・すぐに使えるグロースハックツール30選

growthtool30top

最近、様々な切り口から「Webサービスのグロースをサポートするツール」が増えてきています。

ツールも日々進化を遂げており、これまでは高度なスキルが必要とされた業務、タスクについても、“視覚的に”、“簡単・シンプルに”設計され、非常に使いやすいものが多くなりました。

そこで、今回の記事では、誰でも簡単に、すぐに試せるグロースサポートツールにフォーカスして、30のツールをご紹介をしていきます。

サイトへの流入数を増やすツール

1. Colibri.io

1

自社の顧客がオンライン上のどこにいるかを把握することで、注力すべきメディアを特定し、より効率的なユーザー獲得を手助けするツールです。

  • 自社の見込み客がいる場所、注力すべきメディアが把握できる
  • 各メディアのソーシャルリーチを一括で管理、分析できる
  • 14日間の無料トライアル期間あり / 月額45ドル〜利用可能

2. Pay With A Tweet

3

ユーザーにソーシャルでシェアしてもらう代わりにサービスを無料で提供するという仕組みを構築し、バイラルを起こすサポートをしてくれるツールです。

  • ソーシャル上のクチコミからバイラルを起こせる
  • シェアを促すボタンなどのデザインの変更が簡単に可能
  • クリック数やCVRなど、細かいデータ解析が可能
  • 無料プランあり/有料プランは月額19.99ドル〜

3. Click to Tweet

2

Twitterでシェアされる際の文言を簡単にカスタマイズすることで、より効果のあるクチコミに変えることのできるツールです。

  • 文言を作成し、発行されるコードを貼付けるだけで簡単にTwitterでシェアされる内容をカスタマイズ
  • 作成したリンクのクリック数を日ごとに計測できる
  • 無料で利用可能

4. MixRank

4

競合のネット広告のデータを分析することで、自社のターゲットユーザーに響くキャッチコピーやLPなど効果的なプロモーション方法をハック出来るサービスです。

  • 成功している企業の広告を分析することで、効果的な文言やLPのデザインがわかる
  • サービス内の文言の変更や、LP改善、キャンペーン時の参考になる
  • 料金は不明

5. Sniply

sniply

ソーシャルメディアなどで気になった記事のリンクを共有する際に、ページの下部に自分のサイトの宣伝用ポップアップを挿入する事で流入を増やせるツールです。

  • シェアしたい記事の下部に、自分のサイトへの導線となるポップアップを設置できる
  • 1分で簡単に作成可能
  • 無料で利用可能

ユーザー獲得/サイト最適化ツール

6. Hello Bar

hellobar

自社サイトのトップに、簡単にアクションを促すバーを設置することができるツールです。サイトを訪れたユーザーに対してメールアドレスの登録やコンテンツのシェアなど具体的なアクションを促す事ができます。

  • メールアドレスの登録、ページのシェアなどユーザーに求めるアクションを強調できる
  • 特別なスキルは必要なく、簡単にバーの作成、設置が可能
  • 無料で利用可能

7. Bounce Exchange

bounceexchange

“Exit Intent”technology という独自開発した技術により、離脱しそうな訪問者を顧客へと変えるパワフルなツールです。

  • リアルタイムでサイト訪問者のマウスの動きをトラッキングし、サイトでの動向を計測
  • 離脱するタイミングで、メール登録などのアクションボタンを表示させ、顧客に変えるきっかけを作ることが可能
  • 月額3.995ドル〜利用可能

8. SessionCam

sessioncam

ユーザーのマウスの動きや、スマホでの動作を記録、分析することでサイトの問題点を把握し、最適化することをサポートするツールです。

  • webサイトはもちろん、モバイルでのユーザーの動きもトラッキングできる
  • ヒートマップにより、ユーザーの行動やサイトの問題点を明確にできる
  • 月額10ドル〜利用可能

9. KISSmetrics

kissmetrics

サイトのデータを”人”と紐づける事で、どのようなユーザーがどのようなアクションをしているのか、ユーザー視点にたってサイトの最適化をすることができるツールです。

  • 各ユーザーごとのサイトでのアクションを分析できる
  • 同じ行動をしたユーザーをグルーピングし、各グループごとの傾向や特徴を把握できる
  • 14日間の無料トライアル期間あり/有料プランは月額1500ドル~

10. CrazyEgg

crazy egg

導入が非常に簡単なヒートマップツールで、ユーザーのサイト上の動きを分析し、サイト上の課題点を把握できます。

  • ユーザーがどこで離脱したかなど、サイト上の問題点を可視化できる
  • 機能がシンプルで、導入が簡単かつ安価
  • 30日の無料トライアル期間/有料プランは月額9ドル〜

11. Unbounce

unbounce

ドラック&ドロップで簡単にランディングページの作成ができ、A/Bテストまで簡単に行えるツールです。

  • ドラック&ドロップで、Webページの作成が可能
  • テンプレートなどを使えば、数十分で質の高いページが完成
  • ページの作成だけでなく、A/Bテストも可能
  • 30日の無料トライアル期間/有料プランは月額49ドル~

12. Clicktale

clicktale

Webサイトの改善に特化したツールで、ユーザーのサイト上での行動の分析から、入力フォームの最適化などまで幅広い改善ができるツールです。

  • ユーザーの行動のプレイバックをスマホやタブレットから動画で見れる
  • 項目ごとの入力率の分析など、オンラインフォームの最適化ができる
  • 無料から利用可能/機能の追加は有料

13. Coastics

coastics

Googleアナリティクスの主要データから自動でレポートを作成し、メールで通知してくれるサービスです。

  • Googleアナリティクスの主要な指標のレポートが自動で生成される
  • 毎日レポートがメールで届くので、ログインすることなくデータをチェックできる
  • 月額29ドル〜利用可能

14. Gumroad

gumrood

簡単に自分の制作したコンテンツを販売できるサイトです。特に自社の知名度がまだ低い時など、コンテンツを安価で提供し見込み客を獲得するツールとしても活用できます。

  • HTMLやPDFなど、様々なファイル形式のコンテンツを簡単に販売できる
  • 見込み客開拓のためのツールとしても利用できる
  • 無料で利用可能 / 購入された場合に手数料発生

マーケット調査/ユーザーテスト

15. Qualaroo

qualaroo

自社サイトの好きな場所に、簡単にユーザーへの質問項目を設置することができるヒアリングツールです。

  • 簡単に自社サイトの好きな場所にユーザーへの質問項目を設置できる
  • 最も適切な場所で質問することで、より参考になる意見がきける
  • 14日間の無料トライアル期間/有料プランは月額63ドル~

16. SurveyMonkey

surverymonkey

ユーザーへのヒアリングに使える、無料から利用可能なオンラインアンケートサービスです。

  • 誰でも簡単にアンケートの作成、分析が可能
  • 回答のA/Bテストなど、高度な機能でより正確なアンケートができる
  • 無料から利用可能/有料版は高機能

17. Consumer Baromoter

consumer barometer

コマースサービスや、ECサイト運営者に有益なデータが無料で閲覧できるサービスです。

  • 購買プロセスや、国別に消費者の細かい購買データを分析できる
  • 無料で利用可能/登録も不要

18. Typeform

typeform

よくある入力フォームではなく、インタラクティブで美しいUI/UXが特徴的なアンケートサービスです。

  • 見やすく使いやすい画面でアンケートができる
  • アンケート結果の細かい分析が簡単に可能
  • 無料から利用可能/有料版は高機能

19. Olark

olark

Webサイトのユーザーと直接チャットでやりとりすることで、満足度向上やユーザーの声を聞けるサービスです。

  • ユーザーとチャットで会話することで、悩みの解決やニーズの把握が可能
  • 特定の行動をしたユーザー、特定のページを見たユーザーなど細かいターゲティングができる
  • 14日間の無料トライアル期間/有料プランは月額15ドル~

20. UIscope

uiscope

自社サービスや競合サービスをユーザーがどう使っているのか、簡単にユーザビリティテストができるサービスです。

  • ターゲットを絞って簡単かつ安価にユーザービリティテストが可能
  • 動画で実際のユーザーの行動を見る事でサイトの問題点が具体的に把握できる
  • 1ユーザー3000円~利用可能

メールマーケティングツール

21. ListBuilder

ListBuilder

ユーザーにメールアドレス登録を促すポップアップが簡単に作成できるサービスです。

  • サイトに訪れたユーザーに対して、メールアドレス登録のポップアップを表示できる
  • 簡単にオシャレなデザインのポップアップが作成可能
  • 無料で利用可能

22. Vero

    vero

    サイト上でのユーザーの行動に基づいて、細かい条件でのメールマーケティングが可能なツールです。

  • ページを離脱した、特定のページを見たなど、ユーザーの行動に応じたメールマーケティングが可能
  • メールのA/Bテストが容易にできる
  • 14日間の無料トライアル期間あり / 月額99ドル〜利用可能

23. MailChimp

mailchimp

ターゲティングや自動化はもちろん、過去のデータから最適な配信時間を割り出したり、細かいデータの分析ができるメールマーケティングツールです。

  • 細かくターゲティングしたメールの配信、自動化が可能
  • これまでのデータから、配信時間の最適化ができる
  • 無料から利用可能/有料で機能の追加などアップグレードが可能

24. sendwithus

sendwithus

MailChimpと同様、簡単にメールの最適化や自動化ができるツールです。

  • 使い方が非常にシンプル。簡単にメールの自動化やターゲットごとの配信ができる
  • メールのA/Bテストや、細かいデータ分析も充実
  • 無料から利用可能/有料で機能の追加などアップグレードが可能

インバウンドマーケティング/マーケティング自動化ツール

25. Infusion Soft

infusionsoft

特に少人数のチームに適した、グロースハックを自動化、簡易化できるサービスです。

  • メールマガジンなど、ユーザーへのコミュニケーションの自動化が可能
  • ランディングページの作成や、ユーザーのモニタリングが簡単にできる
  • 月額199ドル〜利用可能

26. HubSpot

Hubspot

様々なツールの運営、サイトの分析を1つのサイト上で可能にするインバウンドマーケティングツールです。

  • ブログやソーシャルメディア、ランディングページなど管理や分析が1つのシステムで可能
  • メールマーケティングの自動化など、効率の良いマーケティングができる
  • 月額200ドル〜利用可能

27. Marketo

marketo

ターゲットに合わせたキャンペーンの実行や分析が簡単かつ自動化できるツールです。

  • 細かくターゲットを設定したキャンペーンの実行が簡単にできる
  • メールマーケティングやキャンペーンの運用を自動化できる
  • 有料/料金は各ツールごとで変動

28. HootSuite

Hootsuite

複数のソーシャルメディアの管理や分析が一括でできるツールです。

  • TwitterやFacebookなど、複数のソーシャルメディアを一括で管理でき効率的な運用が可能
  • ソーシャル上の会話のトラッキング、データの分析により問題点を即座に把握できる
  • 無料から利用可能/有料版は高機能

29. Sprout Social

sproutsocial

複数人でソーシャルメディアを運用する場合に便利な、ソーシャルメディアの一括管理、タスクマネジメントができるCRMツールです。

  • 各ソーシャルメディアの一括管理、分析が可能
  • 投稿スケジュール調整や、メンバー間のタスク調整により効率的な運用ができる
  • 30日間の無料トライアル期間あり / 月額59ドル〜利用可能

最後に

30. planBCD

planBCD

最後に、弊社KAIZEN platformが運営するplanBCDも、ものすごく簡単にA/Bテストが実施でき、サイトの改善ができるサービスです。

  • 簡単に、短時間でA/Bテスト案の作成、実行が可能
  • 世界中のグロースハッカーにUI改善依頼ができる
  • 月額0円から利用可能
  • 国内外合わせて600社以上で導入、平均改善率50%以上

ここで紹介したもの以外にも様々なツールがありますが、無料でトライアルできるものも多いので、自社のサイトや目的に合いそうなものがあれば是非試してみてください。

【グロースハック永久保存版】20のケーススタディから学ぶ、必ず押さえておきたいUI/UX改善の7つのポイント

abtestguide_top

『A/BテストやサイトのUI/UX改善を実施するにあたり、どのポイントから、どうやって改善案を考えて行けばよいのか』

ABテストのプランニングをお手伝いしている中で、現場担当者の方々からこのような相談を良く受ける事があります。

今回は、こういった声に応えるべく、国内外のイケてるWebサービス、および弊社サービスであるplanBCDクライアント様の事例からピックアップした、“20のケーススタディ”を用いて、必ず押さえておきたいUI/UXの7つのポイントをご紹介していきます。

7つのチェックポイント

  1. ファーストビュー
  2. アクションボタン
  3. ページ遷移 / 入力項目
  4. キャッチコピー
  5. キーワード
  6. コンテンツ
  7. レイアウト

 


今回は上記の7つの改善ポイントを紹介していきます。

  • 「A/Bテストを実施したいけど、どこから始めていいのかわからない」
  • 「A/Bテストを既に実施しているが、いまのところ成果がでていない」
  • 「Webサイトを改善してもっと登録ユーザーを増やしたい」

そのような悩みを持っていらっしゃる方には、是非参考にして頂ければと思います。

1. ファーストビュー

ファーストビューを改善することから始める

まずは数値に直結しやすいファーストビューの改善から進める事が効果が出やすくオススメします。
もし「ファーストビューをぱっとみただけで、そのサービスの特徴が全くわからない」ようなページであれば要注意です。

firstview_point1

そもそもファーストビューをみて、特徴がわからなければユーザーは即離脱してしまいます。いい商材やサービスを扱っていても、その商材の良さに気づいてもらう前にユーザーに離れられてしまうのはとてももったいないことです。

まずは、サイトを訪れたユーザーが最初に目にするファーストビューを最適化することからスタートしましょう。

1firstview_1

※上記画像は、左上:Airbnb / 右上:Evernote / 左下:クラウドワークス / 右下:コイニーのファーストビューのスクリーンショットです。 それぞれ特徴は違うものの、以下で紹介するようなポイントが押さえられています。

2. アクションボタン

アクションボタンを目立たせる

会員登録や申込、購入などそのページのゴールに直接関わるため、ボタンの善し悪しは最終的な成果に影響を及ぼします。まず第一に、存在自体をきちんと認識してもらうこと、そしてそれがボタンであること(押せる事)を認識してもらうことが大切です。

例えば以下はボタンを強調する方法としてよく用いられています。

  • ボタンを大きくする
  • ボタンを中央に設置する
  • ボタンを枠で囲い強調させる
  • ボップアップでボタンを表示し強調させる
  • ページをスクロールしても常に登録ボタンが表示されるようにする
  • ボタンの色を変える

【Case】ボタンを中央に設置&枠で囲って強調させる

(1)高級宿発施設予約サイト「relux」(planBCDクライアント様事例)

relux_abtest

reluxの改善事例は、まさにこのアクションボタンの強調によって成果がでた事例です。もともとシンプルなページでボタンが中央に配置されてはいましたが、このように枠で囲って強調することで1.74倍の成果がでました。

※reluxの事例に関しては下の記事で詳しく紹介していますので宜しければご覧下さい。
【relux流グロースハック】CVR74%向上、FBいいね数12万を獲得した施策とポリシーを徹底公開!

(2)動画共有サービス「Vimeo」(※旧デザイン)

before_vimeo

フォームとボタンがページの中央にあり、背景とは異なる色の枠で囲うことで強調しています。無駄な情報がないこともあり、フォームとボタンがかなり目立っています。

最近リニューアルされて少しテイストが変わりましたが、アクションボタンを強調するというポイントは変わっていません。

vimeo_newlp

【Case】ポップアップで登録画面を表示させ強調する

(3)イラスト共有SNS「pixiv

pixiv_lp

初回訪問時に上記のようにポップアップで登録画面を表示させています。同様に仮にここで登録をしなくても、気になるコンテンツをクリックすると、登録を促すポップアップが再度表示され、登録をしないとコンテンツが見れない仕組みになっています。

登録が無料で簡単にできる場合には、このようにかなり導線を強調してみることも試してみてはいかがでしょうか?こちらの記事を見る限り、かなりの効果があったようです。

(4)ソーシャルコマースサービス「Fab

fab

Fabの場合も登録を促すポップアップが表示されますが、「sign up and Enjoy 10% off」と登録のメリットを合わせて強調するなどポップアップ内の文言を工夫しています。

【Case】ページをスクロールしても常に登録ボタンが表示されるようにする

(5)デザインクラウドソーシングサービス「designclue

designclue_lp

またページをスクロールしても、常にアクションボタンを表示させることにより強調するという方法も効果的です。designclueでは、上部の新規登録を促すポップアップがページをスクロールしても表示されるため、常に登録を意識してもらうことができます。

3. ページ遷移 / 入力項目

ページ遷移や入力内容を最小限に

登録や申込の際に入力フォームを記入したり、複数のページを遷移する場合があります。その際に注意したいのが、いかに「ユーザーが離脱するポイントを減らすことができるか」という点。作業工程が増えれば増える程、ユーザーが離脱するポイントを多くなります。

  • 登録までのページ遷移数を最小限にする
  • 入力項目を最小限にする
  • 登録のタイミングをテストする
  • クリックの回数を減らす

 


など、CVまでに離脱するユーザーを減らす工夫が必要です。

【Case】登録までの入力項目、ページ遷移を最小限にする

(6)ECサイト開設サービス「STORES.jp

stores_lp

無料でネットショップを開設できる「STORES.jp」の登録フロー(ショップの開設フロー)は非常に簡潔です。

  1. トップページでメールアドレスを入力
  2. 入力したアドレスに送られてくるメールからリンクをクリック
  3. リンク先で、自分のストアのURLを決める

以上の、たった3ステップでストアの開設が完了します。

更には、以前はなかった「Facebookで始める」ボタンを押すと、Facebookの認証後、すぐにストアのURLを決定するだけで開設ができるようになっていて、さらに登録までの入力項目・ページ遷移数が減っています。

当然きちんと物を売ろうと思えばストアのデザインを変更したり、個人情報を登録する必要はあるのですが、最初からハードルを高くしすぎず、まずは最小限の情報のみで登録、利用をしてもらうような工夫がされています。

実際数ヶ月前に比べ、ショップ開設までのページ遷移数や入力項目が減っており、更にはFacebookでより簡単に登録ができるようになるなど、STORES.jpでもこの部分の改善にはかなり力が入れられているように感じます。

【Case】「登録」のタイミングを後にする

(7)イベントプラットフォーム「Peatix

peatix_1

peatixも登録/イベントの作成の導線が他のイベントサービスとは違っています。通常だと最初にユーザー登録をした後にイベントの作成という流れが多いのですが、peatixでは以下のような流れになっています。

  1. 最初にイベント名、開催日、会場を入力する
  2. 次のページで開催の時間などを含めイベント概要を決定
  3. Facebookやメールアドレスでアカウント登録/ログイン
  4. 登録/ログインをすると、最初に登録した情報が入力されているイベント作成ページへ
  5. 細かい情報を入力

上記のように最低限のイベント情報を入力後、初めてユーザー登録が必要になります。実際の数値はわかりませんが、確かにイベントの概要を入力した後に登録を求められると最初より離脱しにくくなるような気はします。

最初に登録を促すのと、少しサービスを使った状態で登録を促すのでどちらがいいかはケースバイケースですが、なかなか登録ユーザー数が増えないなどの課題を抱えている場合は、このように登録のタイミングを変えてみることが改善に繋がる可能性もあるので、テストをしてみる価値があるポイントです。

4. キャッチコピー

サービスの特徴は一言でわかりやすく

アクションボタンと同様に強調したいのが、サービスの特徴を表すキャッチコピー。ぱっと見た時にサービスの概要や、売りがわかるようなコピーを入れておくことが、ユーザーの関心を惹き付けることに繋がります。

わずかな文言の変更で大きく結果がかわることがある一方で、デザインの変更などに比べ改善案を作る時間が短くすむため、複数のコピーを試して、実際に結果がいいものを使用することがオススメです。

(8)ECサイト開設サービス「STORES.jp

stores_lp

例えばSTORES.jpの場合は、「最短2分で、驚くほど簡単にオンラインストアがつくれる」というコピーをページの上部で強調しています。

具体的に「最短2分」と数字を出すことで、気軽に登録できることを強調しています。通常開設に時間がかかるというイメージを持ちがちな所を、「最短2分」、「驚くほど簡単に」というコピーでサービスの最大のメリットを強調しています。

(9)家計簿サービス「zaim

zaim_lp

「200万人が利用」という文言はインパクトがあるとともに、多くの人が使っているという安心感をもたらすといった意味でも効果的です。家計簿サービス以外でも、クレジットカードの情報や、銀行のデータを入力するような金融系のサービスなどはユーザーの心理的なハードルがあがりがちなので、利用者数の数を始め少しでも安心感をもたらす工夫は効果があります。

また、「家計簿に挫折した84%がZaimなら続けられると回答」というコピーも非常にインパクトがあります。

5. キーワード

ボタン内の文言など細かい言葉の改善

キャッチコピーと同様に、サービス紹介の文言やアクションボタン内の文言など、細かいキーワードの変更だけでも結果が変わってきます。

例えば海外では登録ボタン内に「free」と加えるだけで登録率が上がった事例も複数あるなど、細かい改善案を地道にテストし続けることが成果に繋がってくる部分です。

【Case】無料を強調する

(10)クラウドソーシングサービス「クラウドワークス

crowdworks_lp

クラウドワークスのファーストビューでは、

  • 登録ボタン枠の左上に丸で囲って「無料」を強調
  • 会員登録ボタン内に「(無料)」を入れる

 


と無料という文言を2ヶ所に入れて強調しています。

その他の登録ボタンでも無料を強調しているものが多く、全体的に無料で登録できることが強調されています。上述したように「無料」という文言を入れるだけならかなり簡単にテストができるので、是非試して頂きたいポイントです。

(11)日報共有サービス「gamba!

gamba!_lp

有料の法人向けサービスを扱っているgamba!では45日間の無料体験を実施しており、そちらを強調しています。

  • 登録ボタンのすぐ上に赤字で「無料体験」を強調
  • その下にも「45日間無料体験」という具体的なコピー

ユーザー側としては有料のサービス、特に高価なシステムやサービスに申し込む場合だと一度試してみてから決めたという気持ちはかなり強くなります。

似たような海外の事例で、本登録ボタンだけでなく、無料トライアルのボタンもファーストビューで強調してテストをした際に、

  • 無料トライアルに申し込んだユーザーが約2.5倍増加
  • かといって本登録ユーザーやトータルの売上げが減少する事はなかった

 


という結果がでたものがあります。

法人向けのシステムなど、有料のサービスを提供している場合には、無料トライアルプランの設置・強調なども1つの改善案として見当してみてはいかがでしょうか。

【Case】細かい文言をテストする

(12)インターネットFaxサービス「eFax」(planBCD事例)

j2_ラウンド2

eFaxの事例では、わずかな文言の変更・追加でCVRが4%改善しました。

  • 「まずは」を「いまなら」に変更
  • 「2分で」を追加

「いまだけおとくな感じ」や「簡単に申し込めること」などを無料と合わせて強調すると効果的です。特に元々のCVが多いようなサイトでは数%の改善でも登録数や売上げなどに大きな影響を及ぼすので、このような簡単な改善を継続することも重要です。

6. コンテンツ

画像や動画を使って具体的にイメージしてもらう

サービスの概要がなかなか説明しづらいものや、新しい概念のサービスを扱う場合などは画像や動画を使って具体的にイメージをもってもらうことが大切です。

特にファーストビューでは、キャッチコピーやアクションボタンを強調するため、無駄な文字などは使わずビジュアルで伝える工夫も効果があります。

【Case】動画を使ってサービスの良さや価値観を伝える

(13)社内SNS「Talknote

talknote_lp

Talknoteのファーストビューは背景自体が動画になっています。キャッチコピーとアクションボタン以外の情報はなく、この動画を用いて利用シーンを伝える仕様です。また真ん中の再生ボタンを押すと導入企業の動画インタビューが流れ、より具体的にイメージができます。

その他のクライアントインタビューも動画インタビューになっているなど、動画を用いてページの文字数を抑えながらもサービスの特徴を上手く伝えています。

【Case】イラストを使って利用シーンをわかりやすく伝える

(14)インターネットFaxサービス「eFax」(planBCDクライアント様事例)

j2_ラウンド1

具体的なイラストを用いてわかりやすくサービスの特徴を伝える事で、CVRが11%改善した事例です。イラストによってファーストビューをぱっと見たときに、サービスのイメージをなんとなくでも掴んでもらうことがCVRの向上にきいてきます。

クオリティの高い動画などを作ろうと思うと、どうしてもある程度の時間や費用がかかってくるので、まずはイラストや画像などから試してみることも検討してみてください。

ユーザーのハードルを下げる

また、特に有料のサービスを扱う場合や登録時に個人情報の入力が必要になる場合などは、以下の方法などで少しでもユーザーの心理的なハードルを下げることなども効果的です。

  • 利用者数や利用者の声を記載する
  • メディア掲載や表彰の実績を示す

【Case】利用者の顔や声を紹介することでユーザーの心理的ハードルを下げる

(15)プロトタイピングツール「InVision

invision_lp

DELLやYAHOOを始めとした多くの企業が導入している「InVision」では、導入クライアントを担当者の写真とコメントと合わせて掲載しています。

このサービスを知らないユーザーにも、有名企業が使っていることを示すことで心理的な負担を減らし、サービスに信頼感と関心をもってもらえる可能性が高まります。またロゴだけでなく、担当者の顔とコメントが載っている部分も面白い工夫の仕方です。

(16)スマートフォン決済サービス「Coiney

coiney_lp

スマートフォン決済サービス「Coiney」ではファーストビューにコメントとともに利用者の写真を大きく表示しています。

使っている人の顔が見えるだけで、安心感があるのと同時に、ページ中央にあるキャッチコピーにも非常にあったテイストになっています。

ファーストビューにただ画像を載せるだけでなく、このように利用者の声を合わせたものを設置するという方法も是非参考にしたいポイントです。

7. レイアウト

無駄な情報は載せない

初めてWebサイトを訪れた人にぱっとサービスの特徴や概要を理解してもらうためには、

  • 大事なポイントはきちんと強調する
  • やたらと情報をつめこみすぎない
  • 文字の量を多くしすぎない
  • 理解しやすい順番、配置にする

 


などの工夫で、初めてページに訪れたユーザーが「迷わない」ような情報の見せ方をする必要があります。

【Case】情報量を絞り、コピーと画像でポイントを伝える

(17)情報記録・管理サービス「Evernote」>

evernote_lp

ファーストビューの中央には特徴を表す簡潔なコピーを大きめかつ緑色で、そしてその下に概要を伝える2行の文章、アクションボタンが配置されているという構造で非常にシンプルです。具体的なキャッチコピーとそれに合った画像がポイントとなっています。

(18)モバイル決済サービス「square

square_lp

同様に背景にはサービスのコンセプトが伝わる画像があり、文少量がかなり少ないため、中央のコピーやアクションボタンが非常に目立っています。画像とキャッチコピーで何となくサービスの概要がわかる事例です。

【Case】コンテンツを配置する位置をテストする

(19)インターネットFaxサービス「eFax」

j2_ラウンド4

e-faxでは動画を“設置する位置”に関するA/Bテストを以下の条件で実施しました。

  • 左上(改善前) : 動画へのリンクをファーストビューの下に小さく文字のみで表示
  • 右上(改善案1): 動画へのリンクを大きめかつファーストビューに設置
  • 右下(改善案2): 動画へのリンクを大きめかつファーストビューの下に設置

結果としては、右下(改善案2)のケースが1番良い結果がでました。
今回のケースでは「ファーストビューで簡単にサービスのイメージを掴んでもらった後で動画をみて、より具体的に理解してもらう」という点がCVRの向上に繋がったのではないかと考えています。

サービスなどによっても結果は変わってくるので、動画などを設置する際は、合わせて位置や設置方法などもテストしてみると、より良い結果を残すことに繋がります。

(20)参考:サイドバーの位置

side

配置に関してもう1つ紹介しておきたいのが、サイドバーの位置です。
コンテンツは変えず、サイドバーの位置を左右いれかえてA/Bテストをした場合に、CVRが数%~数十%変化するとういう事例が海外も含めいくつもあります。

同様にメニューの位置やバナーの位置などによっても結果が変わってくることがあるので、レイアウトをテストする際は試してみてください。

終わりに

繰り返しになりますが、ページの改善で悩んだ際はまずはファーストビューの改善をすることを検討してみてください。表示される回数も多いので改善の影響も大きく、ファーストビューが不適切であればそこですぐにユーザーが離脱してしまいます。

その際の改善のポイントとして、

  • アクションボタン・・・ボタンを目立たせる
  • 入力項目/ページ遷移・・・必要最小限に押さえて離脱を防ぐ
  • コピー/ キーワード・・・数字等も用いてユーザーの気を惹くコピーを使う
  • コンテンツ・・・動画やイラストを用いて「サービスの利用イメージ」を掴んでもらう
  • レイアウト・・・不要な情報をいれない、ユーザーにわかりやすいようにシンプルに

まずは上記のような点から変更・テストしてみてください。