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

レスポンシブでヘッダーをデザインするメリットデメリットと方法

スマートフォンやタブレットなどのデバイスで表示が切り替わるレスポンシブなヘッダーメニューのポイント、実装方法を解説いたします。本記事でレスポンシブなヘッダーメニューについての理解を深め、各サイトに合ったヘッダーメニューを実装できるようになりましょう!

どのWebサイトでも必ずと言ってよいほど実装されているのが「ヘッダー」です。グローバルメニューと呼ばれる画面幅いっぱいの横長メニューがほとんどですが、グローバルメニューはレスポンシブ表示でさまざまな形式のメニューに変化します。

本記事では、さまざまなレスポンシブデザインのメニューがある中でも、多く実装されている「ハンバーガーメニュー」「スライドメニュー」「ボトムメニュー」の実装方法について解説します。

レスポンシブデザインとは?

レスポンシブデザインは「閲覧ユーザーの使用するデバイス・ブラウザ・デバイスの横幅に合わせて変化する見やすいWebサイトのデザイン」です。レスポンシブなヘッダーについてまとめた本記事では、各デバイスの横幅に合わせて変化するヘッダーについてご紹介しています。

レスポンシブデザインを実装するメリット

管理しやすい

レスポンシブデザインを設定されたページでは、その多くがデバイスの横幅ごとの表示を指定しています。仮にレスポンシブデザインで指定していない新しい横幅のデバイスが発売されても、横幅の指定を追加するだけで済みます。

また、レスポンシブデザインを設定しないWebサイトの場合、PC版とスマートフォン版の2サイトを作る必要があります。この2サイトはコンテンツは同じでも構成ファイルが違うため、更新する場合は両方の構成ファイルを編集しなければいけません。

しかし、レスポンシブデザインの場合にはPC版とスマートフォン版で同じ構成ファイル内にコードを記載するため、Webサイトの更新が一度で済みます。

URLが1つで済む

レスポンシブデザインを設定しないWebサイトの場合、構成ファイルだけではなくURLも異なります。掲載コンテンツが同じであっても別のURLであるため、検索エンジンからは重複コンテンツとして見做されてしまいます。

これは検索順位が上がらない理由の1つにもなってしまうため、近年ではほとんどの企業がWebサイトにレスポンシブデザインを採用しています。

検索エンジンの上位に表示されやすくなる

Googleでは検索上位に表示されやすくなる項目として「モバイルフレンドリー」や「モバイルファーストインデックス」というものを掲げています。モバイルフレンドリーは「モバイルデバイスのユーザーにとって使いやすかったり見やすかったりする状態であること」という意味であり、モバイルファーストインデックスは「モバイルサイトをメインとしてサイトを評価する」という意味です。

これらの項目の基準を満たしていると検索エンジンの上位に表示されやすくなるため、SEO対策をしたい企業はレスポンシブデザインを前提としてWeb制作を依頼することがほとんどです。

ヘッダーをレスポンシブデザインで実装するメリット

レスポンシブデザインのヘッダーはその多くがトップに固定で表示されています。これによるメリットを2つご紹介します。

各ページの閲覧率を上げる

PC版ではページ下部に移動してもヘッダーが固定されていないことが多いですが、レスポンシブなヘッダーはそのほとんどが固定されています。これによりユーザーが各ページへのリンクを認識しやすくなるため、目的のページ以外も閲覧する可能性が上がります。

すぐ画面遷移できる

コンテンツ量は同じであっても、PC版に比べてスマートフォン版のWebサイトは縦長になりがちです。ヘッダーとフッターに各ページへのリンクを設定していても、トップに戻るか最後まで見ないとユーザーは他のページへのリンクに辿り着けません。

ですが、ヘッダーが固定されている場合には画面内に各ページへのリンクが設定されたメニューがあるため、ユーザーは各ページ画面へと遷移しやすくなります。これはユーザー目線での使いやすさに直結するため、多くのレスポンシブデザインのWebサイトではヘッダーが固定されています。

ヘッダーをレスポンシブデザインで実装するデメリット

トップに固定で表示されることが多いレスポンシブデザインのヘッダーですが、ヘッダーを固定することでデメリットも2つ発生します。

縦画面が狭くなる

ヘッダーを固定している分、コンテンツを表示できる高さ(縦幅)は減少します。これによりページの表示領域が少なくなるため、ユーザーは多めにスワイプをする必要があります。縦に長いWebサイトを苦手とするユーザーもいるため、利便性を取るかは要件やクライアントの意向に合わせる必要があります。

誤操作の可能性が上がる

縦の画面幅が狭いスマートフォン版のサイトで起こりがちなのが誤操作です。ヘッダーを固定している場合下にスワイプするつもりでタップしたら、ページ遷移をしてしまうということは起こり得ます。

