EFOチートシートHP制作業者も必見！フォーム作成チェックリスト

1

本章の目次

・はじめに ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 3

・フォームのエラー確認 ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 4

・メインユーザのデバイス確認 ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 5

・ユーザビリティの確認 ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 6

・入力内容の精査/入力順の確認など ‥‥‥‥‥‥‥‥‥‥‥ 7

・入力代替 OAuth認証機能の利用 ‥‥‥‥‥‥‥‥‥‥‥‥ 8

・入力ユーザの複数・再訪解析 ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 9

・導線の確認 ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 10

2

本章の目次

・コンバージョンアップのポイント ‥‥‥‥‥‥‥‥‥‥‥‥ 12

・入力フォーム最適化チェックリスト #1 ‥‥‥‥‥‥‥‥‥ 13

・入力フォーム最適化チェックリスト #2 ‥‥‥‥‥‥‥‥‥ 14

・入力フォーム最適化チェックリスト #3 ‥‥‥‥‥‥‥‥‥ 15

・機能詳細｜カラーリングと吹き出し ‥‥‥‥‥‥‥‥‥‥‥ 16

・機能詳細｜リアルタイム入力チェック ‥‥‥‥‥‥‥‥‥‥ 19

・機能詳細｜郵便番号・住所補完 ‥‥‥‥‥‥‥‥‥‥‥‥‥ 20

・機能詳細｜携帯アドレスのサジェスト・プルダウン化 ‥ 21

・機能詳細｜誤送信制御と誤操作抑止 ‥‥‥‥‥‥‥‥‥‥‥ 22

・機能詳細｜オートコンプリート ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 23

・機能詳細｜CSSでデザイン変更 ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 24

・日々の運用チェック ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ 25

3

はじめに

このたびは、資料をダウンロードいただきまして、

誠にありがとうございます。

本資料では、EFOにお悩みの皆様が、

フォームの改善をスムーズに行うために、

どのようなツールを使い、何に気を付ければ良いかを

簡単にまとめさせていただいております。

5,000を超えるフォームの改善を行ってきた

ショーケースのノウハウが詰まった資料となっておりますので、

CV率アップのお役に立てれば幸いです。

4

現状分析

フォームのエラー確認

フォームのデザイン変更を行う前に、まずは現状分析をしましょう。各ブラウザに付属している開発者専用ツールを使うことで、簡単にフォームのエラーが確認できます。

Microsoft Edge/IE11などhttps://msdn.microsoft.com/ja-jp/library/bg182326(v=vs.85).aspx

Google Chromehttp://www.buildinsider.net/web/chromedevtools/01

Apple Safarihttps://support.apple.com/kb/PH21491?locale=ja_JP&viewlocale=ja_JP

Mozilla Firefoxhttps://developer.mozilla.org/ja/docs/Tools

各ツールには必ずエラーや警告を出す機能がついています。この機能を使えば、フォームに起きている問題の幾つかが把握できるので、フォーム制作を外注する場合、これを確認し原因と解決策を提示してもらいましょう。

主要ブラウザの開発者専用ツール

5

現状分析

メインユーザのデバイス確認

アクセス解析ツールを使って対象ページのデバイスシェアを確認します。

Google Analyticsのユーザ>モバイル＞デバイスを表示した例です。アクセス数の多いモバイル・デバイス名とCVRが確認できます。確認することで、フォームを修正していく上で注力すべき課題や費用対効果を洗い出すことができます。

■下図はモバイルが多数派（70%）になっているECサイト

6

現状分析

ユーザビリティの確認

専用ツールを使ってフォームのユーザビリティを確認します。

例えば弊社の製品、フォームアシストであればフォームの項目別、日別の解析を確認できます。現状のフォームの問題点が数値化されていれば、問題解決も早くなりコンバージョンの向上にも役に立ちます。

※他にOS・ブラウザ情報も取得可能

7

現状分析

入力内容の精査/入力順の確認 など

入力内容と設問が適切なものか確認します。入力内容が少ないほどコンバージョンは改善されます。

