サイトをより簡単にナビゲートするための 9 つのパンくずのヒント [+ 例]

公開: 2022-09-13


携帯電話、鍵、財布を紛失したことがありますか? もしそうなら、あなたはおそらくあなたの歩みをたどることを勧められたでしょう. ブレッドクラム ナビゲーションは、サイトへの訪問者がまさにそれを行うのに役立ちますが、冷蔵庫の鍵を見つけるためだけにキッチン、バスルーム、フロント ドア エリアを検索するのではなく、ブレッドクラム ナビゲーションはユーザーに現在の場所とそこにたどり着くまでの手順を示します。

パンくずナビゲーションは、おとぎ話のヘンゼルとグレーテルにちなんで名付けられました。兄と妹のデュオは、家に帰る道を示すために森を横断するときに、後ろにパンくずの跡を残します。 Web サイトにブレッドクラム ナビゲーションを効果的に実装することで、訪問者が森の中で迷子になることがなくなります。

HubSpot の何百ものウェブサイトのテーマとテンプレートにアクセス

ブレッドクラム ナビゲーションとは

ブレッドクラムは、ユーザーが Web サイトまたはインターフェイスで現在の場所を追跡できるようにするナビゲーション補助です。 パンくずリストには、ユーザーが現在表示しているページと、その前にアクセスしたページとの関係、または現在のページの上の上位レベルの親ページの階層が表示されます。 ブレッドクラム ナビゲーションを使用すると、ユーザーは開始点または以前の訪問ページにすばやく戻ることができます。

ブレッドクラムは、通常、大なり記号 (>) で区切られた、ハイパーリンクされた Web サイト ページの水平方向のリストとして表示されます。 ブレッドクラム ナビゲーションは、多くの場合、メインの Web サイト ナビゲーションの下のページの上部付近に配置されます。 ヒントとベスト プラクティスに進む前に、ブレッドクラムにはいくつかの異なる種類があることに注意することが重要です。

ブレッドクラム ナビゲーションの種類

場所または階層に基づくブレッドクラム

ロケーションまたは階層ベースのブレッドクラム ナビゲーションは、最も頻繁に目にするタイプです。 ロケーションベースのブレッドクラムは、ユーザーが現在いるページと、その上の Web サイトの階層との関係をユーザーに示します。 コンピューター上でドキュメントを保存するフォルダーのようなものだと考えてください。 最初のフォルダーは最も広範で、ドキュメントにたどり着くまで、その中の各フォルダーはより具体的になります。

HubSpot ナレッジベースの階層ブレッドクラムの例

上記の例では、ブレッドクラムはユーザーが現在表示しているページと、ナレッジ ベースに戻るための後続の各親ページを示しています。 階層ベースのブレッドクラム ナビゲーションにより、ユーザーはメイン ページや、現在のページがある場所より上の親ページに簡単に戻ることができます。

パスまたは履歴ベースのブレッドクラム

パス ベースのブレッドクラム ナビゲーションは、ユーザーが現在のページに到達する前にたどった一意のパスを表します。 パスは通常、全体が表示されるわけではありませんが、パス ベースのブレッドクラムは、ユーザーを前の訪問ページに移動させる戻るボタンの形式として実装されることがよくあります。

Bloomingdales の Web サイトでのパス ベースのブレッドクラム ナビゲーションの例

上記の例は、Bloomingdale の Web サイトの [結果に戻る] リンクを示しています。これは、ユーザーが独自のクエリをそのままにして前のページに戻ることができるパス ベースのブレッドクラムです。 履歴ベースのブレッドクラムは、さまざまなカテゴリや種類のアイテムを検索する e コマース サイトで一般的です。

属性ベースのブレッドクラム

属性ベースのブレッドクラムは、ユーザーが Web ページでの検索をフィルタリングするために選択した属性またはタグを表示します。 属性ベースのブレッドクラムは、ユーザーがさまざまな属性を選択してページ上のアイテムを絞り込み、完璧なジーンズを見つけることができる e コマース Web サイトで役立ちます。

Gap の Web サイトのブレッドクラム ナビゲーションの例

属性ベースのブレッドクラムは、ブログの投稿やコンテンツの種類を分類するためのタグとして実装することもできます。

さまざまな種類のブレッドクラム ナビゲーションについて説明したので、次にブレッドクラム ナビゲーションをサイトに実装してサイトのナビゲーションを改善し、直帰率を下げるための 9 つのヒントに進みましょう。

ブレッドクラム ナビゲーションのヒントと例

1. サイトの構造に適している場合にのみ、ブレッドクラム ナビゲーションを使用します。

ブレッドクラム ナビゲーションは、サイトの構造上必要な場合にのみ適切です。 複数の異なるランディング ページからアクセスできる下位レベルのページがある場合、ブレッドクラム ナビゲーションを使用すると、異なる開始点から同じページにアクセスする読者を混乱させる可能性があります。 さらに、トップ レベル ページが数ページしかない小規模な Web サイトの場合、ブレッドクラム ナビゲーションはまったく必要ない場合があります。

Goshi の Web サイトでのブレッドクラム ナビゲーションの例

