ABテストで出た意外な結果〜デザインの評価は誰がする?

先日ferret OneのサービスサイトでメインヴィジュアルのABテストをしました。
ちょっと意外な結果が出ましたよ。

1.テスト内容

今回は下記の2パターンのをテストしてみました。


【A案】ファーストビューに訴求したい事を詰め込む、昔ながらのLP的なアプローチ

・背景にはビジネスをイメージさせるビルの写真
・ツールを使用して出来上がった画面イメージ
・メンビジの高さは低く、コンテンツの一部が見える

【B案】写真を背景に、シンプルに仕上げるツール系サービスサイトの最近のトレンド

・背景には実際にツールを使用しているユーザーの後ろ姿
・操作中の画面イメージ
・メンビジの高さはゆったり


【共通要素】
・キャッチコピーなど文字情報、グラフは共通
・色はブルー系に白抜き文字


要はいわゆる「LPっぽいテイスト」か、「今どきのサービスサイト」とどちらが
このサービスのペルソナにちょうど良いのか?という事の検証です。

2.最終ゴールと判断の指標

しっかり検証もしたいけれど、ビジネスとして達成すべき数字もある。
すぐに結果を求められるビジネスプロジェクトでは、この辺の判断バランスはなかなか
悩ましいものがあります。

プロジェクトのゴール:
・お問い合わせページへの遷移を増やす


判断の指標:
・お問い合わせページへの遷移率


中間指標:
・直帰率


現在のferret Oneで重視しているのは「お問い合わせ数」です。
サービスへのコンタクトポイントはいくつかあるのですが、
一番受注率に繋がるポイントが、サービスサイトからお問い合わせだからです。


純粋にデザインの効果を判断するのであれば、直帰率を見るのが正しい指標です。
流入施策に極端な変化の要素が無ければ直帰率で判断します。
が、それは流入経路が一定の場合です。


ユーザーがページに入って来るまでに見た情報が全く同じであれば有効です。
例えばリスティング広告で同じタイトルを見て入ったユーザーであれば、サイトに期待するものが同じだからです。


しかし、現在このサービスサイトに対しては様々な集客施策が同時に走っていて、サイトに期待しているものがユーザーによって違います。キャンペーンなどスポット施策もあり数値がブレ安い。厳密に流入元をセグメントすれば良いのですが、それでは有効なサンプル数を集めるまでに時間がかかり過ぎてしまいます。


そこで今回は、直帰率なども見ながら、最終ゴールに貢献できるページに遷移させた方が勝ち、という基準にしました。なので、勝ち負け判断の指標は「お問い合わせページへの遷移率」です。

3.結果

さて、2週間テストをしてみた結果は...?


なんと、Aパターンの勝ちでした。


遷移率:
A案:1.87%(分母:閲覧開始数)1.37%(分母:訪問者数) 
B案:0.63%(分母:閲覧開始数)0.45%(分母:訪問者数) 
直帰率も、大きな差が無いながらAの方が良かったです。


個人的にはB案の方がツールサービスの鉄板という情報に基づいたデザインだし、
スッキリして見やすいのになぜ?と思ったのですが、なぜでしょう?

4.考察

仮説【1】ペルソナがwebトレンドを知っている層ではないから?


ferret Oneが目指しているのは「webマーケティングの大衆化」
つまり、誰でもwebで届けたい情報を、求めている人に発信できる、
お客様となる人に知ってもらえることを目指しているのです。


なので、ペルソナは本業が必ずしもweb業界やIT業界ではなく、「これからweb集客を始める」人が多い。商品の通販だったり、店舗を運営している中で、「本業の傍らwebサイトもやっている人」が多いんですね。


常に新しいwebツールやサービスを探しているweb業界やIT業界の人とは感覚が違う可能性が高いです。なので...

・現在のwebサイトのトレンドかどうかは重要ではない
・むしろ、LPテイスト(チラシテイスト)の方が訴求が強く伝わりやすかったのでは?

という仮説が考えられます。

仮説【2】作業中イメージより、仕上がりイメージの方が良い?

