モバイルUI進化中!革新的なナビゲーションメニュー実例サンプル10個まとめ

innovative-navigation

 

モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。

 

独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、7〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、3つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。

 

デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。

 

ハンバーガーメニューが進化中!2018年に押さえておきたい最新トレンド5個まとめ

ハンバーガーメニューはもう古い!代わりに使えるモバイル用ナビメニュー5つまとめ

 

 

01. Pub Guide ナビゲーション

 

こちらのWindows OS 向けアプリインターフェースでは、美しい見た目のフォントをつかい、トップページのコンテンツを集約しながら、標準的なWindowsのナビゲーションに独自のユニークなアニメーション以降を追加、実装しています。Pub Guide

 

 

02. ボトム・ナビゲーション

 

上部にあるフィルタ機能と組み合わせ、画面スクリーン下部に配置されたナビゲーションメニュー。機能性だけでなく、魅力的なビジュアルを表現したサンプル例 Bottom Navigation

 

 

03. サイドメニュー・ナビゲーション

 

ユニークなハンバーガーメニューを採用し、開閉時には円形を活用した遷移エフェクトが印象的な Side Menu Navigation

 

 

04. Google Newsstand ナビゲーション

 

Google Newsstand のコンセプトデザインで、ユニークなレイアウトを展開する3階層にまたがるナビゲーションメニュー。トップレベルではトピックに焦点を当て、最も低い階層ではスクリーン幅いっぱいでコンテンツを展開し、読みやすさや可読性を最大限活用しています。

 

 

05. 検索バー付きナビゲーション

innovative-mobile-navigation-05-iloveimg-compressed

 

こちらのモバイルアプリでは、キーワード検索機能をうまくナビゲーションメニューに実装しています。最初に4つのメインメニューをアイコン付きで表示し、フィルタ機能と一緒に検索バーが表示される Reach Search Navigation

 

 

06. オーバービュー・ナビゲーション

 

このナビゲーションコンセプトは、コンテンツを順番に並べた水平レイアウトから、進行状況インジケータを含むコンパクトな垂直レイアウトへの切り替えが印象的なデザイン。Overview Navigation

 

 

07. カラフル・ナビゲーション

 

ハンバーガーメニューをクリックすると、スクリーン全体を使って各種コンテンツをリスト形式でアニメーション表示するサンプル例、Colorful Navigation Animated

 

 

08. サイド・ナビゲーション

 

矢印アイコンをクリックすることで、垂直方向に表示されていたナビメニューが、左側から立体的に展開するアニメーションが素敵なナビゲーションパターン、Side Navigation

 

 

09. ボトム・ナビゲーション

 

このアプリでは、ナビゲーションメニューの中心にある追加ボタンをタップすることで、他のインターフェースはフェードアウトで半透明となり、2つのボタンにフォーカスする、視覚的にもユニークなトランジションを楽しむことができる Bottom Navigation

 

 

10. インタラクション・ナビゲーション

innovative-mobile-navigation-10-iloveimg-compressed

 

このモバイルアプリ向けナビゲーションメニューでは、最初にすべてのコンテンツをスクリーン全体表示し、一回のタップで各コンテンツに移動できるなど非常によく考えられています。ユーザーがスクロールをはじめると、ナビゲーションメニューはハンバーガーメニューに集まり、コンテンツの表示に最適な領域を確保することができます。Interaction Navigation

 

ユーザーが喜ぶ、効果的で使いやすいナビゲーションメニューの重要ポイント10個

 

サムネイル@ : Navigation in UI by Tubik – Dribbble

参照元リンク : 10 Innovative Navigation Examples in Mobile App Design – Speckyboy Magazine