ECサイトの導線設計とは？回遊を増やし離脱を減らすページ構成の基本

「アクセスは取れているのに、なぜか売れない」。EC運営でよく聞く悩みですが、その原因は商品力や集客量よりも、サイトの中を歩くお客さまの”道づくり”にあることが少なくありません。トップページに来てくれた人が、目当ての商品まで迷わずたどり着き、関連商品も気持ちよく見て回り、最後にカゴから購入までスムーズに進める。この一連の道筋を意図して設計することを「導線設計」と呼びます。

本記事では、トップ→カテゴリ→商品→カゴ→購入という購買の流れに沿って、「迷わせない・離脱させない・関連へ回遊させる」ための考え方と、自店にそのまま当てはめられる具体的な整え方を解説します。派手なテクニックの前に、まず”骨格”を通す。それが遠回りに見えて、いちばん効く近道です。

導線設計とは何か（導線と動線の違い）

導線設計とは、ユーザーに通ってほしい道筋をあらかじめ引いておくことです。ここで押さえておきたいのが、「導線」と「動線」という似た2つの言葉の違いです。Web分析の現場では、この2つは明確に区別されます。

• 導線：運営者が「こう通ってほしい」と設計して引く道。トップから商品、カゴ、購入完了へと向かう理想の流れ。
• 動線：実際にユーザーがたどった足跡。アクセス解析やヒートマップに残る”現実”のデータ。

つまり、導線は設計であり、動線は結果です。よい運営とは、この2つのズレを見つけて埋めていく作業に他なりません。引いたつもりの道からお客さまがどんどん外れて離脱しているなら、その道は「通ってほしい」という運営側の願望であって、通りたくなる道にはなっていない、ということです。

導線設計を考えるときは、購買を大きく5つのステップに分けると整理しやすくなります。トップ→カテゴリ→商品→カゴ→購入完了です。各ステップには果たすべき役割があります。トップは「入口として何の店かを一瞬で伝える」、カテゴリは「探し物へ迷わず分岐させる」、商品ページは「不安を消して買う決心を後押しする」、カゴは「買う気持ちを冷まさせない」、購入完了は「摩擦なく決済を終える」。どこか一段でも役割を果たせていないと、そこがボトルネックになって全体の成果が頭打ちになります。

迷わせない：基本ナビゲーションを通す

回遊や離脱を語る前に、まず「どのページからでも主要な場所に戻れる・進める」状態を作ることが土台になります。これができていないサイトは、いくら個別ページを磨いても穴の空いたバケツのままです。最低限そろえたい基本ナビゲーションは次の要素です。

• ヘッダー・フッター：サイト全体をつなぐ背骨。ヘッダーには主要カテゴリ・検索窓・カゴを、フッターには特定商取引法・送料・返品・問い合わせなど「買う前に確認したい情報」への入口を置きます。
• パンくずリスト：いま自分がサイトのどの階層にいるかを示す地図。上位カテゴリへワンクリックで戻れるため、回遊のきっかけにもなります。
• サイドメニュー／ハンバーガーメニュー：カテゴリや絞り込みへの入口。PCではサイド、スマホでは折りたたみと、デバイスで見せ方を変えます。
• サイト内検索：目的が明確な人ほど検索を使います。検索を使う層は購入に近い傾向があるため、検索窓を見つけやすくし、表記ゆれや商品名の一部でもヒットするようにしておくと取りこぼしが減ります。

ポイントは、これらを「飾り」ではなく「経路」として設計することです。メニューの見た目を凝るより、押したいところがちゃんと押せて、目的地に最短で着けるか。その一点を優先します。

回遊させる：関連商品とレコメンドで”次の一手”を出す

導線設計は、購入への一本道を作るだけでは足りません。1商品だけ見て「他になさそう」と帰ってしまう人に、次に見るべき候補をさりげなく差し出すことが、回遊とまとめ買いの両方に効きます。

