0120-900-587
フッターとは？～初心者のための基本解説～
フッターは、ウェブページの下部領域であり、特定の用途で利用されます。 定型の情報が表示されたり、リンクが張られたりするなど、ユーザビリティ向上に役立つエリアです。フッターは、どのようにデザインし、活用するべきでしょうか。
ホームページ制作.jpってどんなサービス？
- 運営10年！老舗のホームページ制作無料一括見積サービス。
- 審査済の優良ホームページ制作会社のみに見積もり依頼ができる。
- お見積もり無料。何度でもご相談無料。お断り代行も無料。
- 訪問無しのオンライン相談可能！
- しつこい営業は一切致しません！
全国通話無料
受付：年中無休/24時間電話受付0120-900-587
私たちが全力でサポート致します！
宇野（うの）
田丸（たまる）
真中（まなか）
1.フッターとは
ウェブページの構成は、一般的に上からヘッダー、コンテンツ、フッターの3つの領域に分けられます。フッターは、ページの下部に設けられ、定型情報を表示したり、閲覧支援機能を配置したりできるエリアです。対して、ページの上部に設けられるのがヘッダーです。ページ中央の広い領域には、閲覧するコンテンツが表示されます。
ホームページ制作では、見やすいページ作りが重要です。リンクが張られたページを閲覧するWeb媒体は、閲覧を補助する機能を必要とします。そのため、多くのサイトでは、ページの上部と下部に、閲覧支援機能を設置するための領域を設けています。
ヘッダーとフッターは、定型文にしたり、リンクを張ったりするなど、様々な活用ができる領域です。活用方法は、ウェブデザインによって異なりますが、コンテンツ部分とは違い、定型の使い方がされています。いずれにしても一般的なフッターは、コンテンツを読み終える頃に、ページ下部に表示されてくる領域です。
なお、ヘッダー、コンテンツ、フッターのほかに、コンテンツ部分の左右にサイドメニューを設けていることも多いでしょう。ウェブデザインは、自由なページレイアウトが可能なため、一概にすべてを言い切れるわけではありません。
2.フッターはfooterタグを使って記述する
フッターは、footerタグを用いて記述されます。HTML文書では、<footer>と</footer>の間に記述された部分が、フッターとして表示されます。ただし、footerタグは、HTML5から追加された要素です。以前は、divタグを使い、1つの範囲として指定する方法がとられていました。
footerタグは、ドキュメントの末尾に配置されるのが一般的です。しかし、冒頭に配置したり、複数配置したりすることも可能です。1ページ内に2つの記事がある場合、記事ごとにfooterタグを配置することもあるでしょう。
HTMLの要素は、footerタグのほかにも、ページを分割するセクション関連の要素だけでも、多数存在します。HTML5において新しい要素が追加されたことで、より明確な記述をされるようになりました。例えば、ヘッダーを示すheaderタグ、ナビゲーションを示すnavタグ、補足情報であることを示すasideタグなどです。それぞれのタグは、セクションごとに使い分けられています。そして、フッターであるならfooterタグが使われます。
3.フッターの主な活用方法
フッターには、ページ上部に表示される、ヘッダーやナビゲーションとは異なる役割が求められます。フッターは、サイトによっては記事の末尾に定型の情報を表示するだけの地味な存在かもしれません。しかし、その場合であっても、記載されているのは必要な情報です。
また、フッターは、記事を読み終えたユーザーに対して、次の行動に移ってもらうための重要な役割も果たします。充実したフッターは、最後まで記事を読んでくれたユーザーに対して、サイトへの関心を強めてもらえる手段になるでしょう。
1.サイト情報を表示する
フッターの基本的な役割の一つは、文書に関する情報を提示することです。コーポレートサイトであれば、著作権表記、運営者情報、利用規約、プライバシーポリシーなどが記載されます。連絡先情報も、addressタグに記述した上で、footerタグ内に配置してもよいでしょう。また、よくある質問やお問い合わせなどがフッターに表示されることもあります。
サイト情報のフッターへの表記は、昔から行われていることです。そのため、フッターにサイト情報が表示されていると考えるユーザーは多いでしょう。
また、運営者情報として、TwitterやFacebookなどSNSへのリンクを、配置しているサイトが多くなってきました。
2.サイトマップを設置する
多くのサイトでは、ページ下部のフッター領域をサイトマップとして活用しています。サイトマップを、ページ下部のフッター領域に配置しておけば、独立したページをあらためて開く手間がはぶけます。サイトマップではなくても、主要なカテゴリーが一覧表示されていると便利です。フッターのカテゴリー一覧の中にサイトマップへのリンクを設ける方法もあります。
また、ヘッダー部分に、独立したサイトマップページへのリンクを、配置しているサイトは多いはずです。サイトマップの配置を、ヘッダーからのリンクとフッター領域の両方に取り入れると、利便性が向上するかもしれません。
ヘッダーにはグローバルナビゲーションなどが配置され、フッターにはサイトマップを配置するという組み合わせは一般的です。また、フッター領域にサイトマップを配置すれば、サイト情報の記載を兼ねることができます。
3.関連記事のリンクを張る
記事を最後まで読み終えたユーザーは、サイトへの関心が高まっているはずです。もっと知識を得たいユーザーのために、フッターに関連記事へのリンクを張っておくことは有効です。あるいは、人気コンテンツやおすすめコンテンツへのリンクを張ってもよいでしょう。フッターに、関連記事へのリンクを並べる活用もページレイアウトとして一般的です。
4.ナビゲーションを設置する
ナビゲーションを、ヘッダーだけでなくフッターにも配置しているサイトが多いようです。ここで言うナビゲーションとは、大きなカテゴリーへ移動するためのリンクのことです。ページ上部に配置されている場合は、グローバルナビゲーションといい、大抵のサイトで設置されています。
ページ上部のグローバルナビゲーションであれば、プルダウンメニューを表示できるなど、凝った作りになることが多い機能です。ページ下部のフッター内であれば、利用頻度が高い大カテゴリーをシンプルに並べる程度でよいでしょう。
navタグは、一般的にはheaderタグ内に配置しますが、サイトによってはfooterタグ内にも配置しています。ヘッダーに戻らずに大カテゴリーに移動できれば、ユーザビリティ向上に繋がるかもしれません。
フッターに並べるナビゲーションは、記事を読み終えたときに、必要となるページへのリンクです。大抵の場合は、ヘッダーのナビゲーションと同じカテゴリーを表示するとよいでしょう。ウェブデザインは、ページ全体のバランスとユーザビリティを考えることが大切です。
5.その他の活用方法
読み終えた記事を、SNSでシェアしたり、ソーシャルブックマークやオンラインブックマークに保存したりする人も多いはずです。記事の最後に、Twitter・Facebook・LINE・はてなブックマーク・Pocketなどへのリンクボタンを設置すると集客に繋がるかもしれません。
集客のためのオウンドメディアであれば、高いユーザビリティで、コンタクト情報を提示する必要があります。コンタクト情報を、フッターに目立つように配置すれば、どのページからも確認できるので便利です。掲載するコンタクト情報は、事業活動によりますが、コーポレートサイトとは少し異なるデザインと情報が必要になるでしょう。
また、サイドメニューに表示するようなカテゴリーや記事などの一覧を、フッターに配置することがあります。サイドメニューがなければ、ページ幅を最大限にしてコンテンツを表示できます。ただしこれは、ウェブデザインとページレイアウトに関することで、どちらがよいかはケースバイケースでしょう。
それから、ページトップへ戻るボタンは、フッターに設置しておくべき機能と言えるでしょう。簡単に設置できるシンプルな機能ですが、設置の有無で使い勝手が変わります。
ただし、トップへ戻るボタンは、ページをスクロールしても常に表示させることができます。同様に、お問い合わせ関連の情報を常に表示させることも可能です。
4.まとめ
フッターは、ページレイアウトの下部領域です。トップページも詳細ページも、最下部に行くほど表示される機会が減り、リンクがクリックされる回数も減るでしょう。しかし、ユーザビリティの高いサイトをデザインするためには、フッターの有効活用が欠かせません。
フッターに配置されるのは、定型情報が中心ですが、ユーティリティエリアとしての役割も果たします。フッター領域は控えめながら、どのページにも同じように表示され、ユーザビリティ向上に繋がるエリアです。
フッターに配置される情報やリンクなどは、ページ全体のバランスを考えながら、サイトに適したものにする必要があります。ただし、フッターに配置されるものは、特性上からどのサイトであっても、ある程度は共通しています。
