スマートフォンを利用するユーザーの増加と共に、モバイル端末での表示に対応した、レスポンシブWebデザインが増えています。特にナビゲーションメニューは、ユーザーが頻繁にクリックを行う、重要なユーザーインターフェースです。
ナビゲーションメニューのさまざまなデザイン解決サンプル例をまとめたエントリー「Popular Design Trends for Responsive Navigation」がVandelayDesignBlog.comで公開されていたので、今回はご紹介します。
大きく分けて5つのデザイントレンドに分類されており、今後Webデザイン制作に、レスポンシブデザインを取り入れようという方は、参考にしてみてはいかがでしょう。
詳細は以下から。
ナビゲーションメニューの人気トレンドまとめ
[dropcap1]1[/dropcap1] ブロック状に並べて利用。
ボックススタイルのナビゲーションメニューを利用してみませんか。ウィンドウ幅をリサイズすることで、ボックス幅が変化し、レイアウトが整理し直されます。ブロックスタイルのナビゲーションは、自由なスペースに配置されることが多く、より柔軟なデザインに対応してくれます。
CHECK ウィンドウ幅を変更すると、ナビゲーションメニューがロゴデザインの下に、ブロック状に整列されます。
CHECK メニュー数が少ない場合は、フレキシブルな配置が可能となります。ウィンドウ幅変更で、矢印アイコン付きボックススタイルに変化します。
[dropcap1]2[/dropcap1] ナビゲーションメニューを圧縮して利用。
上記スタイルに似たアイデアに、ウィンドウ幅を変更した際に、狭いスペースを有効活用し、再整列させるスタイルがあります。一般的にヘッダー部分にスペースを十分に利用した、水平型ナビゲーションメニューなどに用いられるテクニックのひとつです。
CHECK こちらのサイトでは、スマートフォン端末から円つらんした場合、アルファベットを縦書きになるようにスタイリングされています。
CHECK ナビゲーションメニューの数が多い場合、ウィンドウ幅を小さくすると、ロゴなどにかぶってしまうことがあります。ナビゲーションメニューを、ロゴの上にスタイリングするよう設定することで、解決しています。
CHECK インライン状に整列されたメニューが、ウィンドウ幅縮小に応じて、垂直方向に整列されます。
[dropcap1]3[/dropcap1] セレクトボックスを利用。
いくつかのWordPressテーマで、利用されているテクニックのひとつに、メニューをドロップダウンスタイルで選択する方法があります。メニューをクリックすることで、直接リンク先に移動し、ユーザーに無駄を与えない設計となっています。
CHECK コンテンツ情報の多いポータルサイトに適したスタイル方法で、導入も簡単なうえ、フォントサイズなどのスタイリングに困らないスペースを、ドロップダウンメニューで確保します。
CHECK ドロップダウンメニューの意図がユーザーに伝わりにくい、というデメリットもあります。こちらのサイトでは、セレクトボックスの上下にラインを入れ、ユーザーの注目を惹く工夫がされています。
[dropcap1]4[/dropcap1] 隠しドロップダウンツールバーを利用。
特によく利用されているナビゲーションメニューのデザインスタイルに、３本ラインアイコンをWebサイトの上部に配置するテクニックです。レイアウトスペースの少ない、モバイル端末表示にもうまく対応してくれます。
CHECK デスクトップ表示とモバイル端末表示によって、ナビゲーションメニューを切り替え、アイコンをクリックすることで、アニメーションと共にコンテンツが展開します。
CHECK このテクニックは通常、ナビゲーションメニューが少ない場合に利用されます。メニューの数が多いと、モバイル表示に収まりきらなくなってしまう可能性があるからです。このサイトでは、ナビゲーションメニューの高さ分、レイアウトがずらしています。
CHECK 階層になったサブメニューがある場合、レイアウトスペースに応じて、ナビゲーションメニュー用スタイルを切り替えましょう。こちらのサイトでは、滑らかなアニメーションを使い、エレガントな印象を演出しています。
[dropcap1]5[/dropcap1] スライド式ナビゲーションボックスを利用。
スマートフォン向けアプリによく見られるテクニックで、ナビ用アイコンをクリックすることで、サイドからコンテンツメニューが出現するという方法です。
CHECK 横並びに配置されたナビゲーションメニューは、ウィンドウ幅を縮めることで、3本ラインアイコンが出現し、クリックすると、ページ上部からリンクメニューが出現します。
CHECK 横サイドからリンクメニューが、スライドしながら表示されるアニメーションが素敵なテクニック。iOSアプリなどでも、よく見られるスタイリングのひとつです。
こちらのエントリーでも、レスポンシブデザインを制作するときのポイントをまとめています。
参照元リンク : Popular Design Trends for Responsive Navigation – Vandelay Design Blog