前述の通り、ペルソナの最終ゴールはビジネスでの成功です。
そのための集客チャネルやプロモーションの1つとしてwebサイトがあるというレベル感です。


ferret Oneは「自分でwebマーケティングが出来る」サービスではありますが、
ペルソナにとっては自分で作業することは手段の1つです。なので...

・作業中の画面よりも、仕上がった画面の方が、目的が果たせたイメージがしやすい。


という仮説が考えられます。


仮説【2】の検証は簡単です。今作業中のツールになっている画面を、出来上がったサイトの画面に変えてまたA/Bテストをすれば良いだけです。

5.デザイン案作成のプロセス

さて、検証は引き続きPDCAを繰り替えてして行くとして、デザイナーにとって大事なのは、まずどうやってその案を作ったか?ですね。
私が実際にしたことは下記です。

❶ペルソナのよく見るサイトや、よく使うサービスを見る
❷競合のトレンドを見る
❸仮説に従ってデザイン案を作成


ferret Oneのペルソナは中小企業の経営者と、専門家ではないけどweb担当になったビジネスマンです。デザイン案としては、鉄板LP風で行くか、最近のツールのトレンドで行くか2案が考えられました。


A案は、高い実績で有名なLP業者の鉄板の情報構成に基づいて作っています。
また、リスティング広告を出しているSEO業者とweb制作会社のサイトもベンチマークしました。専門家でないweb担当者は忙しいので、検索上位のサイトや、広告で出ているサイトを見るからです。
また、配色やテイストは経営者を意識してビジネス雑誌を参考にしています。


持たせたい印象は「とにかくここにお願いすればサイトの業績が上がりそうだ!」
比較的大雑把に成功イメージを持たせるコンセプトです。


B案は、最近のweb系ツールの鉄板トレンドに基づいて作っています。
いくつかのツールのサイトをベンチマーク。
さらにチームのメンバーにベンチマークしたサイトの会社にヒアリングて貰い、「ツールの画面を操作している人の後ろ姿」が鉄板だという情報を得ました。


持たせたい印象は「自分でも簡単に使えそうなツールだ」
ツールにフォーカスした少し具体的な成功イメージを持たせるコンセプトです。

6.検討のプロセス

A案は、細かいですが、画面イメージの違いで4パターン検討しました。


①操作画面をベースにサービスロゴを入れたイメージ
②リアルな操作画面のイメージ
③仕上がりイメージ:ビルのメインビジュアル
④仕上がりイメージ:人のいるメインッビジュアル


こう言った「好き・嫌い」の感覚的な要素の検討は、誰の意見を訊くかが大事です。
今回はマーケターやデザイナー仲間など同じプロジェクト内の人ではなく、下記の2名の意見を参考にすることにしました。

・Aさん:
 元飲食店オーナー。IT企業に務めるのは初めて。
 かつてペルソナと同じ悩みを持っていた人。

・Bさん:
 外部のコンサルタント
 サービス提供側でない、第3者の目線を持つ人。

二人とも選んだのは④でした。

理由:Aさん
「「誰でも簡単にホームページ作成」という文字に目がいきました!!」

画像イメージというより、そういう所か!と。
イメージ内のテキストはアテくらいの感覚で入れていたんですが、ペルソナにとっては「自分の悩み」み関するテキストに敏感に反応するのですね。

理由:Bさん
「人がいるので、人気(ひとけ)がある気がして良い感じがしました!!」

人気(ひとけ)については過去のテストデータでも結果が出ているので、こちらの理由は予測通りでした。
発信側としてはどうしても「正確に説明できている画像」を出してしまいがちですが、
受け取り側は、もっとザックリした全体の印象で受け止めていたりします。

この辺りの認識のギャップを知るためにも「受け取り側」に近い目線の人に見てもらうようにしています。

 

7.いざ、テスト。

ここまで出来たら、あとはもうユーザー(数字)に訊くだけです。


ABテストの判断に必要な数は、基本的に2000セッションだったり、100CV集まるまでが目安と言われています。確実な有意差になるまでひたすら観測するに越したことはありません。
しかし、必要数が集まるまでに時間がかかるサイトもあります。

