クリエイティブで革新的なナビゲーションメニューデザインまとめ

SumAll_mini

 

Webサイトには、個性があります。それは、サイト運営をしている人物や団体のオリジナリティーを、映し出しているのかもしれません。

 

 

ユーザーがあなたのサイトを訪れてくれたとき、あなたは星の数ほどあるWebサイトの中でも目立って、印象をアピールしたいと思うでしょう。そんなときに、コンテンツはもちろん重要ですが、個性を表現する、ユニークな機能やレイアウトを採用することも、大事なポイントになってきます。

 

 

海外デザインブログSmashingMagazine.comで、ユニークで革新的なナビゲーションメニューデザインを採用した、Webサイトをまとめたエントリー「Creative and Innovative Navigation Designs」が公開されていたので、今回はご紹介します。

 

 

 

詳細は以下から。

 

 

 

クリエイティブで革新的なナビゲーションメニューデザインまとめ

 

ToyBox

一見ナビゲーションメニューは上部に設置されているように見えますが、マウスをウィンドウ左側にあわせると、詳細メニューが出現します。

Toybox1_mini

 

 

 

LayerVault

カラフルでたのしいアニメーションを随所に織り交ぜ、ミニマルデザインによりインパクトを与える仕掛けとなっています。

LayerVault_mini

 

 

 

Minimal Monkey

各コンテンツごとに、カラフルに配色されたレイアウトとは別に、AboutとContactページは、上部からスライド表示される、ユニークアイデアを採用。

Minimal-Monkey_mini

 

 

 

Olivier Bossel

ナビゲーションメニューを選択すると、ピクセル状に爆発するエフェクトがユニークなWebサイト。思わずクリックしたくなることで、より多くのコンテンツにリーチすることができます。

Olivier-Bossel-1_mini

 

 

 

SilkTricky

マウスカーソルをあわせると、動き出すサムネイル用エフェクトに、ページ遷移なしで閲覧できる、アニメーション付きコンテンツ展開など、見ているユーザーを飽きさせない工夫が。

Silk-Tricky_mini

 

 

 

Escape Flight

空港にある発着時刻表を連想させる、固定トップナビゲーションメニューは、旅行を本題としたWebサイトテーマに最適です。

Escapeflight_mini

 

 

 

Second Story Interactive Studios

水平方向にスクロールするレイアウトに、コンテンツごとに独立したスクロールバーを出現させる、見ているだけでもワクワクするデザイン。

Second-Story_mini

 

 

 

Derek Boateng

スクロールしていくと、ロゴとナビゲーションメニューが縮小リサイズされる、アニメーションが素敵なWebサイト。

Derek-Boateng_mini

 

 

 

Mostly Serious

プカプカと風船のように漂う、各ナビゲーションメニュー用リンクもユニークですが、コンテンツページからホームへ戻るときには、サークル兄エーションを使った、ページ遷移エフェクトが追加されています。

Mostly-Serious_mini

 

 

 

Tsto

メインコンテンツ用ナビゲーションメニューを、ウィンドウ四隅に設置した、奇抜なレイアウト方法。

Tsto1_mini

 

 

 

Lowdi

デスクトップやスマートフォンでの閲覧にも対応する、レスポンシブデザインの新しい可能性を感じさせてくれる、レイアウトデザインが◎。

Lowdi_mini

 

 

 

Combadi

ヘッダー部分にメインコンテンツとなる3つを、余白スペースたっぷりに配置し、ホバーすることで、アニメーション展開するユニークな仕掛け。

Comabdi_mini

 

 

 

The Sartorialist

オシャレ人物のファッションスナップを掲載する、ファッションブログサイトのひとつで、サムネイルをホバーすると追いかけてくる、追尾型ナビゲーションを採用。

The-Satorialist_mini

 

 

 

Lift Interactive

文庫本風に並べられたコンテンツは、ホバーすると立体3Dで動きが表現された、ハイブリッドレイアウトが特長。

Lift_mini

 

 

 

The WallerCreek

ホバーすると詳細情報を表示する、アニメーションタブが素敵なサイトで、動きを追加したことで、エレガントな雰囲気を演出します。

Wallcreek_mini

 

 

 

Barcamp Omaha 2012

オンライン型インビテーション招待ページで、イベント内容をシングルページにまとめています。

Barcamp-Omaha_mini

 

 

 

Mountain Report

ゲレンデ情報をリアルタイムで教えるサイトで、右側に表示された温度にマウスをあわせると、週間天気予報がアニメーション付きで展開される、素敵ギミック。

Snowbird_mini

 

 

 

Etch

画面幅に応じて切り替わるメニューアイコンは、あらゆるデバイスで閲覧しているときも迷いにくく、ブランドイメージも統一することが可能。

Etch_mini

 

 

サムネイル@ : Analytics for Marketers – SumAll.com

参照元リンク : Creative and Innovative Navigation Designs – SmashingMagazine.com