スマートフォンでの購入率がパソコンより低い場合、原因はデザインの見た目ではなく、入力と確認の手間にあることがほとんどです。
画面が狭いため一度に見える情報が少なく、比較や確認のたびに移動が発生します。また文字の入力が負担になるため、項目が多いほど離脱します。この2つが購入までの各段階で効いてきます。
この記事では、探す、選ぶ、買うという段階ごとに起きる離脱、優先して直すべき箇所、そして確認の方法を整理します。
この記事でわかること
・原因は見た目より入力と確認の手間
・探す段階では絞り込みの操作性が効く
・選ぶ段階では情報の並び順が効く
・買う段階では入力の手間が最大の要因
・段階ごとに離脱率を分けて見る
・確認は実機で、実際に購入して行う
探す段階で起きる離脱
商品にたどり着けなければ、その先の設計は意味を持ちません。
| 問題 | 起きること | 対応 |
|---|---|---|
| 絞り込みが使いにくい | 条件を変えるたびに読み込む | 選択後にまとめて反映する |
| 検索の入力欄が探しにくい | そもそも使われない | 上部の固定位置に置く |
| 並び替えが分かりにくい | 希望の順に見られない | 選択肢を絞って明示する |
| 一覧の情報が足りない | 1件ずつ開いて戻る | 価格と主要な情報を一覧に出す |
| カテゴリが深い | たどり着く前に離脱 | 階層を浅くする |
一覧と詳細を往復させる構成が、最も負担になります。一覧の段階で判断に必要な情報を出せば、往復が減ります。
階層の設計は情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。
一覧と詳細の往復が最も負担になる。
一覧の段階で判断できる情報を出す。
選ぶ段階で起きる離脱
商品ページでは、判断に必要な情報がどの順で出てくるかが効きます。
- 商品の画像（何を買うのかが分かる）
- 商品名と価格（判断の中心）
- 在庫と配送の目安（いつ届くか）
- 選択肢（サイズ、色など）
- 購入ボタン
- 詳細な説明、仕様
- レビュー
詳しい説明を上に置くと、価格と購入ボタンまで到達しません。判断に必要な最小限を上に置き、詳細はその下に配置してください。
レビューの扱いは「お客様の声」の効果的な掲載方法｜信頼につながる集め方と見せ方を参照してください。
判断に必要な最小限を上に、詳細は下に置く。
説明を上に置くと、価格とボタンまで到達しない。
買う段階の入力が最大の要因
カートに入れた後の離脱は、ほとんどが入力の負担によるものです。
| 負担 | 対応 | 効果 |
|---|---|---|
| 会員登録が必須 | 登録せずに購入できるようにする | 大きい |
| 入力項目が多い | 必須項目を減らす | 大きい |
| 郵便番号から住所を入れない | 自動で補完する | 大きい |
| 入力形式が厳しい | どの形式でも受け付ける | 中程度 |
| 支払い方法が少ない | 選択肢を増やす | 中程度 |
| エラーで入力が消える | 内容を保持する | 大きい |
会員登録の必須化は、最も離脱を生む設計です。登録せずに購入できるようにし、購入後に登録を案内する順序が現実的です。
フォーム全体の設計は入力フォームの離脱率を改善するデザインの工夫｜商談化まで見た設計、カート離脱の分析はカート離脱を防ぐデザインの工夫｜どの段階で、何を理由に離れているかを参照してください。
会員登録の必須化が、最も離脱を生む。
エラーで入力内容が消える設計も、離脱に直結する。
送料と総額を早い段階で示す
購入直前で離脱する原因として、想定外の費用が最も多くなります。
- 送料を、商品ページの段階で示す
- 無料になる条件があるなら、その金額を明示する
- 手数料が発生する支払い方法を、選択時に示す
- 総額を、確認画面より前に分かるようにする
最後の確認画面で総額が想定より高いと、そこで離脱します。早い段階で示すほうが、結果的な購入率は上がります。隠しても、確認画面で分かるだけです。
送料と総額は、早い段階で示すほうが購入率が上がる。
隠しても、確認画面で分かるだけになる。
段階ごとに離脱率を分けて見る
全体の購入率だけを見ると、どこに問題があるか分かりません。
| 段階 | 見る指標 | 低い場合の原因 |
|---|---|---|
| 訪問から商品閲覧 | 商品ページ到達率 | 探しにくい |
| 商品閲覧からカート | カート投入率 | 情報不足、価格 |
| カートから購入手続き | 手続き開始率 | 送料、総額 |
| 手続きから完了 | 完了率 | 入力の負担 |
最も改善効果が大きいのは、数値が低く、かつ後段の段階です。後段ほど購入意思が強い人が残っているためです。手続きの完了率が低い場合、優先的に着手してください。
段階ごとに分けないと、どこが問題か分からない。
後段ほど購入意思が強いため、改善効果が大きい。
表示速度が購入率に影響する
商品画像が多いため、ECサイトは表示が重くなりやすい構造です。
| 箇所 | 起きること | 対応 |
|---|---|---|
| 一覧ページ | 画像が多く読み込みが遅い | 表示範囲に応じて読み込む |
| 商品ページ | 大きな画像で待たされる | 適切な大きさに変換する |
| カート | 処理に時間がかかる | 進行中であることを示す |
| 購入完了 | 反応がない | 完了を明確に伝える |
移動しながら見る人は、待ち時間に敏感です。改善の順序はサイトの表示速度を改善する優先順位｜何から手をつけるかを参照してください。
ECは画像が多く、表示が重くなりやすい。
移動中に見る人は、待ち時間に敏感になる。
確認は実機で実際に購入して行う
画面を見るだけでは、実際の負担は分かりません。
- 実機で、実際に商品を探す
- カートに入れ、購入手続きを最後まで進める
- わざと入力を間違え、エラー時の挙動を確認する
- 住所の自動補完が機能するか確認する
- 複数の支払い方法を試す
- 完了メールの内容を確認する
特にエラー時の挙動は、実際に試さないと分かりません。入力内容が消える、どこが誤りか分からないといった問題は、正常な操作では発見できません。
実機で最後まで購入し、エラー時の挙動も確認する。
正常な操作だけでは、離脱の原因は見つからない。
よくある失敗
見た目の改善から着手する
原因は入力と確認の手間にあることがほとんどです。段階ごとの離脱率を先に確認してください。
会員登録を必須にする
最も離脱を生む設計です。登録せずに購入できるようにしてください。
送料を確認画面まで示さない
そこで離脱します。早い段階で示すほうが購入率は上がります。
商品ページで説明を上に置く
価格と購入ボタンまで到達しません。判断に必要な最小限を上に置いてください。
正常な操作だけで確認する
エラー時の挙動が問題であることが多くなります。わざと間違えて確認してください。
よくある質問
パソコンとスマートフォンで同じ構成にすべきですか
情報は同じでも、順序と見せ方は変えてください。画面が狭いと一度に見える量が少ないため、パソコンで横に並ぶ情報が縦に長く続きます。優先度の低い情報は折りたたむなどの調整が必要です。
画像は何枚くらい必要ですか
判断に必要な角度と状態が揃っていることが基準です。枚数より、使用イメージやサイズ感が分かるかを確認してください。ただし読み込みの負荷も考慮が必要です。
レビューは上に置くべきですか
商材によります。判断でレビューを重視する商材では、要約を上部に出す方法があります。ただし詳細を上に置くと、価格と購入ボタンまで到達しにくくなります。
アプリを作るべきですか
繰り返し購入される商材では有効な場合があります。ただし開発と維持の費用がかかり、導入してもらう手間もあります。まずWebでの購入体験を整えるほうが、投資対効果が読みやすくなります。
デザインの費用はどのくらいかかりますか
規模と機能によって大きく変わります。既製の仕組みを使うか、独自に作るかでも変わります。判断の考え方はネットショップのデザイン費用はどう決まるか｜構築方法別の違いと判断を参照してください。
まとめ
スマートフォンでの購入率がパソコンより低い場合、原因はデザインの見た目ではなく入力と確認の手間にあることがほとんどです。画面が狭いため一度に見える情報が少なく、比較や確認のたびに移動が発生します。また文字の入力が負担になるため、項目が多いほど離脱します。
改善に着手する前に、段階ごとの離脱率を分けて確認してください。商品ページへの到達、カートへの投入、購入手続きの開始、完了という4段階に分けると、どこに問題があるかが特定できます。最も改善効果が大きいのは、数値が低くかつ後段の段階です。後段ほど購入意思が強い人が残っているためです。
個別の対策として効果が大きいのは、会員登録を必須にしないこと、送料と総額を早い段階で示すこと、そしてエラー時に入力内容を保持することです。特に会員登録の必須化は最も離脱を生む設計であり、購入後に登録を案内する順序のほうが結果的な購入数は増えます。確認は実機で最後まで購入し、わざと入力を間違えてエラー時の挙動まで試してください。正常な操作だけでは離脱の原因は見つかりません。
当社ではホームページ制作において、購入導線の設計と改善をご相談いただけます。デザイン面はデザイン制作とあわせてご検討ください。
