2011年08月26日
ECサイト設計:トップから商品詳細ページまでのフロー
奥井夏子
インフォメーションアーキテクト
「トップページからどのようにユーザーを商品詳細ページへ誘導するか」はECサイトを設計する上で最も気を付けるべき事項の1つです。
指名買いの多いサイトでは…
商品点数の多いサイト(アマゾンや楽天のようなサイト)において、検索ボックス機能は非常に重要だと言えます。さらに、検索補助機能として「キーワード候補」(アマゾンや楽天にて導入)があるとより使いやすいでしょう。
他には「指名買い」の多いサイト。名の通るブランド(ブランド/メーカー名等)を取り扱うサイト、有名商品を取り扱うサイト(「クリスタルガイザー」「スカルプD」等)は「指名買い」の多くなるサイトです。あとは「このサイトと言えばコレ」といった、ヒット商品を持つサイトもそうでしょう。また電機製品/工業製品を取り扱うサイトだと、商品名以外でもユーザーが「型番」で検索する傾向があります。
検索とセットで考えなくてはならないのが検索結果です。
たとえば検索ボックスに「グッチ」と入力された場合、カテゴリで絞り込めること(バッグ、財布…)も大事ですし、また金額ごとに並び替えられることも大事です。
絞り込みだと「カテゴリ」、並び替えだと「金額」など、重要なキーはある程度決まってはいますが、その他どのように絞りこませるか/並び替えさせるかは、そのサイトのユーザーシナリオ(ユーザーがどのようにサイト内で行動するか)によって異なります。
サイトのユーザーは誰なのか?彼らがどんな風に絞り込めたら/並び替えたら便利だろうか?考えてみることが重要です。
ウィンドウショッピングを促したい場合は…
「しっかりした検索ボックスと取捨選択しやすい検索結果さえあれば商品ページにたどりつける」と考える方もいらっしゃるかもしれませんが、残念ながら検索ボックスはそこまで万能な箱ではありません。
「検索ボックス」がすくいきれないニーズ、それは「ウィンドウショピング」です。検索ボックスは「これを買おう」と決めている場合には大変有効ですが、「何かよいものあるかな?」という、ウィンドウショピング状態のユーザーに対しては「カテゴリ」からの誘導や「特集/キャンペーン」からの誘導が有効なのです。
どんなカテゴリが有効なのかを考える「カテゴリ設計」はECサイト設計の要の1つです。サイトの特性やシナリオから、適切なカテゴリを設計していくことが重要ではありますが、その時参考になるのが、アクセス解析の「流入キーワード」や「サイト内検索キーワード」です。ユーザーがどんなキーワードを使って商品に到達しようとしているのかその動きを見ていると、このサイトに必要なカテゴリが見えてくることがあります。また、よく検索されているキーワードに関しては、カテゴリを新設したり、もっとわかりやすい位置へ移動したりなど、調整していくとよいでしょう。
「検索ボックス」と「カテゴリ検索」どっちが重要?ユーザーのよる違い
「検索ボックス」と「カテゴリ検索」のどちらを目立つ場所に設置するかに関しては、面白いデータがあります。
以前ユーザーテストで「●●の情報を見つけてください(どの被験者にも同じものを見つけてもらう)」というタスクを課しました。検索ボックスがとても目立つ位置にあるサイトだったので「検索ボックスを使うであろう」という予想だったのですが、同じものを探してもらったにも関わらず「検索ボックス」を使う場合と「カテゴリ」からたどる場合と、被験者によってマチマチの結果が出ました。
面白いのは、PCリテラシーの高い/20代のユーザーは検索ボックスを使い、PCリテラシー低い/30代のユーザーはカテゴリ検索を使う傾向が見られたこと。後者のユーザー(女性)からは「検索ボックスがあったとしてもいつもカテゴリからしか使わない」という意見が複数挙がっていました。
また別のテストでは、ECサイトでプレゼントを探すというタスクにおいて、男性は「検索ボックスから」女性は「特集から」プレゼントを探しにいった、という結果が出たこともあります。
サイトの特性やユーザーニーズだけでなくサイトを使うユーザーによっても「検索ボックス」か「カテゴリ検索」かサイト内の重要度は変わってくると思われます。
このサイトのユーザーだったら…という視点を持つ
トップページから商品詳細までのフローはECサイトにおいて最も重要な導線設計の1つです。上記のようなさまざまなヒントを加味しつつ、まずは「このサイトのユーザーだったらどんな風にサイトを使うだろう」と想像してみることから始めてみましょう。重要なのは「自分だったら…」ではなく「このサイトのユーザーだったら…」という視点です。
そうして仮説を立てて設計したサイトに対して、アクセス解析やユーザーテストで「その仮説が本当に合っていたかどうか」確認していくことで、より成果を生み出すサイトに近づけることができます。
PICK UP
-
タグ: Cloud Shell構築, GA4, GA分析自動化, Gemini CLI, Google アナリティクスMCP, LLM連携, コラム, データ対話型分析, モデルコンテキストプロトコル, 自然言語分析
2025年7月発表!自然言語でGA4を分析できる「Google アナリティクスMCPサーバー」を構築する方法 -
タグ: AIエージェント, GA360, Gemini in Looker, Google Cloud Next, Next Tokyo, Vertex AI Search, イベントレポート, コラム, データ分析高度化, データ利活用, 検索体験向上, 生成AI活用
【Next Tokyoレポート】主役は生成AI!GA360×生成AIの最新活用法を紹介 -
タグ: ASEAN展開, Direct Engine, インドネシア, オフショア開発, グローバル協業, コラム, ジャカルタ, スラバヤ, ビジネス熱気, ファンデザイン室, 出張レポート, 文化共存
【出張レポート】インドネシアで見た、熱気と未来への可能性|株式会社イー・エージェンシー公式note -
タグ: AI実証実験, AI高速処理, ECサイトパーソナライズ, Groq API, HTML自動生成, UX最適化, Web制作, コラム, リアルタイムAIパーソナライズ, 技術進化
【ウェブ制作】AIを使ってウェブサイトをリアルタイムにパーソナライズしてみたい!|株式会社イー・エージェンシー公式note -
タグ: GA4トレーニング, GA4初心者, Udemy講座, gmpプレミアムサロン, アクセス解析学習, コラム, スマホ学習, データ活用, 探索レポート, 解析スキルアップ
プロに学ぶ、夏のGA4スキルアップ。アクセス解析の基本講座が1,500円【8/31まで】 -
タグ: AIと人の協業, AI活用事例, Google Gemini, gemini, カスタム議事録, コラム, プロンプト設計, 会議効率化, 文字起こし, 業務効率化, 議事録効率化
【もう議事録は書かない】Geminiを使って、文字起こしからカスタム議事録を作成|株式会社イー・エージェンシー公式note