パンくずリストの作り方完全ガイド｜HTML・CSS・JavaScriptで実装するナビゲーション

Webサイトを利用する際に「今どのページを見ているのか」「上位のページへ戻るにはどうしたらよいのか」をわかりやすく示すのがパンくずリストです。ユーザーの利便性を高めるだけでなく、SEOの観点でもサイト構造を検索エンジンに伝える役割があります。この記事では、パンくずリストの基礎から、HTML・CSS・JavaScriptを使った実装方法、さらにSEOやデザイン面での工夫についてわかりやすく解説します。初心者の方でもそのままコピペして使えるサンプルコードを用意していますので、実務ですぐに役立てることができます。

パンくずリストとは？その役割とメリット

パンくずリスト（Breadcrumb List）は、ユーザーがWebサイトのどの位置にいるのかを示すナビゲーションの一種です。
例えば、ECサイトで「トップ > 家電 > 掃除機 > コードレス掃除機」という表示があれば、ユーザーは今「コードレス掃除機」のカテゴリにいることが直感的に理解できます。

主なメリットは以下の通りです。

  • ユーザビリティ向上：迷子にならずに上位ページへ戻れる。
  • SEO効果：検索エンジンにサイトの階層構造を明示できる。
  • 直帰率の低下：関連ページへ誘導しやすくなる。

HTMLで作るパンくずリストの基本形

最もシンプルなパンくずリストは、HTMLのリスト要素を使って実装します。

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/category">カテゴリー</a></li>
    <li><a href="/category/item">商品一覧</a></li>
    <li>現在のページ</li>
  </ol>
</nav>

ここでのポイントは、<nav>タグを使ってナビゲーションであることを示すこと、そしてaria-labelをつけることでアクセシビリティを意識することです。

CSSでデザインを整える

HTMLだけでは箇条書きのリストになってしまうため、CSSで見やすく装飾します。

nav ol {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
}

nav li::after {
  content: ">";
  margin-left: 8px;
  color: #666;
}

nav li:last-child::after {
  content: "";
}

このようにすると「ホーム > カテゴリー > 商品一覧 > 現在のページ」と表示されます。矢印の記号（>）を疑似要素で追加するのが一般的な手法です。

JavaScriptを使って自動生成するパンくずリスト

大規模なサイトでは、手動でHTMLを書き換えるのは効率的ではありません。そのため、JavaScriptでURLを解析し、動的にパンくずリストを生成する方法があります。

<nav id="breadcrumb"></nav>

<script>
  const breadcrumb = document.getElementById("breadcrumb");
  const path = window.location.pathname.split("/").filter(Boolean);

  let html = '<ol>';
  html += `<li><a href="/">ホーム</a></li>`;

  let currentPath = "";
  path.forEach((p, index) => {
    currentPath += "/" + p;
    if (index === path.length - 1) {
      html += `<li>${decodeURIComponent(p)}</li>`;
    } else {
      html += `<li><a href="${currentPath}">${decodeURIComponent(p)}</a></li>`;
    }
  });

  html += "</ol>";
  breadcrumb.innerHTML = html;
</script>

これにより、URLの階層に応じて自動でパンくずリストが表示されます。

SEO対策としてのパンくずリスト

Googleはパンくずリストを検索結果に表示することがあります。そのため、構造化データ（schema.org）を用いたマークアップを行うとSEOに効果的です。

<nav aria-label="breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope
        itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/">
        <span itemprop="name">ホーム</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope
        itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/category">
        <span itemprop="name">カテゴリー</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope
        itemtype="https://schema.org/ListItem">
      <span itemprop="name">現在のページ</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

これにより、検索エンジンがパンくずリストを正しく認識しやすくなります。

実用的なカスタマイズ例

パンくずリストは単なるテキストリンクだけでなく、以下のような工夫が可能です。

  • アイコン付きのデザイン（Font AwesomeやSVGを利用）
  • レスポンシブ対応（スマホ表示ではスクロール可能にする）
  • 多言語サイト対応（言語コードを自動で省略）
  • CMSやフレームワークとの連携（WordPress, React, Vueなどでコンポーネント化）

まとめ

パンくずリストは小さな要素ですが、ユーザー体験とSEOの両方に効果があります。
HTMLで基礎を押さえ、CSSで見やすくデザインし、必要に応じてJavaScriptで自動生成することで、効率的かつ実用的なナビゲーションを実現できます。特に大規模サイトでは、スクリプトや構造化データの活用が欠かせません。

「ユーザーが迷わないサイト作り」には、ぜひパンくずリストを積極的に導入してみてください。

タイトルとURLをコピーしました