MENU
  • 私たちについて
  • Claude 法人導入
    • 内製AIツール診断
  • サービス
    • WEB制作・サイト設計
    • インタラクティブ診断ツール
    • AI活用メディア構築・運営代行
    • AI×WEB戦略コンサル
    • アプリ・ソフトウェア開発
  • 事業実績
    • 自社メディア運営
    • IPライセンス商品企画
    • VTuber/IPプロデュース
    • EC・実店舗運営
  • IT業界用語辞典
  • AI導入日記
  • お問い合わせ
AIとWEBを、実務に組み込む会社。
株式会社エム・ジー・ケイ
  • 私たちについて
  • Claude 法人導入
    • 内製AIツール診断
  • サービス
    • WEB制作・サイト設計
    • インタラクティブ診断ツール
    • AI活用メディア構築・運営代行
    • AI×WEB戦略コンサル
    • アプリ・ソフトウェア開発
  • 事業実績
    • 自社メディア運営
    • IPライセンス商品企画
    • VTuber/IPプロデュース
    • EC・実店舗運営
  • IT業界用語辞典
  • AI導入日記
  • お問い合わせ
株式会社エム・ジー・ケイ
  • 私たちについて
  • Claude 法人導入
    • 内製AIツール診断
  • サービス
    • WEB制作・サイト設計
    • インタラクティブ診断ツール
    • AI活用メディア構築・運営代行
    • AI×WEB戦略コンサル
    • アプリ・ソフトウェア開発
  • 事業実績
    • 自社メディア運営
    • IPライセンス商品企画
    • VTuber/IPプロデュース
    • EC・実店舗運営
  • IT業界用語辞典
  • AI導入日記
  • お問い合わせ
  1. ホーム
  2. CM Tooltip Glossary
  3. WEB制作・IA
  4. パンくずリスト

パンくずリスト

2026 8/16
WEB制作・IA
2026-08-16

📋 この用語の要点(MGK編集部)

パンくずリストとは、サイト内で今どの階層にいるかを示す小さな案内表示です。トップページから現在のページまでの道筋を並べて見せることで、訪問者は迷わず上の階層へ戻れます。あわせてサイト全体の構造を検索エンジンに伝える手がかりにもなります。検索から個別ページへ直接入ってくる流入が主流になった今、最初に見た1ページだけで離脱させないための基本的な仕掛けとして重視されています。

📖 約5分で読めます。

← 用語集トップへ戻る

目次

「パンくずリスト」とは

パンくずリストは、ページの上部などに「トップ > サービス > 内装工事」のように並ぶ小さなリンクの列です。童話で少年が帰り道の目印にパンくずを落とした逸話にちなむ名前とされます。訪問者に現在位置を知らせ、ひとつ上の階層へ戻る出口を用意する役割を持ちます。地図でいえば、今いる場所を示す印にあたるものです。

基本の構成と三つの型

一般的な構成は次の三つの部品からできています。順序と表記をそろえることが読みやすさにつながります。

  • 起点となるトップページへのリンク
  • 途中の階層(カテゴリーや大分類)へのリンク
  • 現在いるページの名称(ここはリンクにしないのが通例)

設計上の型は、次の三つに整理して考えられます。自社のサイトがどれに当てはまるかを見極めると、実装の判断がしやすくなります。

  • 階層型…サイトの構造そのものをたどる形。もっとも一般的で、中小企業のサイトはまずこれで足ります
  • 経路型…訪問者がたどってきた履歴を並べる形。表示が毎回変わるため混乱を招きやすく、採用例は少なめです
  • 属性型…価格帯や色などの絞り込み条件を並べる形。品数の多い通販サイトで使われます

なぜ重要なのか

入口はトップページだけではない

検索やSNSからの流入では、訪問者は下層のページへ直接入ってきます。会社案内を見ずに、いきなり一つの施工事例や商品説明を読み始めるわけです。そのとき「この会社は何をしているのか」「他にどんな情報があるのか」がわからなければ、そのまま離れてしまいます。パンくずリストは、上の階層という次の一手を押しつけずに示す案内板になります。とくに問い合わせまでに複数のページを読み比べる商材では、この一列が回遊の起点になる場合があります。

構造を伝え、社内の整理にもつながる

検索エンジンはリンクをたどってページの関係を把握します。パンくずリストは各ページがどのカテゴリーに属するかを明示するため、構造の理解を助けるとされます。検索結果の表示にカテゴリー名が使われる場合もあります。ただし順位を保証するものではなく、あくまで土台づくりと考えるのが妥当です。また、パンくずリストが自然に書けないサイトは、そもそも情報の分類が曖昧である場合が多いです。案内表示を設計する作業は、自社の商品やサービスの並べ方を見直す機会にもなります。

実務での使い方・進め方

設置と表記の基本

  • 本文の見出しより上、ページ上部に置きます
  • 区切り記号は「>」などに統一し、ページごとに変えません
  • ラベルはページ名と一致させ、略称や言い換えを混ぜません
  • 現在のページは太字などで区別し、リンクにはしません
  • スマートフォンでの折り返しや省略の見え方もあわせて確認します
  • 文字を小さくしすぎず、指で押せる間隔を確保します

あわせて、画面上の表示だけでなく、階層を検索エンジンが読める形式で記述する方法もあります。多くのCMSでは標準機能や拡張で対応できます。導入後は公開ページを検査ツールで確認し、記述内容と画面表示が食い違っていないかを点検します。

発注側が準備し、判断すべきこと