今回は最終的に2000セッション集まりました。しかしCVは19なので信頼性として十分なサンプル数とは言えません。
また、4.の考察で述べたように、Aの勝った要因も2つ仮説が考えられ、そこも検証したい。


そこで、一旦Bの方の画面イメージをAと同じものにして、またA/Bテストを継続する事にしました。

 

8.第2弾へ続く

という事で、このメインビジュアルはA/Bテストは、もう少し細かい違いのテストで進みます。
Aと、微調整したBを比べるテストです。

これによって、画面イメージが影響しているのか、レイアウトが影響しているのかを明らかにします。
どんな変化があるか、結果はまた次回お伝えしますのでお楽しみに♪

 



Infomation

ベーシックでは、Webデザインの業務をしながら、多岐にわたるWebマーケティング手法についても学べる職場です。一緒に働きたい方、お待ちしています!

小林ひかる

小林ひかる

女子美術大学卒業。ベーシック勤務12年。 LPやサービスサイトを中心に、企画・コピーを含めたトータルで「ユーザーに伝える」を担います。 「デザイナーではありません。ビジネスマンの心強いパートナーです。」をモットーに、誰のためのデザインかを考えて制作しています。 洋楽ROCKとイチローが好き。

Recommend Articles

1

バナーのデザインで悩んだ時に参考にしたい5つのパターン

簡単なようで難しいバナーをデザインすることって難しいですよね。小さいスペースに必要な要素を入れなければならないので、悩んだことがある方も多いのではないでしょうか?この記事ではバナーデザインを取り上げるだけではなく、どんなところが参考になるのかを合わせてご紹介します!バナーのアイデアで煮詰まっているデザイナーさんや、デザインの勉強のためにバナーのコピーをしようと思っている学生さんは是非読んでみてください。

2

簡単にオシャレで見やすくなるスライドの作り方

この記事では、デザイナーではない方や新人のデザイナーさんがプレゼンテーション(パワーポイントなど)のスライド作成で困ったときに、簡単にオシャレで見やすいスライドを作る方法をご紹介します! 法則に則って作成すれば、簡単にキレイなスライドを作ることが出来ますよ!

3

【イベントレポート】UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」

サービスの設計をする際にペルソナを決めるのはもちろんですが、それをチームでうまく共有し活用するのは想像以上に難しいですよね。チーム内でうまく共有できず、いつの間にかペルソナが忘れられてしまっている…なんてことは少なくないのではないでしょうか。そうしたペルソナ作成の難しさを解決するヒントをさぐるため、先日、株式会社アイ・エム・ジェイ R&D室主催のイベント「UX、デザイン思考、サービスデザインのための『チームで使える共感ペルソナ™入門 』」に参加してきました!

4

別に最初から正社員じゃなくても良い〜未経験からWebデザイナーになるまで私が行ったこと〜

今年の7月からデザイナーとして働いているのですが、実は元からデザイナーだったのではなく、アルバイトとしてベーシックに入社したという経緯があります。なぜ正社員ではなく、アルバイトからスタートして、どのような経緯でデザイナーにコンバートしたのかをここにシェアして、今後未経験の業界に転職を考えている人、特にWebデザイナーへの転職を考えている人への参考になればと思います。

5

「実績や得たノウハウを発信するところまでがシゴトの報酬」 iOSエンジニア堤修一さんの仕事論に迫る| dotFes 2016 shibuya

2016年10月からサンフランシスコでFyusion社でiOSエンジニアとして活躍されている堤修一さん。今回はdotFes 2016で行われた「デザイン×ライフスタイル 制作者として海外で働くということ」というテーマのセッションで、海外で働くためのワークスタイルを語られました。

Basic Designers’ Portfolio

ferret

ferret One

phocase

留学Debut

Designer Wanted!

  • Kunihiro Okamura
  • Hikaru Kobayashi
  • You
  • Fumiya Shibusawa
  • Yuki Asamoto

この内容で送信します。よろしいですか?