EFO
チートシート
HP制作業者も必⾒見見！フォーム作成チェックリスト
株 式 会 社 シ ー ケー ス ・ テ ー ビー1
本章の⽬目次
・フォームのエラー確認 ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 3 ・メインユーザのデバイス確認 ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 4 ・ユーザビリティの確認 ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 5 ・⼊入⼒力力内容の精査/⼊入⼒力力順の確認など ‥‥‥‥‥‥‥‥‥‥‥ 6 ・⼊入⼒力力代替 OAuth認証機能の利利⽤用 ‥‥‥‥‥‥‥‥‥‥‥‥ 7 ・⼊入⼒力力ユーザの複数・再訪解析 ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 8 ・導線の確認 ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 9 ・導線内のFlash配置もNG ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 10本章の⽬目次
・コンバージョンアップのポイント ‥‥‥‥‥‥‥‥‥‥‥‥ 12 ・⼊入⼒力力フォーム最適化チェックリスト #1 ‥‥‥‥‥‥‥‥‥ 13 ・⼊入⼒力力フォーム最適化チェックリスト #2 ‥‥‥‥‥‥‥‥‥ 14 ・⼊入⼒力力フォーム最適化チェックリスト #3 ‥‥‥‥‥‥‥‥‥ 15 ・機能詳細｜カラーリングと吹き出し ‥‥‥‥‥‥‥‥‥‥‥ 16 ・機能詳細｜リアルタイム⼊入⼒力力チェック ‥‥‥‥‥‥‥‥‥‥ 19 ・機能詳細｜郵便便番号・住所補完 ‥‥‥‥‥‥‥‥‥‥‥‥‥ 20 ・機能詳細｜携帯アドレスのサジェスト・プルダウン化 ‥ 21 ・機能詳細｜誤送信制御と誤操作抑⽌止 ‥‥‥‥‥‥‥‥‥‥‥ 22 ・機能詳細｜オートコンプリート ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 23 ・機能詳細｜CSSでデザイン変更更 ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 24 ・⽇日々の運⽤用チェック ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 253
現状分析
フォームのエラー確認
簡単にできるフォームエラーの確認⽅方法は各ブラウザに付属している 開発者専⽤用ツールを使うことです。 Microsoft Edge/IE11など https://msdn.microsoft.com/ja-‐‑‒jp/library/bg182326(v=vs.85).aspx Google Chrome http://www.buildinsider.net/web/chromedevtools/01 Apple Safari https://support.apple.com/kb/PH21491?locale=ja_̲JP&viewlocale=ja_̲JP Mozilla Firefox https://developer.mozilla.org/ja/docs/Tools 各ツールには必ずエラーや警告を出す機能がついている。この機能を使えば、フォームに起きている 問題の幾つかを把握できる。フォーム制作を外注する場合、これを確認し原因と解決策を提⽰示してもらいましょう。現状分析
メインユーザのデバイス確認
アクセス解析ツールを使って対象ページのデバイスシェアを確認します。 Google Analyticsのユーザ>モバイル＞デバイスを表⽰示した例例。アクセス数の多いモバイル・デバイス名とCVRを表 ⽰示できる。フォームを修正していく上で注⼒力力すべき課題や費⽤用対効果を洗い出すことができる。 下図はモバイルが多数派（70%）になっているECサイト5
現状分析
ユーザビリティの確認
専⽤用ツールを使ってフォームのユーザビリティを確認します。 例例えば弊社の製品、フォームアシストであればフォームの項⽬目別、⽇日別の解析を確認できます。現状のフォームの問 題点が数値化されていれば問題解決も早くなりコンバージョンの向上にも役に⽴立立ちます。現状分析
⼊入⼒力力内容の精査/⼊入⼒力力順の確認 など
⼊入⼒力力内容と設問が適切切なものか確認します。⼊入⼒力力内容が少ないほど コンバージョンは改善されます。 ・⼊入⼒力力しやすい項⽬目を上にする。 ・不不要なアンケートは聞かない、または最後にする。 ・必須項⽬目と任意項⽬目を明確に⾊色やエリアで分ける。 ・任意項⽬目は可能な限り無くす。 ・⼊入⼒力力アシストで⾃自動⼊入⼒力力可能な項⽬目を増やす。 （例例えば郵便便番号検索索での住所⾃自動挿⼊入など） ・様々なデバイスで⼊入⼒力力を⾏行行い、使いにくい部分や 平均的な⼊入⼒力力時間を体感する。 ・特にモバイルの⼊入⼒力力デバイスに関しては、タップ 回数の差などを確認し⼊入⼒力力難易易度度を把握する。7
現状分析
⼊入⼒力力代替 OAuth認証機能の利利⽤用
アカウントの代替としてユーザ数が多い著名アカウントの連携機能 などがあります。Yahoo,Google,Amazonなど。 フォームアシストのYahoo!ID連携機能（購⼊入ためらい） （購⼊入ためらい） （購⼊入ためらい） （購⼊入ためらい） （購⼊入ためらい） 購⼊入
現状分析
⼊入⼒力力ユーザの複数・再訪解析
⼊入⼒力力完了了したユーザが１度度で⼊入⼒力力まで⾏行行ったのか、何度度か再訪しているの か、その⾏行行動を解析することで改善点がさらに⾒見見えてきます。 Google Analytics 初めての購⼊入には何度度もの購⼊入ためらい が発⽣生しその都度度、フォームの⼊入⼒力力を途 中でやめています。 途中でやめても⼊入⼒力力情報を覚えていて すぐに再開できる機能も重要！ 業種、業態、フォームの性質などを考え て適宜、必要な機能の導⼊入を検討しま しょう。9
現状分析
導線の確認
離離脱の原因はフォームのみにあるのか、フォーム以外の影響が⼤大きいのか 把握することも重要です。 初回訪問ページ Aページ フォーム 離離脱 Bページ 関連ページ フォーム 完了了 離離脱パターン CVパターン ⼊入⼒力力項⽬目を直前ページの内容にマッチン グさせるだけでコンバージョンが改善す る可能性もあります。コラム
導線内のFlash配置もNG
Flash広告やFlashバナーがあるだけでもコンバージョン率率率が低下する 事実を知っていますか？ ⼀一時的に流流⾏行行したFlash作成のフォームを使う企業は流流⽯石にないにしても、⼀一部のパー ツにFlashを使っているケースは、まだあります。 このような場合、その箇所は以下のような悪い印象を与える可能性があります。 ・スマホでは表⽰示されていない空⽩白エリア。 ・⼀一部PCブラウザ（特に直近購⼊入したブラウザ）はFlashがインストールされていな いから空⽩白エリア。 上記だけならまだしも ・望んでいないFlashのインストールやアップグレードを要求される。 ・ブラウザが警告を出す。 など、フォームに⾄至る以前に、そのサイトにネガティブなイメージを持ってしまう可 能性が⾼高まります。そうなると、導線の良良し悪しに関わらずコンバージョンが低下し てしまうので注意が必要です。 本当に必要な時以外（動画ストリーミングの⼀一部など）は、Flashを放置せずたのコン テンツに置き換えるように配慮しましょう。フォーム改善の機能別詳細
株 式 会 社 シ ー ケー ス ・ テ ー ビー概要
ポイント
コンバージョンアップのポイント
フォーム⼊入⼒力力は以下の問題があるとCV率率率が低くなりがち。 ■ 意図せず誤った⼊入⼒力力を⾏行行ってしまうと⼊入⼒力力し直しで時間がかかる。 ■ 半⾓角・全⾓角/⽇日英の⽂文字種選択がユーザの負担。 ■ 誤⼊入⼒力力を繰り返すと離離脱可能性が⾼高くなる。 ■ モバイルはセッションが切切れやすいため再⼊入⼒力力が発⽣生しやすい。 ⼊入⼒力力項⽬目が多いと時間がかかり、挫折しがち。欲しいというモチベーションを 維持させるためにも
⼊入⼒力力完了了までの時間
は⼤大きなポイント。13 最適化チェックリスト #1
⼊入⼒力力フォーム最適化のチェックリスト #1
全ての機能や対策がCV上昇に関与するとは限りません。特にPCで効果のあった施策が、ス マホではマイナス効果になるなど逆の作⽤用が発⽣生する場合もあるので使い分けが重要です。 機能名 対応デバイス 機能概要 PC モバイル 必須項⽬目カラーリング ○ ○ 必須項⽬目を⼊入⼒力力時に⼀一⽬目でわかるようにする 部品デザインの最適化 ○ ○ CSSによるパーツの再デザイン、最適化、モバイル対応 ボタン配置の変更更 ○ × CSSによる変更更 または HTMLソースの書き換え ラジオボタンとセレクトの 部品変更更 -‐‑‒ ○ ラジオボタンはスマホでは使いにくいためセレクトボックスに変更更したほうが良良いケースがありあます。 モバイル最適化 -‐‑‒ ○ レスポンシブ対応またはスマホ最適化サービスの利利⽤用 ■カラー/UI変更更最適化チェックリスト #2
⼊入⼒力力フォーム最適化のチェックリスト #2
機能名 対応デバイス 機能概要 PC モバイル ⽂文字形式変換 ○ × テキストボックスの属性に合わせて全⾓角/半⾓角を⾃自動判別切切替 メールアドレス サジェスト機能 ○ ○ 「@」以降降のドメインの頭⽂文字から、ドメイン候補を表⽰示 ⼊入⼒力力キーボード変更更 × ○ ⼊入⼒力力項⽬目に合わせ、モバイルデバイスの⼊入⼒力力キーボードを変更更 郵便便番号検索索 ○ ○ 郵便便番号からの住所⾃自動⼊入 離離脱確認機能 ○ × ページからの離離脱の確認ダイアログ表⽰示OAuth連携 ○ ○ Yahoo! IDなどに登録されている情報を該当項⽬目に⾃自動⼊入⼒力力
オートコンプリート ○ ○ ⼊入⼒力力内容のブラウザ/サーバ⼀一時保存と、過去⼊入⼒力力情報の提⽰示
15 最適化チェックリスト #3
⼊入⼒力力フォーム最適化のチェックリスト #3
機能名 対応デバイス 機能概要 PC モバイル ⼊入⼒力力アラート ○ △ スマートフォンの場合はアラートの出し⽅方にも配慮が必要 リアルタイム⼊入⼒力力チェック ○ ○ ⽂文字種やパターンの誤⼊入⼒力力検知 誤送信制御（完了了まで送信 不不可） ○ ○ ⼊入⼒力力が完了了するまで送信を制御する 離離脱確認機能 ○ × ページからの離離脱の確認ダイアログ表⽰示 ■エラー防⽌止/警告 機能名 対応デバイス 機能概要 PC モバイル A/Bテスト ○ ○ 同⼀一期間内でのカラーリングやログ/アシストなどの⽐比較 ■その他機能別詳細
カラーリングと吹き出し
カラーリングと吹き出しは⼊入⼒力力⽀支援の定番中の定番。特にカラーリングは デバイスを問わず効果の⾼高い施策。但し、⾊色弱・⾊色覚異異常への配慮が必要 です。 健常な⾊色覚であればピンク⾊色が最も認識識しやすく不不快感も感じにくい。が、⾊色覚 異異常だと⾒見見分けにくい場合もある。 https://ja.wikipedia.org/wiki/⾊色覚異異常#.E7.97.87.E7.8A.B617
機能別詳細
カラーリングはやりすぎると、むしろ混乱の原因となるので最低限にとど めることが重要。 左のようにすると必須と任意の区別がつきにく くなる。 また、⾊色覚に障害がある場合⾊色の判別がつきに くくなるケースもあるので「必須・未⼊入⼒力力」以 外はカラーリングしないほうが適切切である。 必須・⼊入⼒力力済み 任意・⼊入⼒力力済み 必須・⼊入⼒力力済み 必須・未⼊入⼒力力 ■⾒見見分けにくい濃淡差の例例：Wikipediaより機能別詳細
吹き出しはPCでは効果が⾼高く、スマホでは⾮非常に扱いにくい。 PCのみの施策に限定することが重要です。アクセスの⼤大半がスマホなら 吹き出しは不不要。 スマートフォンだとこのエリアが表⽰示エ リアを圧迫する上に、操作に⽀支障をきた す可能性が⾼高い。19
チェック項⽬目の詳細
リアルタイム⼊入⼒力力チェック
サブミットボタンを押してからエラーチェックするのは離離脱の最⼤大原因と なる。 この間２画⾯面分以上の開きがあるため 冒頭のエラーメッセージに気づかない。 エラーの際、その場で警告を出すことで 解決。 （モバイルの場合は吹き出しの代わりに テキストの挿⼊入を。）概要
チェック項⽬目の詳細
郵便便番号/住所補完
正しい郵便便番号なら⾃自動⼊入⼒力力で完了了速度度もアップ。 【フォームアシスト】郵便便番号 → 住所⾃自動補完機能 加えて、番地の全⾓角・半⾓角をシステムで吸収できると離離脱 防⽌止効果が⾼高くなります。21
チェック項⽬目の詳細
携帯アドレスのサジェスト・プルダウン化
ヒューマンエラーによる⼊入⼒力力ミスが発⽣生しないように抑⽌止と選択制を 促進します。 【フォームアシスト】メールアドレス・サジェスト機能機能別詳細
誤送信制御と誤操作抑⽌止
ヒューマンエラーによる⼊入⼒力力内容の喪失が発⽣生しないように抑⽌止します。 誤ったブラウザ操作「戻る」、閉じるを抑⽌止。 誤って送信することを抑⽌止。 誤送信すると、再⼊入⼒力力の際に、設定したパスワードや 希望するIDなどが消えるなど、離離脱可能性の⾼高い問題 が発⽣生しがちです。 せっかく⼊入⼒力力した情報が消えてしまうとモチベーショ ンも⼤大幅低下します。 初歩的な設定ですが、あるのと無いのとでは⼤大違いで す。必ずウインドウ・アラートが出るように作りま しょう。概要
ポイント
オートコンプリート
23 過去の⼊入⼒力力内容やブラウザ登録済み情報を適切切に保存することで⼊入⼒力力負担 を軽減します。 過去に送信に成功した情報や組み合わせ頻度度の⾼高い情報のみを残すなど、開発と⼯工夫次第で精度度を上げる こともできます。概要
機能別詳細
CSSでデザイン変更更
CSSでデザインを上書きすることで、操作のしにくいフォームパーツや 古いデザインを刷新することができる。システム改変やソース変更更に依存 しないため負担が少なく、かつ⾼高い効果が⾒見見込める。 氏名 会社名 メール ⽒氏 名 会社名 メール 選択 選択 選択 選択 選択 選択 ■CSS適⽤用前 ■CSS適⽤用後 フォント システムフォントを使うと読みにくいフォントに変更更することで可読性が上がる。モダン。 またフォントサイズも重要。 ⼊入⼒力力エリア デフォルトのフォームパーツは⼊入⼒力力しにくく臭く⾒見見える。美しいデザインになれたユーザから、古 は信頼感を得られない場合もある。 ラジオボタン など マウスで精密にポイントしなければならない既存 のフォームパーツは操作しにくい。タッチデバイ スであればなおさら。概要
フォームの運⽤用
⽇日々の運⽤用チェック
25 チェック項⽬目 対象デバイス 留留意事項 PC スマホ 各ブラウザのバージョン アップ ○ ○ バージョンアップによる挙動の変化は常に発⽣生する可能性があります。Chrome など⼀一部のブラウザは⾃自動更更新などでユーザが意図せず最新のブラウザになっ ているので「前⽇日できたことができない！」といったクレームにつながるケー スも。 ⽇日常⼊入⼒力力チェック ○ ○ サーバの再起動や⼀一時的な不不具合で「フォームが⼊入⼒力力完了了できない」不不具合が発⽣生している時があります。最低でも⽉月１回のペースで⼊入⼒力力テストを⾏行行い、動 作を確認しましょう。 デバイスチェック △ ○ 特に最新のモバイルOS（Android/iOSなど）は定期的なメジャーアップデート（年年１〜～２回）で⼤大きく機能変更更される場合があります。その機会に最新のOS や最新の機器でのチェックも重要です。 SSLのバージョンや 動作確認 ○ ○ SSLの脆弱性やそれに伴うアップデート、仕様変更更、証明書の更更新は特に重要で す。適切切でないバージョンや証明書を使っていると警告がユーザに出るため、 ほぼコンバージョン全てを喪失する可能性があります。 郵便便番号など 基本情報の更更新 △ △ 郵便便番号は意外と更更新頻度度の⾼高い情報です（※必ずしも住所に影響を与えるも のではありませんが）。留留意事項として⼤大規模な災害がおきると、特別な郵便便 番号が設定される場合がありますのでECサイトなどは注意が必要です。 項⽬目のチェック ○ ○ ⽇日々の項⽬目チェックからは項⽬目の削減などを検討し、ボトルネックとなっている項⽬目を確認し、早めのテストを⾏行行いましょう。 、改善また エラーチェック （ソースチェック） ○ ○ 全く関係のない（はずの）スクリプトの変更更がフォームに悪影響を及ぼす場合 もあります。スクリプトの追加、変更更の際は影響範囲のチェックも⽋欠かさず⾏行行 いましょう。概要
（サイト訪問） （完了了ページ） 課 題 サイトの問題点がどこかわからない 解決⼿手法 ページの問題点を可視化 クリックアナリシス PCユーザのWeb改善に役⽴立立つ ユーザ⾏行行動の⾒見見える化 スマートフォン・アナリシス スマートフォンユーザのWeb改善に 役⽴立立つユーザ⾏行行動の⾒見見える化 スマートリンク ⽬目的ページにダイレクト誘導！ 画像で直感リンク！1
課 題 入力フォームで効率良く売上げを上げたい 解決手法 離脱原因と対策が分かるEFO フォームアシスト ⼊入⼒力力フォームでの離離脱を防⽌止して成約率率率UPを実現3
課 題 スマホユーザを確実に取り込みたい 解決手法4
スピーディなスマホ対応が実現 課 題 ユーザの目的に合った訴求ができず離脱が増加 解決手法2
あらゆる属性のユーザに合わせた訴求を実現 スマートフォン・コンバータ PC⽤用サイトをスマホ⽤用サイトに⾃自動変換 フォームコンバータ PC⽤用⼊入⼒力力フォームをスマホ⽤用に⾃自動変換 サイト・パーソナライザ会員サイトでのOne to One Marketing を 実現。スマートフォンにも対応。
Webサイトの最適化サービス「ナビキャストシリーズ」
➊タグを貼るだけ「簡単導⼊入」 ❷数値で納得「明確な効果」 ❸特許技術の信頼「豊富な実績」
お問い合わせ
27 株式会社ショーケース・ティービー（Showcase-‐‑‒TV Inc.） eマーケティング事業部 〒107-‐‑‒0052 東京都港区⾚赤坂3-‐‑‒21-‐‑‒13 昭栄⾚赤坂ビル4F TEL：03-‐‑‒5575-‐‑‒5117（代表） 03-‐‑‒6866-‐‑‒8560（直通）NaviCast Form Assist
http://www.showcase-‐‑‒tv.com/formassist/
NaviCast Form Converter
http://www.showcase-‐‑‒tv.com/formconverter/
NaviCast シリーズ⼀一覧
http://www.showcase-‐‑‒tv.com/service/
→ NaviCast Form Assist サンプルフォーム
http://www.showcase-‐‑‒tv.com/formassist/sample_̲form/
