Advertisement

30clickwebsite

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

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

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

 

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

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

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

 

 

詳細は以下から。

 

 

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

 

Billy Tamplin

 

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

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

navigation_26

 

Burciaga

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

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

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

navigation_27

 

Mission Bicycle Company

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

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

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

navigation_2

 

RedVelvetArt

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

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

navigation_4

 

IconDock

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

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

navigation_7

 

Morphix

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

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

navigation_8

 

Utah Travel

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

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

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

navigation_10

 

Hull Digital Live 09

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

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

navigation_12

 

Nosotros

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

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

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

navigation_13

 

Weightshift

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

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

navigation_19

 

Inkd

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

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

navigation_22

 

Bohemian Coding

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

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

navigation_232

 

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

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

 

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