制作会社に任せる前に、発注側で決めておくと手戻りが減る項目があります。まず、扱う商品やサービスの分類表を紙に書き出し、階層は二段から三段程度に収める方針を持つことです。次に、各カテゴリーの正式な呼び方を社内で一つに決めます。営業資料と料金表で呼び方が違えば、そのままサイトの表記のばらつきになります。判断の基準は「初めて訪れたお客様が、その言葉で自分の探し物を選べるか」です。社内の部署名や業界用語をそのまま並べていないかを確認してください。迷ったときは、実際に問い合わせで多い質問の言葉づかいを優先すると、外れにくくなります。

よくある誤解と注意点

誤解1:検索対策のための飾りである

順位対策として語られがちですが、第一の目的は訪問者の迷いを減らすことです。表示だけ整えて実際の階層と合っていない状態は、利用者にも検索エンジンにも不利益になります。正しくは、情報の分類を整えた結果を見せる表示だと捉えてください。

誤解2:ブラウザの戻る機能があれば不要

戻る操作は直前に見た場所へ帰るだけで、上の階層へは進めません。検索から直接入ってきた訪問者には、戻る先がそもそもありません。二つは代わりになるものではなく、別の役割を持つと考えるのが正しい理解です。なお同じ商品が複数の分類に属するときは、どの階層を代表として見せるかを事前に決めておく必要があります。決めないまま自動生成に任せると、表示が揺れることがあります。

よくある質問

Q. 何階層まで表示すべきですか?

A. 明確な上限はありませんが、四段を超えると読みにくくなる傾向があります。長くなる場合は中間を省略する表示も使われます。まずは階層自体を浅く保つ設計を検討してください。

Q. 小規模なサイトにも必要ですか?

A. 十数ページ程度でカテゴリー分けがないなら、優先度は下がります。一方で商品や事例が増えて分類が生まれた時点で、導入を検討する価値があります。

Q. 既存サイトに後から追加できますか?

A. 多くのCMSでは追加できます。ただし表示だけ足しても、階層の分類が整っていなければ効果は限られます。分類の見直しとあわせて進めるほうが確実です。

WEB制作・IA
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • デザインシステム
  • CMS(コンテンツ管理システム)

この記事を書いた人

山崎 将史

山崎将史(やまざき まさし)。株式会社エム・ジー・ケイ代表取締役。新卒で大手システムインテグレーターの営業部門に配属されて以来、企業のWebリニューアル案件と大学の総合Web構築案件を一貫して担当し、Web構築の現場に立ち続けて25年。営業として顧客の困りごとを解像度高く受け取る感覚と、公開日から逆算して全プロセスを揃えるプロデューサーの視点を培った。大手自動車メーカーのポータルWebリニューアルではプロジェクト責任者を務めたほか、大手パソコンメーカーの公式Webリニューアル、大手通信会社の公式サービスWeb構築、学生数約77,000名・約30,000名規模の総合大学の公式Webリニューアルなど、大規模サイトの構築・リニューアルを担当し、いくつもの難局を経験してきた。企業在職を経て2017年に株式会社エム・ジー・ケイを設立し、代表取締役に就任。並行してライブチャット・配信プロダクション業界に15年以上携わってきた代理店業の経験を活かし、IPライセンス商品の企画、VTuberプロデュース、自社EC運営、AI活用メディア構築まで自社で事業を立ち上げて運用している。X(旧Twitter):@MGK0069。

関連記事

  • 構造化データ
    2026-08-23
  • メタディスクリプション
    2026-08-22
  • タイトルタグ
    2026-08-21
  • Core Web Vitals
    2026-08-20
  • EFO(入力フォーム最適化)
    2026-08-19
  • ウェブアクセシビリティ
    2026-08-18
  • CMS(コンテンツ管理システム)
    2026-08-17
  • デザインシステム
    2026-08-15

まずはご相談

AIとWEBで、事業に火を灯す。

初回相談は無料、オンラインで全国対応。「何から始めればいいか分からない」状態から、一緒に整理します。

無料相談を申し込む →

注目タグ

#WEB制作 #診断ツール #メディア構築 #AI×WEB戦略 #RAG #AIエージェント #VTuber #SEO

よく読まれている

  1. WordPressとAIで日本語指示だけでサイト運営
  2. コーポレートサイトをリニューアルしました
  3. 「作業ではなく、仕事をする」── MGKの哲学
  4. AI×WEB戦略 ご相談窓口を開設
  5. IT業界用語辞典 全18語

この会社について

株式会社エム・ジー・ケイ(M.G.K.)は、AIとWEBを実務に組み込む会社です。コンサルだけの机上の空論ではなく、自分たちの体で価値を実証してからお客様にご提供します。

→ 詳しくみる

M.G.K.

作業ではなく、仕事をする。
AIとWEBを、実務に組み込む会社。

〒542-0081
大阪府大阪市中央区南船場3-11-10
心斎橋大陽ビル B1階
TEL: 050-3636-0223

サービス
  • WEB制作・IA設計
  • 診断ツール制作
  • メディア構築
  • AI×WEB戦略
  • Claude 法人導入支援
  • アプリ・ソフトウェア開発
事業実績
  • 自社メディア
  • IPライセンス商品
  • VTuber事業
  • 自社EC・実店舗
会社情報
  • 私たちについて
  • 会社概要
  • お知らせ
  • お知らせ一覧
  • お問い合わせ
  • サポート
  • 編集方針
  • 監修者紹介
  • プライバシーポリシー
  • 特定商取引法に基づく表記

作業ではなく、仕事をする。お客様の挑戦に火を灯す会社です。

© 2026 株式会社エム・ジー・ケイ (M.G.K. Inc.)

  • 会社概要
  • プライバシーポリシー
  • 特定商取引法に基づく表記
  • お問い合わせ

© M.G.K. Inc.

目次