このデメリットは後述する開閉できるハンバーガーメニューなどを実装することで対策をとることが出来ます。

レスポンシブなヘッダーの種類

①ハンバーガーメニュー(ドロワーメニュー)

ドロワーメニューと称されることもあるハンバーガーメニューは、多くのWebサイトでレスポンシブなヘッダーデザインとして実装されているメニューです。

ハンバーガーのように並んでいる横三本線をタップすると、グローバルメニューで表示されていたメニューが上下左右の何れかから出現します。

メリット

  • 画面幅のスペースを節約できるため、メニュー数が多くてもスッキリとしたデザインのヘッダーを実装することができる
  • 三本線のメニューであるため、シンプルな印象を与えられる
  • レスポンシブデザインに慣れたスマホユーザーにはメニューであると認識してもらいやすい
  • 実装する際にコーディングがしやすい

ハンバーガーメニューはユーザーがメニューをタップすることでメニューを表示するため、必要な時のみ表示することでスペースを節約することができます。

また、スマホ世代の方は三本線がメニューであるという認識が多いため、メニューを認識してもらいやすい傾向にあります。

デメリット

  • 三本線がメニューであると知らない人にはメニューであると認識してもらえない

スマホサイトにある三本線がメニューであるという認識が増えている一方で、レスポンシブデザインに不慣れで三本線をメニューだと認識していない方もいます。高齢の方に多い傾向にありますが、実際にUXの観点から見るとハンバーガーメニューの横三本線のみはユーザーに認識されにくいのも事実です。

②ドロップダウンメニュー

大阪経済法科大学 入試情報サイト

ドロップダウンメニューは主にPC版のサイトで利用されますが、レスポンシブデザインとして利用されるやすいメニューであり、ハンバーガーメニューにカテゴリ機能を追加したものです。メニューボタンをタップすると、第二階層のページが現れ、第三階層のページがある場合には開閉できるという意味のマークとして▼や+が添えられています。

メリット

  • 誤操作をしてもページ遷移しない
  • メニュー数が少ない時は一覧性に優れる

ドロップダウンメニューはメニュー数が少ない時にユーザーが見やすくなるメニューです。「下層ページへのリンクもアピールしたいけれども、最初から全てを表示すると見にくくなる」という場合によく使われます。使いどころとしては、Webメディアのように投稿が多く、各カテゴリにサブカテゴリが複数存在する時などにおすすめです。

デメリット

  • 階層が多くなると使いにくくなる

第二階層ページの数は少なくとも、階層ごとに分かれる各ページが多くなるとメニューが縦長になってしまい、デバイスによっては縦画面の収まりきらなくなります。これでは視認性も下がる上、ユーザーが目的のページに辿り着きにくくなります。

③ヘッダーナビゲーション

カテゴリーが少ない時におすすめなのが「ヘッダーナビゲーション」です。ヘッダーナビゲーションを公式サイトに実装している任天堂では、大きく分けて5つのカテゴリーを固定表示し、カーソルを合わせる(タップ)することでメニューの詳細が上から流れるように表示されます。

メリット

  • ユーザーに意識して欲しいメニューを強調できる
  • 誰から見てもメニューだと分かる

ハンバーガーメニューと比較すると、レスポンシブなWebサイトに慣れていない方でもメニューであると分かりやすいのがヘッダーナビゲーションです。

また、固定表示することでユーザーがメニューを意識するため、ページ遷移を斡旋しやすくもなります。

デメリット

  • 画面幅が小さいデバイスの場合にコンテンツの表示幅が狭まる

後述のボトムメニューでも同じですが、スマートフォンのような画面幅が狭いデバイスでは、どうしても固定表示がある分コンテンツを表示できる幅が狭まります。そのため、スマートフォンユーザーからすると余計にスクロール(スワイプ)をしなければならないため、邪魔に感じる可能性もあり得ます。

④ボトムメニュー

画面のトップに固定されるハンバーガーメニューやヘッダーナビゲーションとは異なり、画面の一番下に固定表示されるのがボトムメニューです。

ユーザーにアピールしたい内容を絞ってボトムメニューに表示することで、ユーザーにアクションを促しやすいのが特徴的です。

画像で例として上げている三井のリフォームでは、ハンバーガーメニューとボトムメニューを併用することで、ユーザーに印象付けたい項目と一般的なメニューをまとめています。

また、近畿大学の公式サイトではボトムメニューにドロワーメニューを表示するスタイルを取っています。ボトムメニューに表示できるのは強調したい項目だけではないというのが

良く分かる事例です。

メリット

  • 片手でデバイスを操作する際に使いやすい
  • 「お問い合わせ」「資料請求」などのアクションを求める項目の視認性が上がる
  • アイコンなどを併用することで何の項目なのかがわかりやすくなる

