Shopifyストアの作成と再設計

無料、義務なしの見積もり

24 労働時間以内の個人的な応答

← Tous les conseils
Guide pratique SiteQuiVend

コレクション間のクリアなナビゲーションを作成するにはどうすればよいですか?

電子商取引 アーキテクチャ ・ Shopify コレクション間のクリアなナビゲーションを作成するにはどうすればよいですか? 効果的なナビゲーションにより、オファーを理解し、適切なカテゴリにすばやくアクセスし、ほぼ同一のメニューやページを連続して見逃すことなく選択肢を絞り込むことができます。 木の構造メニュー親コレクションフィルターモバイル 最大3レベルほとんどのメニューでは読みやすさを維持します。 5 から8 の選択肢過負荷を作成す...

Publié le 15.08.20262 min de lectureConseils concrets
電子商取引 アーキテクチャ ・ Shopify

コレクション間のクリアなナビゲーションを作成するにはどうすればよいですか?

効果的なナビゲーションにより、オファーを理解し、適切なカテゴリにすばやくアクセスし、ほぼ同一のメニューやページを連続して見逃すことなく選択肢を絞り込むことができます。

木の構造メニュー親コレクションフィルターモバイル
最大3レベルほとんどのメニューでは読みやすさを維持します。
5 から8 の選択肢過負荷を作成する前にグループで表示されます。
1 ロジック店舗全体で同じランキングです。
本質原理

ナビゲーションは、顧客が検索する方法を追跡する必要があります

社内組織、サプライヤー、または製品コードは、必ずしも優れたナビゲーションであるとは限りません。顧客は通常、カテゴリー別、用途別、プロフィール別、機会別、または決定的な特性別に検索します。

簡単なテスト: 外部の人にどこをクリックするか聞いてみて、特定の製品を見つけてください。明確な違いがなくても複数のパスが可能であると思われる場合は、ツリー構造を簡素化する必要があります。
ステップ1

大きな玄関ドアを設置します

カタログの大部分をカバーするカテゴリから始めます。それらは安定しているのに十分な幅がある必要がありますが、ガイドするには十分な精度が必要です。

ステップ2

メニューを変更する前にツリー構造を作成します

紙や表にルートを描きます 各レベルには明確な役割が必要です。

ショップ
↓
ファム男アクセサリー
↓
ハンドバッグバックパック小型革製品
↓
フィルター: 色、材料、価格
通常、色やサイズなどの機能はメイン メニューではなくフィルターに属します。
ステップ3

親コレクション、サブコレクション、フィルターを区別します

エレメント 彼の役割 例
親コレクション 宇宙または広いカテゴリーを提示します ジュエリー
サブコレクション 重要で自律的な目的地を作成します ネックレス
フィルター 宇宙を変えずに製品を洗練させます 材料: シルバー
ソート 結果の順序を変更 値上げ
ステップ4

メニューの深さを制限

製品に必要なクリックと決定が多いほど、訪問者は諦める可能性が高くなります。ほとんどの店舗では、2 つまたは 3 つのレベルで十分です。

ステップ5

メニューエントリに明確に名前を付けます

文言はページの内容を予想することを可能にするべきです クリエイティブな名前はマーケティングで使用できますが、メインナビゲーションは理解可能なままであるべきです。

あいまいな文言 明確な文言
私たちの必需品 日常のアクセサリー
オーラ ユニバース 天然石ジュエリー
彼女のために 女性へのギフト
シグネチャー コレクション フルグレインレザーバッグ
ステップ 6

ドロップダウンメニューとメガメニューから選択します

メガメニューは、労力を軽減する場合にのみ効果的です。リンク、画像、プロモーションが多すぎると、メニューのページ全体が再作成されます。
ステップ7

ガイドとなる親ページを作成します

親コレクションは、その製品を表示したり、サブコレクションにカードを提示したり、その 2 つを組み合わせたりすることができます。正しい選択は、オファーの量と多様性によって異なります。

  • タイトルと紹介をクリアします
  • 重要なサブコレクションへのマップ
  • 一貫した画像
  • 人気商品または代表的な商品
  • 追加用途へのリンク
  • ページレベルに合わせたフィルター
  • 目に見えるパン粉
  • 非反復的な SEO コンテンツ
