現役デザイナーが解説!フッターデザインの参考事例と注意点【2019年最新版】

「フッターには著作権表記や会社名、テキストリンクが置いてあるイメージだけど、どういう風にデザインすればいいのか?」
「ページ数が膨大なんだけど、全部のページリンクをフッターに設置するべき?」

デザインや情報設計が意外と難しいフッター。

何のためのサイトなのか、ホームページの目的によっても最適なデザインは変わってきます。

そこで、ホームページをリニューアルする際にチェックしたい参考サイトや、フッターのデザインのポイントなどをまとめました。ぜひ参考にしてください!

参考記事:見やすいホームページを作るための、たった11個のポイント 見やすいホームページをデザインするためのポイントを丁寧に解説しています。
誰でも実践できる!見やすいホームページを作るための11個のポイント

目次
  1. 1. フッターの参考デザイン
    1. 1-1. ナビゲーション・サイトマップとして
    2. 1-2. 重要ページのリンクとして
    3. 1-3. お問い合わせなどのコンバージョンの導線として
    4. 1-4. デザインの調整として
  2. 2. フッターの役割
    1. 2-1. ナビゲーション・サイトマップとして
    2. 2-2. 重要ページのリンクとして
    3. 2-3. お問い合わせなどのコンバージョンの導線として
    4. 2-4. デザインの調整として
    5. 2-5. 注意:SEO対策にはあまり意味がない
  3. 3. フッターデザインの際の注意点
    1. 3-1. 著作権など表示しておいた方が良いもの
    2. 3-2. スマホ時のデザインに気をつける
    3. 3-3. 要素を詰め込みすぎない
    4. 3-4. サイトマップを入れる際は階層に注意
  4. 4. まとめ

フッターの参考デザイン

まずはフッターをデザインする際の参考となるデザインをご紹介します。
目的によってデザインも変わってきますので、以下の点で参考になるものをピックアップします。

  • ナビゲーション・サイトマップとして
  • 重要ページのリンクとして
  • お問い合わせなどのコンバージョンの導線として
  • デザインの調整として

どの辺りが参考になるのかポイントもまとめておりますので参考にしてくださいね。

ナビゲーション・サイトマップとして

不動産賃貸のエイブルのフッター

フッターの参考デザイン1

不動産・賃貸住宅情報サイトとして需要の多い住所検索。
これがあることにより、膨大な情報の中から自分の探したいエリアから物件を探すことが可能。
エイブルの場合はフッターに住所から検索できるリンクを置いているので、どのページからも住所を検索することが可能です
地域によって内容が変わるかつサイトを利便性高く作るのであれば参考にしたいデザインです。

エイブルのフッターデザインを見る

東亜不動産のフッター

フッターの参考デザイン2

カテゴリーごとにコンテンツをまとめているので、ユーザーが情報を探しやすくなっています。
物件情報の場合、売買したいユーザーもいれば、借りたいユーザーもいます。
それぞれのユーザーが自身の目的に沿った情報にアクセスできるように、それぞれがカテゴリーで目的別に分類。
複数のターゲットが1つのサイトを閲覧する事が予想される場合、ユーザーの目的ごとに情報をまとめると見やすくなります。

東亜不動産のフッターデザインを見る

重要ページのリンクとして

ZOZOTOWNのフッター

フッターの参考デザイン3

通販サイトなどは取り扱う商品も多くページ数も多いため、全ページをフッターに掲載すると逆に使いにくいフッターになってしまいます。
こちらのフッターはカテゴリーなどの「一覧ページ」へのリンクを記載しているため、使いやすいフッターになっています。

ZOZOTOWNのフッターデザインを見る

にっぽん丸のフッター

フッターの参考デザイン4

右下にある白いボタン「にっぽん丸の沿革」は別ページへとリンクしています。
リンク先のページは確認していただくとわかりやすいのですが、見せ方にこだわっているコンテンツが掲載されています。
このように、一番読んでほしいページへのリンクを掲載する場所としてフッターを利用することもできます。

にっぽん丸のフッターデザインを見る

