ECサイトのスマホ導線を、奥へ進むほど細くなる青いパネルの連なりで表したアイキャッチ画像

ECサイトのスマホ導線|商品一覧・詳細・カートの離脱を直す順番

スマホからの訪問は増えている。注文数は、先月とほぼ同じ。

増えた分の人は、買わずにどこかで引き返しています。

止まっている場所は、サイト全体ではありません。商品一覧、商品詳細、カート。このうちのどこか1か所です。

買われない理由を探すとき、最初にやることは改善ではなく、区切って数えることです。スマホで商品が売れるまでの動きは、一覧を眺める、商品を開く、カートに入れる、購入手続きへ進む、という短い区間の連なりでできています。どの区間で人数が減っているかが分かれば、直す場所は1つか2つに絞れるでしょう。区間を分けないまま「スマホ対応を見直そう」と動き出すと、何が効いて何が効かなかったのかが分からないまま、工数だけが積み上がっていきます。

この記事で渡すのは4つです。GA4で区間ごとの人数を数える手順、区間別に起きやすい原因、運営者自身が今日1時間でできる自己診断、そして直す順番の決め方。公式ドキュメントで確認できた数値と、運用側で決める線引きは分けて書いています。売上の伸び幅を約束する記事ではありません。

Table of Contents

ECサイトのスマホ導線とは|一覧・詳細・カートの3区間に分ける

ECサイトのスマホ導線とは、スマートフォンで商品一覧から商品詳細、カート、購入手続きへと進む一連の移動のことです。この移動を区間に割って人数を数えることが、改善の出発点になります。

「導線を改善したい」という言葉のままでは、明日やることが決まりません。指している範囲が広すぎるからです。まず、3つの区間に割ります。

  • 区間1: 商品一覧から、商品詳細を開くまで
  • 区間2: 商品詳細から、カートに入れるまで
  • 区間3: カートから、購入手続きへ進むまで

この3つは、落ちる理由がまったく違います。区間1は「選べない」、区間2は「決めきれない」、区間3は「面倒か、不安」。原因の型が違えば、打ち手も変わります。

サイト全体を直そうとすると、原因が薄まる

よくあるのは、スマホ対応の見直しを一式でまとめて発注する進め方です。デザインを新しくし、写真を差し替え、ボタンの色を変える。作業量は多いのに、終わったあとで「どれが効いたのか」を誰も説明できません。

同時に10か所変えると、検証の手がかりが消えます。3つの区間のうち2つは元から問題がなかったかもしれないのに、そこにも工数を払っている。改善が続かなくなる原因の半分は、この「効いたかどうかが分からない」にあるでしょう。

同じページでも、スマホ側の結果だけが悪いことがある

パソコンで確認して問題がなかったから大丈夫、とは言えません。Googleは、スマートフォン用のクローラーで取得したモバイル版の内容をインデックスとランキングに使っています(Mobile site and mobile-first indexing best practices)。検索エンジンから見た自社サイトは、スマホ版のほうです。

表示速度の判定も同じで、Search ConsoleのCore Web Vitals レポートはモバイルとパソコンを別々に評価します。同じURLでも、パソコンは「良好」でモバイルだけ「低速」という状態が起こり得ます。確認は、必ずスマホ側で。

一覧にたどり着く前で止まっている場合

そもそも商品一覧を見ている人数が少ない場合は、この記事の範囲の外になります。どのカテゴリをどう切るか、入口をどう設計するかは、別の判断です。ここから先は、一覧までは人が来ている前提で進めます。

どこで落ちているかを数える|GA4のファネルと経路で区間を切る

ファネルデータ探索とは、購入までのステップを順に並べ、各ステップで何人が進み、何人が離れたかを確認できるGA4の機能です。区間ごとの人数は、ここで数えます。

感覚で当てにいくと、たいてい外します。見た目が気になる場所と、実際に人が減っている場所は、別だからです。

区間を区切る6つのイベント

GA4のeコマース計測では、一覧の表示から購入までが推奨イベントとして決められています。Measure ecommerceに載っている名前で並べると、こうなります。

  • view_item_list: 商品一覧が表示された
  • select_item: 一覧の中から商品が選ばれた
  • view_item: 商品詳細が表示された
  • add_to_cart: カートに入れられた
  • begin_checkout: 購入手続きが始まった
  • purchase: 購入が完了した