・入力しやすい項目を上にする。

・不要なアンケートは聞かない、または最後にする。

・必須項目と任意項目を明確に色やエリアで分ける。

・任意項目は可能な限り無くす。

・入力アシストで自動入力可能な項目を増やす。

（例えば郵便番号検索での住所自動挿入など）

・様々なデバイスで入力を行い、使いにくい部分や

平均的な入力時間を体感する。

・特にモバイルの入力デバイスに関しては、タップ

回数の差などを確認し入力難易度を把握する。

8

現状分析

入力代替 OAuth認証機能の利用

アカウント入力の代替として、ユーザ数が多い著名アカウントの連携機能などがあります。代表的なものでYahoo,Google,Amazonなどがあります。

フォームアシストのYahoo!ID連携機能

9

現状分析

入力ユーザの複数・再訪解析

入力完了したユーザが１度で入力まで行ったのか、何度か再訪しているのか、その行動を解析することで改善点がさらに見えてきます。

（購入ためらい）

（購入ためらい）

（購入ためらい）

（購入ためらい）

（購入ためらい）

購入

Google Analytics初めての購入には何度もの購入ためらいが発生しその都度、フォームの入力を途中でやめています。

途中でやめても

入力情報を覚えていて

すぐに再開できる機能も重要！

業種、業態、フォームの性質などを考えて適宜、必要な機能の導入を検討しましょう。

10

現状分析

導線の確認

離脱の原因はフォームのみにあるのか、フォーム以外の影響が大きいのか把握することも重要です。

初回訪問ページ Aページ フォーム 離脱

Bページ 関連ページ完了フォーム

離脱パターン

CVパターン

入力項目を直前ページの内容にマッチングさせるだけでコンバージョンが改善する可能性もあります。

フォーム改善の機能別詳細

概要

ポイント

コンバージョンアップのポイント

フォーム入力は以下の問題があるとCV率が低くなりがち。

■ 意図せず誤った入力を行ってしまうと入力し直しで時間がかかる。

■ 半角・全角/日英の文字種選択がユーザの負担。

■ 誤入力を繰り返すと離脱可能性が高くなる。

■ モバイルはセッションが切れやすいため再入力が発生しやすい。

入力項目が多いと時間がかかり、挫折しがち。欲しいというモチベーション

を維持させるためにも入力完了までの時間は大きなポイントです。

12

13

最適化チェックリスト #1

入力フォーム最適化のチェックリスト #1全ての機能や対策がCV上昇に関与するとは限りません。

特にPCで効果のあった施策が、スマホではマイナス効果になるなど

逆の作用が発生する場合もあるので使い分けが重要です。

機能名対応デバイス

機能概要PC モバイル

必須項目カラーリング ○ ○ 必須項目を入力時に一目でわかるようにする

部品デザインの最適化 ○ ○ CSSによるパーツの再デザイン、最適化、モバイル対応

ボタン配置の変更 ○ × CSSによる変更 または HTMLソースの書き換え

ラジオボタンとセレクトの部品変更

- ○ラジオボタンはスマホでは使いにくいためセレクトボックスに変更したほうが良いケースがありあます。

モバイル最適化 - ○ レスポンシブ対応またはスマホ最適化サービスの利用

■カラー/UI変更

14

最適化チェックリスト #2

入力フォーム最適化のチェックリスト #2

機能名対応デバイス

機能概要PC モバイル

文字形式変換 ○ × テキストボックスの属性に合わせて全角/半角を自動判別切替

メールアドレスサジェスト機能

○ ○ 「@」以降のドメインの頭文字から、ドメイン候補を表示

入力キーボード変更 × ○ 入力項目に合わせ、モバイルデバイスの入力キーボードを変更

郵便番号検索 ○ ○ 郵便番号からの住所自動入

離脱確認機能 ○ × ページからの離脱の確認ダイアログ表示

OAuth連携 ○ ○ Yahoo! IDなどに登録されている情報を該当項目に自動入力

