ウェブサイトにおいてメニューバー(ナビゲーションバー)は最もよく利用されるパーツのひとつです。
メニューバーを設置していないと、せっかく来てくれたユーザーも何を閲覧できるのか困ってしまいます。
ユーザーフレンドリーなメニューバーはシンプルで分かりやすいものがいいのではないでしょうか。
今回は、ついクリックしたくなるようなデザインのメニューバーを30個まとめた「30 Website navigations That Make You Wanna Click It」をご紹介します。
シンプルで使いやすいメニューバーから、通常時、フーバー時、クリック時などでユニークな変化のあるものまでいろいろ揃っています。
今後のウェブデザイン制作の参考にいかがでしょうか。
詳細は以下から。
思わずクリックしたくなるメニューバーまとめ
選択時はリボンテクスチャを使って表示し、フーバー時には絶妙なグラデーションを使ったウェブサイト。
どこを選択しているのかも分かりやすくてユーサビリティーにもすぐれています。
ビビットな黄色をアクセントカラーにしたダーク系のウェブサイト。
メニュー部分のみ白のグランジテクスチャを使い、分かりやすく本文と分けています。
フーバーすると番号が黄色に変化するのでとても分かりやすいです。
以前「余白スペースをうまく使ったおしゃれなウェブサイト20個まとめ」で紹介したサイトですが、シンプルなデザインのメニューバーを使っています。
フーバーするとカラフルなパステルカラーのラインが現れて、どこにカーソルがあるのかわかりやくなっています。
ラインのみのシンプルなデザインですが、色を変更したりいろいろ参考になります。
手書き風デザインがかわいいショッピングサイト。
メニュー部分にアイコンをデザインすることでユーザーにも分かりやすいですね。
最近のメニューバーのトレンドのひとつとして、ライティングエフェクトを使ったウェブサイトもよく見かけます。
こちらは、フーバー時にメニュー下部分が少しだけ明るくなるライティングエフェクトが使われています。
シンプルですが、赤と黒のコントラストがとても分かりやすいメニューバーになっています。
使われているフォントもウェブサイトとうまくマッチしていますね。
レザーテクスチャを使ったユニークな縦型メニューバー。
メニューよりさらにドロップダウンで詳しく説明しているあたりとても参考になります。
確かに動きがあり、どんどんクリックしたくなりました。
落書き風の手描きデザインを使ったウェブサイト。
ウェブサイトに使われている色が限られているので、シンプルで見やすくなっています。
2009年のウェブトレンドのひとつ「型押しデザイン」を使ったウェブデザイン事務所のウェブサイト。
立体的なメニューバーがスムーズに変化していきます。
シンプルですが、色使いなど個人的にとても好きなサイトのひとつ。
メニューバーとスライダーを一緒に使い、タブメニューでデザインしています。
タブはどうしても次が気になりクリックしてしまうという深層心理が働くようです。
メニュー部分の▼マークにカーソルを合わせるとドロップダウンで展開します。
分かりやすくカテゴリー分けする必要がありますが、参考にしたいテクニックのひとつです。
Appleのウェブサイトで使われているメニューバ-風デザインもよく見かけるデザインのひとつです。
シンプルなだけアクセントカラーに色を加えるだけでもかわいくてポップな印象になりますね。
参照元サイトにはこの他にもメニューバー制作の時に参考になるウェブサイトがたくさん掲載されています。
よろしかったら、合わせてどうぞ。
[参照元 : 30 Website Navigations That Make You Wanna Click It – WebDesignLedger]