BC-004 公開  更新

親へ戻る型 パンくずリスト

PCでは階層を横一列に並べ、SPでは1つ上の一覧へ戻るリンクだけを出すパンくずリストです。
SPの狭い画面では、もっとも使われる戻り道を1つに絞り、押しやすい大きさで見せます。

ワイヤーフレーム(PC)

親へ戻る型 パンくずリスト PC版ワイヤーフレーム

ワイヤーフレーム(SP)

親へ戻る型 パンくずリスト SP版ワイヤーフレーム

SP版の特徴

  1. 戻るリンクだけを出す:SPで多く使われる戻り道を1つに絞り、押し間違いを減らすためです。
  2. 戻り先の名前を入れる:「戻る」だけだと、どこへ戻るのかが分からず、ブラウザの戻ると区別できないためです。

採用前の判断ポイント

向いているケース

  • SPで、ほとんどの人が1つ上の一覧へ戻るだけで足りる
  • 製品や物件など、一覧から個別のページを行き来して見比べることが多い
  • SPのヘッダーのメニューから、ほかの分類へも移れる

向かないケース

このワイヤーの特徴

SPで、戻り道が1つにまとまる

SPでは1つ上の一覧へのリンクだけを出すため、狭い画面で小さなリンクが並ぶことがなく、多くの人が使う戻り方を押し間違えずに選べます。

押しやすい大きさにできる

リンクが1つなので、枠を付けて十分な高さを取れます。
片手で操作するSPでも、指で正確に押せます。

戻り先が、ブラウザの戻ると区別できる

リンクに戻り先のページの名前を入れるため、直前に見ていたページではなく、どの一覧へ戻るのかが分かります。

制作時のよくある失敗

ブラウザの履歴で戻している

前に見ていたページへ戻す作りにすると、検索から直接来た人はサイトの外へ戻ってしまいます。
戻り先は、サイトの階層で1つ上のページに固定します。

「戻る」としか書いていない

どこへ戻るのかが分からないと、押す前に迷います。
「温度センサーの一覧へ戻る」のように、戻り先の名前を入れます。

ほかの分類へ移る手段がない

SPでパンくずを1つに絞るなら、ホームやほかの分類へは、ヘッダーのメニューから移れるようにしておく必要があります。

よくある質問

SPで、ホームへのリンクも残したほうがよいですか?

ヘッダーのロゴからホームへ戻れるなら、パンくずに残さなくても困りません。
戻るリンクを2つ並べると、どちらを押せばよいかで迷わせます。

戻るリンクは、見出しの上と下のどちらに置きますか?

ヘッダーの下、見出しの上に置きます。
ページを開いてすぐに目に入る位置にあるほうが、ほかの製品へ移りたい人がすぐに気づけます。

構造化データは、SPでも全部の階層を出しますか?

はい。
画面の見せ方をPCとSPで変えても、構造化データには全部の階層を出します。
検索エンジンに伝える階層は、画面の幅によって変えません。

同じパーツのPattern

パンくずリストの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開