http://pepabo.connpass.com/event/14124/ お申し込みを1割増やしたフォーム改善の話

1. お申し込みを1割増やした
フォーム改善の話
GMO Pepabo, Inc.
財津大夏
2015.05.12 定時で帰ってます！仕事に活かせるペパボの改善セミナー

2. 自己紹介
• 財津大夏（@zaimy611）
• ロリポップ！-> minne
• ディレクター
• サービス改善 / 企画 / 広告 / 広報 / …
2

3. アジェンダ
1. はじめに
2. 継続的なサイト改善
3. フォーム改善とは
4. フォーム改善の手法とロリポップ！の改善例
3

4. 1.はじめに

5. はじめに
• フォーム改善の基本的な部分をお話しします
• 画期的な手法の話
• 汎用的に使える手法
• ロリポップ！での実例
5

6. 2.継続的なサイト改善

7. 目標を決める
• 問い合わせ/資料請求/申し込み etc…
• 目標があれば手をつけるべき所が判断できる
• 「この指標も、あの指標も気になる」
• 目標があれば成功か失敗か判断できる
• 現時点での成功 or 失敗 / 最終的な成功 or 失敗
7

8. 小刻みにリリースする
• 要因の切り分けがやりやすい
• PDCA / データドリブン
• 「ショートケーキを作る」
• 作っている本人たちが楽しい！
8

9. 3.フォーム改善とは

10. EFO

11. Entry Form Optimization
（入力フォーム最適化）

12. 何にどうやって
”最適化”するのか

13. 何にどうやって最適化するのか
• 問い合わせ数/資料請求数/申し込み数
• 折角フォームまで来てくれたユーザーさまが
ゴールまで進んでくれるように
• 一般的な指標は「離脱を減らす」
13

14. 4.フォーム改善の手法と
ロリポップ！の改善例

23. 独自ドメインの利用選択画面
アカウント・メールアドレス入力画面
仮登録メールに記載のURLを開く
契約内容・個人情報入力画面
確認画面
完了画面
仮登録完了画面

24. フォーム改善の手法
1. 不要な画面/項目/リンクを削除する
2. 視覚的なハードルを下げる
3. 操作のハードルを下げる
24

25. 不要な画面/項目/リンクを
削除する

26. 不要な画面/項目/リンクを
削除する
• 他の要素が目に入ると離脱する
• 「会員登録するともっとお得」
• 項目が多いと見ただけで意欲が削がれる
• EFOの大原則は離脱を減らす事
→離脱機会を減らすこと
26

27. ロリポップ！がやったこと
• 画面（フロー）を3つ削った
• 項目を6つ削った
• 戻るボタンを削った
• ヘッダとフッタを削った
27

28. 独自ドメインの利用選択画面
アカウント・メールアドレス入力画面
仮登録メールに記載のURLを開く
契約内容・個人情報入力画面
確認画面
完了画面
仮登録完了画面

31. 項目を6つ削った
• 契約期間
• 支払い方法
• 職種
• ビジネス利用の選択
• 性別
• 生年月日
31

33. 項目を6つ削った
• 契約期間
• 支払い方法
• 職種
• ビジネス利用の選択
• 性別
• 生年月日
33
> 契約時に決められる

34. 項目を6つ削った
• 契約期間
• 支払い方法
• 職種
• ビジネス利用の選択
• 性別
• 生年月日
34
> マーケティング的項目

35. 戻るボタンを削った
✖ 誤クリックすると最初から…
35

36. ヘッダとフッタを削った
36
✖ 気になるメニューが目に入る

37. 視覚的なハードルを下げる

38. 視覚的なハードルを下げる
• 必須項目は「必須」と表示する
• 項目は縦並び
• 不要な説明を省く
• ナビゲーションをつける
38

39. 必須項目は「必須」と表示する
39

40. 項目は縦並び
40

41. 不要な説明を省く
41

42. ナビゲーションをつける
42

43. 操作のハードルを下げる

44. 操作のハードルを下げる
• 入力枠をまとめる
• 入力例を表示する
• 入力完了時にチェックマークを表示する
• エラーもその都度表示する
• 不要なボタンを外す
44

45. 入力枠をまとめる
✖ tabやマウスで移動しなければいけない
45

46. 入力例を表示する
✖ 「姓名の間にスペース要るの？全角？半角？」
46

47. 入力完了時にチェックマークを
表示する
47

48. エラーもその都度表示する
✖ 送信したタイミングでまとめて表示
48

49. 不要なボタンを外す
既存アカウントをお持ちの方は入力を省ける
→ログインが必要
→ログイン情報を覚えてない
✖ 「カンタン入力」が迷わせていた…
49

50. 不要なボタンを外す
✖ 「住所検索」「郵便番号検索」どっち？
50

51. その他
• どこからでもフォームにたどり着けるように
51

52. 結果

53. 改善後のロリポップ！の
フォーム

54. 結果
2014年1Q → 2015年1Q
申込数前年比110%
→契約へキャッチアップしていく
54
90
95
100
105
110
2014 2015

55. まとめ

56. まとめ
• 不要な画面を削除する
• 不要な項目を削除する
• 不要なリンクを削除する
• 戻るボタン/リセットボタンを削る
• ヘッダとフッタを削る
56

57. まとめ
• 必須項目は「必須」と表示する
• 項目は縦並び
• プレースホルダは時と場合で
• 不要な説明を省く
• ナビゲーションを付ける
57

58. まとめ
• 入力枠をまとめる
• 入力例を表示する
• 入力を制限しない
• 入力完了時にチェックマークを表示する
• エラーもその都度表示する
• 不要なボタンを外す
58

59. ツールの話

60. ツールの話
• PDCA / データドリブン
• GoogleAnalytics
• 「ウェブテスト」でA/Bテスト
• 「目標到達フロー」などで離脱箇所のチェック
• 多機能で無料
60