1. オフキャンバスメニューとは？

オフキャンバスメニューとは、画面の外側（キャンバスの外）に隠れているナビゲーションメニューのことです。ボタンを押すと左や右からスライドして表示され、スマートフォンや小さい画面でもスッキリとメニューが使えるのが特徴です。

たとえば、ハンバーガーメニュー（三本線のアイコン）をタップすると、横からメニューが出てくるのを見たことがある人も多いと思います。あれが「オフキャンバス」です。

2. なぜ小画面ではオフキャンバスメニューが便利なの？

スマートフォンやタブレットのような小さな画面では、ナビゲーションを常に表示していると、ページのスペースが狭くなり、読みにくくなってしまいます。

そこで、オフキャンバスメニューを使えば、必要な時だけメニューを開いて使えるので、見やすさ・使いやすさ・整理されたデザインを実現できます。

3. Bootstrapのオフキャンバスメニューを作るには？

Bootstrapでは、特別なJavaScriptを書かなくても、offcanvasクラスを使うだけでオフキャンバスメニューを作れます。

以下のようなパーツを使います。

ボタン：メニューを開くためのトリガー
divタグ：スライド表示するナビゲーション部分

4. スターターテンプレートのHTMLコード

ここでは、Bootstrapでオフキャンバスメニューを作成し、小画面での操作性を改善したスターターテンプレートを紹介します。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>オフキャンバスメニューのスターター</title>
  <meta name="description" content="Bootstrapのオフキャンバスメニューで小画面でも使いやすいレイアウトを初心者向けに紹介。スターターテンプレートで簡単に実装。">
  <meta name="keywords" content="Bootstrap, オフキャンバス, offcanvas, スマホ対応, ハンバーガーメニュー, ナビゲーションメニュー, スターターテンプレート">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar bg-dark navbar-dark">
    <div class="container-fluid">
      <button class="btn btn-outline-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu">
        <i class="bi bi-list"></i>
      </button>
      <a class="navbar-brand ms-3" href="#">My Site</a>
    </div>
  </nav>

  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasMenu">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title">メニュー</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">サービス</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">お問い合わせ</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="container mt-4">
    <h1 class="mb-4">オフキャンバスメニューでスマホ対応</h1>
    <p>このテンプレートでは、ボタンをタップするとメニューが左からスライドして表示されます。画面のスペースを有効活用でき、見た目もスッキリと整います。</p>
    <p>Bootstrapのクラスを使うだけで、初心者でもかんたんに作れるのが魅力です。</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ブラウザ表示

5. より快適なモバイル体験のために

オフキャンバスメニューを導入することで、スマートフォンやタブレットのユーザーも快適にページを閲覧できます。ボタン一つでメニューを開閉できるので、操作に迷うことも少なくなります。

また、画面の横幅に合わせて自動的にデザインが最適化されるのが、Bootstrapの強みでもあります。

6. Bootstrapのオフキャンバスメニューの活用ポイント

ナビゲーションが多いサイトでも、オフキャンバスならメニューをコンパクトにまとめることができます。

特に、スマホファーストを意識したデザインには最適です。見た目がスッキリし、操作性も高く、SEOにも良い影響を与えます。

まとめ

Bootstrapのオフキャンバスメニューは、スマートフォンやタブレットなどの小画面で特に力を発揮する便利なコンポーネントです。ナビゲーションを常に表示すると画面が圧迫されるという問題を解消し、必要なときだけメニューを展開できる仕組みは、現代のモバイル中心の閲覧環境にとても適しています。大きなヘッダーメニューが占有してしまうスペースを最小限にできるため、読みやすさ・操作性・視認性が向上し、ユーザーがページ内の情報を快適に利用しやすくなります。

今回の記事では、オフキャンバスメニューの基本概念と、Bootstrapのクラスを使って初心者でも実装できる具体的なスターターテンプレートを紹介しました。特に役立つ点として、Bootstrapは初期状態からレスポンシブ設計が組み込まれているため、画面幅によるレイアウト崩れに悩むことが少なくなります。さらに、アイコン・ナビゲーション・ボタンなどの部品がすべて統一されたデザインで提供されているため、自前でデザインを調整する手間も大幅に削減できます。

また、Bootstrapの強みは「直感的に理解しやすいHTML構造」であることです。たとえば、メニューのトリガーとなるボタンに data-bs-toggle="offcanvas" を付けるだけで、複雑なJSを自分で書かなくても自然なアニメーションを伴うスライドメニューが動作します。この設計思想は、普段あまりコードを書かないユーザーや、デザインを素早く用意したいサイト制作者にとって非常に魅力的です。

ここでは記事内のサンプルと同じ役割を持ちながら、よりナビゲーション構造を増やし、実用性の高い別バージョンのスターターHTMLを記述します。実際の制作現場ではメニュー項目がさらに多くなるケースも多く、その点を意識したサンプルです。以下のコードでは、トップバーの色、メニュー項目、ページ説明文などを変更し、学んだ内容を応用できるように工夫しています。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スマホ対応オフキャンバスメニューの応用例</title>
  <meta name="description" content="Bootstrapのオフキャンバスメニューを応用し、より実用的なナビゲーションを備えたスマホ向けテンプレートの紹介。">
  <meta name="keywords" content="Bootstrap, オフキャンバス, ナビゲーション, スマホ対応, レスポンシブ, offcanvas, UIデザイン">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
</head>

<body>
  <nav class="navbar bg-primary navbar-dark">
    <div class="container-fluid">
      <button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#globalNav">
        <i class="bi bi-list"></i>
      </button>
      <a class="navbar-brand ms-3 fw-bold" href="#">Responsive Site</a>
    </div>
  </nav>

  <div class="offcanvas offcanvas-start" tabindex="-1" id="globalNav">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title">サイトメニュー</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="offcanvas-body">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#">トップページ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">会社概要</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">サービス一覧</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">料金プラン</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">よくある質問</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">お問い合わせ</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="container mt-4">
    <h1 class="mb-3">オフキャンバスメニューの応用サンプル</h1>
    <p>
      このサンプルは、実際に企業サイトやサービスサイトでも利用しやすい構成に整えています。
      ボタンをタップすると左側からメニューが表示され、小画面でも快適な操作が実現できます。
      Bootstrapのoffcanvas機能を使うことで、初心者でも簡単に導入できる点が魅力です。
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ブラウザ表示

このように、Bootstrapのオフキャンバスメニューはデザインの自由度が高く、必要に応じて項目を追加したり、色を変更したり、コンテンツの構成を調整することができます。特に、情報量の多いサイトほどメニュー整理が重要となるため、訪問者の迷いを減らし、目的のページへ到達しやすい設計を心掛けることが大切です。

先生と生徒の振り返り会話

生徒
「今回の応用サンプルを見て、実際のサイトで使える形がよく理解できました。メニュー項目が増えても見た目が崩れないのが嬉しいですね！」

先生
「そうなんです。Bootstrapのナビゲーションは調整がしやすいので、用途に応じたメニュー構成が作れます。スマホ利用が中心の今は、オフキャンバスがとても有効なんですよ。」

生徒
「メニューが隠れると、画面を広く使えるのもいいですね。コンテンツが読みやすくなるのが実感できました！」

先生
「その通りです。ユーザーが快適に閲覧できるように設計することが、良いサイトづくりの第一歩ですよ。」