ファネルデータ探索で、この順にステップを置きます。view_item_listからview_itemまでが区間1、view_itemからadd_to_cartまでが区間2、add_to_cartからbegin_checkoutまでが区間3です。begin_checkoutからpurchaseまでは、入力と決済の区間になります。区間3を直したあとに見る数字として、同じファネルの最後に置いておきます。

デバイスカテゴリを「mobile」で絞るのを忘れないでください。パソコンの数字が混ざると、スマホ側の落ち込みが平均に薄められます。

オープンとクローズドで、同じ期間でも数字が変わる

ファネルには2つの型があります。GA4 ファネルデータ探索の説明では、オープンファネルは途中のステップから入ったユーザーもすべて数え、クローズドファネルは最初のステップを通っていないユーザーを無視します。そのステップを通ったと判定されるのは、指定した順序どおりに進んだ場合だけ。同じ期間内に複数回完了した人も、最初の一連だけが記録されます。

これ、ECではかなり効きます。検索や広告から商品詳細へ直接入ってくる人が多い店だと、クローズドで作った瞬間に「一覧を経由していない購入者」が丸ごと数から消えるからです。

  • 一覧の作りを評価したい: クローズド。一覧から入った人だけを追う
  • 購入全体の実態を把握したい: オープン。直接入ってきた人も数に入れる

どちらが正しいという話ではなく、見たいものが違うだけです。両方作って差を見るのが、いちばん早いかもしれません。

落ちた人が、どこへ行ったかを遡る

ECサイトのスマホ導線をGA4の6イベントで区切り、区間1から区間3までの範囲と区間ごとの代表的な離脱原因を対応させた図解
6つのイベントで導線を区切ると、落ちている場所が区間1・2・3のどれかに絞り込める。区間が決まれば、疑う原因も2つまで絞れる。

減った人数が分かっても、理由はまだ分かりません。そこで使うのが経路データ探索です。GA4 経路データ探索には、終点を指定して、そこに至るまでの経路を遡って探索する使い方が書かれています。購入イベントを終点にすれば、買った人が通ってきた道が見えます。

逆に、商品詳細を始点にして次のステップを開くと、カートに入れずにどこへ移動したかが並びます。一覧へ戻っているのか、別の商品詳細を開いているのか、サイト内検索へ行っているのか。同じ離脱でも、戻って探し直しているなら、それは選択肢の見せ方の問題です。

計測が入っていない場合

推奨イベントが実装されていないECも、まだ多く残っています。その場合、上の並びはそのままでは作れません。

暫定の代替として、ページのパスで区間を切る方法があります。一覧ページのURLパターン、商品詳細のURLパターン、カートと購入手続きのURLパターンを指定して、ページ単位でファネルを組む。精度は落ちますが、どの区間が細っているかの見当はつきます。

ただ、順番としては計測の実装が先です。区間の人数が取れないまま改善を重ねるのは、目をつぶって的を撃つのに近い。ここを飛ばすと、このあとの工程が全部あいまいになります。

区間1|一覧から商品詳細へ進まない

商品一覧での離脱とは、一覧は表示されたのに、どの商品も開かれないまま終わる状態のことです。原因の多くは「気に入らない」ではなく「選べない」にあります。

一覧は、商品を並べる場所ではなく、選ばせる場所です。ここが通らないと、どれだけ商品ページを作り込んでも読まれません。

スマホの1画面に、商品が何件入っているかを数える

自分のスマホで自社の商品一覧を開き、スクロールせずに見えている商品の数を数えてください。2件なのか、4件なのか、6件なのか。この数字が、買う人に与えている視野の広さです。

パソコンの一覧は、1画面に12件や20件が並びます。同じ情報量をスマホで見ようとすると、縦に何度もスクロールすることになる。見比べて選ぶという行為そのものが、スマホでは成立しにくくなっています。

だから一覧では、件数を詰め込むより、1件ごとの判断材料をそろえるほうが効きます。写真、商品名、価格に加えて、在庫の有無、送料の条件、レビューの数。そのうちどれが無いと決められないかは、扱う商品によって変わるでしょう。

初期の並び順が、実質のおすすめになっている

