【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

21Jul2011

ネットショップの基本的なナビゲーションを考える

webサイトの最上部などに表示されるナビゲーション。
 
ネットショップでは、よほど特異な構成にしない限り最上部ナビゲーション&左ナビゲーションの2つ使いが基本になるかと思います。
今回は、そのナビゲーションの基本的な形を考えてみます。
 
あくまでも一般的な基本形を考えてみる回なので、実際のショップに最適化すると違いが出てくる場合もあるでしょう。
その点を理解した上で、みなさんのウェブショップ運営に役立てて頂けたら嬉しいです^^
 
 
 

ネットショップに最低限必要なナビゲーションとは

 
まず、一般的なネットショップに必要なナビゲーションを整理してみましょう。
 
・トップページへ
・決済方法 and 配送方法
・商品カテゴリ大 (ファッション・AV機器 など)
・商品カテゴリ小 (ハーフパンツ・サンダルなど スピーカー・ノートPCなど)
・商品検索ウィンドウ
・ご利用方法
・カートの中身を見る
・お問合せ and よくある質問
・メルマガ登録
・規約 and 会社概要
・ショップブログ
・ショップ独自の記事、新製品比較レポなど
 
 
 
 

左ナビと上ナビの違い

 
基本的かつ一般的ななネットショップの構造では「左ナビゲーション」と「上ナビゲーション」を併用します。
 
 
左ナビは上ナビに比べて
 
・項目数を多く表示できる
・階層表示できる
 
ことが利点です。
 
 
 
上ナビの利点は、
 
・どのページでも最初に表示される
・項目数が少ない分、各々の項目が目立つ
 
ことです。
 
また現在では事実上、多くのユーザーが「重要な情報は上ナビにある」と考えている点も考慮します。
 
 
 
 
 
 

左ナビに最適な要素とは?

 
・項目数を多く表示できる
・階層表示できる
 
 
この2点をフルに活用できるのが「商品カテゴリ表示」です。
 
雑貨屋さんの商品カテゴリを例にすると、
 
・アクセサリー
・ファッション
・インテリア小物
・文房具
・キッチン雑貨

など、項目数が多い上
 
【アクセサリー】
・ヘアーアクセサリー
・ネックレス
・ブレスレッド
【ファッション】
・パンツ
・スカート
・ワンピース
・サンダル
・ブーツ
 
などなど、 それぞれの階層表示も必要になります。
 
 
 
こういった理由から、多くのネットショップでは商品カテゴリを左ナビで表示しています。
【商品カテゴリ表示=左ナビゲーション】と考えて間違いないでしょう。
 
 
 
 
 

上ナビに最適な要素とは?

 
・どのページでも最初に表示される
・項目数が少ない分、各々の項目が目立つ 
 
上記から、上ナビには「いつでもどこからでも必要とされる情報を置く」という事が基本的な考え方になります。
 
 
常に必要とされる情報とは?
 
・サイトのトップページ
・決済方法and配送方法
・お問合せ
・カートの中身を見る
 
などになると思います。
 
 
 
 
 
 

左ナビ・上ナビのどちらにも当てはまらなかった要素を考える

 
これまでに登場しなかった要素
 
・商品検索ウィンドウ
・ご利用方法
・メルマガ登録
・規約 and 会社概要
・ショップブログ
・ショップ独自の記事、新製品比較レポなど
 
は、左・上のどちらに表示したら良いのでしょうか?
 
 
「だれからも必要とされる情報、全てのユーザーに見てもらいたい情報は上ナビに」 という事が原則です。
 
これを意識しながら、各々のサイトの個性を考えて配置すると良いでしょう。
 
 
僕の運営するサイトではショップブログはメインサイトと同じデザインレイアウトで、かつ非常に高い頻度で更新しています。
ショップブログが強い武器になる、と考えている為、上ナビゲーションに表示しています。
 
ショップブログが別サイト(無料ブログなど)に飛ぶ場合や、効果的なプロモーションとして機能していない場合、上ナビではなく左ナビでも良いでしょう。
 
「ショップ独自の新製品レポ」などに力をいれている場合、上ナビゲーションでどんどんアピールすると良いでしょう。
 
 
 
 
 
 

まとめ

 
今回はナビゲーションの基本的な使い方を考えてみました。
 
これを参考に、各々のショップにあったサイトの設計をして頂けたら、きっと使い勝手の良いサイトになると思います。
 
 
 
 
機会があれば、より深く掘り下げた「ナビゲーション上級編」を考えてみたいと思います^^
 
 
 
ネットショップのナビゲーション設計でお困りでしたら、是非tyのtwitterにつぶやいてください(・∀・)
 

関連記事