デメリット

  • 画面幅が小さいデバイスの場合にコンテンツの表示幅が狭まる

ヘッダーナビゲーションと同様に、固定表示している分コンテンツの表示幅が狭まります。しかし、例として挙げた三井のリフォームのサイトのように、スクロールしている時には非表示という設定も可能です。このような設定をしている場合にはこのデメリットは発生しません。

レスポンシブなヘッダーメニューの作り方

レスポンシブなヘッダーメニューを作るための下準備

レスポンシブなヘッダーメニューを作るためには、以下のような下準備が必要です。それぞれを順番に解説していきます。

  1. Viewportを設定する
  2. スマートフォン、タブレット表示のブレイクポイントを設定する。
  3. レスポンシブ表示時にでPCメニューを非表示にする。
  4. レスポンシブなヘッダーメニューを追加する
  5. レスポンシブなヘッダーメニューをPC画面では非表示にする

Viewportを設定する

レスポンシブデザインを施す上では欠かせないのがViewportの設定です。Viewportは特に仕様に制限がない限り、一般的には内に以下のような記述をします。

ブレイクポイントを設定する

スマートフォン、タブレットの時のみレスポンシブなヘッダーメニューを表示するために、まずはスマートフォンとタブレットの画面幅を指定します。今回はタブレット幅を960px以下、スマートフォン幅を520px以下と仮定して進めます。

レスポンシブ表示時にPCメニューの非表示設定

スマートフォン、タブレットの画面幅の際にはPCメニューは不要なので非表示をします。PCメニューのclassを「global-menu」にした場合、以下の表記になります。

レスポンシブなヘッダーメニューを追加

ここでは特に記載しませんが、レスポンシブ表示の時に表示したいヘッダーメニューのHTMLとCSSを記載していきます。

レスポンシブなヘッダーメニューをPC画面で非表示

レスポンシブなヘッダーメニューはPC画面の時には不要なので非表示設定をします。レスポンシブなヘッダーメニューのclassを「sp-menu」にした場合、以下のような表記になります。以下の例ではタブレット幅以上の時にはレスポンシブなヘッダーメニューを非表示にしています。

ハンバーガーメニューの作り方①CSS

今回は画像のようなハンバーガーメニューを例に作っていきます。実際のデモは以下のリンクから確認できます。

ハンバーガーメニューのサンプルデモ

手順

  1. HTMLを組む
  2. ハンバーガーメニューのCSSを組む
  3. メニュー表示時にボタンが×になるよう設定する
  4. メニューの表示・非表示を設定する

サンプルコード

  • HTMLを組む
  • ハンバーガーメニューのCSSを組む
  • メニュー表示時にボタンが×になるよう設定する
  • メニューの表示・非表示を設定する
  • ハンバーガーメニューのポイント

    • transform: rotate(-45deg);で三本線をメニュー表示時に×に変更
    • Javascriptで実装しないため軽量化を図れる

    ハンバーガーメニューの作り方②jQuery

    今度はCSSだけではなく、jQueryも合わせてハンバーガーメニューを実装する方法をご紹介します。

    jQueryを使ったハンバーガーのサンプルデモ

    手順

    1. HTMLを組む
    2. ハンバーガーメニューのCSSを組む
    3. jQueryを組む

    サンプルコード

    • HTMLを組む
      • ハンバーガーメニューのCSSを組む
    • jQueryを組む

    jQueryで実装するハンバーガーメニューのポイント

    • </body>の直前でjQueryのCDNを読み込む
    • jQueryでハンバーガーボタンをクリックした時に「is-active」というclassを付与する
    • CSSで「is-active」classの位置を設定しておく

    ハンバーガーメニューの作り方③プラグイン

    ハンバーガーメニューの作り方の最後として、プラグインでハンバーガーメニューを実装する方法をご紹介します。今回紹介するプラグイン「drawer.js」は既に公式で出されているCSS,JQueryを読み込み、必要なclassを付与したHTMLと起動のためのjQueryを書くだけでハンバーガーメニューを作れる無料プラグインです。

    drawer.js公式サイト

    drawer.jsを使ったハンバーガーメニューのデモ

    手順

    1. drawer.js指定のCDNを読み込む
    2. drawer.js用のHTMLを組む
    3. jQueryを組む

    サンプルコード

    • drawer.js指定のCDNを読み込む
      • drawer.js用のHTMLを組む
    • jQueryを組む

    drawer.jsで実装するハンバーガーメニューのポイント

    • 公式が出しているCDNを読み込む(必要な場合はローカルに落とす)

      drawer.jsのGithub

    • 指定されているHTMLとjQueryを記載する

    drawer.jsは公式がさまざまなオプションを用意しているため、必要に応じて使い分けましょう。

    ドロップダウンメニューの作り方

    第三階層、第四階層までページリンクがあるドロップダウンメニューの作り方をご紹介します。今回は多階層のメニューを開くための機能をにinputを利用します。

    ドロップダウンメニューのデモ

    手順

    1. HTMLを組む
    2. メニュー全体の基本設定のCSSを組む
    3. ハンバーガーメニューのCSSを組む
    4. パソコン用のドロップダウンメニューCSSを組む
    5. スマホ用のドロップダウンメニューCSSを組む

    サンプルコード

    • HTMLを組む
    • メニュー全体の基本設定のCSSを組む
    • ハンバーガーメニューのCSSを組む
    • ドロップダウンメニューの基本設定CSSを組む
    • PC用のドロップダウンメニューCSSを組む
    • スマホ用のドロップダウンメニューCSSを組む