お問い合わせなどのコンバージョンの導線として

東海サーモ株式会社のフッター

フッターの参考デザイン5

ページのクロージングとして、お問い合わせフォームへと誘導するフッター。
テキストリンクではなく、バナーにすることでぱっと目に留まるようになっています。
カーソルを乗せた時のアニメーションも面白いです。

東海サーモ株式会社のフッターデザインを見る

おかもと歯科医院のフッター

フッターの参考デザイン6

「ネット予約はこちらから」いうピンクのボタンを置き、ユーザーを誘導するデザインに。
ユーザーが実際に足を運ぼうと考えた時に、住所、診察時間、休診日など気になる情報が一つにまとまっているのも親切です。

おかもと歯科医院のフッターデザインを見る

デザインの調整として

オールイン株式会社のフッター

フッターの参考デザイン7

必要最低限の情報のみを掲載しているので、クールなイメージのデザインになっています。
ブランドサイトなどはあえてテキストリンクを羅列せず、このようにシンプルにまとめているサイトが多いです。

オールイン株式会社のフッターデザインを見る

株式会社リブセンスのフッター

フッターの参考デザイン8

フッターにアニメーションが組まれており、徐々にリンク先が見えるようになります
「何があるんだろう?」と思わず注目してしまうデザインです。遊び心があって面白いですね。

株式会社リブセンスのフッターデザインを見る

フッターの役割

ここではフッターの役割をご紹介していきます。
先ほどご紹介した事例の分類である下記にそってご説明していきます。

  • ナビゲーション・サイトマップとして
  • 重要ページのリンクとして
  • お問い合わせなどのコンバージョンの導線として
  • デザインの調整として
  • 注意:SEO対策にはあまり意味がない

ナビゲーション・サイトマップとして

1つの記事を読み終わった時に、他にも関連記事はないかとフッターを見たことはありませんか?
あるいは、実際に問い合わせをしようとしてフッターまでスクロールしたことはありませんか?

フッターにリンクを設置しておくことで、他のページにユーザーを誘導することができます
フッターを、ミニサイトマップを掲載する場として利用することで、「サイトマップページ」と同じような効果が期待できます。
web幹事の場合も、ユーザーのユーザビリティを考慮してサイトマップを用意しており、フッターからもリンクさせています。

重要ページのリンクとして

リンクをフッターにおくことで、重要ページにユーザーを誘導することができます
集客したいページは、テキストリンクではなくバナーやボタンにすることでよりユーザーの目に留まるようにすることも可能です。

多用すると逆効果になってしまいますがアニメーションをつけたり、配色を工夫したりすることで目立たせることもできます。

お問い合わせなどのコンバージョンの導線として

記事を読んだらそれで終わりにならないよう、「お問い合わせ」や「予約」などコンバージョンへの導線としてフッターを活用することもできます

ユーザーが思わずアクションをしたくなるように「無料でお見積もりする」や「簡単にweb予約する」など文言の工夫をしているサイトも見かけます。
集客が目的のホームページの場合は、必ずフッターに導線を設定するようにしましょう。

デザインの調整として

世界観を演出したり、ブランドイメージの訴求にもフッターは有効利用できます
デザイン性を重視する場合はサイトマップのようにリンクを羅列するのではなく、必要最低限のリンクの設置に止め、サイトの雰囲気やトンマナを伝えるデザインにしています。

フッターより上のコンテンツよりもフッターを濃い色に設定しているサイトを多く見かけますが、要素の下を濃い配色することで安定感を出すというデザインのテクニックがあります
フッターを濃い色にすることで、サイト全体の印象を引き締めることも可能。
また、ぱっと見でコンテンツはここまで、ここから下はフッターと判断することができるのでユーザーにも親切なデザインです。

注意:SEO対策にはあまり意味がない

上位表示を狙いたいキーワードやページのリンクをフッターに掲載するというものがありましたが、これは一昔前の古いSEO対策です

グーグルのジョン・ミューラー氏によると「フッター部分のリンクはコンテンツとみなさない」と話しており、フッターはサイト評価の対象外とみなされていることがわかっています。