代表的なのが、商品ページ下部の関連商品やレコメンドです。「この商品を見た人はこんな商品も見ています」といった提案は、ユーザーの選択肢を広げ、探す手間を肩代わりします。手法にはいくつか種類があります。閲覧・購入履歴から似た嗜好の人のデータを使う協調フィルタリング、商品の属性からおすすめする方法、人気ランキングを見せる方法、閲覧中の商品に紐づく関連商品を出す方法などです。まずは自店のプラットフォームが標準で持っている機能から始め、無理に高度な仕組みを入れる必要はありません。

回遊を促すうえで、もう一つ意識したいのが「行き止まりを作らない」ことです。検索結果が0件のページ、在庫切れの商品ページ、キャンペーン終了後のページなど、ユーザーが手詰まりになりやすい場所には、必ず「代わりに見るべき場所」への出口を用意します。0件なら人気カテゴリへ、在庫切れなら類似商品へ。行き止まりを回遊の分岐点に変えるだけで、離脱はかなり減らせます。

なお、スマホでの回遊は、指の動きや縦スクロールの特性を踏まえた別の工夫が必要になります。親指の可動域を意識したボタン配置や、スクロールを止めずに関連商品へ送る見せ方など、スマホ固有の具体テクニックは[楽天市場のスマホ回遊を増やす方法](https://rakurip.com/ec/rakuten-sumaho-kaiyu/)で詳しく扱っているので、あわせて参考にしてください。

商品ページで”買う決心”を後押しする

カテゴリから商品ページへ来た時点で、ユーザーは「ちょっと気になる」段階にいます。ここで役割を果たすのは、装飾ではなく「不安を消すこと」です。買わない理由を一つずつ潰していくと考えると設計しやすくなります。

• 写真と情報の充実：サイズ感・使用シーン・素材・スペックなど、実店舗なら手に取って確かめられる情報を、画像とテキストで補います。
• レビュー・評価：他の購入者の声は、運営者のどんな説明よりも信頼を生みます。良い声だけでなく質問への回答も、判断材料として機能します。
• 送料・納期の明示：後述するとおり、金額や届く日が分からないことは大きな離脱要因です。商品ページの段階で見えていれば、カゴでの離脱を前もって防げます。
• 明確なCTAボタン：「カゴに入れる」ボタンは、ページ内で最も目立つ色と大きさにします。スクロールしても常に押せるよう追従表示にするのも有効です。

ファーストビュー（最初に見える範囲）に、商品名・価格・メイン画像・カゴボタンという「買うために最低限必要な情報」を収めることも重要です。核心の情報が下にありすぎると、そこまでたどり着く前に判断されてしまいます。

カゴ・決済で離脱を減らす

導線のいちばん最後、そして最も取りこぼしが多いのがカゴから決済です。買う気になった人がここで離れるのは、運営にとって最ももったいない離脱です。実態として、カゴ落ちは決して珍しい現象ではありません。UX調査機関のBaymard Instituteが50件の調査を平均した結果では、世界のカゴ落ち率は約70.22%にのぼります。日本国内でも、月商500万円以上のEC約4,374件を対象にしたCART RECOVERYの2025年調査で、平均カゴ落ち率は62.9%と報告されています。

ただし、この数字を過度に恐れる必要はありません。Baymardの調査では、カゴ落ちの理由として「ただ見ていただけ／まだ買う気がなかった」が43%を占めており、そもそも比較・検討中の人も多く含まれます。つまり、カゴ落ちの全部が”改善で取り戻せる損失”ではない、ということです。運営者が向き合うべきは、「買う気だったのに手続きの途中で離れた人」です。

Baymardが挙げる、買う気だった人の離脱理由の上位は次のとおりです。

• 追加コスト（送料・税・手数料）が高すぎた：39%
• 配送が遅かった：21%
• サイトを信用できず決済情報を入れたくなかった：19%
• アカウント作成を求められた：19%
• 決済プロセスが長い・複雑：18%
• 返品ポリシーに不満：15%
• サイトにエラー・クラッシュがあった：15%
• 合計金額を事前に確認できなかった：14%

ここから導ける対策は明快です。第一に、送料や手数料を早い段階で見せること。カゴに入れる前や商品ページで総額の見当がつけば、レジでの「思ったより高い」を防げます。第二に、会員登録を強制せずゲスト購入を用意すること。第三に、入力フォームをできる限り短くすること。住所の自動入力に対応し、不要な項目を削り、エラー表示を分かりやすくするだけで、途中離脱は目に見えて減ります。加えて、クレジットカードに偏らずAmazon PayやPayPay、後払いなど、お客さまが使い慣れた決済手段をそろえておくと、決済段階での取りこぼしを抑えられます。カゴ落ちしたユーザーへのリマインドメールやポップアップも、離脱後の呼び戻し策として機能します。

動線データで導線を検証し、改善を回す

導線は一度引いて終わりではありません。引いた道（導線）を、実際の足跡（動線）で検証し、ズレを直し続けるのが本筋です。特別なツールを一気にそろえる必要はなく、次の3つの見方から始めれば十分です。

1. ヒートマップ：どこがよく見られ、どこがクリックされ、どこでスクロールが止まるかを可視化します。押されると思ったボタンが押されていない、読んでほしい情報が読まれていない、といった導線と動線のズレが一目で分かります。
2. A/Bテスト：カゴボタンの色・位置・文言などを2案用意し、どちらが購入完了に効くかを実データで比べます。感覚ではなく数字で決める習慣がつきます。
3. 遷移数（ファネル）の確認：トップ→カテゴリ→商品→カゴ→購入の各段でどれだけ人が減るかを見ます。最も減っている段が、いまいちばん直すべき場所です。

この3つを回すと、「なんとなく良さそう」という改修が「ここを直すと何%効く」という判断に変わります。導線設計の巧拙は、最終的にこの検証ループを地道に回せるかどうかで決まります。なお、トップページそのものの構成（何を最上部に置き、何を伝えるか）は成果を大きく左右するテーマなので、[楽天市場のトップページの作り方](https://rakurip.com/ec/rakuten-top-page/)もあわせて設計の参考にしてください。

FAQ（よくある質問）

Q. 導線設計は何から手をつければよいですか？ まずは基本ナビゲーション（ヘッダー・フッター・パンくず・サイト内検索）が全ページで機能しているかを確認します。次にファネルを見て、トップ→カテゴリ→商品→カゴ→購入で最も人が減っている段を特定し、そこから直すのが効率的です。全体を一度に作り替える必要はありません。

Q. 「導線」と「動線」はどう違うのですか？ 導線は運営者が引く「通ってほしい道」（設計）、動線はユーザーが実際にたどった「足跡」（結果データ）です。導線どおりに動線が流れているかを検証し、ズレを埋めていくのが改善の基本です。

Q. カゴ落ち率が高いのですが、異常でしょうか？ カゴ落ちは珍しくなく、世界平均で約70%、国内でも6割超という調査があります。さらに、そのうち4割ほどは「まだ買う気がなかった」比較検討層です。異常かどうかより、「買う気だったのに離れた人」の理由（追加コスト・アカウント要求・手続きの複雑さなど）を一つずつ潰すことが実効的です。

Q. サイト内検索は導入したほうがよいですか？ 目的が明確なユーザーほど検索を使う傾向があり、検索を使う層は購入に近いことが多いため、見つけやすい位置に検索窓を置く価値はあります。表記ゆれや商品名の一部でもヒットするようにしておくと取りこぼしが減ります。

Q. スマホとPCで導線設計は変えるべきですか？ 基本の骨格（購入までの流れ）は同じですが、見せ方は変えるべきです。スマホは親指の可動域を意識したボタン配置や縦スクロール前提のレイアウトが必要です。スマホ固有の回遊テクニックは横リンク先の記事で詳しく扱っています。