EFO虎の巻_チートシート.pptx

Transcription

1 EFO チートシート HP 制作業者も必 見見! フォーム作成チェックリスト 株式会社シ ー ケ ー ス テ ー ビ ー

2 本章の 目次 フォームのエラー確認 3 メインユーザのデバイス確認 4 ユーザビリティの確認 5 入 力力内容の精査 / 入 力力順の確認など 入 力力代替 OAuth 認証機能の利利 用 6 7 入 力力ユーザの複数 再訪解析 8 導線の確認 9 導線内の Flash 配置も NG 10 1

3 本章の 目次 コンバージョンアップのポイント 12 入 力力フォーム最適化チェックリスト #1 13 入 力力フォーム最適化チェックリスト #2 14 入 力力フォーム最適化チェックリスト #3 15 機能詳細 カラーリングと吹き出し 16 機能詳細 リアルタイム 入 力力チェック 19 機能詳細 郵便便番号 住所補完 20 機能詳細 携帯アドレスのサジェスト プルダウン化 21 機能詳細 誤送信制御と誤操作抑 止 22 機能詳細 オートコンプリート 23 機能詳細 CSS でデザイン変更更 24 日々の運 用チェック 25 2

4 現状分析 フォームのエラー確認 簡単にできるフォームエラーの確認 方法は各ブラウザに付属している 開発者専 用ツールを使うことです Microsoft Edge/IE11 など jp/library/bg182326(v=vs.85).aspx Google Chrome Apple Safari JP&viewlocale=ja_ JP Mozilla Firefox 各ツールには必ずエラーや警告を出す機能がついている この機能を使えば フォームに起きている 問題の幾つかを把握できる フォーム制作を外注する場合 これを確認し原因と解決策を提 示してもらいましょう 3

5 現状分析 メインユーザのデバイス確認 アクセス解析ツールを使って対象ページのデバイスシェアを確認します Google Analytics のユーザ > モバイル > デバイスを表 示した例例 アクセス数の多いモバイル デバイス名と CVR を表 示できる フォームを修正していく上で注 力力すべき課題や費 用対効果を洗い出すことができる 下図はモバイルが多数派 (70%) になっている EC サイト 4

6 現状分析 ユーザビリティの確認 専 用ツールを使ってフォームのユーザビリティを確認します 例例えば弊社の製品 フォームアシストであればフォームの項 目別 日別の解析を確認できます 現状のフォームの問題点が数値化されていれば問題解決も早くなりコンバージョンの向上にも役に 立立ちます 5

7 現状分析 入 力力内容の精査 / 入 力力順の確認など 入 力力内容と設問が適切切なものか確認します 入 力力内容が少ないほど コンバージョンは改善されます 入 力力しやすい項 目を上にする 不不要なアンケートは聞かない または最後にする 必須項 目と任意項 目を明確に 色やエリアで分ける 任意項 目は可能な限り無くす 入 力力アシストで 自動 入 力力可能な項 目を増やす ( 例例えば郵便便番号検索索での住所 自動挿 入など ) 様々なデバイスで 入 力力を 行行い 使いにくい部分や平均的な 入 力力時間を体感する 特にモバイルの 入 力力デバイスに関しては タップ回数の差などを確認し 入 力力難易易度度を把握する 6

8 現状分析 入 力力代替 OAuth 認証機能の利利 用 アカウントの代替としてユーザ数が多い著名アカウントの連携機能 などがあります Yahoo,Google,Amazon など フォームアシストの Yahoo!ID 連携機能 7

9 現状分析 入 力力ユーザの複数 再訪解析 入 力力完了了したユーザが 1 度度で 入 力力まで 行行ったのか 何度度か再訪しているのか その 行行動を解析することで改善点がさらに 見見えてきます Google Analytics 初めての購 入には何度度もの購 入ためらいが発 生しその都度度 フォームの 入 力力を途中でやめています 購 入 ( 購 入ためらい ) 途中でやめても 入 力力情報を覚えていて すぐに再開できる機能も重要! ( 購 入ためらい ) 業種 業態 フォームの性質などを考えて適宜 必要な機能の導 入を検討しましょう ( 購 入ためらい ) ( 購 入ためらい ) ( 購 入ためらい ) 8