オートコンプリート ○ ○ 入力内容のブラウザ/サーバ一時保存と、過去入力情報の提示

■入力補助

15

最適化チェックリスト #3

入力フォーム最適化のチェックリスト #3

機能名対応デバイス

機能概要PC モバイル

入力アラート ○ △ スマートフォンの場合はアラートの出し方にも配慮が必要

リアルタイム入力チェック

○ ○ 文字種やパターンの誤入力検知

誤送信制御（完了まで送信不可）

○ ○ 入力が完了するまで送信を制御する

離脱確認機能 ○ × ページからの離脱の確認ダイアログ表示

■エラー防止/警告

機能名対応デバイス

機能概要PC モバイル

A/Bテスト ○ ○ 同一期間内でのカラーリングやログ/アシストなどの比較

■その他

16

機能別詳細

カラーリングと吹き出し

カラーリングと吹き出しは入力支援の定番中の定番。特にカラーリングはデバイスを問わず効果の高い施策。但し、色弱・色覚異常への配慮が必要です。

健常な色覚であればピンク色が最も認識しやすく不快感も感じにくい。が、色覚異常だと見分けにくい場合もある。

https://ja.wikipedia.org/wiki/色覚異常#.E7.97.87.E7.8A.B6

■カラーリング

17

機能別詳細

カラーリングはやりすぎると、むしろ混乱の原因となるので最低限にとどめることが重要です。

左のようにすると必須と任意の区別がつきにくくなります。

また、色覚に障害がある場合、色の判別がつきにくくなるケースもあるので「必須・未入力」以外はカラーリングしないほうが適切です。

必須・入力済み

任意・入力済み

必須・入力済み

必須・未入力

■見分けにくい濃淡差の例：Wikipediaより

18

機能別詳細

吹き出しはPCでは効果が高く、スマホでは非常に扱いにくい。PCのみの施策に限定することが重要です。また、アクセスの大半がスマホなら吹き出しは不要です。

スマートフォンだとこのエリアが表示エリアを圧迫する上に、操作に支障をきたす可能性が高いです。

■吹き出し型アラート

19

チェック項目の詳細

リアルタイム入力チェック

サブミットボタンを押してからエラーチェックするのは離脱の最大原因となります。

この間２画面分以上の開きがあるため冒頭のエラーメッセージに気づかない。

エラーの際、その場で警告を出すことで解決します。

モバイルの場合は吹き出しの代わりに、テキストを挿入してください。

■よくある間違ったレイアウト ■解消方法

概要

チェック項目の詳細

郵便番号/住所補完

正しい郵便番号なら自動入力で完了速度もアップします。

20

【フォームアシスト】郵便番号 → 住所自動補完機能

加えて、番地の全角・半角をシステムで吸収できると離脱防止効果が高くなります。

21

チェック項目の詳細

携帯アドレスのサジェスト・プルダウン化

ヒューマンエラーによる入力ミスが発生しないように抑止と選択制を促進します。

【フォームアシスト】メールアドレス・サジェスト機能

22

機能別詳細

誤送信制御と誤操作抑止

ヒューマンエラーによる入力内容の喪失が発生しないように抑止します。

誤ったブラウザ操作「戻る」、閉じるを抑止。

誤って送信することを抑止。

誤送信すると、再入力の際に、設定したパスワードや希望するIDなどが消えるなど、離脱可能性の高い問題が発生しがちです。

せっかく入力した情報が消えてしまうとモチベーションも大幅低下します。

初歩的な設定ですが、あるのと無いのとでは大違いです。必ずウインドウ・アラートが出るように作りましょう。

概要

ポイント

オートコンプリート

23

過去の入力内容やブラウザ登録済み情報を適切に保存することで入力負担を軽減します。

過去に送信に成功した情報や組み合わせ頻度の高い情報のみを残すなど、開発と工夫次第で精度を上げることもできます。

概要

機能別詳細

CSSでデザイン変更

CSSでデザインを上書きすることで、操作のしにくいフォームパーツや古いデザインを刷新することができます。システム改変やソース変更に依存しないため負担が少なく、かつ高い効果が見込めます。

