このワイヤーの特徴
ページの冒頭が、1つのまとまりに見える
パンくずを見出しの帯の中に入れるため、ヘッダーと見出しの間に細い行が挟まらず、ページの冒頭をすっきりとした1つのまとまりとして見せられます。
見出しとの関係が分かりやすい
パンくずの最後の階層のすぐ下に、そのページの見出しが来るので、今いるページの名前と位置がひと続きで読めます。
帯の高さを有効に使える
見出しの帯はもともと高さを取るエリアなので、その中にパンくずを入れても、本文の始まりの位置はほとんど変わりません。
制作時のよくある失敗
背景の上で文字が読めない
明るい写真の上に細い文字を置くと、パンくずが読めなくなります。
写真を暗くするか、文字と背景の色の差を十分に取ります。
区切りの印や下線が背景に溶けている
文字は読めても、区切りの印やリンクの下線が見えないと、どこからどこまでがリンクか分かりません。
印と下線にも、背景との色の差を取ります。
フォーカスの枠が見えない
暗い背景の上で濃い色の枠を使うと、キーボードで操作したときに今どこにいるかが分かりません。
帯の中では、明るい色の枠にします。
よくある質問
写真の上にパンくずを置いてもよいですか?
写真全体を暗くするか、パンくずの下に半透明の面を敷いて、文字の読みやすさを保てる場合だけにします。
写真の明るさがページごとに変わる場合は、いちばん明るい写真で確かめます。
見出しの帯がないページはどうしますか?
帯のないページでは、ヘッダーの下に横一列でパンくずを置きます。
どちらの場合も、パンくずと見出しの順番はそろえておきます。
パンくずを見出しの下に置いてもよいですか?
見出しの上に置くのが一般的です。
パンくずは「どこにいるか」を伝えるもので、ページの見出しより先に読まれる位置のほうが、役割が伝わりやすくなります。