並び替えの初期値を意識して決めているECは、意外と少ないです。新着順のまま、あるいは商品登録が古い順のまま、という店もあります。

上から3件が、その一覧の看板です。スマホでは特に、最初の1画面で見えたものが判断の材料になりやすい。売りたい商品でも在庫が潤沢な商品でもない順番が初期値になっているなら、そこを変えるだけで区間1の数字が動く可能性があります。

変えたら、変えた日を記録してください。あとで効果を確かめるとき、この日付が効いてきます。

一覧で落ちているときに、デザイン刷新から始めない

区間1の数字が悪いと分かったとき、最初に出てくる案は、たいてい見た目の刷新です。順番としては、そこは最後でいいでしょう。

先に試せることが、いくつも残っています。並び順の初期値、1件あたりに出す情報、絞り込みの入口の位置、カテゴリ名に使っている言葉。どれも数日で試せて、元に戻せます。

戻せる変更から始める。改善を続けるための、いちばん現実的な作法です。

区間2|商品詳細からカートに入らない

商品詳細での離脱とは、商品ページは開かれたのに、カートに入れられないまま離れていく状態を指します。この区間は、最初の1画面に何を入れるかでほぼ決まります。

スクロールせずに見えている要素を書き出す

スマホの商品詳細ページで、写真だけが表示される画面と、商品名・価格・在庫と配送目安・カートボタンまで収まる画面を並べた比較図
指を動かさずに見えている範囲に、価格と届く時期とカートボタンが入っているか。商品詳細からカートに進まないときは、まずここを見比べる。

自社の商品ページをスマホで開いて、指を動かさずに見えているものを書き出してください。写真しか見えていないケースが、かなりあります。

最初の1画面に入れたいのは、次の5つです。

  • 商品写真(1枚目で全体が分かるもの)
  • 商品名
  • 価格(税込か税別かも含めて)
  • 在庫と、届く時期の目安
  • カートに入れるボタン

全部を押し込む必要はありません。ただ、価格が見えないまま長い写真が続く構成は、判断を先送りさせます。買う人が最初に確かめたいのは、たいてい「いくらか」と「いつ届くか」です。

畳んでいい情報と、畳むと読まれなくなる情報

スマホの1画面は狭いので、詳しい説明はアコーディオンやタブに畳むことになります。この判断自体は問題ありません。Googleも、内容をパソコン版と同等に保ったうえで、省スペースのためにアコーディオンやタブへ移すことを認めています(Mobile site and mobile-first indexing best practices)。

気をつけるのは実装のほうです。同じドキュメントには、ユーザーの操作をきっかけに読み込むコンテンツをGoogleは読み込まない、と明記されています。スワイプ、クリック、入力を必要とする読み込みが対象です。最初からHTMLに含まれていて表示だけを折りたたむ作りなら問題なく、タップされてから内容を取りにいく作りだと、その部分は検索エンジンにとって存在しないのと同じ扱いになります。

見た目は同じでも、中身が違う。ここは開発側に確認する価値があります。

色やサイズの選択で止まる

バリエーションのある商品は、選択のところで止まりやすい部分です。スマホで起きやすいのは、次のような詰まりでしょう。

  • 選択肢が小さく、隣を押してしまう
  • 在庫のない色と、ある色の見分けがつかない
  • 選んでも写真が切り替わらず、選べたかどうか分からない
  • サイズの目安が、別ページにしか書かれていない

どれも、パソコンでは気づきにくいものばかりです。指1本で操作して、初めて分かります。

区間3|カートから購入手続きに進まない

カートからの離脱とは、商品はカートに入ったのに、購入手続きが始まらないまま終わる状態のことです。ここで起きているのは、たいてい金額か、入力の面倒のどちらかになります。

合計金額が最後に変わると、手が止まる

商品ページで見た価格と、カートで表示される合計が違う。送料、手数料、梱包代が、最後の画面で足される。この瞬間に、判断がやり直しになります。

対処の方向は決まっています。金額が動く要素を、できるだけ手前に出すこと。

  • 商品ページに、送料の条件(いくらで無料になるか)を書く
  • カートに、あといくらで送料無料になるかを表示する
  • 決済手数料がかかるなら、決済手段を選ぶ前に金額を示す