■CSS適用前 ■CSS適用後

フォント

システムフォントを使うと読みにくい。モダンフォントに変更することで可読性が上がる。またフォントサイズも重要。

入力エリア

デフォルトのフォームパーツは入力しにくく、古臭く見える。美しいデザインになれたユーザからは信頼感を得られない場合もある。

ラジオボタンなど

マウスで精密にポイントしなければならない既存のフォームパーツは操作しにくい。タッチデバイスであればなおさら。

概要

フォームの運用

日々の運用チェック

25

チェック項目対象デバイス

留意事項PC スマホ

各ブラウザのバージョンアップ

○ ○

バージョンアップによる挙動の変化は常に発生する可能性があります。Chromeなど一部のブラウザは自動更新などでユーザが意図せず最新のブラウザになっているので「前日できたことができない！」といったクレームにつながるケースも。

日常入力チェック ○ ○サーバの再起動や一時的な不具合で「フォームが入力完了できない」不具合が発生している時があります。最低でも月１回のペースで入力テストを行い、動作を確認しましょう。

デバイスチェック △ ○特に最新のモバイルOS（Android/iOSなど）は定期的なメジャーアップデート（年１〜２回）で大きく機能変更される場合があります。その機会に最新のOSや最新の機器でのチェックも重要です。

SSLのバージョンや動作確認

○ ○

SSLの脆弱性やそれに伴うアップデート、仕様変更、証明書の更新は特に重要です。適切でないバージョンや証明書を使っていると警告がユーザに出るため、ほぼコンバージョン全てを喪失する可能性があります。

郵便番号など基本情報の更新

△ △

郵便番号は意外と更新頻度の高い情報です（※必ずしも住所に影響を与えるものではありませんが）。留意事項として大規模な災害がおきると、特別な郵便番号が設定される場合がありますのでECサイトなどは注意が必要です。

項目のチェック ○ ○日々の項目チェックから、ボトルネックとなっている項目を確認し、改善または項目の削減などを検討し、早めのテストを行いましょう。

エラーチェック（ソースチェック）

○ ○全く関係のない（はずの）スクリプトの変更がフォームに悪影響を及ぼす場合もあります。スクリプトの追加、変更の際は影響範囲のチェックも欠かさず行いましょう。

概要

26

（サイト訪問） （完了ページ）

課 題 入力フォームで効率良く売上げを上げたい

解決手法 離脱原因と対策が分かるEFO

フォームアシスト入力フォームでの離脱を防止して成約率UPを実現

2課 題 スマホユーザを確実に取り込みたい

解決手法 スピーディなスマホ対応が実現3

課 題 ユーザの目的に合った訴求ができず離脱が増加

解決手法 あらゆる属性のユーザに合わせた訴求を実現1

スマートフォン・コンバータPC用サイトをスマホ用サイトに自動変換

フォームコンバータPC用入力フォームをスマホ用に自動変換

サイト・パーソナライザ会員サイトでのOne to One Marketing を

実現。スマートフォンにも対応。

Webサイトの最適化サービス「ナビキャストシリーズ」

➊タグを貼るだけ「簡単導入」 ❷数値で納得「明確な効果」 ❸特許技術の信頼「豊富な実績」

サービス案内

わたしたちは、入口から出口まで3つの手法で成約率アップをお手伝いします

お問い合わせ

27

株式会社ショーケース（Showcase Inc.）

営業本部

〒106-0032

東京都港区六本木１丁目９−９六本木ファーストビル14F

TEL 03-5575-5117（代表） FAX 03-5575-5118

NaviCast Form Assisthttps://efo.showcase-tv.com/formassist/

NaviCast Form Converterhttp://www.showcase-tv.com/formconverter/

NaviCast シリーズ一覧http://www.showcase-tv.com/service/

→ NaviCast Form Assist サンプルフォームhttp://www.showcase-tv.com/formassist/sample_form/

http://www.showcase-tv.com/