書かれている場所とか、周りにどんなものが有るかによって、コンテンツ内のキーワードのSEO効果が変わってくるのは、知っていましたか?

フッターに入れるよりコンテンツの中心的なところに入れたほうがSEO効果がありますよ。

▼ゲイリー・イリーズのツイッターより

ただ、関係のないキーワードやリンクを羅列した悪質なスパムはペナルティ対象になります。
フッターを使ってSEO対策をしようとするのではなく、それよりも本体のコンテンツの質の向上に努めた方が良いということがわかりますね。

フッターデザインの際の注意点

フッターをデザインする際に注意しておきたい点についていもご紹介します。

著作権など表示しておいた方が良いもの

サイトを見ていると、だいたいフッターに「Copyright©〜」という表記を見かけます。
実は、この表記はなくても問題ありません。

しかし、著作権者を明記しておくことで無断利用への抑止力となります。
また、コピーライトを書くことが慣習になっているので、どのサイトにも必ず書かれてます。

スマホ時のデザインに気をつける

大きな画面であるパソコンと違い、スマホのデザインは見やすさ、使いやすさに配慮する必要があります。例えば、パソコンで見た時はテキストリンクが羅列されていても問題はないのですが、スマホでテキストリンクの多用は避けるべきです。

テキストリンクがを羅列している場合、押しずらかったりスクロールをたくさんする必要が出てくるため、見にくくなってしまうというデメリットがあるからです。

フッターデザインの注意点1

使いにくいサイトはユーザーにストレスを与えるため、サイトから離脱させてしまう原因にも。
スマホの場合は表示させるリンクを厳選したり、タップしやすくしたり、テキストリンクではなくボタンにしたりと、ユーザーが使いやすいデザインを心がけましょう。

要素を詰め込みすぎない

どのページも重要だからと、全部フッターにリンクを設置するべきではありません。
何も考えなしでフッター要素を詰めすぎると、ユーザーにとって利便性の低いサイトになる可能性が高いため避けるべきです。

フッターデザインの注意点2

選択肢がたくさんありすぎるとユーザーは迷ってしまうので、本当にユーザーが必要とする情報は何なのかを考えて設計するようにしましょう。
同じ要素ごとにグループ分けをするだけでも見やすいフッターになります。

サイトマップを入れる際は階層に注意

フッターをサイトマップ代わりにする場合は、階層に注意するようにしましょう。

▼リンクを羅列するのではなく、階層をつけてわかりやすくしましょう。

フッターデザインの注意点3

階層をつけずに全てを同列に設置すると、ユーザーが情報を探すのが大変になってしまい、これも離脱率を原因になってしまいます。
例えば、Web幹事では以下のように目的ごとに掲載ページをまとめています。

「ホームページ制作会社を自分で探したい」というユーザーの場合、「HP会社を探す」というカテゴリーの中の「地域で探す」「業界で探す」「目的で探す」「特徴で探す」から制作会社を探すことができます。

また相場の情報を知りたい場合は「HP制作の相場を知る」の部分を見てもらうなど、目的に合わせてページを整理して掲載しています。

Web幹事のフッターデザイン

またフッターの下にお問い合わせ用の電話番号や問い合わせページへの導線を設けて、すぐに問い合わせできるように設計しています。

まとめ

フッターの参考デザインや、フッターの役割やデザインする際の注意点についてご紹介しました。

サイトをどういう目的で作るのか、というゴールを明確にすることにより、フッターに掲載するべき内容は変わってきます

例えば、問い合わせや見積もり依頼を増やしたいのであれば「お問い合わせ」をしてもらえるようなフッター作りをするべきですし、通販サイトで商品の一覧にアクセスしやすいようにし、商品を見つけやすくできるフッター作りが望ましいです。

ぜひ、フッターを作る際の参考にしてください。

参考記事:ヘッダーのデザインのポイントはこちらをご覧ください!
現役デザイナーが解説!ヘッダーデザインの参考事例を総まとめ