ECサイトの導線設計で売上向上！押さえるべき5つのポイントを解説

ECサイトの導線は売上に影響を与えるため、ターゲットユーザの視点で使いやすくし、自社のゴールを達成できるよう設定することが重要です。
ただし、導線とは何か、またどのように設計すれば良いかなど詳しく知りたい方も多いでしょう。

本記事は「ECサイトの導線」をテーマに、導線とは何かといった概要や、導線の設計で押さえるべき5つのポイント、設置後の分析方法などについてお伝えします。導線設計について知りたい方、ECサイトの売上を向上させたい方は、ぜひご覧ください。

目次

• ECサイトにおける導線設計の役割
• ECサイトの導線設置箇所
• 導線設計で押さえるべき5つのポイント
• ECサイトの導線設計後の分析方法
• ECサイト導線設置のまとめ

ECサイトにおける導線設計の役割

ECサイトにおける導線とは、流入したユーザの購入やサイト内回遊などのコンバージョンに導くルートのことです。導線が適切につながっていなければ、期待する成果は得られません。
コンバージョンをゴールとして、ユーザのサイト回遊の道筋を想定し、いかに購入につなげるかサイト導線を検討することを導線設計と言います。

Webサイトで導線と混同しやすい言葉に「動線」がありますが、意味が異なります。
動線とは、流入したユーザが実際にたどったルートのことを指します。ユーザが何を閲覧し、どのようなページ移動をしたかという動線を分析し、それにもとづいた導線設計が重要です。

≫≫ ECサイトの売上を伸ばすための施策5選！対策方法から改善事例までを紹介

ECサイトの導線設置箇所

ECサイトの導線設置箇所は以下の通りです。各導線の内容について解説していきます。

・ヘッダー／フッター ・パンくずリスト ・サイドメニュー／ハンバーガーメニュー ・メインコンテンツ内 ・サイト内検索

ヘッダー／フッター

ユーザの目に留まる機会が多いヘッダー・フッターに、導線を設置するケースが一般的です。
ヘッダーとは、Webサイトの最上部に表示される部分で、以下のような要素が含まれます。

ロゴ

各ページへのリンク

タイトル

画像

ECサイトで設置すべき導線は以下の通りです。

カート	商品カテゴリー	検索機能
新着情報	セール	キャンペーン情報

通常、流入した際最初に目に入る部分で、ホームページの第一印象を決める一因になるとともに、以下の役割を果たします。

ヘッダー／フッターの役割

◾️｜看板としての役割 ◾️｜ホームページの統一感を保つための役割 ◾️｜ナビゲーションやサイトマップとしての役割

一方で、フッターはホームページの最下部に表示される部分で、コンテンツの最後に記載される情報です。
ヘッダーに表示する内容にプラスして、著作権などの情報が記載されます。

パンくずリスト

パンくずリストとは、ページの上部や下部に表示されているウェブサイトのページ階層をハイパーリンクでリスト化したナビゲーションのことです。ユーザが流入したページが今サイト内のどの階層にあるかを知るための道しるべです。名称は、グリム童話の「ヘンゼルとグレーテル」で子どもたちが帰り道を見失わないように落としたパンくずに由来しています。

ユーザは必ずしもトップページからアクセスするわけではありません。
ユーザが迷子にならないように、「ホーム ＞ トップス ＞ Tシャツ ＞ 半袖」とパンくずリストを活用し、どこを閲覧しているかを簡単に把握できるようにしましょう。

パンくずリストはリンクにもなっているため、前のセクションやルートページにすばやく戻ることもできます。また、Googleが「検索エンジン最適化（SEO）スターター ガイド」において、パンくずリストの設置を推奨しているように、検索エンジンがWebページをクロールする際にも役立ちます。パンくずリストの設置により、クローラーがたどるリンクが増加するため、SEO対策にもつながります。

サイドメニュー／ハンバーガーメニュー

サイドメニューと、ハンバーガーメニューの2つも重要な導線です。
サイドメニューとは、コンテンツの左右いずれかに表示されたメニューのことで、サイドカラムとも呼ばれます。