ドロップダウンメニューのポイント

  • checkbox の input で階層を開閉することで,最上部メニューの id 毎に個別で適用しなくてよい。
  • overflow-y: scroll;でハンバーガーメニューをスクロール可能にしている。

ヘッダーナビゲーションの作り方

今回はトップに固定表示するヘッダーナビゲーションの作り方をご紹介します。今回のサンプルコードデモは以下のリンクから確認できます。

ヘッダーナビゲーションのデモ

手順

  1. HTMLを組む
  2. ヘッダーナビゲーションのCSSを組む
  3. ナビゲーションメニューを固定表示にする
  4. メニューの表示・非表示を設定する

サンプルコード

  • HTMLを組む
  • ヘッダーナビゲーション用のCSSを組む
  • ヘッダーナビゲーションのポイント

    • 固定表示をしたい場合にはposition:fixedを使用する
    • sub-menuの初期設定でheight:0 overflow:hiddenを使用して非表示にする
    • hoverしたらheightがautoになり、overflow:visibleになり見えるようになる
    • positionを固定して左右中央に位置させたい場合には transform: translateX(-50%);を使う

    ボトムメニューの作り方

    ヘッダーナビゲーションとは逆に、ページの一番下に固定されるボトムメニューの作り方をご紹介します。

    今回のサンプルコードは以下のリンクから確認してください。

    ボトムメニューのデモ

    手順

    1. HTMLを組む
    2. ボトムメニューのCSSを組む

    サンプルコード

    • HTMLを組む
    • ボトムメニューのCSSを組む

    ボトムメニューのポイント

    • position:fixedでbottom:0;を指定することでページ最下部に固定する

    ヘッダーがレスポンシブになっているかのチェック方法

    ヘッダーをレスポンシブにしたら、実際に各デバイスの横幅で正しく表示されているかをチェックします。今回は手軽にレスポンシブ表示をチェックできる方法を2つの特徴をご紹介します。

    ①デベロッパーツール

    もっとも手軽にレスポンシブ表示をチェックできるのがデベロッパーツールです。どのブラウザにも標準でついているため、特別何もダウンロードせずブラウザ上でレスポンシブ表示を確認できます。

    デベロッパーツールのおすすめポイント

    • 実際に見ているブラウザ上の特定箇所に使われているHTMLやCSSを即座に把握できる。
    • CSSで装飾されているボタンのhover/active/focusなどさまざまなプロパティに指定されているCSSを把握できる。
    • 参考にしたいWebサイトを見つけた時にコードの書き方を真似できる。
    • ブラウザ上でfont-familyやfont-sizeなどのCSSを変更した時の表示を確認できる
    • 指定したHTMLやCSSが動かない時にエラー箇所を特定できる。
    • スマートフォンやタブレットでの表示をリアルタイムに確認できる。

    ②ブラウザ拡張機能の導入

    レスポンシブ表示を確認するためのツールとして、次に手軽な方法方法はブラウザの拡張機能を使うことです。

    さまざまな拡張機能がありますが、その中でも特におすすめなのが「ResponsiveViewer」という拡張機能です。パソコン画面からiPhoneやAndroid、PC画面など複数画面の表示を一気に確認することができるツールのため、レスポンシブ表示が崩れていないかを一気にチェックできます。

    ResponsiveViewerのおすすめポイント

    • 一気に複数デバイスでの表示を確認できる
    • 各デバイスの縦・横表示を切り替えられる
    • デフォルトにない端末も任意で追加できる
    • WordPressのis_mobile()関数も適用された表示を確認できる

    まとめ

    レスポンシブなヘッダーメニューについて解説しました。紹介した4種類のヘッダーメニューはさまざまなWebサイトで実装されています。サイトの想定ユーザーや要件によってどのヘッダーメニューが適切かは変わるため、どれが一番実装するWebサイトに合っているかを考えて実装しましょう!

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

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

    minweb編集部(株)セルリア

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

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

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

    ダウンロード資料画像

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

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