とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

スマホサイトのパンくず問題。長くなった場合、どう処理するのが適切か

スマホサイトのパンくず問題。長くなった場合、どう処理するのが適切か

スマホサイトに

パンくずつけてますか?

 

パンくずリスト - Wikipedia

パンくずリスト(breadcrumb list)は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。

 

パンくずはデザイン上、

スペースを必要とするので

スマホサイトのときにどうするか

はけっこう悩みどころです。

 

スマホサイトはなんせ幅に

限りがあるので、

スッキリとしたデザインに

する際には邪魔になる。

 

でもナビゲーションとしては

パンくずは優秀な機能なので

残しておきたい。

 

このジレンマ、

Web開発者なら誰もが

経験あるのではないでしょうか。

 

少し古い記事ですが

スマホサイトのパンくずの

デザインパターンをまとめたいい記事が

ありました。

www.baka-ke.com

 

階層が深く、

パンくずリストが長くなる場合は、

横スクロールを採用するというのは

いい手法かもしれませんね。

 

「...」で省略するパタンもありますが、

省略されるとユーザが認識できない

数文字で省略されてしまうこともあるので

微妙かも。

 

パンくずの位置は、

上に配置されるパタンがほとんどですね。

役割を考えると上に配置するのが

ベターでしょうか。

 

ちなみAppleのサイトでは

パンくずリストはフッターに

配置されています。

 

ハンバーガーメニューや

コンテンツのナビゲーションを

適切に設計すれば、

パンくずはページの上部になくても

よいのかもしれませんね。

パンくずは「フットパスとも言う」

らしいので。

 

パンくずはあくまでナビゲーションの補佐

としての役割という位置づけ。

上部に配置するほど主張はしない、

という方針だと思います。

 

そもそもページ階層が深くならないよう

Webサイトを設計するべき、

というのはありますが、

情報量の多いサイトではどうしようもない

場合もありますよね。

 

スマホサイトでは

パンくずリストを表示しない、

という割り切ったWebサイトも

ありますが、ないよりはあったほうが

いい機能ではあります。

 

スマホサイトのパンくずUIのベストプラクティス

  • そもそも階層深くならないよう設計する
  • 1行でおさめるために長い場合は横スクロールさせる
  • フッターに配置する

ですね。

 

パンくずのデザインの参考になるサイト

貼っておきます。

 

saruwakakun.com

coliss.com