ハンバーガーメニューは、サイトの上部などに表示される3本線のナビゲーションメニューで、クリックすれば隠れているWebサイトのメニュー情報が表示される仕組みです。
3本の横線がハンバーガーに見えるため、ハンバーガーメニューと呼ばれています。
また、引き出しに似ていることから、ドロワーメニューとも呼ばれるケースもあります。
スマートフォンの小さい画面でWebサイトを閲覧するユーザが増えてきた近年では、情報をコンパクトに使いやすく表示するために多く用いられています。
ハンバーガーメニューを利用するメリットは以下の通りです。

ハンバーガーメニューのメリット

◾️｜ヘッダーのスペースを有効活用できる ◾️｜メニューを手軽に設置・変更ができる

ファッション通販「ZOZOTOWN」では、目に留まりやすく操作しやすい右側に特集記事や売れ筋商品の画像バナーを置き、左側に絞り込みメニューを配置するなど、ユーザにとって、絞り込みを使い、商品の検討や検索がしやすい導線を採用しています。

メインコンテンツ内

メインコンテンツ内に設置する導線は、トップページやカテゴリーページ、商品ページなどのジャンルにより、設計方法が異なります。
基本的には、トップページからカテゴリーページへ、カテゴリーページから商品ページへ、というように、詳細な情報が得られる導線になっています。
ユーザがどこから閲覧を始め、どのようにサイト内のページを回遊しコンバージョンにつながるかを想定した導線設計が重要です。

サイト内検索

サイト内検索の利用も導線改善にとって効果的です。
サイト内検索とは、検索窓にキーワードを入力しWebサイト上で商品やコンテンツを探せる機能のことです。
多数の商品を取り扱うECサイトにおいて、目的の商品をスピーディに探すため、多くのユーザがサイト内検索を利用します。サイト内検索に関するアンケート調査の結果によれば、ECサイトを来訪したユーザが検索機能を利用する割合は8割以上です。

サイト内検索の実装は運営者にとっても、ユーザの利便性の向上とともに、コンバージョンが高まったり、検索データが分析できユーザニーズを把握できるなどのメリットがあります。
サイト内検索の導入方法は、主に以下の3つです。

サイト内検索の導入方法

◾️｜無料で活用できるGoogleカスタム検索の設置 ◾️｜ECカートシステムなどの機能を利用した導入 ◾️｜サイト内検索ツールの導入

Googleカスタム検索やECカートシステムの機能は無料で活用できますが、精度が高いとはいえません。サイト内検索を利用した結果、目当ての商品が見つからなければユーザの離脱につながり逆効果です。実際に、ECサイトで欲しい商品が発見できなかった場合のユーザ離脱率は50％以上であるという調査結果も出ています。
検索キーワードに対して類義語や同義語を判断し、部分一致でも正確に検索結果を表示させるサイト内検索の最適化が欠かせません。

また、サイト内検索の導線を強化するなら、画像付きサジェストがおすすめです。
サジェスト機能とは、ユーザが検索窓に入力したキーワードにもとづき、検索キーワードや商品などのコンテンツを予測し提案する機能を指します。
画像付きサジェスト機能は、商品画像もあわせて表示する機能です。

≫≫ サイト内検索とは？3つのやり方・導入方法から活用事例までを解説

画像付きサジェストで導線を強化した事例

画像付きサジェストで導線を強化した事例の一つが、株式会社ユニメディアです。
株式会社ユニメディアは、日本初の「成果報酬型オープンイノベーションカンパニー」を目指し、ふるさと納税・寄付サイト「ふるさとプレミアム」を運営する企業です。
ふるさとプレミアムに、画像付きサジェストなどの機能を持つECサイト検索ツール「GENIEE SEARCH（ジーニーサーチ） for EC」を導入しました。

検索キーワード入力時に候補語と返礼品を画像付きで表示し、キーワード入力の手間とミスを抑え、詳細ページへの導線を強化しました。
また、検索窓がクリックされると、キーワードを入力しなくても予め設定した候補語と返礼品をデフォルトで表示し、ユーザに気づきを与えています。

≫≫ 株式会社ユニメディア様 GENIEE SEARCH導入事例

導線設計で押さえるべき5つのポイント

導線設計で押さえるべき5つのポイントは以下の通りです。

・導線設置の目的を明確にする ・自社ECサイトのユーザ行動の仮説を立てる ・購入導線を可視化し分析するための環境を整える ・導線の視認性を高める ・分析結果から課題を見つけPDCAを回す

ここからは、上記について詳しく解説します。