どれくらい離脱が減るかは、店によって違います。外部の平均値を持ち出しても、自社の数字は説明できません。変更の前後で、自社のadd_to_cartとbegin_checkoutの比を見るほうが確かです。

スマホの入力でつまずく4か所

購入手続きに進んだあとは、入力との戦いになります。スマホ固有の詰まりは、主に4つです。

  • キーボードの種類: 郵便番号や電話番号の欄で数字キーボードが出ない。入力欄の属性を指定していないと起こります
  • 郵便番号からの住所補完: 用意していないと、手入力の文字数が一気に増えます
  • 会員登録の強制: 初回の人に、買う前のアカウント作成を求める設計
  • 戻ると消える入力: 一度「戻る」を押した人が、最初からやり直しになる

4つ目は、スマホでは特に影響が大きい部分です。画面が狭いぶん、確認のために前の画面へ戻る動きが頻繁に起きます。戻って消えたら、そこで終わります。

この4つを直した効果が出るのは、begin_checkoutからpurchaseへの比です。区間3の比率だけを見ていると、入力側の変化は出てきません。

外部の平均離脱率ではなく、自社の数字で判断する

カート放棄率の業界平均を引用した記事は、たくさんあります。ただ、その数字を自社の目標に置いても、直す場所は決まりません。扱う商品、価格帯、決済手段、リピートの多さによって、妥当な水準が変わるからです。

見るべきは、自社の区間3の比率と、その推移。そして、変更を入れた前後の差です。平均との比較は、順位づけの材料にはなりません。

表示速度と画面の安定|スマホ側だけが遅いときの見つけ方

ウェブに関する主な指標(Core Web Vitals)とは、読み込み、応答性、視覚的な安定性という3つの観点でページの体験を測る指標のことです。スマホの導線では、この3つが区間ごとに違う形で効いてきます。

覚えるしきい値は3つ

Web Vitalsには、良好とされる基準が示されています。

  • LCP(最大コンテンツの描画): 2.5秒以内
  • INP(次のペイントまでのインタラクション): 200ミリ秒以内
  • CLS(累積レイアウトシフト): 0.1以下

判定は、ページ読み込みの75パーセンタイルで、モバイルとパソコンを分けて見るよう書かれています。平均ではなく、遅い側から数えて4分の1の手前。遅い体験を切り捨てない、という考え方です。

Search ConsoleのCore Web Vitals レポートは、実際の利用データ(CrUX)をもとに、URLグループごとの状態を「良好」「改善が必要」「低速」で示します。デバイスタイプごとに判定が付くので、モバイルのほうだけを見てください。

区間との対応は、おおまかにこうなります。LCPが遅いと、一覧や商品詳細が表示される前に離れられる。INPが悪いと、カートに入れるボタンを押してから反応するまでのあいだに、もう一度押されます。

ずれる画面は、押し間違いを生む

LCP2.5秒以内・INP200ミリ秒以内・CLS0.1以下という3つのしきい値と、スマホ導線で出る離脱・二重タップ・押し間違いの症状を対応させた図解
しきい値を覚えるより、その指標が悪いとスマホで何が起きるかを覚えるほうが早い。直す優先順位も、症状のほうから決まる。

CLSは、読み込みの途中で要素の位置がずれる量を示します。バナーや写真が遅れて入ってきて、押そうとしたボタンが下へずれる。この1回で、意図しないページへ飛びます。

スマホは画面が小さく、要素同士の距離も近い。ずれの影響は、パソコンより大きく出ます。商品一覧のサムネイルと、商品詳細のカートボタン。この2か所のずれは、優先して潰す価値があります。

今日1時間でできる自己診断|自分のスマホで最後まで買ってみる

自己診断とは、運営者自身が買う人と同じ条件で自社のECをたどり、止まった場所を記録する作業のことです。GA4の数字が「どこで」を教えるのに対して、この作業は「なぜ」の候補を出します。

診断の手順

