• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

toggleナビゲーション

レスポンシブデザインで作られたサイトでは、通常のナビゲーションメニューと違い、さまざまなナビゲーションの変化パターンが存在します。

ブロックを並べ替えたり、動的にドロップダウンリストに変更してみたりと色々と調整することができるので、レスポンシブサイトを構築する際にご参考ください。

ブロック並び替え その1

ブロック並び替えその1

PC〜タブレットサイズでは横並びのナビゲーションメニューですが、スマートフォンサイズまで狭めると2列になり縦に並び替えられます。こちらのサイトではソースコードも表示してくれているので便利です。

参考:http://dabblet.com/gist/2030070

ブロック並び替え その2

ブロック並び替えその2

こちらもPC、タブレットでは横並びのメニューですが、スマートフォンサイズまで狭めると縦メニューへと変化します。また折りたたみメニューとなっており、多くのメニューがある場合もすっきりと見やすく整理することができます。

参考:http://www.ejhansel.com/responsive-menu/

フライアウト

PC、タブレットでは横並び、スマートフォンサイズではメニューは「menu」タブに格納されていますが、タブをタップすれば左側に隠れていたグローバルメニューが「ニョキ」っと出現します。Facebookのモバイルアプリもこのようになっていますね。

ファーストビューで見せたいコンテンツがたくさんある場合は便利です。

参考:http://codepen.io/bradfrost/full/IEBrz

toggle(トグル)ナビゲーション

toggleナビゲーション

横並びのナビゲーションメニューが、スマートフォンサイズになるとmenuタブに収まり、タップすることで中のメニューが縦方向に開きます。これも上部メニュースペースの節約になるので、見せたいコンテンツを多く表示することができます。

参考:http://codepen.io/bradfrost/full/sHvaz

ドロップダウンリスト

ドロップダウンリスト
こちらはナビゲーションメニューが、幅を狭めるとドロップダウンリストとなってセレクトする形に変化します。こちらもソースコードが表示されているので、参考になります。

参考:http://tinynav.viljamis.com/

コンテンツの共通化で運営者、ユーザー双方にメリットを

いくつかご紹介しましたが、レイアウトパターンに「これ」というものはありません。サイトコンテンツの配置やテイストなどを加味しながら、自身のサイトにあったものを選択していただければと思います。

重要なのは、レスポンシブサイトを構築する際には「コンテンツを共通化」させることです。共通化させることで、サイトの構築・更新を効率化することができ、さらにユーザーを迷わせるリスクも減らすこともできます。

運営者側、ユーザー側双方にとってメリットのあるサイト構築を手がけてください。

aiship 上林