1. 導線設置の目的を明確にする

導線は設置すれば効果があるわけではありません。導線を設置することで何を成し遂げたいのか、目的の明確化が重要です。その上でどのような構成で、どのようなルートにするかストーリーを決定します。

例えば、はじめに以下のような目的を明確に決めておくとよいでしょう。

目的例

◾️｜商品やサービスの購入 ◾️｜見込み客やリピーター、ファンの獲得 ◾️｜顧客の育成 ◾️｜認知率の向上

2. 自社ECサイトのユーザ行動の仮説を立てる

自社ECサイトを訪れるユーザの行動について仮説を立てる必要があります。
カスタマージャーニーマップを作成し、どのフェーズのユーザがどのような行動をするのか可視化してみることをおすすめします。

カスタマージャーニーマップとは、顧客が商品・サービスを認知してから購入に至るまでのプロセスや心理・行動を時系列でまとめた図のことです。
横軸には認知や理解、検討、購入などの購買プロセスにおける各ステージをまとめ、縦軸には「顧客心理・顧客行動」「タッチポイント」「課題・要望」「具体的な施策」などをまとめます。

コンバージョンの獲得やファンの育成には、商品・サービスの認知から購入・消費・利用、利用者間の情報共有まで、顧客体験のマネジメントが欠かせません。
カスタマージャーニーマップを作成すれば、顧客視点でものごとが考えられるとともに、どのタイミングでどのような施策を行えば良いかが整理できます。
カスタマージャーニーマップを作成する際のステップは以下の通りです。

カスタマージャーニーマップの作成ステップ

◾️｜目的（ゴール）を決める ◾️｜ペルソナを設定する ◾️｜横軸に購買プロセスのステージを書く ◾️｜縦軸にペルソナの行動や心理、思考を書く ◾️｜タッチポイントを記載する ◾️｜マーケティング施策を検討・記載する

流入するユーザの目的はさまざまですが、自社のターゲットが利用しやすく目的を達成できる導線の検討が大切です。

≫≫ ECマーケティングとマーケティングの違いとは？戦略で押さえるべきポイントを解説

3. 購入導線を可視化し分析するための環境を整える

購入導線を可視化し分析するための環境を整える必要もあります。
例えば、ゴールを「購入」とした場合、ユーザが次のどの導線を通り、どこで離脱したかといった行動を把握し、分析する必要があります。

離脱ページの確認

◾️｜トップページ ◾️｜カテゴリーページ ◾️｜商品ページ ◾️｜購入ページ

ECサイト上の導線の課題が何かを分析し、可視化することで、「購入」というゴールに向け導線改善を進められます。

4. 導線の視認性を高める

導線設置において、見つけやすく、クリックされやすいデザインや配置は欠かせません。
ボタンの色や大きさ、デザインはユーザの心理に大きく影響します。以下は、各色が人に与える印象や効果の一例です。

人に与える印象と効果

◾️｜赤・レッド：前向きな印象 ◾️｜橙・オレンジ：暖かい印象 ◾️｜黄・イエロー：注目を集める効果 ◾️｜緑・グリーン：リラックス効果 ◾️｜青・ブルー：誠実などポジティブな印象で、気持ちを落ち着かせたり、集中力を高める効果 ◾️｜紫・パープル：疲労回復や興奮を鎮め、感性を刺激したり、個性を感じさせたりする効果 ◾️｜ピンク：柔らかいイメージで、気持ちを晴れやかにしたり、恋愛を意識させる効果 ◾️｜水色：集中力の向上や心を落ち着ける、解放感を得られる効果 ◾️｜黒・ブラック：高級、重厚感などのイメージで気持ちを引き締め、不安感を与えるなどの効果 ◾️｜白・ホワイト：すっきりとした明るい印象 ◾️｜灰色・グレー：気持ちを落ち着かせ、シンプルで洗練されたイメージを与える効果 ◾️｜茶色・ブラウン：温かみを感じさせる効果

ボタン形式の導線を表示する場合は、ボタン上に表示する短い文章（マイクロコピー）や、「フォントタイプ」「色」「大きさ」「位置」の要素にもこだわると効果的です。

5. 分析結果から課題を見つけPDCAを回す

はじめからユーザが想定通りの導線をたどってくれるケースは多くありません。重要なのは、期待する成果が得られなかった際に、なぜかを考え、どこをどのように変更するか検討することです。

