つなweB事例ウォッチング！ 多数のページをスマートに誘導しているサイト事例5選

ページ数の多いWebサイトでは、訪問者が見たいコンテンツにどうやって誘導するかが課題となります。ここでは、トップページやグローバルメニューの見せ方を工夫し、スマートなページナビゲーションを実現している事例を5つご紹介します。

函館空港の公式サイト。グローバルメニューは「飛行機にのる」「空港ですごす」「空港に行く」「観光を楽しむ」という4つの大カテゴリに分けられ、そのカテゴリの下にいろいろなページへのリンクが格納されています。作り手側の視点ではなく、あくまで訪問者側がどんな情報が欲しいかという視点に立ってカテゴリ分けされており、使いやすさを感じられます。また、トップページに並んでいるリンクボタンも注目ポイントです。各下層ページへのリンクボタンがアイコン付きで並んでいるのですが、空港構内にあるようなシンプルで直感的なデザインになっているため、一つひとつの文字を追わなくてもすぐに目的のものが見つけられます。

目的達成のノイズを取り除いたレイアウト
CBRE｜賃貸オフィス・貸し倉庫・貸店舗の情報サイト
 

全国の賃貸オフィス・貸し倉庫・貸店舗が探せる物件検索サイト。不動産などを扱うWebサイトは、トップページにたくさんのボタンやリンクがひしめき合っているところが多いですが、このサイトのトップページは本当に必要な動線だけを載せることで、わかりやすいWebサイトになっていると感じます。トップページの上部には「賃貸オフィス」や「貸し倉庫」などのアイコンが大きく配置され、そこからすぐに一覧ページに移動できます。さらにグローバルメニューの一番最初の項目が「物件検索」になっていて、訪問者の多くが最初に行いたい行動へとスムーズに誘導してくれます。メインの物件紹介の項目以外はすべてサブメニューの中に格納しており、ナビゲーションのメリハリが効いていると感じます。

 

つなweBエディターの注目ポイント

トップページを欲張らないことで動線がスッキリ！

事例詳細はこちら

---

ゾーン分けでメニュー項目を整理整頓
ヨコハマハンドメイドマルシェ

全国のクリエイター・アーティストが集まるハンドメイドグッズの展示・販売イベントのオフィシャルサイト。このサイトのPC版グローバルメニューはゾーンを2つに区切り、優先度の高いメニュー項目とサブ的な項目を分けて格納しています。オーソドックスな手法ではあるのですが、このWebサイトはそれぞれのゾーンをハッキリと色分けしたことでスッキリとした印象にまとまっています。また、スマホ版のグローバルメニューが画面下側に固定されている点も注目ポイントです。スマホ用のハンバーガーメニューは画面上に配置されていることが多いですが、画面下側に置くことで指が届きやすく、操作しやすいと感じられます。

 

つなweBエディターの注目ポイント

画面下側の固定メニューが操作しやすい！

事例詳細はこちら

---

2つのメニューの合わせ技
サントリー コーポレートサイト

大規模企業のコーポレートサイトは、とにかくページ数が多くなりがち。グローバルメニューの体裁に頭を悩ませる制作会社も多いのではないでしょうか。サントリーのPC版グローバルメニューは、「商品」「キャンペーン・エンタメ」「環境」といった項目をシンプルに5項目並べたあと、一番端に「MENU」という項目を配置しています。このMENUはいわゆるハンバーガーメニューになっていて、クリックするとフル画面の階層型ナビゲーションが表示されます。古典的なメニュー横並びのナビゲーションとハンバーガーメニューの合わせ技で構成されたナビゲーションです。

 

つなweBエディターの注目ポイント

一見シンプルでありながら奥が深いメニュー構造

事例詳細はこちら

---

バナー付きのメガメニューを採用
日本紙パルプ商事株式会社

日本紙パルプ商事株式会社のWebサイトは、マウスオーバーでサブメニューが表示される「メガメニュー型」のメニューを採用しています（PC版）。メガメニュー型は数多くのメニュー項目を格納できるのがメリットですが、このWebサイトではメガメニューの中にバナー画像を配置することで、ぱっと見で誘導を促す直感性の高いデザインと感じます。また、メニュー内の項目は画像付きのものと画像がないものに分かれていて、画像の有無によって項目の重要度の高さを推し量ることもできます。
もう一つの注目ポイントは、サイト内検索のインターフェイスです。虫眼鏡アイコンをクリックすると、その時点で表示されている要素がすべて隠れて検索窓がオーバーレイ表示されます。訪問者のしたいこと＝検索操作だけに集中できるため、ストレス低減につながると思います。

 

つなweBエディターの注目ポイント

画像の有無で重要度を推測できる

事例詳細はこちら

---

自社サイトの構造を考えていくと、「あれも見せたい、これも見せたい」と欲張ってしまいがちです。トップページやメニューにどんどん要素が増えていってしまいます。その結果、訪問者は見たいページを見つけ出すのが困難になり、ストレスから離脱へとつながってしまいます。「見せたい」という送り手側の気持ちをグッと抑えて、訪問者の「見たい・知りたい」に応えるサイトづくりに挑戦してみましょう。