10 現状分析 離離脱パターン 導線の確認 離離脱の原因はフォームのみにあるのか フォーム以外の影響が 大きいのか 把握することも重要です CV パターン 初回訪問ページ A ページ フォーム 離離脱 B ページ 関連ページ フォーム 完了了 入 力力項 目を直前ページの内容にマッチングさせるだけでコンバージョンが改善する可能性もあります 9

11 コラム 導線内の Flash 配置も NG Flash 広告や Flash バナーがあるだけでもコンバージョン率率率が低下する 事実を知っていますか? 一時的に流流 行行した Flash 作成のフォームを使う企業は流流 石にないにしても 一部のパーツに Flash を使っているケースは まだあります このような場合 その箇所は以下のような悪い印象を与える可能性があります スマホでは表 示されていない空 白エリア 一部 PC ブラウザ ( 特に直近購 入したブラウザ ) は Flash がインストールされていないから空 白エリア 上記だけならまだしも 望んでいない Flash のインストールやアップグレードを要求される ブラウザが警告を出す など フォームに 至る以前に そのサイトにネガティブなイメージを持ってしまう可能性が 高まります そうなると 導線の良良し悪しに関わらずコンバージョンが低下してしまうので注意が必要です 本当に必要な時以外 ( 動画ストリーミングの 一部など ) は Flash を放置せずたのコンテンツに置き換えるように配慮しましょう 10

12 フォーム改善の機能別詳細 株式会社シ ー ケ ー ス テ ー ビ ー

13 ポイント 概要 コンバージョンアップのポイント フォーム 入 力力は以下の問題があると CV 率率率が低くなりがち 意図せず誤った 入 力力を 行行ってしまうと 入 力力し直しで時間がかかる 半 角 全 角 / 日英の 文字種選択がユーザの負担 誤 入 力力を繰り返すと離離脱可能性が 高くなる モバイルはセッションが切切れやすいため再 入 力力が発 生しやすい 入 力力項 目が多いと時間がかかり 挫折しがち 欲しいというモチベーションを 維持させるためにも 入 力力完了了までの時間は 大きなポイント 12

14 最適化チェックリスト #1 入 力力フォーム最適化のチェックリスト #1 全ての機能や対策がCV 上昇に関与するとは限りません 特にPCで効果のあった施策が スマホではマイナス効果になるなど逆の作 用が発 生する場合もあるので使い分けが重要です カラー /UI 変更更 機能名 PC 対応デバイス モバイル 機能概要 必須項 目カラーリング 必須項 目を 入 力力時に 一 目でわかるようにする 部品デザインの最適化 CSS によるパーツの再デザイン 最適化 モバイル対応 ボタン配置の変更更 CSS による変更更または HTML ソースの書き換え ラジオボタンとセレクトの部品変更更 - ラジオボタンはスマホでは使いにくいためセレクトボックスに変更更したほうが良良いケースがありあます モバイル最適化 - レスポンシブ対応またはスマホ最適化サービスの利利 用 13

15 入 力力補助 最適化チェックリスト #2 入 力力フォーム最適化のチェックリスト #2 機能名 PC 対応デバイス モバイル 機能概要 文字形式変換 テキストボックスの属性に合わせて全 角 / 半 角を 自動判別切切替 メールアドレス 以降降のドメインの頭 文字から ドメイン候補を表 示 入 力力キーボード変更更 入 力力項 目に合わせ モバイルデバイスの 入 力力キーボードを変更更 郵便便番号検索索 郵便便番号からの住所 自動 入 離離脱確認機能 ページからの離離脱の確認ダイアログ表 示 OAuth 連携 Yahoo! ID などに登録されている情報を該当項 目に 自動 入 力力 オートコンプリート 入 力力内容のブラウザ / サーバ 一時保存と 過去 入 力力情報の提 示 14

