ウェブサイトにおいてメニューバー（ナビゲーションバー）は最もよく利用されるパーツのひとつです。

メニューバーを設置していないと、せっかく来てくれたユーザーも何を閲覧できるのか困ってしまいます。

ユーザーフレンドリーなメニューバーはシンプルで分かりやすいものがいいのではないでしょうか。

今回は、ついクリックしたくなるようなデザインのメニューバーを30個まとめた「30 Website navigations That Make You Wanna Click It」をご紹介します。

シンプルで使いやすいメニューバーから、通常時、フーバー時、クリック時などでユニークな変化のあるものまでいろいろ揃っています。

今後のウェブデザイン制作の参考にいかがでしょうか。

詳細は以下から。

思わずクリックしたくなるメニューバーまとめ

---

Billy Tamplin

選択時はリボンテクスチャを使って表示し、フーバー時には絶妙なグラデーションを使ったウェブサイト。

どこを選択しているのかも分かりやすくてユーサビリティーにもすぐれています。

Burciaga

ビビットな黄色をアクセントカラーにしたダーク系のウェブサイト。

メニュー部分のみ白のグランジテクスチャを使い、分かりやすく本文と分けています。

フーバーすると番号が黄色に変化するのでとても分かりやすいです。

Mission Bicycle Company

以前「余白スペースをうまく使ったおしゃれなウェブサイト20個まとめ」で紹介したサイトですが、シンプルなデザインのメニューバーを使っています。

フーバーするとカラフルなパステルカラーのラインが現れて、どこにカーソルがあるのかわかりやくなっています。

ラインのみのシンプルなデザインですが、色を変更したりいろいろ参考になります。

RedVelvetArt

手書き風デザインがかわいいショッピングサイト。

メニュー部分にアイコンをデザインすることでユーザーにも分かりやすいですね。

IconDock

最近のメニューバーのトレンドのひとつとして、ライティングエフェクトを使ったウェブサイトもよく見かけます。

こちらは、フーバー時にメニュー下部分が少しだけ明るくなるライティングエフェクトが使われています。

Morphix

シンプルですが、赤と黒のコントラストがとても分かりやすいメニューバーになっています。

使われているフォントもウェブサイトとうまくマッチしていますね。

Utah Travel

レザーテクスチャを使ったユニークな縦型メニューバー。

メニューよりさらにドロップダウンで詳しく説明しているあたりとても参考になります。

確かに動きがあり、どんどんクリックしたくなりました。

Hull Digital Live 09

落書き風の手描きデザインを使ったウェブサイト。

ウェブサイトに使われている色が限られているので、シンプルで見やすくなっています。

Nosotros

2009年のウェブトレンドのひとつ「型押しデザイン」を使ったウェブデザイン事務所のウェブサイト。

立体的なメニューバーがスムーズに変化していきます。

シンプルですが、色使いなど個人的にとても好きなサイトのひとつ。

Weightshift

メニューバーとスライダーを一緒に使い、タブメニューでデザインしています。

タブはどうしても次が気になりクリックしてしまうという深層心理が働くようです。

Inkd

メニュー部分の▼マークにカーソルを合わせるとドロップダウンで展開します。

分かりやすくカテゴリー分けする必要がありますが、参考にしたいテクニックのひとつです。

Bohemian Coding

Appleのウェブサイトで使われているメニューバ－風デザインもよく見かけるデザインのひとつです。

シンプルなだけアクセントカラーに色を加えるだけでもかわいくてポップな印象になりますね。

参照元サイトにはこの他にもメニューバー制作の時に参考になるウェブサイトがたくさん掲載されています。

よろしかったら、合わせてどうぞ。

[参照元 : 30 Website Navigations That Make You Wanna Click It - WebDesignLedger]