Advertisement

full-screen-menu-top

 

海外デザインブログDesignmodoで公開された「Fresh Trend in Navigation: Full-Screen Menus」の著者より許可をもらい、まとめて日本語抄訳しています。

 

 

ユーザーインターフェースにとって重要な、メニューデザインはトレンドとともに変化しています。いくつかの事例では、ユーザー・エクスペリエンスをさらに洗練した、良い結果が示されていますが、状況によってはお好みの印象を壊してしまいます。特にナビゲーション・メニューにおけるトレンドは、ややこしく感じるかもしれません。

 

たとえば、デスクトップに隠されるように配置されたメニューや、ミニマルなハンバーガーアイコンが現在人気となっています。しかし、ほぼどんなプロジェクトに理想的に当てはまる、フルスクリーンメニュースタイルは、あまりうまく機能しません。ユーザー・エクスペリエンスの邪魔をせずに、幅広い機能を強調することができ、たくさんのデータや文字テキスト、マルチメディアをまとめて表示することができます。もちろん一度クリックしてホームページから離脱しますが、これによってより快適なユーザー体験を提供することができます。

 

 

今回は、フルスクリーン・ナビゲーションメニューを利用している、参考にしたいウェブサイトデザインをまとめてご紹介します。

 

 

 

詳細は以下から。

 

 

 

フルスクリーン・ナビゲーションメニューを使った、参考にしたいウェブデザインまとめ

 

Maecia

1-Maecia

 

スチームパンク風のデザインに、ユニークで洗練された雰囲気を演出しているMaecia。イメージ画像をベースにした、フルスクリーンで展開するナビゲーションは、ダイナミックなトップページと全体のデザインがうまくマッチしています。

 

 

Olcese

2-Olcese

 

Olceseでは、ユーザーによっていくつかのメニューを選択し、よりウェブサイトをたのしんでもらうのと同時に、ブランドイメージを補強しています。ユニークな写真やグラフィックなど、たのしくなるエフェクトを使った、グリッドスタイルのナビゲーションメニューを採用しています。これらのデザイン要素を組み合わせることで、ウェブサイトの重要な役割を担っています。

 

 

Moeko Abe

3-Moeko-ABE

 

写真家のオンラインポートフォリオではどのようなことができるとよいでしょう。絵画のように並べられたイメージ写真が、背景を暗くしたスクリーンにふわりと出現し、各リンクへとユーザーを誘導します。

 

 

Conference Awwwards

4-Conference-Awwwards

 

HTML/CSS/JSによって実現した最先端のアニメーションを採用し、スクリーン全体をナビメニューが覆うという、ユーザーの視線を集めるのという方法も理がかなっています。

 

 

Drygital

5-Drygital

 

鮮やかでゴージャスなグラデーションを使い、スクリーン画面全体に表示されることで、楽しさやポジティブな官女を表現しています。半透明カンバスを利用することで、ランディングページのビデオ動画が透けています。

 

 

Alman’s Design

6-Alemans-Design

 

デザイン全体とナビゲーションメニューをシームレスにデザインし、ビジュアルの良さにも貢献しています。アニメーションを背景に活用した、ユニークな解決方法を採用しています。

 

 

Mas Industries

7-Mas-Industries

 

イメージ画像をベースに、ハンバーガーメニューをクリックすることで展開するナビゲーションが特徴です。メタル系部品を並べることで美しさを兼ね備え、背景とのコントラストがやや弱いですが、スタイリッシュなデザインに仕上げています。

 

 

Danne Olsson

8-Danne-Olsson

 

美しい風景画を背景イメージに利用し、ナビゲーションをクリックするたびに、控えめな回転アニメーションが明るい背景カラーとともに出現します。

 

 

Impossible Bureau

9-Impossible-Bureau

 

トップページを4つのカラムに分け、主要な項目を見逃さないように工夫されたナビゲーションスタイル。各リンクにマウスをホバーさせると、美しいグラデーション背景と文字テキストが、関連するイメージ写真と一緒に表示されます。

 

 

Voisins

10-Voisins

 

こちらのサイトでは2種類のメニューが良いうされています。ひとつはトレンドにもなっている、ハンバーガー型アイコンで展開し、もうひとつはスクリーン全体にビデオ動画を使って魅力的に見せています。

 

 

Fornace Studio

11-Fornace-Studio

 

左上に固定されたアイコンをクリックすると、手に持ったスマートフォンがアニメーション付きで移動し、各リンクをタップできるという、ユニークな解決方法を採用しています。

 

 

Wibgriffe

12-Webgriffe

 

控えめ目なデザインにキャッチコピーや細字の見出しタイトル、ゴーストボタン、スタイリッシュなグラフィックにフォーカスを当てており、サイトのテーマとも見事にマッチしています。

 

 

Moma

13-Moma

 

メニューをクリックすることで、アニメーション付きでイメージ画像リンクが表示されることで、自然と他の主要なコンテンツへと、ユーザーを遷移させます。

 

 

Giaco Morelli

14-Giaco-Morelli

 

太字で強調された各種コンテンツが、半透明レイヤーを重ねてフルスクリーンで表示され、スムーズな動きがユーザーの注目を惹き、サイトの重要なパートを担います。

 

 

Gianluca Bocchi

15-Gianluca-Bocchi

 

余分なデコレーションなどを一切省いた、洗練されたミニマルデザインが印象的なサイトで、ランディングページを3つのセクションに分けることで、ユーザーが迷わずに他のコンテンツへと移動することができます。

 

 

Elliot Lepers

16-Elliot-Lepers-1

 

カラムごとに各セクションを分け、水平方向のフルスクリーンスライダーで展開するナビゲーションメニュー。通常とは異なるスタイルですが、主要なプロジェクトへとユーザーを誘導します。

 

 

Fahrenheit

17-Fahrenheit-1

 

ベーシックな4つの項目に分けられたナビゲーションメニューを、すべてのページに配置することで、優先順位を確認することができます。

 

 

N3RD

18-N3RD-1

 

最初のページ自体がナビゲーションメニューとして機能し、モバイルやタブレット端末など関係なくすべてのプラットフォームで、うまく表示されたシンプルでエレガントなスタイル。

 

 

ivxvixviii

19-ivxvixviii-1

 

幾何学模様に影響され、イメージ写真と控えめなアニメーションエフェクトが、洗練された印象のナビゲーションメニュー。左端に固定されたユニークなスタイルは、ユーザーがよりコンテンツに興味を持つように工夫されています。

 

 

The Colors of Motion

20-The-Colors-of-Motion-1

 

文字テキストを表示しないナビゲーションメニューで、最初扱い方に困ってしまうかもしれません。デザイナーはあまり見かけない方法で、それぞれのタイトルに対応することで、テーマとマッチさせています。

 

 

トレンドの影響を受け、ナビゲーションメニューのスタイルは変わります。フルスクリーンメニューを採用することは、ウェブデザインのさまざまな問題を解決できる、win-winな方法のひとつかもしれません。

 

 

参照元リンク : Fresh Trend in Navigation: Full-Screen Menus – Designmodo