Advertisement

navitrend2013_top

 

スマートフォンを利用するユーザーの増加と共に、モバイル端末での表示に対応した、レスポンシブWebデザインが増えています。特にナビゲーションメニューは、ユーザーが頻繁にクリックを行う、重要なユーザーインターフェースです。

 

 

ナビゲーションメニューのさまざまなデザイン解決サンプル例をまとめたエントリー「Popular Design Trends for Responsive Navigation」がVandelayDesignBlog.comで公開されていたので、今回はご紹介します。

 

 

大きく分けて5つのデザイントレンドに分類されており、今後Webデザイン制作に、レスポンシブデザインを取り入れようという方は、参考にしてみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

ナビゲーションメニューの人気トレンドまとめ

 

[dropcap1]1[/dropcap1] ブロック状に並べて利用。

 

 

ボックススタイルのナビゲーションメニューを利用してみませんか。ウィンドウ幅をリサイズすることで、ボックス幅が変化し、レイアウトが整理し直されます。ブロックスタイルのナビゲーションは、自由なスペースに配置されることが多く、より柔軟なデザインに対応してくれます。

 

 

William Csete

1william-csete-portfolio-responsive-nav

 

CHECK ウィンドウ幅を変更すると、ナビゲーションメニューがロゴデザインの下に、ブロック状に整列されます。

 

 

Deren Keskin

2deren-keskin-responsive-navigation-design

 

CHECK メニュー数が少ない場合は、フレキシブルな配置が可能となります。ウィンドウ幅変更で、矢印アイコン付きボックススタイルに変化します。

 

 

 

[dropcap1]2[/dropcap1] ナビゲーションメニューを圧縮して利用。

 

 

上記スタイルに似たアイデアに、ウィンドウ幅を変更した際に、狭いスペースを有効活用し、再整列させるスタイルがあります。一般的にヘッダー部分にスペースを十分に利用した、水平型ナビゲーションメニューなどに用いられるテクニックのひとつです。

 

 

Oliver Russell

3oliver-russell-website-navigation-horizontal

 

CHECK こちらのサイトでは、スマートフォン端末から円つらんした場合、アルファベットを縦書きになるようにスタイリングされています。

 

 

Bodhum

4bodhum-network-website-responsive-layout

 

CHECK ナビゲーションメニューの数が多い場合、ウィンドウ幅を小さくすると、ロゴなどにかぶってしまうことがあります。ナビゲーションメニューを、ロゴの上にスタイリングするよう設定することで、解決しています。

 

 

Truf

5truf-creative-responsive-website-nav

 

CHECK インライン状に整列されたメニューが、ウィンドウ幅縮小に応じて、垂直方向に整列されます。

 

 

 

[dropcap1]3[/dropcap1] セレクトボックスを利用。

 

 

いくつかのWordPressテーマで、利用されているテクニックのひとつに、メニューをドロップダウンスタイルで選択する方法があります。メニューをクリックすることで、直接リンク先に移動し、ユーザーに無駄を与えない設計となっています。

 

 

Smashing Magazine

6smashing-magazine-responsive-homepage

 

 

CHECK コンテンツ情報の多いポータルサイトに適したスタイル方法で、導入も簡単なうえ、フォントサイズなどのスタイリングに困らないスペースを、ドロップダウンメニューで確保します。

 

 

Japi Blog

7japi-blog-responsive-navigation-select-menu

 

CHECK ドロップダウンメニューの意図がユーザーに伝わりにくい、というデメリットもあります。こちらのサイトでは、セレクトボックスの上下にラインを入れ、ユーザーの注目を惹く工夫がされています。

 

 

 

[dropcap1]4[/dropcap1]  隠しドロップダウンツールバーを利用。

 

 

特によく利用されているナビゲーションメニューのデザインスタイルに、3本ラインアイコンをWebサイトの上部に配置するテクニックです。レイアウトスペースの少ない、モバイル端末表示にもうまく対応してくれます。

 

 

Performance Marketing Awards

8marketing-awards-website-toolbar-nav

 

CHECK デスクトップ表示とモバイル端末表示によって、ナビゲーションメニューを切り替え、アイコンをクリックすることで、アニメーションと共にコンテンツが展開します。

 

 

Treehouse Blog

9treehouse-blog-responsive-menu-mobile

 

CHECK このテクニックは通常、ナビゲーションメニューが少ない場合に利用されます。メニューの数が多いと、モバイル表示に収まりきらなくなってしまう可能性があるからです。このサイトでは、ナビゲーションメニューの高さ分、レイアウトがずらしています。

 

 

Tigerlily

10

 

CHECK 階層になったサブメニューがある場合、レイアウトスペースに応じて、ナビゲーションメニュー用スタイルを切り替えましょう。こちらのサイトでは、滑らかなアニメーションを使い、エレガントな印象を演出しています。

 

 

 

[dropcap1]5[/dropcap1] スライド式ナビゲーションボックスを利用。

 

 

スマートフォン向けアプリによく見られるテクニックで、ナビ用アイコンをクリックすることで、サイドからコンテンツメニューが出現するという方法です。

 

 

KIN HR

11kinhr-responsive-homepage-navigation

 

CHECK 横並びに配置されたナビゲーションメニューは、ウィンドウ幅を縮めることで、3本ラインアイコンが出現し、クリックすると、ページ上部からリンクメニューが出現します。

 

 

Sequence

12sequence-startup-navigation-sliding-panel

 

CHECK 横サイドからリンクメニューが、スライドしながら表示されるアニメーションが素敵なテクニック。iOSアプリなどでも、よく見られるスタイリングのひとつです。

 

 

 

レスポンシブWebデザインのメリット、デメリット比較まとめ

こちらのエントリーでも、レスポンシブデザインを制作するときのポイントをまとめています。

 

 

参照元リンク : Popular Design Trends for Responsive Navigation – Vandelay Design Blog