ハンバーガーメニューって美味しそうな名前ですね。
よくスマホサイトなんかに使われる事の多い、アイコンをタップすると開閉式でニュっと出てくるナビゲーションの事です。
このサイトでは現在スマホで見た時に使っています↓
三本線のアイコンがハンバーグみたいに見えるからそう呼ばれるようになったんだとか。
こういったタップやクリックなどのアクションに合わせてサイトに動きをつけるような部分の多くはJavaScriptが使われています。
このサイトでも部分的にJavaScriptを使用していますが、ベーシックな開閉の機構はHTMLとCSSだけで出来ています。
今回から前回ヘッダーに実装したメニューを、スマホの際に開閉式ハンバーガーメニューにした方法について解説していこうと思います。
Part.0的な前回記事、はてなブログでの横並びメニューの実装方法の記事はこちら↓
ハンバーガーメニューって必要？不要？論
実際のコード解説の前にパート1はUI/UXについて考えてみたいと思います。
ハンバーガーメニューは何故スマホサイトでよく用いられるんでしょうか。
ハンバーガーメニューがスマホで用いられる理由
PCサイトでもたまに見かけますが、圧倒的にスマホサイトで多いのにはスマホ特有のインターフェースに合わせた理由・メリットがあるからです。
まずはスマホの画面はPCより非常に小さいこと。
小さい画面の中にアピールしたいコンテンツより目立ってナビゲーションが来てしまうと勿体ないですよね。
開閉して閉じられるメニューというのは省スペースで済むので優先的にコンテンツを見せられるというメリットがあります。
アイコンをタップしてアプリを起動したりという、スマホ・タブレットでのOSレベルでの操作に合わせたインターフェースともいえると思います。
ハンバーガーメニューを使うデメリットや代替案
省スペースで助かるメリットに反して、タップして開くまではメニューの内容が見えないというのはデメリットだと思います。
メニュー項目が見えないうえに、ページ移動するために「開いて、選択」という２度のアクションが必要なので、そのまま表示されている状態よりかなり非効率です。
また、三本線のアイコンがメニューだと気づかずスルーされる方もいると思います。
なるべく気づいてもらえるように、アイコンに合わせて「MENU」等表記してたり、そもそも文字のアイコンになってたりするパターンもありますね。
代替案「横スクロールメニュー」
メニュー項目がある程度見えながら省スペースなのが横スクロールのメニューです。
一行分のスペースで済むので、そこまでコンテンツを邪魔しませんし、見えている項目であればそのままタップできるので効率も改善されています。
ただ、こちらもスクロール出来ると気づかれない可能性もあるので対策は必要そうです。
何がベストかはメニューの項目数や、コンテンツの内容にもよる
なんだかんだ結局はサイトの方向性次第ですね。
ただ昔の小さなスマホ画面よりどんどん画面が大きくなってる傾向にあるので、今後も好まれる端末次第で時代によっても変化していくでしょう。
現状はコンテンツの多いサイトは特にページの内容とナビゲーションを分けて見せる方がスマホサイトがすっきり見やすいものになる場合が多いんじゃないかと思います。
では次回パート2でコード解説していこうと思います。
