レスポンシブ対応サイトで使用されているナビゲーションのパターンのまとめ
Post on:2013年6月19日
sponsors
デスクトップ、タブレット、スマフォなどのレスポンシブ対応サイトで使用されているナビゲーションのトレンドを紹介します。
特に小さいサイズになった際に、どのようにアイテムを見せるかさまざまな工夫がこらされています。
Popular Design Trends for Responsive Navigation
下記は各ポイントを意訳したものです。
ブロックレベルのメニュー
まずは、ボックスをベースとしたデザインのブロックレベルのナビゲーションです。表示サイズに合わせて、ボックスのサイズが変わったり、配置が変わったりします。
このサイトは3つのブレイクポイントを持っています。ナビゲーションは常にブロックをベースとしており、小さいサイズになるとロゴの下に重要なリンクが表示されます。
小さいサイズ時のナビゲーション
インライン要素をブロックにしたパターンです。インラインにすると、パターンの再編成が簡単になり、さまざまなサイズに簡単に最適化できます。
小さいサイズ時のナビゲーション
凝縮するナビゲーション
ナビゲーションを凝縮するアイデアは、表示サイズに併せて配置を再編成する時にリンクをより小さいスペースにします。一般的にはヘッダエリアに水平型のナビゲーションを配置する際に、このテクニックを使います。凝縮する際は、適切なパディングを保持したままレイアウトを崩さないようにします。
ナビゲーションのアイテムは4つだけで、パディングを調整しながら表示サイズに合わせてナビゲーション全体が凝縮されます。
小さいサイズ時のナビゲーション
このサイトもアイテムは4つだけで、カラーを使うことでナビゲーションリンクのそれぞれを区別する助けになります。表示サイズを変更すると、それに合わせて少しずつパディングを減らし、余分なスペースが変更されます。
小さいサイズ時のナビゲーション
フォームのセレクトメニュー
フォームのセレクトメニューは、WordPressのテーマの多くに利用されるポピュラーなテクニックです。省スペースにたくさんのアイテムを格納できます。
セレクトメニューで一番大切なポイントは、それがナビゲーションであることをユーザーに伝えることです。ラベルをしっかりと明示し、それがナビゲーションであることを伝えるように、レイアウトをデザインする必要があります。
小さいサイズ時のナビゲーション
元記事ではSmashing Magazineもセレクトメニューのようですが、変更されていました。検索ボックスもデザインが変更されているので、リニューアルでしょうか。
小さいサイズ時のナビゲーション
非表示のドロップダウン
ナビゲーションを隠す時、2つの素晴らしいテクニックがあります。その一つがこの方法で、ナビゲーションボタンをタップすることで、ドロップダウン型のナビゲーションが表示されます。
ボタンをタップすると、上部からナビゲーションが表示されます。アニメーションを使うのは非常に効果的です。
小さいサイズ時のナビゲーション
このタイプのナビゲーションはポートフォリオや個人ブログに向いていると思います。たいていこれらのサイトは多くのリンクを必要とせず、メニューはページの高さを超えることはないでしょう。
小さいサイズ時のナビゲーション
スライドするナビゲーションボックス
ナビゲーションを隠すもう一つのテクニックが、このスライドするナビゲーションです。これは上記のものとは異なり、ボタンをタップするとサイドやトップからスライドインします。
スマフォのサイズになると、ナビゲーションがボタンに変わり、それをタップすると上部からナビゲーションがスライドインします。
小さいサイズ時のナビゲーション
デスクトップ時は水平型のナビゲーションで、スマフォ時になると左角にボタンが表示されます。これをタップすると、左からナビゲーションのパネルがスライドインします。
小さいサイズ時のナビゲーション
終わりに -次のプロジェクトの開始に
レスポンシブ対応のデザインは何年もの間存在していましたが、特に2012年の去年から拡大したように思います。これらのナビゲーションのトレンドが、次のプロジェクトを開始するための出発点になることを希望します。
考慮すべき重要なポイントは、リンクのデザインをどのようにレイアウトの中でフォーマットされるべきです。レスポンシブのアイデアに時間をかけることは、最終のプロダクトを美しいものにするでしょう。
sponsors
