MFIに向けたモバイルサイトのパンくずリスト ベストプラクティス

TL;DR

サイトによってカテゴリや構造が様々なので、そんなものはない。

 

なにこれ？

出オチなエントリーですが、ECサイトでカテゴリの階層が深い場合、ナビとしてのパンくずリストはどう表示したら良いのか。というお話。

 

参考として、ヨドバシ(左)と価格.com(右)のモバイル版サイトの表示。

ヨドバシの場合は、PC版と同じものが表示されています。ユーザーから見ても詳しいと感じる表示ですが、文字数が多いと2行になってしまったり、リンクとしてタップできる領域のサイズや余白に頭を悩ませる仕様です。

対して価格.comの場合は、PC版と異なるものを表示しています。
(※参考の画像にあるパンくずリストは、リンクになっていません)

省略されたというよりは、アイテムの最短ルートを表示しているようです。

 

幸い、リンクがCSSで隠れて省略されているように見えても、今のところは問題が無いようですので、デザイナーさんに頑張ってもらいましょう。というやつです。*1

 

個人的には、どうにもならない場合、ブログ感覚でタグにてザックリ表示してJSON-LDで構造を通知する逃げが出来そう、とも思います。

 

 

@psne はい、普通のサイトでしたらおっしゃる通りですね！ファッションECなどではやはり深くなりつつどこにも戻りたいニーズがあったりしますので、やはり難しいですね……。

— 辻正浩 | Masahiro Tsuji (@tsuj) 2016年11月8日

お忙しいところ応答して頂き申し訳ないです。*2

 

無い。で終わらせても良いのですが、確かに需要はありそうな話ですね。

 

日報みたいなエントリー。

NEW リズムでともだち こぐまのトンピー ぬいぐるみ

 

*1:スパムと判定されないようにする程度の問題はあります。

*2:前後にやり取りがあります。