ピックアップコラム
-
Pickup!
プラグインなし!オリジナルSNSシェアボタンの作り方ガイド
-
Pickup!
カラー別にみてみる!WEBサイトにおける配色パターン
-
Pickup!
サイドバーとは?サイドバーを設置するメリットと書き方
-
Pickup!
ワードプレスのプラグインで画像の圧縮・最適化をしてみた
ハンバーガーメニューが進化しているのをご存知ですか?スマホやタブレットの利用者が増えるにつれて、Webサイトの要素すべてにレスポンシブ化が求められています。そこで今回は、スマホではハンバーガーメニューに、タブレットやPCではヘッダーメニューに切り替える方法についてご紹介しましょう。
目次
ユーザビリティーがSEOで重視されている以上、より素早く目的地へと誘導してくれるナビゲーションは、Webサイトにとって欠かせない要素です。
ここで問題となるのが、デバイスごとに違う画面の大きさ!
表示エリアのサイズごとに適切なメニューを設置しなければ、使い勝手が悪いのはもちろんメインのコンテンツを表示させるスペースさえ十分に確保できません。
たとえば、PCでコンテンツを閲覧する場合は、全てのメニューをヘッダーに横並びで表示させたりサイドバーを設けたりする方が便利です。
これに対し、表示エリアが限られているスマートフォンでは、コンテンツ以外の要素に割ける表示スペースがほとんどありません。
そこで重宝するのが、レスポンシブに対応した格納型のハンバーガーメニュー(ハンバーガーリスト)です。
下記画像の左上、赤枠で囲ってあるハンバーガーメニューであれば、必要に応じて表示・非表示が選択でき、コンテンツの邪魔にもなりません。
ちなみに、ハンバーガーメニュー(ハンバーガーリスト)の作り方については、下記の記事で詳しく解説しております。
スマートフォンでWebサイトを閲覧しているユーザーにとって、ハンバーガーメニューが有益なのは紛れもない事実です。
だからと言って、ハンバーガーメニューが全てのデバイスに対して万能という訳ではありません。
特に下記のような理由から、むしろスマートフォンの画面下部に固定表示させる「ボトムナビゲーション」や従来通り「一目でメニューと分かるデザイン」の方が好ましいケースもあるのです。
▼ハンバーガーメニューのデメリット
今では、スマートフォンのUI・UXにおいても評価が分かれており、4項目ほどであればハンバーガーメニューを、5項目以上であれば固定ナビゲーションを採用しているサイトが増えているようです。
なお、レスポンシブのメニューとしても有効なボトムナビゲーションについては、下記の記事をご一読下さい。
ハンバーガーメニューにも固定ナビゲ―ションにも、それぞれ長所と短所があります。
つまり、最も理想的なのは使用するデバイスによって最適なデザインに変化する切り替え式のレスポンシブメニュー!
そこで今回は、下記の3点を盛り込んだ切り替え式レスポンシブメニューの作り方をご紹介します。
▼メニューに盛り込む要素
完成形については下記の「DEMO」をご覧ください。
メニューアイコンもコードで作成すれば余計な素材は必要ありません。
<!-- header --> <header class="header" id="head_wrap"> <div class="inner"> <div id="mobile-head"> <h1 class="logo"> ロゴ </h1> <div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> </div> <nav id="global-nav"> <ul> <li><a href="#menu1">MENU1</a></li> <li><a href="#menu2">MENU2</a></li> <li><a href="#menu3">MENU3</a></li> <li><a href="#menu4">MENU4</a></li> <li><a href="#menu5">MENU5</a></li> </ul> </nav> </div> </header> <!-- /header -->
jQueryのアニメーションはモバイルだと動作が重いため、CSSで設定するのがオススメです。
// 追従ナビ・スマホでハンバーガーメニューになる (function($) { $(function() { var $header = $('#head_wrap'); // Nav Fixed $(window).scroll(function() { if ($(window).scrollTop() > 350) { $header.addClass('fixed'); } else { $header.removeClass('fixed'); } }); // Nav Toggle Button $('#nav-toggle, #global-nav ul li a').click(function(){ $header.toggleClass('open'); }); }); })(jQuery); // ゆっくりスクロールする $(function(){ $('a[href^="#"]').click(function() { var adjust = 0; var speed = 1200; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top + adjust; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); });
ハンバーガーメニューのアニメーションは現在早めに設定していますので、
もう少し落ち着かせたい場合にはdegを調整ください。
※scssで記述しております。
/*ーーーーーーーーーー .header ーーーーーーーーーーー*/ #head_wrap { top: -100px; position: relative; width: 100%; margin: 100px auto 0; line-height: 1; z-index: 999; height: 0px; text-decoration: none; a { text-decoration: none; } .inner { width: 100%; margin: 0 auto; &:after { content: ""; clear: both; display: block; } position: relative; } .logo { float: left; font-size: 36px; } } #global-nav { position: absolute; right: 0; top: 0; ul { list-style: none; font-size: 14px; margin-right: 10px; display: inline-flex; @include sp { display: block; margin-right: 0px; } li{ padding: 20px 10px; &:last-child{ border-right: none; } @include sp { border-right: none; } a { padding: 0 5px; padding: 2px; transition : all .6s ease 0s; box-sizing: border-box; font-weight: bold; &:hover { } } } } } /* Fixed */ #head_wrap.fixed { margin-top: 0; top: 0; position: fixed; height: 100px; transition: top 0.65s ease-in; -webkit-transition: top 0.65s ease-in; -moz-transition: top 0.65s ease-in; z-index: 9999; .logo { font-size: 36px; color: #333; } #global-nav ul li a { color: #333; padding: 0 20px; } } /* Toggle Button */ #nav-toggle { display: none; position: absolute; right: 12px; top: 14px; width: 34px; height: 36px; cursor: pointer; z-index: 101; div { position: relative; } } @include sp { #head_wrap { top: 0; position: fixed; margin-top: 0; width: 100%; padding: 0; .inner { width: 100%; padding: 0; } /* Fixed reset */ .fixed { padding-top: 0; background: transparent; } } #mobile-head { background: rgba(255,255,255,.9); width: 100%; height: 56px; z-index: 999; position: relative; } #head_wrap.fixed .logo, #head_wrap .logo { position: absolute; left: 13px; top: 13px; color: #333; font-size: 26px; } #global-nav { position: absolute; /* 開いてないときは画面外に配置 */ top: -500px; background: rgba(255,255,255,.9); width: 100%; text-align: center; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; ul { list-style: none; position: static; right: 0; bottom: 0; font-size: 14px; margin-top: 20px; li { float: none; position: static; } } } #head_wrap #global-nav ul li a, #head_wrap.fixed #global-nav ul li a { width: 100%; display: block; padding: 5px 0; } #nav-toggle { display: block; } /* #nav-toggle 切り替えアニメーション */ #nav-toggle { span { display: block; position: absolute; height: 4px; width: 100%; background: #666; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; &:nth-child(1) { top: 0; } &:nth-child(2) { top: 11px; } &:nth-child(3) { top: 22px; } } } .open { #nav-toggle { span { &:nth-child(1) { top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); } &:nth-child(2) { width: 0; left: 50%; } &:nth-child(3) { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); } } } } /* #global-nav スライドアニメーション */ .open #global-nav { /* #global-nav top + #mobile-head height */ -moz-transform: translateY(556px); -webkit-transform: translateY(556px); transform: translateY(556px); } }
デザインの余地が無いようにも思えるハンバーガーメニューですが、そうとも言い切れません。
この段落では、レスポンシブかつデザイン性に優れたユニークなハンバーガーメニューを5つご紹介しましょう。
出典:Hamburger Menu To Social Sharing Icons
こちらは、三本線のアイコンをクリックすると、隠れていたSNSマークが出現するハンバーガーメニューです。
もちろん、デバイスごとに最適化されて表示されるレスポンシブになっています。
画像マークを差し替えれば、色々なナビゲーションとして応用できそうですね。
出典:Off Canvas Menu With 3D Effect
クールさと洗練されたスタイリッシュさを兼ね備えたデザインが秀逸なハンバーガーメニュー。
クリエイティブな3Dオフキャンバスメニューならではの存在感が目を引きます。
出典: Hamburger Menu Modal Pop Using GSAP
こちらは、モバイルデバイスに特化したポップアップ形式のハンバーガーメニューです。
タップすると、アニメーションのような動きとともにメニューが出現します。
出典:Hamburger Button To Doughnut Menu Animation
シンプルながら、どこか遊び心をくすぐるアニメーションのハンバーガーメニュー。
ジャンルを問わず、さまざまなWebサイトに応用が効くレスポンシブ仕様になっています。
出典:act2
パッと見、ハンバーガーメニューとは気づかないほどの存在感が魅力。
こちらはイケメン俳優育成ゲームのWebサイトですが、大胆なデザインは参考になるはずです。
Webサイトのメニューは、何よりユーザーにとっての機能性が重要です。
だからこそ、PCには固定ナビゲーションが、スマートフォンにはハンバーガーメニューが定番となっていたのでしょう。
とはいえ、デバイスの多様化が進むにつれてメニュー表示にもレスポンシブ化が求められるようになってきました。
デバイスを問わず常にユーザーが快適に閲覧できるよう、切り替え式のハンバーガーメニューを導入してみてはいかがでしょうか。
受付時間:平日10:00~19:00(土・日・祝日を除く)