ステップ 8

補完コレクション間のリンクを追加します

メニューだけがナビゲートする方法ではありません コンテキストリンクを実際に顧客の継続に役立つ場所に配置します。

ステップ 9

位置を表示するには、パン粉を使用します

パンくずは、たどった道を理解し、より広いカテゴリーに進み、内部リンクを改善するのに役立ちます。

家ΜジュエリーΜネックレスΜアルバネックレス
パスは一貫性を保つ必要があります。定義されたロジックがなければ、コンテキストに応じて複数の異なる親を持つ同じ製品が現れるのを避けてください。
ステップ10

2 番目のナビゲーションとしてフィルターを設計します

フィルターを使用すると、サブページを乗算せずにコレクションを探索できます。比較に使用される基準と一致する必要があります。

  • 価格
  • 可用性
  • サイズ
  • 色
  • 事項
  • 使用法
  • 互換性
  • 決定的な特徴
フィルターを有効にする前にデータを正規化します。 「Navy Blue」、「Navy」、「Navy」などの値は、ナビゲーションを混乱させます。
ステップ11

ナビゲーションをモバイルに適応させます

モバイルメニューはメガメニューの単純なコンパクトコピーであるべきではありません それはあなたがコンテキストを失うことなくツリーを下って戻ることを可能にするべきです。

ステップ12

一貫した社内調査を計画します

クリアナビゲーションは検索中毒を軽減しますが、一部の訪問者はすでに製品の名前、参照、または使用法を知っています。

  • わかる商品名
  • 検索可能な参考文献
  • 一般的な同義語
  • 提案に含まれるコレクション
  • 監視された対応なしの結果
  • 適切に処理されていない製品
  • 考慮される頻繁なエラー
  • モバイルで使える検索
ステップ13

実際のルートを測定します

ツリー構造は内部的には論理的で、訪問者にとってはまだ難しいように思えるかもしれません。データとフィードバックを使用してブロック ポイントを特定します。

頻繁なエラー

そのためナビゲーションが困難になります

公開前のチェックリスト

重要なコントロール

  • 主なカテゴリを分離します
  • 合理的な深さ
  • 説明なしに理解されたラベル
  • 便利な親のコレクション
  • フィルターを正しく標準化しました
  • 一貫したパン粉
  • 関連するカテゴリ間のリンク
  • モバイルメニューがテストされました
  • 機能 内部 研究
  • 空のコレクションはありません
  • 壊れたリンクはありません
  • 外部からテストされたコース
よくある質問

コレクション間のナビゲーションに関する FAQ

メインメニューに表示するコレクションの数は?

最も重要な宛先を表示します。 1 番目のレベルを無期限に拡張するのではなく、他のページをサブメニューまたは親ページにグループ化します。

コレクションは複数のメニューに表示できますか?

いくつかの関連ルートを満たしている場合ははいですが、明確な理由がない場合は、隣接するグループで同じルートを繰り返さないでください。

各フィルターのページを作成する必要がありますか?

いいえ。目的地がナビゲーション、マーケティング、または SEO 用のスタンドアロン ページに値する場合にのみ、別のコレクションを作成します。

メニューが複雑すぎるかどうかをどうやって知ることができますか?

訪問者が複数のエントリの間で躊躇したり、体系的に検索を使用したり、以前のレベルに頻繁に戻ったりする場合は、構造を簡素化する必要があります。

Shopify ナビゲーション

より多くの訪問者を適切な製品に導くための明確なアーキテクチャ

SiteQuiVend は、コレクション、メニュー、Shopify フィルターを整理して、デスクトップやモバイルでカタログを簡単に探索できるようにします。

Transformons vos idées en pages qui donnent confiance

Création ou refonte de boutique Shopify : obtenez une recommandation et un devis adaptés à votre situation.

Parler de mon projet →