初めまして。システム担当の絹谷です。
今回はECサイトのフォームについてお話します。私が一番最初にECサイトを利用したのは中学二年生の時で購入したものはホエイのプロテインでした。パッケージに写った人物の筋肉映えするフォームはすごく印象に残っています。そんなことはさておき本題に入りましょう。
近年ECサイトは増える一方で、「フォーム項目に名前、住所などの基本情報を入力する機会」は減ったように感じます。というのも会員制のECサイトが主流になっていて多数のフォーム項目に情報を入力するのは会員登録時のみだからです。中にはamazonアカウント情報を簡単に取得できる「Amazon Pay」というサービスや、yahooの「Yahoo!かんたん決済」というサービスを導入しているサイトがあったりでフォームでの基本情報入力を省略する動きがみられます。
フォーム項目は多ければ多いほど、新規の顧客を逃す確率が増えるといっても過言ではないでしょう。
例えばスポーツジムに通おうと思い立ち会員登録することになった場面を想像してみてください。バキバキマッチョによるハードな診断を受けて迎え入れられるか、ソフトマッチョによるソフトな診断を受けて迎え入れられるかであなたが入会するかどうかや、先行きの不安度が変わってくるかと思います。
そこで今回はフォーム入力のバーベルを極力下げるという観点でフォームのベストプラクティスについて考えていきましょう。
フォームのベストプラクティス
フォームはECサイトで商品を購入するうえで必ず通らないといけない重要なページになります。
そのフォームをベストな状態にすることによってCVR向上が期待できます。
フォーム項目数について
①入力項目は極限まで削る。
後日ヒアリングで問題ない項目は削除しましょう。
また、Amazonではカート内の商品を購入する際、登録された会員情報を各input要素にデフォルトで表示させるのではなく、テキストとして表示させることによって簡潔に表現しています。
②入力ボックスは分割しない
キーボードとマウスの往復回数を減らしましょう。「Tabキーで次の項目に進めるよ！」風のナビがあってもいいかもしれません。
③半角・全角入力を自動変換
jsでプログラムを組んで自動変換するようにしましょう。
④入力ボックスには記入例
inputタグにplaceholder属性を設定しましょう。余談ですがyahooに関してはフォームの項目名が無く、プレスホルダーで項目名を表現しています。
⑤必須項目には必須マークを表示させる
必須項目には必須マーク、任意項目には任意マークをつけましょう。
⑥入力エラーはリアルタイムに表示する
jsでプログラムを組んで入力完了時はエラーなのかOKなのかをリアルタイムで表示しましょう。
⑦住所は郵便番号入力時に自動入力されるように設定
jsでプログラムを組んで住所入力の負担を軽減しましょう。ajaxzip3というjQueryプロテインプラグインが役立ちます。
フォーム内テキストについて
①フォーム内にはなるべくリンクを設置しない。
離脱率を抑えるためにフォーム内にリンクの設置は控えましょう。必要なリンクに関してはtarget=”_blank”を設定して別タブで開くようにしましょう。
②フォーム内のキャッチコピー
最後のもう一押しキャッチコピーを挿入しましょう。
フォームデザインについて
①現在位置がわかるナビゲーション（STEP数）をつける
楽天の会員登録フォームはSTEP数が分かりやすく表示されています。これでいつ登録が完了するか分からないという不安が解消されますね。
中には項目が入力されるたびにフォーム進行率を％で表現し達成感を満たすサイトなんかもありました。
②幅を狭くしてコンパクトに魅せる
Amazon、yahoo、ZOZOTOWNなどの新規会員登録フォームを観ていただくと分かるのですが、とにかく幅が狭いです。全体を見渡せるほどのミニマム感がいいですね。
まとめ
フォームはECサイトにとって重要なセクションになるので、
いかに入力項目を減らし簡潔にするか(ソフトマッチョ)と、いかに入力項目を増やし完結させるか(バキバキマッチョ)という両方のバランスを考え、目的に沿ったフォームを構築していきましょう。