16 エラー防 止 / 警告 最適化チェックリスト #3 入 力力フォーム最適化のチェックリスト #3 機能名 PC 対応デバイス モバイル 機能概要 入 力力アラート スマートフォンの場合はアラートの出し 方にも配慮が必要 リアルタイム 入 力力チェック 文字種やパターンの誤 入 力力検知 誤送信制御 ( 完了了まで送信不不可 ) 入 力力が完了了するまで送信を制御する 離離脱確認機能 ページからの離離脱の確認ダイアログ表 示 その他 機能名 PC 対応デバイス モバイル 機能概要 A/B テスト 同 一期間内でのカラーリングやログ / アシストなどの 比較 15

17 機能別詳細 カラーリングと吹き出し カラーリングと吹き出しは 入 力力 支援の定番中の定番 特にカラーリングは デバイスを問わず効果の 高い施策 但し 色弱 色覚異異常への配慮が必要です 健常な 色覚であればピンク 色が最も認識識しやすく不不快感も感じにくい が 色覚異異常だと 見見分けにくい場合もある 色覚異異常 #.E E7.8A.B6 16

18 機能別詳細 カラーリングはやりすぎると むしろ混乱の原因となるので最低限にとどめることが重要 必須 未 入 力力 必須 入 力力済み 任意 入 力力済み 左のようにすると必須と任意の区別がつきにくくなる また 色覚に障害がある場合 色の判別がつきにくくなるケースもあるので 必須 未 入 力力 以外はカラーリングしないほうが適切切である 必須 入 力力済み 見見分けにくい濃淡差の例例 :Wikipedia より 17

19 機能別詳細 吹き出しは PC では効果が 高く スマホでは 非常に扱いにくい PC のみの施策に限定することが重要です アクセスの 大半がスマホなら吹き出しは不不要 スマートフォンだとこのエリアが表 示エリアを圧迫する上に 操作に 支障をきたす可能性が 高い 18

20 チェック項 目の詳細 リアルタイム 入 力力チェック サブミットボタンを押してからエラーチェックするのは離離脱の最 大原因となる エラーの際 その場で警告を出すことで 解決 この間 2 画 面分以上の開きがあるため 冒頭のエラーメッセージに気づかない ( モバイルの場合は吹き出しの代わりにテキストの挿 入を ) 19

21 チェック項 目の詳細 概要 郵便便番号 / 住所補完 正しい郵便便番号なら 自動 入 力力で完了了速度度もアップ フォームアシスト 郵便便番号 住所 自動補完機能 加えて 番地の全 角 半 角をシステムで吸収できると離離脱防 止効果が 高くなります 20

22 チェック項 目の詳細 携帯アドレスのサジェスト プルダウン化 ヒューマンエラーによる 入 力力ミスが発 生しないように抑 止と選択制を促進します フォームアシスト メールアドレス サジェスト機能 21

23 機能別詳細 誤送信制御と誤操作抑 止 ヒューマンエラーによる 入 力力内容の喪失が発 生しないように抑 止します 誤ったブラウザ操作 戻る 閉じるを抑 止 初歩的な設定ですが あるのと無いのとでは 大違いです 必ずウインドウ アラートが出るように作りましょう 誤って送信することを抑 止 誤送信すると 再 入 力力の際に 設定したパスワードや希望する ID などが消えるなど 離離脱可能性の 高い問題が発 生しがちです せっかく 入 力力した情報が消えてしまうとモチベーションも 大幅低下します 22

24 ポイント 概要 オートコンプリート 過去の 入 力力内容やブラウザ登録済み情報を適切切に保存することで 入 力力負担を軽減します 過去に送信に成功した情報や組み合わせ頻度度の 高い情報のみを残すなど 開発と 工夫次第で精度度を上げることもできます 23