条件をそろえないと、ただの動作確認で終わります。次の順で試してください。

  • 自分のブックマークからではなく、検索か広告のリンクから入る。買う人と同じ入口を使う
  • Wi-Fiを切り、モバイル回線で開く。社内の回線速度は、来店者の速度ではありません
  • 片手で持ち、指1本だけで操作する。両手で拡大しながら操作しない
  • 一覧を開いてから、最初の商品を押すまでの秒数を測る
  • 商品詳細を開き、スクロールせずに見えている要素を書き出す
  • 色やサイズがある商品なら、選択して写真が切り替わるかを確認する
  • カートに入れ、合計金額の表示が何回変わるかを数える
  • 購入手続きへ進み、数字を入れる欄で数字キーボードが出るかを確認する
  • 途中で1回「戻る」を押し、入力した内容が残っているかを確認する

最後まで進めて、決済の直前でやめます。テスト注文を通せる環境があるなら、そこまで通したほうが確かです。

記録する3つ

診断中は、次の3つだけメモしてください。

  • 手が止まった場所(区間と、画面の名前)
  • 止まった理由を一言で(探せない、分からない、面倒、のどれか)
  • そこまでに何回タップしたか

タップ数は、あとで効いてきます。同じ商品を買うのに12タップ必要なら、そのうち何回を減らせるかが改善の目標になります。

普段サイトを触っていない人に1回やってもらう

自分のサイトは、どこに何があるか分かってしまっています。可能なら、社内で普段サイトを触らない人に同じことを頼んでください。買ってもらう必要はありません。「この商品をカートに入れるところまでやってみて」と伝えて、横で見るだけです。

見ていると、こちらが想定していなかった場所で指が止まります。その1分が、アクセス解析の1週間分より雄弁なことがあります。

直す順番の決め方|失っている人数で並べ、1回に1か所

改善の優先順位とは、直したときに戻ってくる人数の見込みで、着手の順番を決めることです。感覚の「気になる度」で並べると、影響の小さい場所から手を付けることになります。

通った人数と落ちた割合を掛ける

区間ごとに、2つの数字を出します。その区間に入った人数と、そこで進まなかった割合。掛け算すると、その区間で失っている人数が出ます。

仮に、月に一覧を見た人が4,000人で、商品詳細へ進んだのが1,200人だとします。区間1で失っているのは2,800人。商品詳細を見た1,200人のうちカートに入れたのが180人なら、区間2で失っているのは1,020人です。この2つを比べれば、先に手を付けるのは区間1だと分かります。

割合だけを見ると、判断を誤ります。区間3の離脱率が80%でも、そこに入ってくる人が50人なら、失っているのは40人です。率の悪さと、損失の大きさは別物として扱ってください。

同じくらいの人数が並んだときは、実装の軽いほうから。数日で戻せる変更を先に置くと、検証の回転が速くなります。

1回に1か所しか変えない

まとめて直したくなりますが、同時に変えると原因の切り分けができなくなります。1回の変更は1か所。変更日と、変えた内容を1行で記録する。

記録はスプレッドシート1枚で足ります。日付、区間、変えたこと、その時点の区間比率。これだけで、半年後に「何をやったか」をたどれます。

比べるのは、前4週間と後4週間

効果を見る窓は、先に決めておきます。変更日の前4週間と、後4週間。曜日の構成がそろうため、週末に売上が寄るECでも比較が成立します。

セールや広告の出稿が重なった期間は、比較から外してください。外せない事情があるなら、その旨を記録に残しておく。あとから見返したときに、判断を間違えずに済みます。

直せる。戻るのも、だいたい同じ理由

継続運用とは、直したあとの状態を保つために、数える作業を毎月同じ品質で繰り返すことです。

外注しなくても、この手順は社内で回ります。ファネルを作るのに30分、自己診断に1時間です。直す場所を決めるところまでは、その日のうちに終わるでしょう。難しいのは、3か月後です。

商品が入れ替わり、キャンペーンのバナーが1枚増え、決済手段が追加される。そのたびに、最初の1画面の要素は少しずつ下へ押し出されていきます。誰も間違った操作はしていません。それでも、半年前に整えた1画面は、半年後には元の形に戻っています。

夫婦でネットショップをゼロから立ち上げ、EC・SEOの現場に18年以上関わってきました。そこで何度も行き当たったのは、改善のやり方ではなく「続けられない」という壁のほうです。数える手順は分かっている。直し方も見えている。それでも、商品登録と出荷と問い合わせが重なった月は、ファネルを開く時間が最初に消えました。正直、いちばんこたえたのはここです。

