フッターデザインで気を付ける点と役割とは

サイトを制作するうえで、欠かせないのがフッター。サイトマップとして利用したり、問い合わせの案内ができたり、全体的なデザインのバランス調整に利用したりと、さまざまです。今回はフッターデザインについて紹介したいと思います。

フッターの役割とは

サイトを閲覧する上で、一番先に目にする情報がヘッダーです。フッターはページの最後まで移動しないと確認できません。

ですが、メインの情報のみ記載しているヘッダーと違い、フッターはサイトページのほとんどを記載しているケースが多く、ユーザーの求めるページを探すにはフッターを確認し、求める情報ページにすぐ遷移できるメリットがあります。しかし、seo対策としてフッターに検索ワードや、リンクなどを記載し、上位表示のためにフッターに情報記載しても、フッター領域はコンテンツとして判断されません。注意しましょう。

参考：ページのフッターに無理やり文字を詰め込むとSEOにマイナスになる！

フッターを集客への導線に

ページを読み終わった後に、フッターから問い合わせができるように、目につくアクセントカラーを用いて、問い合わせボタンを設置するサイトを多く見かけます。「無料で相談可能！」や「かんたんweb予約」などの文言を記載し、ユーザーに気軽に問い合わせしてもらえるよう、興味を持った瞬間に、次のアクションを起こすために設置されているので集客には欠かせない情報となるのです。

フッターの著作権情報

フッターの一番下に「©」や「Copyright」の記載がされていると思います。
著作権情報を明記しておくことで、サイトに利用されているイラストや写真などの、無断転載や無断利用を抑止する効果があります。書き方としては、「Copyright　2020　企業名」です。「©」や「Copyright」はどちらか1つで大丈夫です。発行する年号と企業名を記載しておきましょう。

フッターと全体のデザインのバランス

フッターを使用することによって、サイトの事態のデザインのバランスをとり、雰囲気やブランドイメージの訴求にも役立ちます。フッターデザインをあまりよく考えず、サイトの顔であるヘッダーのデザインばかり力を入れてしまうと、バランスが悪いサイトになってしまいます。

デザイン性を重視したサイト作成の場合は、フッターに入れる情報を制限にすると、余白を作ることが出来て見やすくなります。また、ページの最後に背景色を濃い色にすることで、サイトの引き締めになり、閲覧ユーザーにも「ページの終わり」が瞬時に認識できます。

サイトの種類によって変化するフッター情報

サイトには、企業の公式ホームページでもあるコーポレートサイト。ネット通販を行うECサイト等の、さまざまな種類があります。サイトの種類によって、フッターに表示させる内容を変えることで、役割が変化します。では、それぞれのサイトでフッターはどう変化するのか紹介したいと思います。

コーポレートサイトの場合

企業の公式ホームページであるコーポレートサイトでは、サイトのページ数が多くなるため、大まかなサイトマップと、企業の住所の表示が必要です。そしてページを見た後、問い合わせができるよう、問い合わせボタンや連絡先などを表示させると閲覧ユーザーがクリックしやすくなります。
また、企業イメージであるロゴの表示や著作権情報であるコピーライト、企業が運営しているSNSなどのリンクもあると、閲覧ユーザーがより企業への理解や、イメージがつきやすくなるかと思います。

ECサイト場合

ネット通販で商品を販売するECサイトでは、商品数によってページの数が変化します。そのため、フッターでは商品のジャンルごとに、表示させる内容を分けて、閲覧ユーザーが求める商品を探しやすくする必要があります。また、送料や決済、返品などのトラブルを回避するために、注意事項の記載や詳細ページの案内も表示させると良いでしょう。

フッターに入れる情報精査

フッターは、閲覧ユーザーがサイトを回遊しやすくするために、サイトマップを表示させると、よりページ移動が便利です。しかし、ページ量が多い場合、すべてをフッターに記載すると、フッターの情報量が多くなり窮屈になってしまいます。フッターが窮屈になってしまうと、逆に見にくくなってしまうので、フッターに表示させるページリンクを精査する必要があるのです。

フッターのサイトマップを階層化させる

ジャンルごとに階層化させるとユーザーがページを探しやすくなります。
例えば、株式会社トンボ鉛筆のように商品情報やブランド、会社情報と大きな項目に分け、その後に小項目を下に並べるとユーザーがページを探しやすくなります。また、すべての商品を羅列せず、商品ジャンルのみを記載することで、ユーザーの求める商品にたどり着きやすく、フッターの情報量も最小限で済むのです。

リンク内容をシンプルにする

商品量やコンテンツ内容が多い場合は、サイトマップを表示させず、必要最低限の内容のみ表示させるパターンも存在します。
株式会社サクラクレパスの場合は、「サイトマップ」「サイトのご利用規約」「個人情報の取り扱い」と企業のSNSなどのリンクのみのメニューになっております。サイトマップのページを設け、フッターにリンクを置くことで、サイトマップをフッターに記載する必要がなくなり、シンプルなフッターデザインになっています。

フッターを個性化させるには

他のサイトと少し違った個性を出すために、フッターにも動きを付けて工夫することで、デザイン性が高まりユーザーを楽しませることが可能です。htmlやcssで簡単に設定できるサイトも存在しますので、利用してみてはいかがでしょうか。しかし、フッターのpx（ピクセル）が高すぎると、間延びした印象を受ける場合もあるので注意しましょう。

参考サイト：個性的・独創的なCSSフッターデザインがコピペで実装できる！

フッターを見やすくして使いやすいサイトにしよう

いかがでしたでしょうか。フッターデザインを有効に使い、見やすくすることでサイトの回遊性を深め、ユーザーに商品購入をしやすくさせ、企業イメージをはっきりと持たせることか可能です。フッターの役割を理解し、多くのユーザー取得を目指しましょう。

マーケティングでお悩みでしたら、
Bigmacにお任せください。