ナビゲーションバーだけを扱うインスピレーション集
ナビゲーションバーは、いちばん手を抜きやすいパーツです。ロゴを左、メニューを右に置いて終わり。Navbar Galleryはその逆で、ナビゲーションバーだけを集め、うまく作られた事例を並べて選べるようにすることに絞り込んでいます。
現在は数百件の実サイトのナビゲーション実装を収録し、ページ送りで見ていける構成です。どの項目にも元サイトへのリンクが残っているので、飛んだ先で見られるのはデザインカンプではなく、実際に動いている状態のインタラクションです。
分類のしかた
構造のタイプで分かれていて、実際にパターンを選ぶときの考え方に近い並びになっています。
- Static / Sticky：上部に固定され、ドロップダウンを伴わないオーソドックスなナビゲーション
- Dropdown / Flyout：第2階層のメニューを親項目の下に格納したもの
- Mega Menu：大きく展開する複数列のメニュー。カテゴリの多いサイトに向きます
- Side Bar：縦方向のサイドナビゲーション
- Search Bar：検索ボックスをナビゲーションの主体にしたもの
- Announcement Bar：上部の細い帯で告知するタイプ。セールやリリースのお知らせによく使われます
- Full Screen Menu：画面全体を使うメニュー。グラフィック要素と組み合わせることが多いです
- Breadcrumbs：階層を示すパンくずナビゲーション
使い方
ツールというより、選定のためのリファレンス集として捉えるのがしっくりきます。新規プロジェクトでナビゲーションの構造を決めるとき、まずタイプで絞って同種のサイトがモバイルでどう畳んでいるか、CTAをどこに置いているか、スクロール時にどう色を変えているかを眺めるほうが、頭だけで試行錯誤するよりずっと速いです。デザイン段階のコミュニケーションコストも下がります。言葉で説明するより、リンクをそのまま渡したほうが伝わりますから。
サイトはMobbinのスポンサードで運営されていて、投稿とメールマガジンの登録口も用意されています。