真っ先に後回しになるのは、いつも数える工程です。毎月、同じ区間を同じ定義で数え直し、前月と比べ、変更の記録と突き合わせる。この地味な工程が担当者の余力に依存している、という構造そのものが原因です。

そこで作ったのが、Mirai&のAI人格®です。会社の強み、言葉の癖、業界の構造を学習したAI人格が、勝てるキーワードの提案から記事構成の設計、執筆、入稿、分析までを担当します。経営者に残るのは、出てきたものを承認するかどうかを決める仕事だけ。導入企業ではアクセスが5.4倍に増え、新規記事の上位表示率は70%という数字が出ています。

中小企業のホームページの約93%は、お客様が検索で使うキーワードで上位表示できていません。アクセスはあるのに買われない、と言える時点で、その手前は越えています。あとは、来た人が止まる場所を毎月見つけ続けられるかどうかです。

自社のスマホ導線を数えたうえで、どこから直すか迷っている場合は、無料相談から現状を見せてください。競合がどのキーワードで流入しているかを調べたレポートをお渡ししています。営業目的の連絡はしません。

よくある質問

スマホの商品一覧で離脱が多いとき、最初に何を直せばいいですか

並び順の初期値と、1件あたりに表示している情報から見直してください。どちらも数日で試せて、元に戻せます。まずは自分のスマホで一覧を開き、スクロールせずに見えている商品数と、そこで分かる情報を書き出すところから始めるのが早いでしょう。デザインの刷新は、戻せる変更を試し終えてからで間に合います。

スマホの離脱はGA4のどれを見れば分かりますか

ファネルデータ探索で、商品一覧の表示から購入までを順に並べ、デバイスカテゴリをmobileで絞ります。区間ごとの人数と、進まなかった割合がそこで出るでしょう。落ちた人の行き先を知りたい場合は、経路データ探索を使うと、そのあとどこへ移動したかをたどれます。推奨イベントが実装されていない場合はページのパスで代用できますが、精度は落ちます。

スマホの商品詳細ページは情報を減らしたほうがいいですか

減らすのではなく、順番を変えるほうが安全です。価格、在庫、届く時期、カートボタンを最初の1画面に入れ、詳しい説明はアコーディオンやタブへ畳みます。Googleも、内容を同等に保ったうえで省スペース目的でアコーディオンやタブへ移すことを認めています。ただし、タップされてから内容を取りにいく実装は読み込まれないため、そこだけ開発側に確認してください。

カートの離脱はスマホとパソコンで原因が違いますか

重なる部分と、スマホ固有の部分の両方です。送料や手数料が最後に足されて合計が変わる問題は、どちらの端末でも起きます。一方、数字の欄で数字キーボードが出ない、戻ると入力が消える、選択肢が小さくて隣を押してしまうといった詰まりは、スマホ側に偏ります。金額の問題はカートから購入手続きへの比、入力の詰まりは購入手続きから購入完了への比です。GA4のデバイス別で両方を比べると、どちらの性質かを見分けやすくなるでしょう。

表示速度はどこまで改善すれば十分ですか

公式に良好とされる基準は、LCPが2.5秒以内、INPが200ミリ秒以内、CLSが0.1以下です。判定はページ読み込みの75パーセンタイルで、モバイルとパソコンを分けて見ます。Search ConsoleのCore Web Vitals レポートはデバイスタイプごとに状態を示すので、モバイル側が「改善が必要」や「低速」になっていないかを確認してください。すべてを一度に満たすのが難しい場合は、離脱が集中している区間のページから着手するのが現実的です。

まとめ|数える、絞る、1か所ずつ直す

スマホで買われない原因を探すときの順番は、3つです。

  • 数える: GA4のファネルをmobileで絞り、一覧から詳細、詳細からカート、カートから購入手続きの3区間で人数を出す
  • 絞る: 区間に入った人数と落ちた割合を掛け、失っている人数が多い順に並べる
  • 直す: 1回に1か所だけ変え、変更日を記録し、前4週間と後4週間で比べる

数字が出たら、自分のスマホで同じ道を最後までたどってください。GA4は「どこで」を教えてくれますが、「なぜ」は指で触らないと出てきません。

毎月の計測と改善を仕組みとして持ちたい場合は、無料相談からご相談ください。現状のサイトを見たうえで、優先順位をお伝えします。

あわせて読みたい関連記事