記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

デバイスによって変わるレスポンシブメニューの作り方

さまざまなデバイスが普及している現在では、画面幅に合わせてデザインが変化するレスポンシブ対応が必須です。Webサイトを製作する上で、ユーザーが目的のページに辿り着くために設置されるメニューもレスポンシブ対応が求められます。今回はメニューをレスポンシブ対応することのメリットと、3種類のレスポンシブメニューの実装方法を解説します。

今回はWebサイト上でレスポンシブに変化するメニューについて解説します。各デバイスの横幅に合わせて表示が変化するレスポンシブ対応には、メニューのレスポンシブ表示も含まれます。

  • メニューをレスポンシブ対応させるメリット
  • ハンバーガーメニューの実装方法
  • フリックスクロールメニューの実装方法
  • ボトムメニューの実装方法

今回は以下のポイントに絞って、レスポンシブなメニューについて解説します。

メニューをレスポンシブ対応させるメリットを抑えた上で、各レスポンシブメニューの実装方法を確認しましょう。

メニューをレスポンシブ対応させるメリットは?

PC表示では横一直線に表示されることが多いグローバルメニューは、タブレットやスマートフォンで表示する時はユーザーにとって使いやすいメニューに変化することが求められます。

ではユーザーにとって使いやすいメニューとは、一体どんなものでしょう。具体的には以下の3点が当てはまるメニューが、ユーザーにとって使いやすいメニューであると言われています。

  • 一目見て「メニューである」と分かるデザイン性
  • ユーザーが見つけやすく分かりやすい位置指定
  • スマートフォンやタブレットでタップしやすい

レスポンシブメニュー①ハンバーガーメニュー

別名ドロワーメニューとも言われるハンバーガーメニューは、レスポンシブなメニューの中でも圧倒的に使われている割合が多いメニューです。

三本線で表示されるボタンをタップすれば、上下左右の何処かからメニューが引き出されたり、折りたたまれたメニューが表示されたりとさまざまな表示方法があるメニューでもあるため、デザイン性や遊び心のあるメニューとも言えます。最近ではレスポンシブ対応としてだけではなく、PC表示でもハンバーガーメニューを使用するWebサイトも増えてきました。

ハンバーガーメニューの特徴

  • レスポンシブメニューの王道とも言えるため、レスポンシブ表示に慣れたユーザーにはすぐメニューであると認識されやすい。
  • 一方で三本線のみで表示されるため、初見のユーザーにはメニューとして認識されにくい。そのため、三本線の上下にメニュー等と記載する必要がある。
  • コーディングがシンプルで実装しやすい。
  • ユーザーがタップすることでメニューを表示するため、必要な時のみ表示することでスペースを取らなくて済む。

ハンバーガーメニューの実装方法

ハンバーガーメニューの実装方法はHTMLとCSS、HTML・CSS・Javascript(JQuery)を組み合わせたものの2パターンに分けることができます。今回はそれぞれをまとめてご紹介します。

HTML・CSSだけでの実装

  • HTMLを組む

    • ハンバーガーボタンを実装する

      • メニューの表示・非表示を指定する

実際にこのコードを組んだプレビューが以下になります。

HTML・CSSで実装したハンバーガーボタンプレビュー

HTML・CSS・Javascript(JQuery)での実装

  • HTMLを組む

    • ハンバーガーボタンの実装(CSS)

      • メニューの開閉時の表示設定(CSS)

        • ボタンを押したらメニューが開閉する(JQuery)

実際にコーディングしたもののプレビューは以下です。

HTML・CSS・Javascript(JQuery)のハンバーガーボタン実装プレビュー

実装をおすすめするシーン

ハンバーガーメニューはレスポンシブデザインとして非常に多くのサイトで実装されているため、特にこだわりがない場合にはハンバーガーメニューでレスポンシブ対応をするのが無難です。

  • メニューをヘッダーやフッターで固定表示せず、できるだけコンテンツを表示するスペースを増やしたい
  • 機能面を優先してレスポンシブ対応をしたい時
  • メニュー項目数が一覧として表示するには多い時

レスポンシブメニュー②フリックスクロールメニュー

フリックスクロールメニューは横スクロールすることでメニューの全体を表示できるメニューです。メディア系のWebサイト等で主に使われる、カテゴリーが多いWebサイト等に推奨される形式でもあります。

フリックスクロールメニューの特徴

  • メニューが多い時でもユーザーが見やすい
  • ヘッダーの高さを下げられるため、一覧としてコンテンツを見やすい
  • 一覧性には欠け、隠れている部分のメニューが認識されにくい
  • ユーザーが一目でメニューであると分かりやすい
  • 画像と合わせずテキストだけの表示でも何のページか分かりやすい

フリックスクロールメニューの実装方法

フリックスクロールメニューはHTMLとCSSのみだけで実装できます。

  • HTMLを組む

    • CSSで横にスクロールできるメニューを実装する

このコードで実装したフリックスクロールメニューのプレビューは以下から確認できます。

HTML・CSSだけで実装したフリックスクロールメニュープレビュー

実装をおすすめするシーン

フリックスクロールメニューとハンバーガーメニューのどちらを実装するか迷った際には、メニューの項目数の多さで判断することがおすすめです。そのため、記事カテゴリーなどで表示したい項目が多くなりがちな、メディア系のWebサイトを制作する時に実装を検討するのがおすすめです。

  • ブログやNewsのカテゴリをスマートフォンやタブレットでも分かりやすく表示したい時
  • 第二階層のページメニューとは別に強調したい項目がある時
  • ブログのような投稿要素のある項目の新着表示を目立たせたい時

レスポンシブメニュー③ボトムメニュー

ボトムメニューはヘッダーに固定されるハンバーガーメニューや、フリックスクロールメニューとは異なり画面の一番下に固定表示されるメニューです。これはPC表示では使われることが少なく、スマートフォンやタブレット等のレスポンシブデザインが求められるデバイスで表示されることがほとんどです。

ボトムメニューを実装しているセントレア空港のWebサイトでは、以下の画像のように5つの項目が固定表示されています。

ボトムメニューの特徴

  • アイコンとテキストを合わせて表示することで分かりやすさUP
  • 片手で操作するユーザーにとって使いやすい
  • メニュー項目数を絞って実装すれば押される確率も上がりやすい
  • ユーザーにアクションを求めやすい

ボトムメニューの実装方法

  • HTMLを組む

    • CSSを書く

ボトムメニューの実装プレビュー

実装をおすすめするシーン

ボトムメニューの最大の特徴は「わかりやすさ」です。スクロールする位置を絶妙に邪魔せず、わかりやすくユーザーにメニューの存在をアピールできます。ボトムメニューの実装を

おすすめするシーンとしては、以下のような状況が挙げられます。

  • ユーザーに購入や会員登録のように行動を求めたい
  • メニュー項目数を絞って表示できる時
  • ブログのような投稿要素のある項目の新着表示を目立たせたい

まとめ

メニューのレスポンシブ表示について解説しました。画面幅に合わせてレスポンシブに変化するメニューは、あまり難しくないコードで組まれているためWeb制作初心者の方でも簡単に実装することができます。

各Webサイトが扱うコンテンツによっても推奨されるメニューの種類は異なります。レスポンシブに変化するのは前提として、コンテンツに合った見やすいメニューを実装できるようになりましょう!

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。