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