25 機能別詳細 概要 CSS でデザイン変更更 CSS でデザインを上書きすることで 操作のしにくいフォームパーツや 古いデザインを刷新することができる システム改変やソース変更更に依存しないため負担が少なく かつ 高い効果が 見見込める CSS 適 用前 CSS 適 用後 氏名 会社名 氏名 メール 選択選択選択 会社名 フォント 入 力力エリア ラジオボタン など システムフォントを使うと読みにくい モダンフォントに変更更することで可読性が上がる またフォントサイズも重要 デフォルトのフォームパーツは 入 力力しにくく 古臭く 見見える 美しいデザインになれたユーザからは信頼感を得られない場合もある マウスで精密にポイントしなければならない既存のフォームパーツは操作しにくい タッチデバイスであればなおさら メール 選択 選択 選択 24

26 フォームの運 用 概要 日々の運 用チェック チェック項 目 各ブラウザのバージョンアップ PC 対象デバイス スマホ 日常 入 力力チェック デバイスチェック SSL のバージョンや 動作確認 郵便便番号など 基本情報の更更新 項 目のチェック 留留意事項 バージョンアップによる挙動の変化は常に発 生する可能性があります Chrome など 一部のブラウザは 自動更更新などでユーザが意図せず最新のブラウザになっているので 前 日できたことができない! といったクレームにつながるケースも サーバの再起動や 一時的な不不具合で フォームが 入 力力完了了できない 不不具合が発 生している時があります 最低でも 月 1 回のペースで 入 力力テストを 行行い 動作を確認しましょう 特に最新のモバイル OS(Android/iOS など ) は定期的なメジャーアップデート ( 年年 1 ~ 2 回 ) で 大きく機能変更更される場合があります その機会に最新の OS や最新の機器でのチェックも重要です SSL の脆弱性やそれに伴うアップデート 仕様変更更 証明書の更更新は特に重要です 適切切でないバージョンや証明書を使っていると警告がユーザに出るため ほぼコンバージョン全てを喪失する可能性があります 郵便便番号は意外と更更新頻度度の 高い情報です ( 必ずしも住所に影響を与えるものではありませんが ) 留留意事項として 大規模な災害がおきると 特別な郵便便番号が設定される場合がありますので EC サイトなどは注意が必要です 日々の項 目チェックから ボトルネックとなっている項 目を確認し 改善または項 目の削減などを検討し 早めのテストを 行行いましょう エラーチェック ( ソースチェック ) 全く関係のない ( はずの ) スクリプトの変更更がフォームに悪影響を及ぼす場合もあります スクリプトの追加 変更更の際は影響範囲のチェックも 欠かさず 行行いましょう 25

27 サービス案内 概要 Web サイトの最適化サービス ナビキャストシリーズ ➊ タグを貼るだけ 簡単導 入 ❷ 数値で納得 明確な効果 ❸ 特許技術の信頼 豊富な実績 ( サイト訪問 ) ( 完了了ページ ) 1 手法 クリックアナリシス PC ユーザの Web 改善に役 立立つ ユーザ 行行動の 見見える化 2 スマートリンク 目的ページにダイレクト誘導! 画像で直感リンク! スマートフォン アナリシス スマートフォンユーザの Web 改善に 役 立立つユーザ 行行動の 見見える化 サイト パーソナライザ 会員サイトでの One to One Marketing を 実現 スマートフォンにも対応 3 EFO フォームアシスト 入 力力フォームでの離離脱を防 止して成約率率率 UP を実現 4 スマートフォン コンバータ PC 用サイトをスマホ 用サイトに 自動変換 フォームコンバータ PC 用 入 力力フォームをスマホ 用に 自動変換 26

28 お問い合わせ 株式会社ショーケース ティービー (Showcase- TV Inc.) e マーケティング事業部 tv.com/ 東京都港区 赤坂 昭栄 赤坂ビル4F TEL: ( 代表 ) ( 直通 ) NaviCast Form Assist tv.com/formassist/ NaviCast Form Assist サンプルフォーム tv.com/formassist/sample_ form/ NaviCast Form Converter tv.com/formconverter/ NaviCast シリーズ 一覧 tv.com/service/ 27