Shopifyブログ
ECサイトに多くのユーザーを集めても、購入や会員登録の入力フォームが使いにくければ、手続きの途中で離脱される可能性があります。特にモバイル端末から利用する場合は、画面の見やすさや操作のしやすさといったUIデザインが、コンバージョン率だけでなく顧客満足度にも影響します。そのため、ユーザーが迷わず入力を完了できる環境を整えることが重要です。
本記事では、EFOの意味や重要性、改善の進め方を解説します。さらに、入力フォームの種類、使いやすいフォームの特徴や9つの国内事例も紹介していますので、ぜひ参考にしてください。
EFO（入力フォーム最適化）とは
EFO（入力フォーム最適化）とは、「Entry Form Optimization」の略で、ウェブサイトの入力フォームをユーザーが使いやすいように改善する取り組みです。ECサイトでは、会員登録や商品の購入、問い合わせなどに使用されるフォームを対象に、入力項目の数や配置、入力を補助する機能、エラーの表示方法、スマートフォンでの操作性などを見直します。
ECサイトでEFOが重要な理由
EFOが重要なのは、入力フォームの使いにくさによる離脱を抑え、売上機会の損失を防ぐためです。ECサイトでは、会員登録や商品購入時に、氏名や住所、決済情報などを入力してもらいます。項目が多すぎたり、エラーの修正方法が分かりにくかったりすると、購入意欲のあるユーザーでも手続きを断念する可能性があります。
カゴ落ちには送料や配送期間など複数の原因がありますが、入力フォームの長さや複雑さもそのひとつです。Baymard Institute（ベイマードインスティテュート）の調査（英語）では、米国のオンライン購入者の17%が、購入手続きが長すぎる、または複雑すぎることを理由に注文を断念したと回答しています。EFOによって入力の負担を減らせれば、購入完了率とコンバージョン率の改善を期待できます。広告やSEOで訪問者を増やすだけでなく、購入まで進みやすいフォームを整えることが重要です。
ECサイトで使われる入力フォームの種類
- 会員登録フォーム：新規会員の氏名やメールアドレス、電話番号などを収集します。
- ログインフォーム：登録済みのユーザーがアカウントへアクセスするため、メールアドレスやパスワードなどを入力します。
- 購入、決済フォーム：商品の配送や代金の支払いに必要な住所、配送方法、決済情報などを収集します。
- 返品、交換フォーム：注文番号や返品理由、返金方法、交換を希望する商品などを確認します。
- 問い合わせフォーム：問い合わせの内容や連絡先、希望する連絡方法などを収集します。
使いやすい入力フォームを構成する5つの要素
1. 入力内容と方法が明確である
各入力欄には、「氏名」「メールアドレス」など、求めている情報がひと目で分かる項目名を表示する必要があります。必須項目と任意項目も明確に区別し、電話番号や生年月日など入力形式が決まっている項目には、「09012345678」「1990/01/01」のような入力例を添えると親切です。
入力例を入力欄の中だけに表示すると、文字を入力した時点で見えなくなるため、項目名の代わりにはなりません。項目名は常に確認できる位置に残し、必要に応じて入力例を併用することで、ユーザーが入力内容を確認しやすくなります。
2. 少ない手間で入力できる
入力項目は、必要な情報だけに絞ることが重要です。たとえば、商品の配送に不要な情報まで購入時に求めると、ユーザーの入力負担が増えてしまいます。追加の顧客情報を収集したい場合は、購入後のアンケートを活用する方法も有効です。
住所やブラウザの自動入力に対応するほか、選択肢が限られる項目にはラジオボタンやプルダウンを使用すると、文字を入力する手間を減らせます。また、入力欄は原則として1列に並べ、関連する項目をまとめることで、ユーザーが上から順番に操作しやすくなります。
3. 完了までの流れを把握できる
入力を始める前に、必要な手順や所要時間の目安を示すと、ユーザーは手続きにかかる負担を判断できます。購入手続きが複数の画面に分かれている場合は、「お客様情報」「配送方法」「支払い」「確認」などのステップと現在位置を表示する方法が効果的です。
残りの手順が分からない状態では、ユーザーが「まだ入力が続くのではないか」と不安を感じる可能性があります。フォームの送信後に、注文受付メールが届く、担当者から連絡があるなど、次に行われることまで明記すれば、安心して手続きを完了しやすくなります。
4. 端末を問わず操作しやすい
パソコンだけでなく、スマートフォンやタブレットでも入力しやすい設計が必要です。入力欄やボタンには十分な大きさと間隔を確保することで、誤操作を防げます。文字と背景のコントラストや文字サイズにも配慮し、画面を拡大しなくても内容を読めるようにします。
スマートフォンでは、電話番号の欄に数字入力用のキーボード、メールアドレスの欄に英数字入力用のキーボードが表示されるよう設定すると便利です。また、前の画面に戻っても入力済みの内容が消えない仕組みも求められます。
5. 入力結果に応じて案内が表示される
入力内容に誤りがある場合は、該当する項目の近くにエラーメッセージを表示し、原因と修正方法を具体的に伝えることが大切です。「正しく入力してください」と表示するだけでなく、「電話番号はハイフンを入れず、半角数字のみを入力してください」のように案内すると、ユーザーが修正すべき内容を判断できます。
エラーは送信時にまとめて表示するだけでなく、各項目を入力した段階で知らせる方法も効果的です。正しく入力できた場合や送信が完了した場合にもメッセージを表示し、操作が正常に処理されたことを伝えます。
参考にしたい入力フォーム事例9選
- 土屋鞄製造所：修理相談フォーム
- KANADEMONO：チェックアウトフォーム
- BRAIN SLEEP：睡眠タイプ診断フォーム
- Kanro POCKeT：再入荷通知フォーム
- ちいかわマーケット：問い合わせフォーム
- ユニクロ：会員登録フォーム
- 無印良品：ログイン選択画面
- GU：返品申請フォーム
- 健康家族：商品診断フォーム
1. 土屋鞄製造所：修理相談フォーム
革製品を扱う土屋鞄製造所の修理相談ページでは、フォームの前に、よくある問い合わせやランドセルに関する問い合わせ先、電話窓口が案内されています。フォームでは、氏名や連絡先に加え、製品情報や修理を希望する箇所、内容を選択できます。
また相談内容欄には、注文番号、製品名、購入日、具体的な相談内容を、分かる範囲で記載するよう示されています。問い合わせ内容に応じた窓口を選び、修理相談に必要な情報を迷わず入力できる設計が参考になります。
2. KANADEMONO：チェックアウトフォーム
家具ブランドのKANADEMONO（カナデモノ）では、購入手続きにShop Pay（ショップペイ）を導入しています。決済情報や配送先を登録しているユーザーは、次回以降に情報を呼び出せるため、繰り返し入力する必要がありません。配送先住所の不備を減らす機能も採用しています。
情報の自動入力や住所確認により、入力の手間や記載ミスを減らせます。Checkout Extensibility（チェックアウトエクステンシビティ）の導入後、チェックアウト時のコンバージョン率は約1.3倍に向上しました。
3. BRAIN SLEEP：睡眠タイプ診断フォーム
睡眠関連商品を展開するBRAIN SLEEP（ブレインスリープ）の睡眠タイプ診断では、全8問への回答をもとに、睡眠の質、量、リズムから睡眠タイプが表示されます。画面には質問番号と進捗率が示され、前の設問に戻って回答を修正することも可能です。
また各設問には直感的にタップできる大きな選択肢ボタンが配置され、スマートフォンでもスムーズに操作できます。完了までの流れを把握でき、端末を問わず回答しやすい、途中離脱を防ぐ設計として参考になります。
4. Kanro POCKeT：再入荷通知フォーム
キャンディやグミなどを販売するKanro POCKeT（カンロポケット）では、在庫切れ商品の「SOLD OUT」表示のすぐ下に「再入荷通知を受け取る」ボタンが表示されます。メールアドレスを登録すると、対象の商品が再入荷した際に通知を受け取れます。
登録に必要な情報をメールアドレスに絞っているため、ユーザーは短時間で手続きを完了できます。商品が売り切れていることを確認した直後に登録できるよう、必要な場面でフォームに誘導するリンクを設けている点も参考になります。
5. ちいかわマーケット：問い合わせフォーム
キャラクターグッズを販売するちいかわマーケットの問い合わせページでは、フォームへ進む前に、注文の変更や配送先住所、発送時期などに関する「よくある質問」が表示されます。ユーザーがフォームへ入力する前に解決方法を確認できるため、問い合わせる必要があるかを判断しやすくなっています。また、一部の手続きはチャットボットから行えるようにすることで、フォームへの入力や回答を待つ手間を減らし、ユーザーの負担を軽減している点も参考になります。
6. ユニクロ：会員登録フォーム
衣料品ブランドを展開するユニクロの会員登録フォームでは、メールアドレスやパスワードなど、登録に必要な情報を入力します。パスワード欄には「8文字以上20文字以内」などと条件が明記されており、ユーザーが入力前にルールを確認できる設計です。
入力条件をあらかじめ示しておけば、送信後にエラーが発生し、入力し直す事態を防げます。パスワードや電話番号など、入力形式にルールがある項目を設ける際に取り入れたい工夫です。
7. 無印良品：ログイン選択画面
衣服や生活雑貨、食品などを取り扱う無印良品のログイン選択画面では、イベント関連の手続きを進める際に、「ログインして進む」「ログインせずに進む」「新規会員登録をして進む」の3つから方法を選べます。
会員登録を必須にせず、利用者の状況に応じた選択肢を最初に提示している点が特徴です。既存会員と新規利用者、会員登録を希望しない利用者に、それぞれ異なる入り口を用意する設計として応用できます。
8. GU：返品申請フォーム
衣料品やファッション雑貨を取り扱うGU（ジーユー）の返品申請フォームは、購入履歴から返品を申請できない場合や、交換した商品を返品する場合に利用します。氏名や連絡先に加え、注文番号、商品番号、商品名、カラー、サイズ、数量、返品理由などを入力する形式です。
各項目には入力例があり、返品、再注文する商品を追加することもできます。手続きに必要な商品情報を漏れなく収集しながら、複数商品の申請にも対応できる構成になっています。
9. 健康家族：商品診断フォーム
健康食品を販売する健康家族の商品診断フォームは、5つの質問に答えると、悩みに合った商品が案内される仕組みです。開始前に「全5問」「所要時間1分」「無料」と表示され、利用に必要な時間や条件を把握できます。
質問数や所要時間を事前に伝えることで、ユーザーは診断を始めるか判断しやすくなります。短時間で完了する診断を通じて、ユーザーと商品の接点を作っている点が特徴的です。
EFOの進め方
- 目的と指標を決める：購入や会員登録、問い合わせなど、フォームを設置する目的を明確にします。次に、改善の成果を確認するため、購入完了率や会員登録数、問い合わせ送信数など、継続して計測する指標を決めます。
- 利用状況を確認する：入力開始数、画面ごとの離脱数、項目別のエラー発生数などを調べ、ユーザーが操作を中断している箇所を特定します。パソコンとスマートフォンで結果に差がある場合は、端末別に原因を分析します。
- 課題に応じた施策を実施する：不要な項目やリンクの削除、分割された入力欄の統合、住所の自動入力、案内文やエラーメッセージの見直しなど、特定した課題に対応する施策を選びます。
- 改善前後の結果を比較する：施策を行う前と後で、最初に決めた指標がどのように変化したかを比較します。一定の利用数がある場合は、変更前と変更後のフォームを同じ時期に表示して結果を比べるA/Bテストも有効です。
- 改善を繰り返す：検証結果をもとに次の施策を決め、再び効果を確認します。一度に多くの要素を変更せず、優先度の高い課題から一つずつ検証すると、結果に影響した変更を判断しやすくなります。
まとめ
ECサイトの入力フォームは、商品の購入や会員登録、問い合わせにつながる重要な接点です。項目が多い、操作方法が分かりにくい、エラーを修正しにくいといった問題があると、購入意欲のあるユーザーでも途中で離脱する可能性があります。
EFOでは、入力欄やボタンの配置だけでなく、ユーザーが迷わず手続きを完了できるかという視点も重要です。UIとUXの違いを理解し、入力項目や案内、エラー表示、スマートフォンでの操作性を見直す必要があります。
利用状況をもとに継続的な改善を重ね、ユーザーが安心して手続きを完了できるフォームを整えることが、コンバージョン率の改善につながります。
EFOに関するよくある質問
EFOとは？
「Entry Form Optimization（入力フォーム最適化）」の略で、ウェブサイトの入力フォームをユーザーが使いやすいように改善する取り組みです。
EFOとUI改善の違いは？
UI改善は、画面の見やすさや操作性を高める取り組みです。UI改善もEFOの一部であり、EFOでは入力項目や入力支援、エラー表示などを含め、フォーム全体を見直します。
EFOで改善すべき主な項目は？
- 入力項目の数や配置
- 入力例や案内文
- エラーメッセージ
- 自動入力などの補助機能
- モバイルでの操作性
EFOの進め方は？
- 目的と指標を決める
- 利用状況を確認する
- 課題に応じた施策を実施する
- 改善前後の結果を比較する
- 改善を繰り返す
