このワイヤーの特徴
ページの最後から、目的のページへ移れる
ページを読み終えた人は、別のページへ移るためにページの一番下まで来ることがあります。サービス・実績・会社情報・サポートのまとまりごとにリンクを並べ、ページの最後から目的のページへ移れるようにしています。
見出しでまとまりが分かり、探しやすい
リンクを1列に並べるだけでは、どこに何があるのか探しにくくなります。4つのまとまりに見出しを付け、それぞれ3〜4件のリンクにとどめています。
会社名と短い説明で、何のサイトかが伝わる
フッターだけを見た人にも、何の会社のサイトなのかが伝わるようにします。左端に会社名と、事業を1文で説明する短い文を置いています。
規約や著作権表示を、決まった場所にまとめる
プライバシーポリシーやサイトのご利用についてのページは、探す人が決まった場所を見に来ます。フッターの一番下の段に、著作権表示と規約類のリンクをまとめています。
SPでは、見出しごとに折りたためる
SPでリンクをすべて縦に並べると、フッターだけで画面が何枚分にもなります。SPでは見出しを押すとそのまとまりのリンクが開く形にし、フッターを短くしています。
制作時のよくある失敗
すべてのページへのリンクを、フッターに並べる
フッターにすべてのページを並べると、どこを見ればよいか分からなくなります。
フッターには読み手がよく使うページを見出しごとにまとめ、ページ数が多い場合は、サイト全体を探せる閲覧者向けのHTMLサイトマップへの入口も用意します。
ヘッダーのメニューと、呼び名がそろっていない
ヘッダーでは「サービス」、フッターでは「事業内容」のように呼び名が違うと、同じページなのか別のページなのか迷います。
ヘッダーとフッターで、同じページには同じ呼び名を使い、主要な導線の順番も大きく食い違わないようにします。
暗い背景に、小さく薄い文字を置く
フッターは背景を暗くすることが多く、文字を小さく薄くしすぎると読みにくくなります。
文字の大きさを保ち、背景との明るさの差が十分にある色を選びます。
SPで、リンクがすべて縦に並び続ける
SPでPCと同じリンクをすべて縦に並べると、フッターがとても長くなります。
見出しごとに折りたためるようにするか、SPでは主なリンクに絞ります。
電話番号や問い合わせなど大事な入口は、折りたたまずに見せます。
折りたたみを、見た目だけで作る
見出しを押して開く作りを見た目だけで作ると、キーボードや読み上げでは開けず、開いているかどうかも伝わりません。
見出しはボタンにし、開いているかどうかが伝わる作りにします。
よくある質問
フッターのリンクは、何件くらいがよいですか?
見出しごとに3〜5件、全体で15〜20件程度をひとつの目安にします。
それ以上のページがある場合は、読み手がよく使うページを中心に並べ、サイト全体を探せる閲覧者向けのHTMLサイトマップへの入口も用意します。
フッターにも、ヘッダーと同じリンクを並べてよいですか?
並べて問題ありません。
ページの最後まで読んだ人が、上に戻らずに移動できるようになります。
呼び名はヘッダーとそろえ、主要な導線の順番も大きく食い違わないようにします。
フッターにはヘッダーに入りきらない規約やサポートのページも加えます。
SPで折りたたむ場合、最初から開いておくまとまりはありますか?
基本は閉じた状態にし、フッターを短く保ちます。
リンクの少ないまとまりや重要度の高いまとまりは、開いておく方法もあります。
問い合わせや電話など、フッターで特に探されるものは、折りたたむまとまりの中に入れず、別に見える場所へ置きます。
フッターの見出しは、見出しタグにしたほうがよいですか?
まとまりの名前に見出し要素を使うと、読み上げで見出しを順にたどれるようになります。
見出しのレベルは、ページ全体の見出しの階層に合わせて決めます。
フッターは footer 要素にし、リンク群の部分だけを、メニューであることが分かる名前を付けた nav 要素で囲みます。
