目次
Grow with Google 〜ユーザに軸を置いたMobile First〜
【日時】
2015 年 6 月 23 日 （火） 13 時 30 分 － 17 時 30 分 （受付開始 13 時 00 分）
【プログラム詳細】
- イントロダクション: Mobile において重要なことは何か？
西村 亮 - Mobile サイト向けの 25 の設計指針
グーグル株式会社 パフォーマンス ソリューション エキスパート 水谷 嘉仁 - Mobile サイト構築のポイント
株式会社ドーモ 代表取締役 占部 雅一 様 - UI 改善最前線 – 事例からみる Mobile UI 改善（仮）
Kaizen Platform, Inc. 村上 明英 様 - AdWords Mobile 関連機能 最新情報
グーグル株式会社 パフォーマンス ソリューション エキスパート 水谷 嘉仁 - クロージングメッセージ
Mobile において重要なことは何か？
GoogleはMicro-Moments（今この瞬間）をモバイル市場において大事にしている。
- 生活者の意図を実現する手段の多種多様化
- マーケターにとってのMicro-Moments
- Micro-Momentsの活かしたマーケティング
生活者の意図を実現する手段の多種多様化
何かをしたいという意図の実現手段が増えた。
- 実際に店舗に行って購入する
- PCで検索し購入する
- モバイルで検索して購入する
ECの49%はモバイル経由で実行されている。（Criteo・Markezine出典）
- 2010年から2014年に掛けて、モバイルの接触時間が増えてきた
- 25→92分（博報堂メディア定点調査）
→ モバイルの多様化
- 25→92分（博報堂メディア定点調査）
マーケターにとってのMicro-Moments
意図が読み取れる瞬間が多様化してきた。
その意図を大きく分類すると、下記の3つに分けられる。
- 何かを知りたい
- どこかに行きたい
- 何かを買いたい
何かを知りたい
- 生活者の49%が購買判断に検索結果を考慮している
- 今日現在、生活者がもっとも検索を行うデバイスはモバイル
どこかに行きたい
- ３３％がお店の場所をモバイルで調べる
- 25%が今からいくお店の情報をモバイルで調べる
何かを買いたい
- 購買の直前で最も調べる
- 40%がモバイルで調べている
Micro-Momentsの活かしたマーケティング
適切なタイミングを捉える
ターゲットが何かの行動を起こしたい。という時はAdwordsでサポート出来る。（検索連動広告など）
確実に購入・行動を起こす
これらをサポートする方法は何か？
- 61%の人が、モバイルサイトの使い心地が悪いと競合サイトへ移動してしまう
- 67%の人が、モバイルサイトの使い心地が良いとモバイルで購入する
| 認知フェーズ | 欲求フェーズ | 購入フェーズ | |
| 対応方法 | Mobileにフォーカスしたユーザ体験を 提供して初めて対応できるレベル |
1枚LPとAdwordsで対応できるレベル | Adwordsで対応できるレベル |
| ユーザ数 | 膨大 | 中 | 少ない |
| CPA | 高 | 中 | 低 |
| 予算 | 大 | 中 | 少 |
大きな成果と予算を獲得していくためには、認知フェーズの顧客を巻き込まなければならない。
そのためには、Mobileにフォーカスした体験を向上させて行かなければ体現出来ない。
Mobile サイト向けの 25 の設計指針
Googleが定める25の設計指針がある。
意識はしていても、体系立ててチェックを行うと案外抜けていることがある。
１．ホームページとサイトの操作性
- Call To Actionを何よりも目立たせる
- 短く完結なメニューを心がける
- トップページへ簡単に戻れるようにする
- 広告は控えめにする
２．サイト内検索
- すぐに目に付く場所にサイト内検索を表示する
- サイト内検索の結果を最適化する
- フィルタを設定してサイト内検索の利便性を高める
- ユーザを最適な検索結果へ導く
３．コマースとコンバージョン
- まずはサイトをゆっくり閲覧してもらう
- ユーザがゲストとして購入出来るようにする
- 既存の情報を活用して利便性を高める
- 複雑な操作にはClickToCallボタンを用意する
- 他のデバイスでも簡単にコンバージョンを完了できるようにする
４．フォーム入力
- 自動機能で入力を簡単にする
- 入力項目ごとに最もシンプルな入力方法を選択する
- 日付を選択させるときにはカレンダーを表示する
- 記入例の表記や自動チェック機能で入力ミスを減らす
- 効果的なフォームを設計する
５．モバイルサイトの特性と使いやすさ
- サイト全体をモバイル向けに最適化する
- 拡大縮小操作を不要にする
- 商品画像を拡大出来るようにする
- 最適な画面の向きをユーザーに知らせる
- ユーザーを別のウィンドウへ移動させない
- 「完全版サイト」という表現を避ける
- ユーザの位置情報が必要な場合、理由を明示する
改善事例
リブセンス（ジョブセンス？）
モバイルサイトのUXを改善し、モバイルからのコンバージョン数（応募数）の拡大に成功
上記指標＋全国の事例なども活用し、専任チームで改善を行った結果、
- +16.7pt モバイルの応募フォームのコンバージョン率が改善
- 40% モバイルのコンバージョン数が増加
が得られた。
Googleからのアドバイス
サイト内検索の提供がないサイトがまだまだ多いが、無いサイトの場合、本当に無くてもいいのか？ということを考える。
Micro-Momentsが大切になってきている昨今、ユーザ体験的にも検索というものが出来るべきであるのではないか。
正しいスマホサイトは「広告の未来」をつくる
Mobifyとは
カナダのベンチャーによって作られたモバイルプラットフォーム。
PCサイトを元に、デザインはそのまま、スマホサイトを提供。ここ３年半程度で１００サイトを公開。
Agenda
- どうスマホ対応するべきか
- 高速表示
- OneWeb
- 広告会社としてのサイト構築
どうスマホ対応するべきか
何故やらないといけないか
2014年、スマホとPCのトラフィック量は逆転し、スマホのトラフィックの方が多くなった。
→ スマホ対応はやらざるを得ない。
また、Web業界の人間はPCを持っていて当たり前だが、一般の人はPCを必要としていない人が増えてきた。
どうするか・何を大切にするか
これまでスマホ対応はいろんなやり方でその場しのぎで作られてきた。
本当に大切なことを認識して作らなければならない。
ドーモは下記５つの要素が大切と考えている
- 最適表示
- 表示スピード
- One Web
- モバイルファースト
- Webの構造化
マルチスクリーンWebという概念。
＃ 上から順番に難易度が高くなり、施策もより深くなっていく。
高速表示
遅い表示スピードでは広告効果を下げてしまう。
Amazon.com では表示が0.1秒遅くなると売上げが1%減少する
グレッグ・リンデン
ページの表示にかかる時間が0.5秒長くなってトラフィックが20％減少した
マリッサ・メイヤー
それらのデータがあるにも関わらず、日本のECサイトは遅い。
Google PageSpped Insightで合格点を出しているのはAmazonのみ
軽くすれば効果が上がるのは実証されているのに・・・。
どうすれば軽くなるの？
- 軽量なスマホサイトを作る
- サーバ強化をする
- CDNを利用する
サーバ強化・CDNはそれなりにコストが掛かる。。。
LBRの追加費用。人的コスト。Akamaiのような利用コスト。
OneWeb
広告効果の要は、１つのWebにする。
どんなデバイスが来てもLPは1つにしましょう。
2015年現在、ソーシャルシェアは重要。
しかし、デバイスごとに異なるURLだとシェア後の画面で齟齬が発生する。
別ドメイン・URLにすると発生する問題
- アクセス解析で問題が起こる。やりづらい。分析がしづらい。
- めんどうくさい→見ていないに繋がる。
レスポンシブデザインはどうか
URLの問題は解決出来る。
しかし、表示速度が遅いのに加え、開発時のコストが高くなりがちという問題を持つ。
One Webを実現する３つの手法
- レスポンシブWebデザイン
- 動的配信・サーバサイド
- Mobify
自社の状況を照らしあわせ、良いソリューションを選択する必要がある。
広告会社としてのサイト構築
広告会社はサイトリニューアルの提案はすれど、いざ作れとなると途方に暮れる！？
前面リニューアルは難しい。→手間が少ないスマホLPを作る？
スマホLPの課題
LPは長く、画像が多い傾向がある。
そのため、平気でファイルサイズは１MBを超えてしまう。
３G環境４Mbpsと仮定すると、描画に3秒以上掛かってしまう。
そもそも新しい発想のコンバージョンページが必要なのかもしれない。
ストレスのないUIを目指して。スマートフォンのUI改善１７のCaseStudyと考察
前提
いまKaizenでやっているテストの半分以上がスマホ対象である。
当たり前ではあるが、PCとスマホではUI・UXが大きく違う。
そして、まだスマホのグロースハックは体系化されていない。
→ 鉄板の法則はまだ存在していない、
事例集：どんなデザインが効果高かったの？
LP編
１．ゴール：キャンペーン応募
クライアント
ミサワホームの注文住宅。
改善施策
アイキャッチ：家族写真＋色のコントラストで可読性UP
キャッチコピー：各賞の金額を明確に訴求（自分ごと化）
→総額表示訴求から、自分ごとにするためにキャッチコピーを総額→実際の賞の金額に。
改善ポイント
自分ごと化する。 総額ｘ円というのは会社側の金額であり、当事者には関係ない。当事者において、いくらもらえるかを明確に記載することで自分ごと化しやすくした。
２．ゴール：求人検索
クライアント
タウンワーク
改善施策
アイキャッチ・コピー：ファーストビューに応募所要時間と勤務条件を記載
アクション導線：検索項目・タイトルをシンプルに
改善ポイント
誰に？というターゲットベースだったのを何が？という事柄ベースに変更したテストが刺さった
例（学生：フリーター必見 → 応募まで約１分！ 短期・日払い〜
３・ゴール：申込完了
クライアント
ソフトバンクプロバイダ申し込み
改善施策
アクション導線：スクロールしても画面内にボタン表示
PCの改善はキャッチコピーを行った。「カンタンおくだけ」だったが、スマホは色々と情報を記載していたが伸びた。
改善ポイント
導線が重要。常にスクロールしてもCTAを表示→すぐにアクションできるように
４．ゴール：メールアドレス会員登録
クライアント
LUXA
改善施策
アイキャッチ画像：90%OFF＊会員限定×モノ×コトの画像
改善ポイント
KVにベネフィットを訴求し、視線動かさずに訴求できるようにした。
５．ゴール：脂肪吸引モニター募集
クライアント
某脂肪吸引
改善施策
選択肢ボタンを削り、アクションボタンをモニター募集のみにする。
他のボタンを下に下ろす。
アイキャッチ画像＆コピー：サービス内容訴求
アクション導線：引き算（周辺ボタンを削除
改善ポイント
ユーザに選んでもらえるようにすると面倒臭がってしまい、CVRが下がってしまう。
TOP編
６．ゴール：婚活サイト無料会員登録
クライアント
Yahooお見合い
改善施策
アイキャッチ画像＆コピー：「婚活」のシンプルな分かりやすさ
アクション導線：登録ボタンを一つにして、ファーストビューに設置。
改善ポイント
アクションを絞る
７．ゴール：パートナー検索
クライアント
Yahooパートナー
改善施策
アイキャッチ画像＆コピー：「まじめな恋人探し」
改善ポイント
「20万組のカップル誕生」というフレーズがすでにあったが、いうならばそれは関係の無い他の人の幸せである。
自分ごとではないため、より自分ごと化しやすいフレーズに
検索一覧
８．ゴール：詳細ページ遷移率
クライアント
SUUMO
改善施策
アクション導線：「押せる感」の演出
改善ポイント
ボタンっぽくシャドウをつけただけ。スマホデザインの課題として「押したらどうなるの？」というのが分からない。
「押せますよ」と主張してあげることで数字が上がった例。
リンクについて
- PC:ポインターになるからわかる
- スマホ：どこを押すべきなのか分からない。
この差を意識して、スマホはより”押せる”ということを主張・伝達してあげる必要がある。
９．ゴール：旅行サイト一覧ページ
クライアント
るるぶ
改善施策
アクション導線：検索結果画面に表示される情報を２券→３券に追加
改善ポイント
最適な量というものがクライアント・ユーザによって異なる
詳細ページ
１０．ゴール：購入CVR
クライアント
LUXA
改善施策
アクション導線：「購入する」→「購入手続きへ」でハードルを下げる
改善ポイント
押した後のページを想起させる。購入完了じゃないよという心理ハードルを下げる。
１１．ゴール：詳細プラン遷移率
クライアント
るるぶ
改善施策
アクション導線：ボタン文言を変更心理ハードルを下げて同期喚起
改善ポイント
「予約に進む」→「プラン内容を見る」
１２．ゴール：求人応募
クライアント
はたらいく
改善施策
シンプル化：引き算。「給与」項目文言削減。
アクション導線：色変更 青→オレンジに
フォーム編
１３．ゴール：求人応募
改善施策
アイキャッチ：目立たせる＆引き算で省スペースか
アクション導線：色を変える
改善ポイント
１分で完了！などを目立たせて心理ハードルを下げる。
CTAの色を見出しカラーと差別化し、ここまでがフォームです。と認識させる
１４．ゴール：ECログイン
改善施策
アクション導線：「既存会員」を優先したレイアウト
改善ポイント
既存会員がほとんどのページなので、「新規の方へ」などのナビゲーションを消して、最上部にログインフォームを追加。
１５．ゴール：アプリDLボタンクリック
改善施策
コピー：「無料」であることを目立たせる
改善ポイント
当たり前だけど言うことが大事。
１６．ゴール：LINEスタンプDL
クライアント
ダノン
改善施策
アクション導線：ファーストビュー＆目立たせる
１７．ゴール：ニュースサイト：レコメンドCTR
改善施策
配置：縦読みが◎、PCの常識が通用しない。
グリッドレイアウトとリスト型を比較
改善ポイント
既存概念に縛られず、実施する。
PCはグリッドが最も良かった。しかしスマホはリストが最も数値を上げた。
PCとスマホの違い
- 画面大きさ幅
- レイアウト
- 目線：PC＝Z型、スマホ＝１本
- 届く範囲・押しやすさ
Tips
スマホを右手で使う・左手で使う。両手で使うという人の割合が変わってきている。
- 右手：５
- 左手：４
- 両刀：１
情報量とアクションハードルの調節
文字数はPC程多く表示できない。「引き算」のデザイン設計が大切になる。
またページ遷移のハードルを下げる必要もある。
自分ごと化の調節
「私にとってこれは何？」よりパーソナルな利用のされ方
アクションの選択肢の数の調節
引き算にも通ずるところだが、サービスバリエーションの中から選ばせる。より「シンプルなアクション導線」を描いた方が成果が上がりやすい。
押す場所の分かりやすさの工夫
スマホにはポインターがない、どこを押せば目的の情報にたどり着くかを。
結局…
「試してみないと分からない。」
思い込みを捨てたデータドリブンマーケティングが大切。
はやく、たくさんのカイゼンで着実にCVRを向上。
結果を出せるPDCAの回り方
- たくさん実施すること。
- 打席数の重要性
- 家電量販店の売場作りと接客カイゼンの例
シンプルなチーム・ワークフロー作り
- 軽く
- 属人化させない
- 楽に
現場に裁量権を
グロースハックを日常的に回すためには裁量を現場に渡すのが良い。
都度承認が必要となると早い速度でPDCAが回せなくなる。
家電量販店の売場作りと接客カイゼンの例
家電量販店は日々売場作りを行っている。
通路の幅を日々変えたり、オモテに面を向けている商品群を変えたりしている。
リアルもサイトも同じ。毎日カイゼンして当たり前である。
簡単にやるためには
Kaizen platformを使えばいいよ。
質疑応答
Q.ABテストにおいて、明確な差が出ない時は？
A.有意差がつかないものはそういうデザインであるという見切りを付けて、別のテストを早く進めるほうが結果的に良いことが多い。
—-
Q.PCでうまく行ったがスマホではうまく行かなかった。またその逆のABテスト例はあったか？
A.スマホは常に身につけているということもあり、パーソナル・自分事化すると成功しやすかったりする。
AdWords Mobile 関連 Update
Adexperiences
新たな広告フォーマット
様々な業界に向けて適切なフォーマットで提供されていく予定。
車業界（ディーラー）
写真をスワイプして見れる・ディーラーの一覧を表示する
近くのディーラーへのClicktoCallや経路探索
ホテル業界
金額・空室・外観・内覧写真
ショッピング系
評価や価格
Mesurement
Adwords
現在把握しているコンバージョン一覧
- オンラインコンバージョン
- デバイスをまたいだコンバージョン
今後は
- 来店コンバージョン
- アプリ内コンバージョン
- 電話コンバージョン
などを実装予定。
デバイスをまたいだコンバージョン
別デバイスで接触し、コンバージョンを行った数値である。
- エンターテイメント業界が最大で２１％
- 教育業界が最小で５％
ほどが通常コンバージョンに上乗せされる。
業界によって大小はあるが、少なからずデバイスをまたいだコンバージョンは存在している。
アトリビューションモデルに新機能実装
アトリビューションモデルにデータドリブンモデルが新規追加（２０１５年後半にローンチ予定）
システム側で分析を行ない、自動で入札単価を変更する機能を提供する。
また、デバイスをまたいで解析を行うため、より適切なアトリビューション活用が行える。
クロージングセッション：明日から実行に移して頂きたいこと
PDCAサイクルを回す
モバイルは未知の領域がまだまだある。
想定通りにいかないことが非常に多いため、PDCAサイクルを回すことが大切。
PDCAを回す上でGoogleからアドバイス
モバイルサイトカイゼンを考える上で大事なポイント
Speed
40％
以上の人が3秒以上読込にかかると離脱する
Design
２ > 1
画面遷移が増えても簡単に操作できる方が優れている
Contents
62%
Youtubeが商品購入前に参考となったことがある。
文字読むより動画などでわかりやすく説明したほうがよい。
個人的まとめ・所感
モバイル大切
当たり前ですが、昨今はPCのビューが減り、モバイルのビューが増えており、その数値が上述の通り逆転しました。
今後のプロダクトのメインストリームはPCからモバイルに移り変わるのは必至ですし、それに対するテスト・学習も続けていかねば時代錯誤に陥ってしまいます。
ユーザの多様化
「モバイルユーザ」と一言で表せるほど簡単なものではなくなっています。
数年前はアーリーアダプターの人が主に牽引をし、モバイル市場は活性化してきました。
しかし、すでにモバイルはアーリーアダプターの人の市場ではなく、レイトマジョリティ、ひいてはラガードの人のステージへと移り変わりました。
簡単にいうと、20代前半の人やエンジニア、新しいモノ好きの学生などの市場から、中年・晩年の方へ市場が広がったということです。
PDCAの大切さ
人が変われば、欲されるものも変わる。
いままでの正解がある日急に不正解に変わる可能性もある。
それに対応していくためには、早くPDCAサイクルを回す。
急に回すのが難しい状況下に置いても「悪くなった」ということを認知出来るために、数値指標を設け、追っていくことは必至になってくると考えています。