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

☓ 閉じる

6Jul2012

ネットショップのサイドメニューは右と左どちらが有利なのか?

ネットショップにおけるサイドメニューの役割
ある分野において「プロフェッショナル」と「学者」の違いは、根拠をデータによって客観的に立証できるか?だと思います。

例えば「経営学者」と「敏腕社長」の違い。

敏腕社長は自らの直感で成功を掴みますが、経営学者はデータにより成功の理由を解き明かします。

今回は表題の件について思考実験をしてみます。

思考実験というと学術的ですが、計測して実験できるのに面倒だからやらない、というのが本音です。

僕は学者ではないので、実験からデータを取って理論を立証しないでもいいんです 笑

1. ネットショップにおけるサイドメニューの役割

1.1. ネットショップの基本形

サイドメニューは一般的に「カテゴリーリスト」として使われます。

ネットショップではL字型のナビゲーションが用いられ、上部メニューには重要ページへのリンクが設置されます。

重要ページとは「トップページ」「ショッピング」「送料・決済方法」「お問い合わせ」などですね。

そしてサイドメニューには、取り扱っている商品のカテゴリーがリストされます。

1.2. 一本釣り型ネットショップの登場

この基本形を用いないネットショップもあります。

僕は”一本釣り型”や”楽天型”と呼んでいますが、一つのページで一つの商品を徹底的に紹介してその商品だけを売る、という1ページ完結型のページです。

このような完結型ページを最近では”ランディングページ”と呼ぶようです。

※本来のランディングページとはアクセス解析においてサイト内の最初に表示されたページを指す言葉でしたが、最近は「ランディングしてそこで制約する」という意味合いに変化したようですね。

このパターンの販売戦略をとっている場合はサイト内の巡回率を上げる必要性が低いせいか、サイドメニューなどのナビゲーションが整理されていないケースが非常に多いと感じます。

みなさんもショッピングモールに出店している激安ネットショップで「サイドメニューが使いにくい」「商品が探しにくい」と感じた経験はないでしょうか?
それは、巡回率よりも1ページでの決定力に賭けているのが原因なのだと思います。

(実際は巡回率も向上させて購入単価を上げたいのでしょうが、予算の関係や日々変わるイチオシ商品にナビゲーションが対応できず「商品説明=リッチ、サイト自体=使いにくい」という結果になってしまっているのだと思います。)

商品説明に全力を捧げて決定力の高いページを作る場合は、むしろサイドメニューを排除し、商品説明により横幅をダイナミックに利用できるほうが有利に働く事も考えられます。

とは言え完全にサイドメニューをなくしているサイトはほとんど見かけませんので、「商品リストはサイドメニュー」というのは事実上ネットショップレイアウトの大前提となっていると言えます。

1.3. カテゴリーリスト以外の用途

商品カテゴリーリストの他にもサイドメニューに適した表示があります。

・営業カレンダー
・メルマガ、twitterなどの登録
・売り出し中商品のバナー

いずれも上部メニューに表示するほどではないけど、効果的に表示したいサブページ、サブコンテンツです。

言い換えると「ふとした時に無いと困る」コンテンツです。

2. サイドメニューは右?左?

2.1. 左メニューが基本形

サイドメニューは左?右?
L字型レイアウトが基本形だということを確認してきましたが、ではサイドメニューは右と左のどちらが好ましいのでしょうか?

日本で圧倒的なページビューを誇るYahoo!Japanのトップページが左メニューということも影響しているのか、以前は左にメニューを置く形が優勢だったと記憶しています。
(実際は3カラムなので前提が異なりますが、カテゴリーリストは左側にあります)

国内最大のショッピングモール2社も、左カテゴリーです。

2.2. 英語は左から、日本語は右から??

英語など大半の言語圏では左側から文字を読み進めるので、まず初めに左上に視線を合わせます。

逆に日本語圏は右から読むか?というと、実際はそうではなく、日本人はどちらからでも違和感なく読み進められます。

右から読む

・新聞
・漫画(コミック)
・その他縦書きの本

左から読む

・横書きの本

例えば「最近呼んだ本は右開き?左開き?」と聞かれて即答できる人は少ないはずです。
それくらい、縦書き、横書き、右開き、左開きに違和感を感じないのです。

2.3. 日本語圏でもWEBサイトは左上から読み進める

縦書きの媒体では右から、横書きの媒体では左から視線移動することがわかりました。

この法則に従うと、WEBサイトは横書きなので、諸外国と同じく左上から読み始める事になります。

日本語圏のサイトではサイトロゴが左上にある形が圧倒的に多いですし、ウィンドウに対してサイト全体が左寄せのサイトはあっても右寄せのサイトはほとんどありません。

こういった事から、最初に注目を集めるのは上部メニューの左下、で間違い無いと予測されます。

広告業界では以前から視線移動に関してZの法則と言われている手法があります。

(参考サイト)
h視線の移動の法則について
Amazonもやっている!「Zの法則/Fの法則」とは?

WEBサイトにおいてはFの法則というのも言われていますが、どちらも左上が始点になっています。

2.3. マーケティング的にどちらが有利か?

左が重要だとわかった上で、では売上を伸ばすにはどちらが大切でしょうか?

左に本文を置く = 商品説明に精力を注ぐ
左にメニューを置く = ショッピングを楽しんで頂く

これまでの流れを考慮すると、端的には上のような事になります。

左メニュー = 商品を探しやすく、使いやすいショップレイアウト
右メニュー = 商品が真っ先に目に入り、印象的なショップレイアウト

僕はこのように考えています。

「売上が上がるレイアウトは?」と聞かれても絶対的な正解はなく、ショップの性格を考慮して選択するものだと思います。

PetitCottageでは商品説明のワクワク感を大切にしたいので、1年前から本文を左に移動しました。

ネットショップの場合はどちらでも変わらないと思いますが、更新しないコーポレートサイトの場合は左メニューが最適だと言えます。

名刺代わりのコーポレートサイトでは、閲覧者は「どんな製品を扱っているのか?」「社長はどんな人か?」など、目的をもってサイト内を巡回します。
その際に整理されたサイドメニューが使いやすい左側に収まっているほうが、よりユーザビリティーを考慮したデザインだと言えます。

探し物が多いサイト = 左メニュー
1ページで伝えたい物がある = 左本文

判断基準はこれで大方間違いないと思います。

2.4. SEO的にどちらが最適か?

実は今回の記事はこのテーマで書き始めたのですが、話が膨らみ過ぎて別の記事になってしまいました 笑

SEO的にメニュー位置を考えてみます。

ソースコードの上のほうにあるほどキーワードの重要度は上がる、と言われています。

左に本文がある場合は先に読み込まれますから、各ページのオリジナルコンテンツ部分のキーワードが重要視され、結果的にロングテールキーワードを拾いやすくなります。

ただし見た目の位置とソースコードはCSSによって入れ替えられますので、メニューがどちらでも本文をソースコードの一番上に表示させる事ができます。

ちなみに当ブログのソースコードでも本文が一番上に記述されています。

1, 本文
2, サイドメニュー
3, ヘッダー
4, フッター

という順番のソースコードを、CSSによってご覧の形に表示させています。

SEO的には「本文=左」が良い明確な理由があるが、ソースコードと見かけのレイアウトはCSSで入れ替えられる

関連記事