Goshi は、ブレッドクラム ナビゲーションを実装する必要のない Web サイトの例です。 彼らは単一の製品を提供し、彼らのウェブサイトにはいくつかの重要なページしか含まれていません. この場合、メイン ナビゲーションはサイトが提供するすべてのものをカバーし、親ページ内に追加のページはありません。

2. ブレッドクラム ナビゲーションを大きくしすぎないようにします。

ブレッドクラム ナビゲーションは、Web サイトのメイン ナビゲーションに次ぐものです。 ベスト プラクティスは、ブレッドクラムをサイトのメイン ナビゲーションよりも小さく、その下のどこかに表示することです。 パンくずリストが大きすぎると、ページの視覚的なバランスが崩れ、サイトをナビゲートする際に混乱を招く可能性があります。

OXO の Web サイトが良い例です。 プライマリ ナビゲーション バーは大きく、「クッキング & ベーキング」「飲料」などのカテゴリで、ページの上部にすっきりと配置されています。ブレッドクラム ナビゲーションは、メイン ナビゲーションの下に小さく薄いフォントで配置されています。

Oxo の Web サイトのブレッドクラム ナビゲーションの例

Oxo の例では、ブレッドクラム トレイルがその上にあるサイトのメイン ナビゲーション バーの二次的なものであることは明らかです。 ブレッドクラム ナビゲーションが存在する灰色のバーもいい感じです。

3. ブレッドクラム ナビゲーションに完全なナビゲーション パスを含めます。

一部の訪問者は、ホームページから開始してナビゲートするのではなく、検索によってサイトのページを発見する可能性があります。 このランディング ページにたどり着くために、「Elon University Non-Degree Students」を Google で検索しました。 Elon は、ブレッドクラム ナビゲーションに「ホーム」と「入場」を含む完全なナビゲーション パスを含めることを賢明にしています。

特定のレベルを除外すると、ユーザーが混乱し、ブレッドクラム パスが役に立たなくなります。 ユーザーがホームページから始めなかったとしても、最初からサイトを探索する簡単な方法を提供したいと考えています。

イーロン大学の Web サイトのブレッドクラム ナビゲーションの例

4. 最高レベルから最低レベルへの進行。

ブレッドクラム ナビゲーションは左から右に読むことが重要です。左端のリンクがホームページで、右端のリンクがユーザーの現在のページです。 Nielsen Norman Group の調査によると、ユーザーはページの左半分を 80%、右半分を 20% 閲覧することに費やしており、左から右へのデザインが強く推奨されています。 さらに、一番左にあるリンクがチェーンの先頭として表示されるため、それを最上位のページにする必要があります。

5. ブレッドクラムのタイトルは、ページのタイトルと一致させてください。

ページとブレッドクラムのタイトルと一貫性を保つことが重要です。 これは混乱を避けるだけでなく、ターゲットを絞ったキーワードを着陸させる別の場所を提供します. また、ブレッドクラムのタイトルをページに明確にリンクする必要があります。 ブレッドクラムのタイトルにリンクがない場合は、明確にします。 ソニーは、ブレッドクラムのタイトルを効果的にラベル付けして、ページのタイトルと一致させています。 たとえば、「環境、CSR、および品質」は、ページ上と同じようにブレッドクラム ナビゲーションにも表示されます。

また、Sony は、リンクと非リンクをうまく区別しています。 リンクには下線が引かれていますが、現在の「環境」ページのような非リンクは装飾されていません。

sony ブレッドクラム ナビゲーションの例

6. デザインでクリエイティブに。

パンくずリスト ナビゲーションは、伝統的に大なり記号 (>) で区切られたリンクの水平リストとしてスタイル設定されています。ただし、別のデザインがサイトのルック アンド フィールにより一貫している場合は、従来のパスに従う必要はありません。

たとえば、Hoka は「https://blog.hubspot.com/」を使用して、ブレッドクラム ナビゲーションの項目を区切ります。 この場合、微妙なデザインのバリエーションは、サイトとブランドの美学にとって理にかなっています。

hoka ブレッドクラム ナビゲーションの例

7. 清潔に整頓してください。

ブレッドクラム ナビゲーションはユーザーを支援するものであり、ユーザーが探している場合を除き、不要な注意を引くべきではありません。 このため、ブレッドクラム ナビゲーションを不要なテキストやぎこちないデザインで混乱させたくありません。

たとえば、Eionet では、ブレッドクラム ナビゲーションに「You are here」というテキストがなくても問題ありません。 役立つように意図されていますが、テキストがページを乱雑にしています。 適切なデザインがあれば、パンくずリストのナビゲーションは導入部がなくても十分に目立つはずですが、親指のように突き出ることはありません。

eionet Web サイトのブレッドクラム ナビゲーションの例

8. サイトに最も適したブレッドクラム ナビゲーションの種類を検討します。

