【グロースハック永久保存版！！】20のケーススタディから学ぶ、必ず押さえておきたいUI/UX改善の7つのポイント
2014年06月27日
『A/BテストやサイトのUI/UX改善を実施するにあたり、どのポイントから、どうやって改善案を考えて行けばよいのか』
ABテストのプランニングをお手伝いしている中で、現場担当者の方々からこのような相談を良く受ける事があります。
今回は、こういった声に応えるべく、国内外のイケてるWebサービス、および弊社サービスであるplanBCDクライアント様の事例からピックアップした、“20のケーススタディ”を用いて、必ず押さえておきたいUI/UXの7つのポイントをご紹介していきます。
7つのチェックポイント
今回は上記の7つの改善ポイントを紹介していきます。
- 「A/Bテストを実施したいけど、どこから始めていいのかわからない」
- 「A/Bテストを既に実施しているが、いまのところ成果がでていない」
- 「Webサイトを改善してもっと登録ユーザーを増やしたい」
そのような悩みを持っていらっしゃる方には、是非参考にして頂ければと思います。
1. ファーストビュー
ファーストビューを改善することから始める
まずは数値に直結しやすいファーストビューの改善から進める事が効果が出やすくオススメします。
もし「ファーストビューをぱっとみただけで、そのサービスの特徴が全くわからない」ようなページであれば要注意です。
そもそもファーストビューをみて、特徴がわからなければユーザーは即離脱してしまいます。いい商材やサービスを扱っていても、その商材の良さに気づいてもらう前にユーザーに離れられてしまうのはとてももったいないことです。
まずは、サイトを訪れたユーザーが最初に目にするファーストビューを最適化することからスタートしましょう。
※上記画像は、左上:Airbnb / 右上:Evernote / 左下:クラウドワークス / 右下:コイニーのファーストビューのスクリーンショットです。 それぞれ特徴は違うものの、以下で紹介するようなポイントが押さえられています。
2. アクションボタン
アクションボタンを目立たせる
会員登録や申込、購入などそのページのゴールに直接関わるため、ボタンの善し悪しは最終的な成果に影響を及ぼします。まず第一に、存在自体をきちんと認識してもらうこと、そしてそれがボタンであること（押せる事）を認識してもらうことが大切です。
例えば以下はボタンを強調する方法としてよく用いられています。
【Case】ボタンを中央に設置&枠で囲って強調させる
(1)高級宿発施設予約サイト「relux」(planBCDクライアント様事例)
reluxの改善事例は、まさにこのアクションボタンの強調によって成果がでた事例です。もともとシンプルなページでボタンが中央に配置されてはいましたが、このように枠で囲って強調することで1.74倍の成果がでました。
※reluxの事例に関しては下の記事で詳しく紹介していますので宜しければご覧下さい。
【relux流グロースハック】CVR74%向上、FBいいね数12万を獲得した施策とポリシーを徹底公開！
(2)動画共有サービス「Vimeo」（※旧デザイン）
フォームとボタンがページの中央にあり、背景とは異なる色の枠で囲うことで強調しています。無駄な情報がないこともあり、フォームとボタンがかなり目立っています。
最近リニューアルされて少しテイストが変わりましたが、アクションボタンを強調するというポイントは変わっていません。
【Case】ポップアップで登録画面を表示させ強調する
(3)イラスト共有SNS「pixiv」
初回訪問時に上記のようにポップアップで登録画面を表示させています。同様に仮にここで登録をしなくても、気になるコンテンツをクリックすると、登録を促すポップアップが再度表示され、登録をしないとコンテンツが見れない仕組みになっています。
登録が無料で簡単にできる場合には、このようにかなり導線を強調してみることも試してみてはいかがでしょうか？こちらの記事を見る限り、かなりの効果があったようです。
(4)ソーシャルコマースサービス「Fab」
Fabの場合も登録を促すポップアップが表示されますが、「sign up and Enjoy 10% off」と登録のメリットを合わせて強調するなどポップアップ内の文言を工夫しています。
【Case】ページをスクロールしても常に登録ボタンが表示されるようにする
(5)デザインクラウドソーシングサービス「designclue」
またページをスクロールしても、常にアクションボタンを表示させることにより強調するという方法も効果的です。designclueでは、上部の新規登録を促すポップアップがページをスクロールしても表示されるため、常に登録を意識してもらうことができます。
3. ページ遷移 / 入力項目
ページ遷移や入力内容を最小限に
登録や申込の際に入力フォームを記入したり、複数のページを遷移する場合があります。その際に注意したいのが、いかに「ユーザーが離脱するポイントを減らすことができるか」という点。作業工程が増えれば増える程、ユーザーが離脱するポイントを多くなります。
など、CVまでに離脱するユーザーを減らす工夫が必要です。
【Case】登録までの入力項目、ページ遷移を最小限にする
(6)ECサイト開設サービス「STORES.jp」
無料でネットショップを開設できる「STORES.jp」の登録フロー（ショップの開設フロー）は非常に簡潔です。
- トップページでメールアドレスを入力
- 入力したアドレスに送られてくるメールからリンクをクリック
- リンク先で、自分のストアのURLを決める
以上の、たった3ステップでストアの開設が完了します。
更には、以前はなかった「Facebookで始める」ボタンを押すと、Facebookの認証後、すぐにストアのURLを決定するだけで開設ができるようになっていて、さらに登録までの入力項目・ページ遷移数が減っています。
当然きちんと物を売ろうと思えばストアのデザインを変更したり、個人情報を登録する必要はあるのですが、最初からハードルを高くしすぎず、まずは最小限の情報のみで登録、利用をしてもらうような工夫がされています。
実際数ヶ月前に比べ、ショップ開設までのページ遷移数や入力項目が減っており、更にはFacebookでより簡単に登録ができるようになるなど、STORES.jpでもこの部分の改善にはかなり力が入れられているように感じます。
【Case】「登録」のタイミングを後にする
(7)イベントプラットフォーム「Peatix」
peatixも登録/イベントの作成の導線が他のイベントサービスとは違っています。通常だと最初にユーザー登録をした後にイベントの作成という流れが多いのですが、peatixでは以下のような流れになっています。
- 最初にイベント名、開催日、会場を入力する
- 次のページで開催の時間などを含めイベント概要を決定
- Facebookやメールアドレスでアカウント登録/ログイン
- 登録/ログインをすると、最初に登録した情報が入力されているイベント作成ページへ
- 細かい情報を入力
上記のように最低限のイベント情報を入力後、初めてユーザー登録が必要になります。実際の数値はわかりませんが、確かにイベントの概要を入力した後に登録を求められると最初より離脱しにくくなるような気はします。
最初に登録を促すのと、少しサービスを使った状態で登録を促すのでどちらがいいかはケースバイケースですが、なかなか登録ユーザー数が増えないなどの課題を抱えている場合は、このように登録のタイミングを変えてみることが改善に繋がる可能性もあるので、テストをしてみる価値があるポイントです。
4. キャッチコピー
サービスの特徴は一言でわかりやすく
アクションボタンと同様に強調したいのが、サービスの特徴を表すキャッチコピー。ぱっと見た時にサービスの概要や、売りがわかるようなコピーを入れておくことが、ユーザーの関心を惹き付けることに繋がります。
わずかな文言の変更で大きく結果がかわることがある一方で、デザインの変更などに比べ改善案を作る時間が短くすむため、複数のコピーを試して、実際に結果がいいものを使用することがオススメです。
(8)ECサイト開設サービス「STORES.jp」
例えばSTORES.jpの場合は、「最短2分で、驚くほど簡単にオンラインストアがつくれる」というコピーをページの上部で強調しています。
具体的に「最短2分」と数字を出すことで、気軽に登録できることを強調しています。通常開設に時間がかかるというイメージを持ちがちな所を、「最短2分」、「驚くほど簡単に」というコピーでサービスの最大のメリットを強調しています。
(9)家計簿サービス「zaim」
「100万人が利用」という文言はインパクトがあるとともに、多くの人が使っているという安心感をもたらすといった意味でも効果的です。家計簿サービス以外でも、クレジットカードの情報や、銀行のデータを入力するような金融系のサービスなどはユーザーの心理的なハードルがあがりがちなので、利用者数の数を始め少しでも安心感をもたらす工夫は効果があります。
また、「家計簿に挫折した84%がZaimなら続けられると回答」というコピーも非常にインパクトがあります。
5. キーワード
ボタン内の文言など細かい言葉の改善
キャッチコピーと同様に、サービス紹介の文言やアクションボタン内の文言など、細かいキーワードの変更だけでも結果が変わってきます。
例えば海外では登録ボタン内に「free」と加えるだけで登録率が上がった事例も複数あるなど、細かい改善案を地道にテストし続けることが成果に繋がってくる部分です。
【Case】無料を強調する
(10)クラウドソーシングサービス「クラウドワークス」
クラウドワークスのファーストビューでは、
と無料という文言を2ヶ所に入れて強調しています。
その他の登録ボタンでも無料を強調しているものが多く、全体的に無料で登録できることが強調されています。上述したように「無料」という文言を入れるだけならかなり簡単にテストができるので、是非試して頂きたいポイントです。
(11)日報共有サービス「gamba!」
有料の法人向けサービスを扱っているgamba!では45日間の無料体験を実施しており、そちらを強調しています。
ユーザー側としては有料のサービス、特に高価なシステムやサービスに申し込む場合だと一度試してみてから決めたという気持ちはかなり強くなります。
似たような海外の事例で、本登録ボタンだけでなく、無料トライアルのボタンもファーストビューで強調してテストをした際に、
という結果がでたものがあります。
法人向けのシステムなど、有料のサービスを提供している場合には、無料トライアルプランの設置・強調なども１つの改善案として見当してみてはいかがでしょうか。
【Case】細かい文言をテストする
(12)インターネットFaxサービス「eFax」(planBCD事例)
eFaxの事例では、わずかな文言の変更・追加でCVRが4%改善しました。
「いまだけおとくな感じ」や「簡単に申し込めること」などを無料と合わせて強調すると効果的です。特に元々のCVが多いようなサイトでは数%の改善でも登録数や売上げなどに大きな影響を及ぼすので、このような簡単な改善を継続することも重要です。
6. コンテンツ
画像や動画を使って具体的にイメージしてもらう
サービスの概要がなかなか説明しづらいものや、新しい概念のサービスを扱う場合などは画像や動画を使って具体的にイメージをもってもらうことが大切です。
特にファーストビューでは、キャッチコピーやアクションボタンを強調するため、無駄な文字などは使わずビジュアルで伝える工夫も効果があります。
【Case】動画を使ってサービスの良さや価値観を伝える
(13)社内SNS「Talknote」
Talknoteのファーストビューは背景自体が動画になっています。キャッチコピーとアクションボタン以外の情報はなく、この動画を用いて利用シーンを伝える仕様です。また真ん中の再生ボタンを押すと導入企業の動画インタビューが流れ、より具体的にイメージができます。
その他のクライアントインタビューも動画インタビューになっているなど、動画を用いてページの文字数を抑えながらもサービスの特徴を上手く伝えています。
【Case】イラストを使って利用シーンをわかりやすく伝える
(14)インターネットFaxサービス「eFax」(planBCDクライアント様事例)
具体的なイラストを用いてわかりやすくサービスの特徴を伝える事で、CVRが11%改善した事例です。イラストによってファーストビューをぱっと見たときに、サービスのイメージをなんとなくでも掴んでもらうことがCVRの向上にきいてきます。
クオリティの高い動画などを作ろうと思うと、どうしてもある程度の時間や費用がかかってくるので、まずはイラストや画像などから試してみることも検討してみてください。
ユーザーのハードルを下げる
また、特に有料のサービスを扱う場合や登録時に個人情報の入力が必要になる場合などは、以下の方法などで少しでもユーザーの心理的なハードルを下げることなども効果的です。
【Case】利用者の顔や声を紹介することでユーザーの心理的ハードルを下げる
(15)プロトタイピングツール「InVision」
DELLやYAHOOを始めとした多くの企業が導入している「InVision」では、導入クライアントを担当者の写真とコメントと合わせて掲載しています。
このサービスを知らないユーザーにも、有名企業が使っていることを示すことで心理的な負担を減らし、サービスに信頼感と関心をもってもらえる可能性が高まります。またロゴだけでなく、担当者の顔とコメントが載っている部分も面白い工夫の仕方です。
(16)スマートフォン決済サービス「Coiney」
スマートフォン決済サービス「Coiney」ではファーストビューにコメントとともに利用者の写真を大きく表示しています。
使っている人の顔が見えるだけで、安心感があるのと同時に、ページ中央にあるキャッチコピーにも非常にあったテイストになっています。
ファーストビューにただ画像を載せるだけでなく、このように利用者の声を合わせたものを設置するという方法も是非参考にしたいポイントです。
7. レイアウト
無駄な情報は載せない
初めてWebサイトを訪れた人にぱっとサービスの特徴や概要を理解してもらうためには、
などの工夫で、初めてページに訪れたユーザーが「迷わない」ような情報の見せ方をする必要があります。
【Case】情報量を絞り、コピーと画像でポイントを伝える
(17)情報記録・管理サービス「Evernote」>
ファーストビューの中央には特徴を表す簡潔なコピーを大きめかつ緑色で、そしてその下に概要を伝える２行の文章、アクションボタンが配置されているという構造で非常にシンプルです。具体的なキャッチコピーとそれに合った画像がポイントとなっています。
(18)モバイル決済サービス「square」
同様に背景にはサービスのコンセプトが伝わる画像があり、文少量がかなり少ないため、中央のコピーやアクションボタンが非常に目立っています。画像とキャッチコピーで何となくサービスの概要がわかる事例です。
【Case】コンテンツを配置する位置をテストする
(19)インターネットFaxサービス「eFax」
e-faxでは動画を“設置する位置”に関するA/Bテストを以下の条件で実施しました。
- 左上（改善前） : 動画へのリンクをファーストビューの下に小さく文字のみで表示
- 右上（改善案1）: 動画へのリンクを大きめかつファーストビューに設置
- 右下（改善案2）: 動画へのリンクを大きめかつファーストビューの下に設置
結果としては、右下（改善案2）のケースが1番良い結果がでました。
今回のケースでは「ファーストビューで簡単にサービスのイメージを掴んでもらった後で動画をみて、より具体的に理解してもらう」という点がCVRの向上に繋がったのではないかと考えています。
サービスなどによっても結果は変わってくるので、動画などを設置する際は、合わせて位置や設置方法などもテストしてみると、より良い結果を残すことに繋がります。
(20)参考:サイドバーの位置
配置に関してもう1つ紹介しておきたいのが、サイドバーの位置です。
コンテンツは変えず、サイドバーの位置を左右いれかえてA/Bテストをした場合に、CVRが数%~数十%変化するとういう事例が海外も含めいくつもあります。
同様にメニューの位置やバナーの位置などによっても結果が変わってくることがあるので、レイアウトをテストする際は試してみてください。
終わりに
繰り返しになりますが、ページの改善で悩んだ際はまずはファーストビューの改善をすることを検討してみてください。表示される回数も多いので改善の影響も大きく、ファーストビューが不適切であればそこですぐにユーザーが離脱してしまいます。
その際の改善のポイントとして、
- アクションボタン・・・ボタンを目立たせる
- 入力項目/ページ遷移・・・必要最小限に押さえて離脱を防ぐ
- コピー/ キーワード・・・数字等も用いてユーザーの気を惹くコピーを使う
- コンテンツ・・・動画やイラストを用いて「サービスの利用イメージ」を掴んでもらう
- レイアウト・・・不要な情報をいれない、ユーザーにわかりやすいようにシンプルに
まずは上記のような点から変更・テストしてみてください。