Plan（計画）・Do（実行）・Check（測定・評価）・Action（対策・改善）からなるPDCAサイクルを回し続ければ、適切な導線を設計できます。
導線だけでなくサイト構成や内部リンクなどを確認し、改善・運用を繰り返すことが重要です。

≫≫ ECサイト分析で重要な5つの指標とは？分析の方法からツールまで紹介

ECサイトの導線設計後の分析方法

ECサイトの導線は、先ほどお伝えしたポイントを意識し設計した上で、改善し続ける必要があります。効果的な改善を行うためには、状況を分析し現状や課題を正しく把握しなければなりません。
ここからは、ECサイトの導線設計後の分析方法について詳しく解説します。

・導線分析のゴールを決める ・導線分析の始点と終点を決める ・ユーザ導線の遷移数値を取得し仮説を立て改善する

導線分析のゴールを決める

まず、導線分析の目的やゴールを決定します。また、以下を確認します。

導線分析の目的やゴールを決定

◾️｜コンバージョンにつながる王道ルートはどこか ◾️｜ユーザはどこから流入し、商品購入まで至っているか ◾️｜コンバージョンの障害となるページはどこか ◾️｜どこで離脱するユーザが多いか

導線分析の始点と終点を決める

続いて、導線分析の始点と終点を決めます。
コンバージョンに至る導線は無数に存在するため、全ての分析は簡単ではありません。見るべき導線の始点と終点を事前に決めておけば、分析がしやすくなります。どこを始点と終点にするかは、分析の目的により異なりますが、基本的にユーザ流入の多い、トップページを始点とし、購入完了ページを終点にするといった方法が一般的です。

商品一覧ページを終点にすることで、ユーザーがサイトを訪れた際の主な目的や意図を推測しやすくなります。
サイトツリーを作成すれば、サイトの全体像を把握でき、始点と終点の設定がしやすいためおすすめです。

また、目的以外の導線を外し、始点ページから遷移割合の高いページを優先的に分析すると効率的です。
分析対象が多ければ、分析しきれなかったり、一つひとつが雑になったりする可能性があるため、対象を絞ることも大切です。

ユーザ導線の遷移数値を取得し仮説を立て改善する

最後に、導線のクリック数や回遊などの数値を可視化し、どこに課題があるか、なぜその課題が発生したかの仮説を立てて、改善施策を立案・実行します。
実際の数値を確認すれば、どの程度の遷移や離脱があるかが明確になります。また、遷移率や反対に離脱率が高い導線も把握可能です。
課題が明確になれば、ゴールに至るまでの障害がどこなのかユーザ視点で仮説を立てられます。ストレスを感じる箇所はないかや、コンバージョンまでスムーズな遷移ができるかの確認がおすすめです。
また、第三者に試してもらい意見をヒアリングすれば、自社では見つからない課題を発見できる可能性があります。

仮説を立てたら、実際に施策を実行し効果があるかを検証します。
分析だけで満足したり、リソースが不足したりして、実行までできない企業も少なくありません。どんなに良い分析・仮説検証をしても、実行しなければ意味がありませんので、最後まで施策をやり切りましょう。

ECサイト導線設置のまとめ

この記事では、ECサイトの導線について押さえるべき5つのポイント、導線設置後の分析方法などについて解説しました。
ECサイトにおける導線とは、流入したユーザを購入やサイト内回遊などのコンバージョンに導くルートのことです。導線が適切に設置されていなければ、期待する成果は得られません。

ユーザ目線で導線を設計するとともに、PDCAを回し改善を継続することが大切です。
また、サイト内検索の導入による導線整備も効果的です。ツールは複数ありますが、株式会社ジーニーが開発・提供している高精度のサイト内検索「GENIEE SEARCH」は多くのECサイトで導線改善に成果を出していますので、導入をご検討ください。ECサイトに必要な導線最適化の機能が備わっており、大手企業や金融、官公庁などシリーズ累計で900社以上が利用しています。

サイト内検索のオススメ記事

• 商品検索の絞り込み機能を実装してECサイトのCVRを改善
• ECサイトに必要なサイト内検索のサジェスト機能とは？導入するメリットを解説
• ランキング機能でECサイトのコンバージョン率を改善する方法

---