レスポンシブ対応サイトで使用されているナビゲーションのパターンのまとめ

デスクトップ、タブレット、スマフォなどのレスポンシブ対応サイトで使用されているナビゲーションのトレンドを紹介します。

特に小さいサイズになった際に、どのようにアイテムを見せるかさまざまな工夫がこらされています。

サイトのキャプチャ

Popular Design Trends for Responsive Navigation

下記は各ポイントを意訳したものです。

ブロックレベルのメニュー

まずは、ボックスをベースとしたデザインのブロックレベルのナビゲーションです。表示サイズに合わせて、ボックスのサイズが変わったり、配置が変わったりします。

サイトのキャプチャ

Willam Csete

このサイトは3つのブレイクポイントを持っています。ナビゲーションは常にブロックをベースとしており、小さいサイズになるとロゴの下に重要なリンクが表示されます。

サイトのキャプチャ

小さいサイズ時のナビゲーション

サイトのキャプチャ

deren keskin

インライン要素をブロックにしたパターンです。インラインにすると、パターンの再編成が簡単になり、さまざまなサイズに簡単に最適化できます。

サイトのキャプチャ

小さいサイズ時のナビゲーション

凝縮するナビゲーション

ナビゲーションを凝縮するアイデアは、表示サイズに併せて配置を再編成する時にリンクをより小さいスペースにします。一般的にはヘッダエリアに水平型のナビゲーションを配置する際に、このテクニックを使います。凝縮する際は、適切なパディングを保持したままレイアウトを崩さないようにします。

サイトのキャプチャ

Oliver Russell

ナビゲーションのアイテムは4つだけで、パディングを調整しながら表示サイズに合わせてナビゲーション全体が凝縮されます。

サイトのキャプチャ

小さいサイズ時のナビゲーション

サイトのキャプチャ

Bodhum

このサイトもアイテムは4つだけで、カラーを使うことでナビゲーションリンクのそれぞれを区別する助けになります。表示サイズを変更すると、それに合わせて少しずつパディングを減らし、余分なスペースが変更されます。

サイトのキャプチャ

小さいサイズ時のナビゲーション

フォームのセレクトメニュー

フォームのセレクトメニューは、WordPressのテーマの多くに利用されるポピュラーなテクニックです。省スペースにたくさんのアイテムを格納できます。

サイトのキャプチャ

Japi Blog

セレクトメニューで一番大切なポイントは、それがナビゲーションであることをユーザーに伝えることです。ラベルをしっかりと明示し、それがナビゲーションであることを伝えるように、レイアウトをデザインする必要があります。

サイトのキャプチャ

小さいサイズ時のナビゲーション

サイトのキャプチャ

Smashing Magazine

元記事ではSmashing Magazineもセレクトメニューのようですが、変更されていました。検索ボックスもデザインが変更されているので、リニューアルでしょうか。

サイトのキャプチャ

小さいサイズ時のナビゲーション

非表示のドロップダウン

ナビゲーションを隠す時、2つの素晴らしいテクニックがあります。その一つがこの方法で、ナビゲーションボタンをタップすることで、ドロップダウン型のナビゲーションが表示されます。

サイトのキャプチャ

Performance Marketing Awards

ボタンをタップすると、上部からナビゲーションが表示されます。アニメーションを使うのは非常に効果的です。

サイトのキャプチャ

小さいサイズ時のナビゲーション

サイトのキャプチャ

Teamtree House

このタイプのナビゲーションはポートフォリオや個人ブログに向いていると思います。たいていこれらのサイトは多くのリンクを必要とせず、メニューはページの高さを超えることはないでしょう。

サイトのキャプチャ

小さいサイズ時のナビゲーション

スライドするナビゲーションボックス

ナビゲーションを隠すもう一つのテクニックが、このスライドするナビゲーションです。これは上記のものとは異なり、ボタンをタップするとサイドやトップからスライドインします。

サイトのキャプチャ

KIN HR

スマフォのサイズになると、ナビゲーションがボタンに変わり、それをタップすると上部からナビゲーションがスライドインします。

サイトのキャプチャ

小さいサイズ時のナビゲーション

サイトのキャプチャ

Sequence

デスクトップ時は水平型のナビゲーションで、スマフォ時になると左角にボタンが表示されます。これをタップすると、左からナビゲーションのパネルがスライドインします。

サイトのキャプチャ

小さいサイズ時のナビゲーション

終わりに -次のプロジェクトの開始に

レスポンシブ対応のデザインは何年もの間存在していましたが、特に2012年の去年から拡大したように思います。これらのナビゲーションのトレンドが、次のプロジェクトを開始するための出発点になることを希望します。

考慮すべき重要なポイントは、リンクのデザインをどのようにレイアウトの中でフォーマットされるべきです。レスポンシブのアイデアに時間をかけることは、最終のプロダクトを美しいものにするでしょう。

top of page

©2017 coliss