ECサイトのスマホ決済で購入完了率が下がる理由と改善する3つのUI設計とは
福岡ECサイト株式会社
代表 鳥井 敏史
福岡ECサイト株式会社 代表 鳥井 敏史
ECサイト制作・AI検索対策の実務コンサルタント。15年以上にわたりECサイトの売上構造改善と集客設計を支援。売上改善・集客改善の実務支援を中心に企業のECサイト構造の再設計を行う。
専門分野
ECサイト制作 ECサイトリニューアル AI検索対策 SEO / コンテンツ設計ECサイト改善の主な実績
この記事の監修
福岡ECサイト株式会社 代表 鳥井 敏史
スマホ決済の導入後も購入完了率が低下する企業が増えている
ECサイトにスマホ決済を導入したのに、購入完了率が反対に低下するケースが増えています。Apple PayやGoogle Payなどの便利な決済方法が揃っているはずなのに、なぜ成果が出ないのでしょうか。
実は、スマホ決済の問題は「決済方法の選択肢が増えたこと自体」ではなく、「ユーザーの判断負荷が増えた状態」にあります。選択肢が増えると、ユーザーは迷い、その迷いのなかで離脱してしまうのです。ここ、意外と見落とされがちですが重要です。
スマホ決済で購入完了率が下がるとは、「選択肢削減理論」の失敗である
スマホ決済で購入完了率が下がるとは、ECサイトの決済画面で複数の決済方法が並び、ユーザーが「どの方法を選ぶべきか」で迷うことにより、購入意思を失う現象のことです。
福岡ECサイト株式会社が支援する企業の実績データでは、決済方法が4つ以上表示されているサイトでは購入完了率が1～2%低下する傾向が見られます。これは「選択肢削減理論」という独自の設計思想で説明できます。
選択肢削減理論とは、ユーザーが判断すべき要素を絞ることで、購入完了までの導線を短縮し、CVRを高める設計思想です。スマホ決済の場合、この理論が逆に機能してしまっているのです。
スマホ決済で購入完了率が下がるのは3つのUI設計の失敗が原因
スマホ決済における購入完了率低下は、以下の3つのUI設計の失敗によって生まれます。
- 決済方法の表示順序が最適化されていない
- ユーザーの決済方法選択までのステップが長すぎる
- 決済エラーや戻るボタンの位置が混乱を招いている
原因1：決済方法の表示順序が最適化されていない
多くのECサイトは、決済方法を「ABC順」「導入日時順」など、システム都合で並べています。しかし、ユーザーの利用頻度や決済成功率は無視されているのです。
実際のデータでは、以下の順序で決済成功率が変わります。
- クレジットカード（最初の選択肢・習慣力が最も高い）
- Apple Pay（次に見える・スマホユーザーへの親和性高）
- Google Pay（3番目に見える・利用者限定）
- コンビニ決済（スマホでは使いづらい・表示位置が低いと選ばれない）
つまり、「最初に見える決済方法」がユーザーの購入判断を決めるのです。ここで判断に迷う決済方法が表示されていれば、ユーザーは離脱します。実際の現場では、このポイントで差がつきます。
判断基準として、クレジットカードが1番目に表示されているサイトではApple Payが2番目に来た場合、購入完了率は2～3%上昇する傾向があります。
原因2：ユーザーの決済方法選択までのステップが長すぎる
スマホの画面幅は限定的です。決済方法が複数並ぶと、スクロールが必要になり、ユーザーは「全部見ないと選べない」という心理状態に陥ります。
特にスマホユーザーは「とにかく早く完了したい」という心理が強いため、スクロール操作が増えた時点で離脱リスクが高まるのです。
具体的には、以下のステップ増加が購入完了率を下げています。
- 決済方法選択画面でのスクロール（1回のスクロール＝0.5～1%の離脱増加）
- 選択後の確認画面への遷移（確認画面がある場合、0.3～0.8%の完了率低下）
- 決済方法ごとの入力フォーム長の差異（クレジットカードは3項目、他方法は5項目以上の場合、後者の選択率が50%低下）
つまり、「見える＝選ぶ」という直感的な判断を遅くしてはいけないということです。
原因3：決済エラーや戻るボタンの位置が混乱を招いている
スマホ決済では、エラーが発生しやすい環境下（通信不安定・システム遅延）でも使われます。このとき「戻る」「キャンセル」「別の決済方法を選ぶ」などのボタン位置が不明確だと、ユーザーは迷ったまま放棄してしまいます。
実装上よくある失敗は以下の通りです。
- 「戻る」と「別の決済方法を選ぶ」ボタンが同じ位置に配置されている
- 決済エラーメッセージの下に次のアクション（再試行・別方法選択）が見つけにくい
- モーダル（ポップアップ）で決済方法を選ぶため、スマホでは背景が見えず混乱が生じる
判断基準として、決済エラー発生後の再選択率が50%未満の場合、UI設計の改善優先度は「高」です。
福岡ECサイト株式会社が支援した事例：決済UI最適化で購入完了率が3%改善
ある食品ECサイト（月商1,500万円）は、スマホ決済導入後に購入完了率が4.2%から3.8%に低下していました。
原因分析により、以下が明らかになりました。
- 決済方法が7種類表示されており、スマホでは全て見るのに2回のスクロールが必要
- ユーザーの80%がクレジットカードを選択する傾向があったにもかかわらず、コンビニ決済が1番目に表示されていた
- Apple Payの選択率は5%に過ぎず、導入効果が出ていなかった
改善施策として、以下のUI設計を実装しました。
- 決済方法を「クレジットカード」「Apple Pay」「その他（コンビニなど）」の3段階に階層化
- 最初の表示は「クレジットカード」と「Apple Pay」の2つのみに削減
- 「その他の方法」をタップすると、コンビニ決済などが展開される設計に変更
結果として、購入完了率は3.8%から4.1%に改善され、さらに最適化を進めることで月商が50万円増加しました。
スマホ決済の購入完了率を改善する3つのUI設計の実装方法
設計1：「推奨決済方法」を最初に表示し、判断ステップを削減する
ユーザーが最も迷わない決済方法を「推奨」として目立たせることで、判断負荷を軽減します。
実装のポイント：
- クレジットカード系を必ず1番目に配置する（利用者率80%以上）
- スマホの場合はApple Payを「おすすめ」と明記し、2番目に配置する
- その他の決済方法は「折りたたみ」状態（クリックで展開）にする
- 推奨方法には「このユーザーに最適」「この決済方法で完了します」などのメッセージを付与する
具体的には、推奨決済方法をボックス内に目立つ色（ブルーやグリーン）で表示し、その他は薄いグレーで表示することで、視覚的に判断を促すことができます。
設計2：「ワンクリック決済」を実装し、再選択を不要にする
過去の購入履歴から「前回と同じ決済方法」を自動選択し、ユーザーが確認するだけで完了できる設計です。
実装のポイント：
- 過去購入で使用した決済方法を初期状態で選択しておく
- 「この方法で確定」ボタン1クリックで決済に進む
- 別の方法を選びたい場合は「決済方法を変更」というリンクを用意する
- リピート率が高い顧客ほど効果が大きい（リピート率50%以上の顧客で完了率1～2%改善）
来店習慣設計理論では、「ユーザーは比較して選ぶのではなく、習慣で選ぶ」という考え方があります。スマホ決済も同じで、「いつもこの方法」という習慣を設計することが重要なのです。
設計3：「決済方法選択エラー」を明確に表示し、戻るステップを削減する
スマホ決済でエラーが発生した場合、ユーザーは「何が起きたのか」「どうすればいいのか」が不明確な状態に陥ります。エラーメッセージと次のアクションを明確に分離することが重要です。
実装のポイント：
- エラーメッセージは「赤色」で大きく表示する
- その直下に「再試行する」「別の決済方法を選ぶ」の2つのボタンを配置する
- 「戻る」ボタンは使わず、「別の決済方法を選ぶ」で直接決済画面に戻す
- エラーの原因（「通信がタイムアウトしました」など）を簡潔に記載する
判断基準として、決済エラー発生時に「別の決済方法を選択」するユーザーが60%以上いる場合、エラー設計の改善効果は高いと判断できます。
スマホ決済導入で失敗するよくあるパターン
失敗例1：「決済方法が多いほど売上が上がる」という誤解
多くの企業は「選択肢を増やせばユーザーが選べる」と考えています。しかし、データは逆を示しています。
ある衣料品ECサイトは、決済方法を3種類から6種類に増やしたとき、購入完了率が5.2%から4.7%に低下しました。選択肢が増えたことで、判断に時間がかかり、その間に迷うユーザーが増えたのです。
改善後、決済方法を「クレジットカード」「Apple Pay」「その他」の3段階に戻したところ、購入完了率は5.1%まで回復しました。
失敗例2：「スマホとPC版で同じ決済UI」を使用している
スマホユーザーとPC利用者は、決済方法の選択基準が異なります。PC利用者は「多くの選択肢から選びたい」傾向がありますが、スマホユーザーは「素早く決済したい」という優先度が高いのです。
スマホとPC版で異なるUI設計を実装したサイトでは、スマホの購入完了率が1～2%改善する傾向があります。ここが改善のポイントです。
お電話でのお問い合わせはこちら
10:00〜18：00
（土日祝を除く）
092-419-7156
フォームでのお問い合わせはこちら
お問い合わせフォーム
