SEO的ウェブサイトUI戦略 – グローバルナビゲーション編

執筆者

株式会社NOBITA代表取締役。グループ企業の株式会社ノイズにてフロントエンドエンジニア兼ディレクターを担当。LIGMAKEPOなどのメディアでは「のび太」名義にてライターとして執筆活動も行っている。

監修

NOIZZ

株式会社ノイズ

http://noizz.co.jp/

マーケティングコンサルティング企業。事業戦略・事業開発支援のほか、MAKEPO等のメディアを展開。ウェブ制作系グループとして株式会社NOBITAを抱えている。

今回から、サイトUIの観点でSEOを考えていきます。ユーザービリティとSEOは密接に関わっています。Googleは有益なコンテンツを評価しますが、それだけでなく、使いやすさ・見やすさも重要視しているからです。ユーザーにとっても、役に立つコンテンツがあるだけでなく、「使いやすいサイト」である方が、当然印象は良いです。

ウェブサイトでとても重要となる部分がグローバルナビゲーション。
レスポンシブデザイン、パララックススクローリングといった、レイアウトに関する変化に伴い、サイト内を誘導するナビゲーションの種類もかなり多様化してきました。様々なナビゲーションのタイプを知り、サイトに適切なものを選んでいきましょう。

ナビゲーションメニューの種類例

設計士

1. 横長

最も一般的なレイアウト。一番よく目にするグローバルナビゲーションではないでしょうか。

利点

パッと見て、メニューだとわかりやすいです。最も多く出回っているレイアウトのため、すぐにナビゲーションだと理解しやすく、使いやすいです。

欠点

数が多すぎると一列に入りきらなくなり、2列や3列になる可能性があります。その場合、高さがとられ、ユーザーが見れる画面範囲が狭くなってしまいます。

事例

desinyディズニー|Disney.jp

softbankソフトバンクセレクション

saitamaさいたま市

2. 縦長

右サイドに縦長に伸びていくナビゲーション。最近よくみるようになりました。

利点

横長ナビゲーションと違って、メニューの数が多い場合にも対応できます。また、すごく目に入ってきやすいです。

欠点

メニュー数が少ない場合には、下がガラ空きになって不自然になる場合があります。

事例

mitsu三菱商事

waseda早稲田大学

techlaboTECH LAB PAAK

3. ドロップダウン

マウスを乗せたらバーっと出てくるやつです。単純に下に出てくるものから、アニメーションで回転して出てくるものなど、出現のパターンは様々です。

利点

メニューの数が多くても、すっきり格納して見せることができます。画面の小さいスマホなどでは重宝します。

欠点

マウスを乗せないと、何があるかわからないため、パッと見では何が表示されているのかわかりにくいです。そのため、ユーザーが気づかずにいる可能性もあります。ドロップダウンを取り入れて直帰率が上がってしまったという話しをよく聞きます。

事例

hikkoshi引っ越し侍

QN5QN5 Music

cosCOSカナダ留学サポートデスク

4. メガメニュー

メガメニューはドロップダウンメニューの発展形。メインメニューをマウスオーバーすると、アイコンやグラフィックとともに複数のサブメニューが表示されるものです。

利点

アマゾンなどのECサイトではお馴染みのレイアウト。カテゴリーが深い階層まである場合や大量のカテゴリを表示する必要ある場合には最適なレイアウトです。

欠点

あまりに多数のメニューやイラストを用いると、ゴチャゴチャした印象になりやすいです。またレスポンシブ時の表示が難しくなります。

事例

amazonAmazon

dentsu電通

sharpシャープ

5. 隠しメニュー

スマホサイトでよく見ます。クリックしたら下や横からメニューが出てくるやつです。横線3本がおなじみ。レスポンシブ対応のときに使う場合が多いですが、最近ではPC表示でも隠しメニューが使われているサイトを見るようになりました。

利点

メニューのスペースを丸ごと省略しているので、ビジュアルを画面いっぱいに見せることができます。グラフィックを強調したい時やシンプルに見せたい時などに有効かもしれません。

欠点

メニューがひと目でわからず、サイトによってはユーザービリティがかなり悪いです。これができるのはメニューの重要度があまり高くないときのみだと思います。

事例

nav-none1Experience the Withings Pulse O₂

nav-none2Squarespace

nav-none3Long Story Short

6. 固定ナビ

コンテンツが移動してもナビゲーションはつねに固定というやつです。最近増えてきましたね。

利点

どれだけスクロールしてもすぐにナビゲーションが確認可能です。ページのどこにいても簡単に遷移することができます。

欠点

高さを取る場合、コンテンツ閲覧の邪魔になることもあります。特にスマホのような画面の狭い場合には、ナビゲーションが画面の30〜40%になってしまうこともありえます。

事例

omaneおまねきWEB

simpriceSIMPRICE

noizzNOIZZ


以上、よく見るナビゲーションのパターンを見ていきました。
今回取り上げたもの以外にも「こんなのもあるよ〜」というものがあれば、ぜひ教えていただけるとうれしいです。

ナビゲーションは、ユーザービリティの観点からかなり重要な部分。当然SEOにも影響してきます。サイトの種類・雰囲気・コンセプト・メニューの数などを考慮して適切なナビゲーションのパターンを選んでいきましょう!