記事の冒頭で説明したように、考慮すべきブレッドクラムには、場所ベース、属性ベース、および履歴ベースのブレッドクラムがいくつかあります。 ロケーションベースのブレッドクラムは、ユーザーがサイトの階層内のどこにいるかを示します。 属性ベースのブレッドクラムは、ページがどのカテゴリまたはタグに該当するかをユーザーに示します。 最後に、履歴ベースのブレッドクラムは、ユーザーが現在のページにたどり着くまでの特定のパスを示します。

Rolling Stone は、場所に基づくブレッドクラム ナビゲーションを使用して、ユーザーが閲覧しているコンテンツがサイトのどのセクションに該当するかをユーザーに示します。 このタイプのブレッドクラム ナビゲーションは、Rolling Stone ユーザーにとって最も効果的であるため、ホームに戻ったり、より広いカテゴリ ページに簡単に移動したりできます。 ブレッドクラム ナビゲーションを作成するときは、サイトの訪問者にとって何が最も役立つかを検討してください。

ローリング ストーン サイトのロケーション ベースのブレッドクラムの例

Web サイトでさまざまなオプションやスタイルの製品を提供している場合、属性ベースのブレッドクラムは、ユーザーが検索を絞り込んで、選択した属性内のページに簡単にジャンプできるようにするのに役立ちます。 Verishop は属性ベースのブレッドクラムを使用して、ユーザーがタオルの検索をブランドや色などで絞り込む際に選択したものを表示します。

verishop サイトの属性ベースのブレッドクラムの例

Web サイトに最適なブレッドクラム ナビゲーションのタイプを決定する際は、サイトの構造、提供する製品やサービスのタイプ、ユーザーがページを操作する方法を考慮する必要があります。

9. 聴衆を知る。

ブレッドクラム ナビゲーションのベスト プラクティスは、ブレッドクラムをページの上部、メイン ナビゲーションの下に配置することです。 しかし、史上最も価値のある企業の 1 つである Apple は、ブレッドクラム ナビゲーションをサイトの下部にあるフッターに配置することで、この論理に逆らっています。 最終的には、オーディエンスを理解することが重要です。 Apple の顧客は通常、技術に精通しており、必要に応じてナビゲーションを見つける可能性があります。 顧客のニーズを考慮し、不明な場合は A/B テストを実装します。

Apple iPhone 13 Pro サイトのロケーション ベースのブレッドクラムの例

HTML および CSS でのブレッドクラム ナビゲーション

パンくずリストは便利なだけでなく、HTML と CSS コードを少し追加するだけで簡単に Web サイトに追加できます。

リンク自体を作成するために使用する HTML から始めましょう。 これを行う最も簡単な方法は、順序付けされていないリスト (<ul>) 要素でリンクを整理することです。各リスト アイテム (<li>) は、現在のページを示す最後のアイテムまで、パンくずシリーズのリンクを構成します。

使用できるブレッドクラムの HTML テンプレートを次に示します。

CodePen の HubSpot (@hubspot) による HTML および CSS の Pen Breadcrumbs を参照してください。

順序付けされていないリストを HTML の <nav> (ナビゲーション) 要素で囲み、クラスと ARIA ラベルをその開始タグに追加したことに注目してください。 これはオプションですが、ページをスクリーン リーダーや検索エンジンからよりアクセスしやすくするのに役立ちます。

もちろん、この HTML だけでは十分ではありません。現時点では、リンクの箇条書きリストしかありません。 CSS を追加することで、探しているブレッドクラムの外観を実現できます。 上記の HTML に次の CSS を適用します。

CodePen の HubSpot (@hubspot) による HTML および CSS の Pen Breadcrumbs を参照してください。

このコードを組み合わせると、どのサイトでも使用できる基本的なブレッドクラム ナビゲーション エリアが生成されます。以下の最終結果を参照してください。 また、見た目をすっきりさせるためにスタイリングを追加しました。 このスタイル設定なしでブレッドクラムがどのように表示されるかを確認するには、CSS タブの下部にあるコードをコメント アウトします。

CodePen の HubSpot (@hubspot) による HTML および CSS の Pen Breadcrumbs を参照してください。

Bootstrap CSS のブレッドクラム ナビゲーション

Bootstrap CSS は、カスタム CSS を追加しなくてもパンくずリストを作成する方法も提供します。 これを行うには、Breadcrumb コンポーネントをそのように使用します。 Bootstrap 5 ドキュメントの例を次に示します。

CodePen の HubSpot (@hubspot) による Bootstrap CSS の Pen Breadcrumbs を参照してください。

これは、Bootstrap のブレッドクラム ナビゲーションの基本にすぎません。詳細については、Bootstrap ブレッドクラムのドキュメントを参照してください。

ユーザーがサイトをナビゲートするのに役立つデザイン

最終的には、ブレッドクラム ナビゲーションはサイトを簡単にナビゲートするための効果的なツールですが、おいしい一口 (ブレッドクラム) を最大限に活用するためのベスト プラクティスを検討することが重要です。 UX に関するその他のアドバイスについては、UX デザインの究極のガイドをご覧ください。

編集者注: この投稿はもともと 2018 年 9 月に公開されたもので、包括性を高めるために更新されています。

新しい行動を促すフレーズ

{{slideInCta('3b85a969-0893-4010-afb7-4690