2本立ての「パンくずリスト」

2011年1月13日

化粧品・サプリメントの通販売上No.1サイト、
DHCのホームページを覧てたら、
ページの中の、あるおもしろい部分に思わず目がとまった。

次のウェブページの画像をみてください。

2本立ての「パンくずリスト」の例

「パンくずリスト」が2本立てになっています!

レギュラーな「パンくずリスト」が上段で、
イレギュラーな「パンくずリスト」が下段に配置されています。

なるほど。こんな手もあったわけですね。
初めてお目にかかりました。


ちなみに、パンくずリストとは、
ウェブサイトの中で、自分が今どの(階層の)ページを閲覧しているのか分かるようにするための記述のこと。

通常、上画像のように、
トップページ(=HOME)から階層を下る記述となっています。

閲覧者がウェブサイト内で迷子にならないようにということで、
グリム童話『ヘンゼルとグレーテル』の中で、
主人公が森で迷子にならないように通り道に
パンくずを置きながら進んだ、というエピソードに由来しています。

2004年6月、ウェブ・アクセシビリティを規定した
日本工業規格(JIS、正式名称は「JIS X 8341-3 高齢者・障害者等配慮設計指針 - 情報通信における機器、ソフトウェア及びサービス - 第3部:ウェブコンテンツ」)が交付された際、ホームページへの「パンくずリスト」の設置が推奨され、一気に拡がったという経緯があります。

現在は、検索エンジンGoogleも「パンくずリスト」のホームページへの設置を推奨しています。
(「検索エンジン最適化スターターガイド」PDFファイル)

ただ、パンくずリストはその問題点を指摘されることが結構あります。
その問題点についてはまた筆を改めて別の機会に取り上げたいと思います。


とは言え、このDHCのホームページにある
2本立ての「パンくずリスト」は
ある意味、「パンくずリスト」の問題点のひとつに対する
斬新な解決策と言えなくはありません。

ここで言う問題点とは、
ウェブサイトのコンテンツの中には、
色々なページからたどれるコンテンツや
分類が重複するコンテンツが結構あり、
その場合、単一の「パンくずリスト」のような分類構造では
そのコンテンツの位置を確定できなくなるというものです。

2本立ての「パンくずリスト」は、
この「単一のパンくずリスト」を覆すやり方なんでしょうか。

少なくとも、DHCの2本立ての「パンくずリスト」は、
絶妙な記述だと思います!

最下層のコンテンツ「バスタオル」から
「キャンペーン商品一覧」ページへの誘導を可能にしていますから。
理論的な是非より、実際にお客様を誘導し、
売上に貢献する仕組みのほうが優先されるのが通販サイトでしょう。


ちなみに、コーディングは次のようになっています。

2本立ての「パンくずリスト」のコーディング

最初、下段の「パンくずリスト」に nofollow があったらスゴイと思っていましたが、残念ながらそれはありませんでした。

実際のコーディングは、
「定義型リスト」内に入れ子で「並列列挙リスト」の入れ子、入れ子、入れ子… となっています。

考えた上でのコーディングだというのは分かりますが、
パンくずリストのコーディングとしては何とも微妙ですね。


ラベル:


▲このページの先頭へ