【UIパーツ大全】パンくずリスト（ブレードカラム）[breadcrumbs]参考パーツ一覧

2025.05.09

「パンくずリスト（breadcrumbs）」は階層構造を持つ情報設計においてユーザーの現在位置を明示し、スムーズな遷移を可能にするUIパーツです。本記事ではUIデザインにおけるパンくずリストの基本から、実用的なブレードカラム（Bladeコンポーネント）としての実装例、参考にすべきデザインパターンを一覧形式で紹介します。

パンくずリストとは？

パンくずリスト（Breadcrumbs）はWebページ内の階層構造を視覚的に示すナビゲーションパーツです。以下のような形式で表示されることが多いです。

コピーする編集するホーム > カテゴリ > サブカテゴリ > 現在のページ

名前の由来はグリム童話『ヘンゼルとグレーテル』で、森の中に迷わないようにパンくずを落としたエピソードにあります。

SEOにおけるパンくずリストの重要性

パンくずリストはユーザビリティ向上だけでなくSEO対策にも効果的です。Googleは構造化データとしてパンくずを認識し、検索結果にも表示されることがあります。これによりユーザーにとってクリックしやすくなり、CTR（クリック率）の向上が期待できます。

Google公式ドキュメントでも「パンくずリストを構造化データとして記述すること」を推奨しています。

SEOのポイント

パンくずに<nav aria-label="breadcrumb">などの適切なマークアップを使う
構造化データ（JSON-LDやMicrodata）でスキーマを設定
クリック可能なリンクにする（中間階層にも遷移可能にする）

パンくずリストの種類

パンくずリストには主に3つのタイプがあります。

種類	説明
ロケーション型	サイト構造に基づいて現在地を表示（例：ECサイト）
属性型	商品の属性やタグを示す（例：フィルター機能と併用）
パス型	実際にたどった閲覧履歴を表示（ユーザーごとに変化）

基本的にはロケーション型が主流です。特にECサイトやポータルサイトなどでは必須パーツとなっています。

Bladeコンポーネントとしてのパンくずリスト

Laravelなどのフレームワークを使っている場合、Bladeコンポーネントとしてパンくずリストを管理するのが一般的です。

以下はシンプルなBladeテンプレートの例です。

<!-- resources/views/components/breadcrumbs.blade.php -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    @foreach ($items as $item)
      @if (!$loop->last)
        <li class="breadcrumb-item">
          <a href="{{ $item['url'] }}">{{ $item['label'] }}</a>
        </li>
      @else
        <li class="breadcrumb-item active" aria-current="page">{{ $item['label'] }}</li>
      @endif
    @endforeach
  </ol>
</nav>

コントローラー側での呼び出し

$breadcrumbs = [
  ['label' => 'ホーム', 'url' => '/'],
  ['label' => 'カテゴリ', 'url' => '/category'],
  ['label' => 'サブカテゴリ', 'url' => '/category/sub'],
  ['label' => '商品名']
];
return view('product.show', compact('breadcrumbs'));

ビューでの使用

<x-breadcrumbs :items="$breadcrumbs" />

UIデザインのベストプラクティス

パンくずリストのデザインにはいくつかのポイントがあります。

1. 適切な区切り文字

矢印（>）やスラッシュ（/）など、階層を明確に示す区切り文字を使いましょう。

2. スマホ対応（レスポンシブ）

小さな画面ではパンくずを省略表示したり、ドロップダウンにする工夫が必要です。

3. ホバー・アクティブ状態のスタイリング

ユーザーがクリックしやすく、視覚的に現在位置が分かるようにスタイルを調整します。

参考にしたいUIパーツ一覧

ここでは、実際のUIパターンを確認できるサイトやCSSフレームワークから、参考にすべきパンくずリストのデザインを紹介します。

Tailwind UI

Tailwind CSSを使ったレスポンシブなパンくずのサンプルが豊富にあります。

<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1">
    <li>
      <a href="/" class="text-gray-500 hover:text-gray-700">ホーム</a>
    </li>
    <li>
      <svg class="w-4 h-4 mx-2 text-gray-400" ... />
    </li>
    <li class="text-gray-700">現在のページ</li>
  </ol>
</nav>

Bootstrap

Bootstrapにも公式ドキュメントにシンプルで実用的なbreadcrumbがあります。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Material Design

GoogleのMaterial Designでは、アイコンを使ったモダンなパンくずが紹介されています。主にモバイルアプリでの活用に適しています。

よくあるミスとその対策

ミス	解決策
パンくずが長くなりすぎる	中間階層を省略し、「…」などで省略表示
アクティブ状態のスタイルが曖昧	`.active`クラスに明確なスタイルを指定
スマホ表示で崩れる	`overflow-x: auto;` などでスクロール可能に