【2022年最新版】参考にしたいフッターデザイン集

この記事のレベル
初心者
(3.5)
重要度
(3.0)
難しさ
(2.0)

こんにちは、編集長のカワウソです!

「自社のホームページに合う、フッターデザインが分からない……」とお悩みではありませんか?

そこで今回は、フッターの基礎知識はもちろん、参考にしたい企業ホームぺージを紹介します。

カワウソ

この記事は次のような人におすすめ!

  • はじめてホームページを作る人
  • フッターのデザインに悩んでいる人
  • 自社に合うフッターデザインを探している人

この記事を読めば、さまざまなフッターデザインを知るだけでなく、自社に合うものを選べますよ。

最初にフッターの基礎知識を解説しています。

「すぐに参考になるフッターデザインを閲覧したい」という方は、以下をクリックしてください。

パソコンサイトのフッターデザイン例 / スマホサイトのフッターデザイン例

それではどうぞ!

フッターとは

フッターとは、ホームページの最下部を指します。

フッターの説明

フッターには、次のような要素を設置するのが一般的です。

フッターに掲載する代表的な要素
  • 会社情報(ロゴ、住所、電話番号)
  • お問い合わせフォームのボタン
  • 他のページへのリンク
  • SNSへのリンク
  • 地図
  • コピーライト(著作権) など

フッターの主な役割3つ

フッターはページを最後までスクロールしないと、表示されません。

なかには、ホームぺージに訪問したものの、フッターにたどり着かないまま離脱するユーザーもいるでしょう。

しかし、だからといってフッターを軽視してよいわけではありません。

フッターの役割を理解すれば、目的が達成しやすいホームぺージを作れますよ。

フッターの主な役割は以下の3つです。

フッターの主な役割3つ
  1. ユーザーの「次の行動」に対して選択肢を与える
  2. 興味や関心の高いユーザーの背中を押す
  3. ヘッダーに掲載できない情報を補完する

ユーザーの「次の行動」に対して選択肢を与える

ページを最後まで読み、フッターにたどり着いたユーザーは、「次の行動」を検討します。

フッターに「他のページへのリンク」を設置すれば、ユーザーに選択肢を与えることが可能。

「このページが気になる!」とユーザーが感じれば、他のページにもアクセスしてもらえるでしょう。

ユーザーが「他のページにアクセスする」か、「ホームぺージから離脱する」かは、フッターによって決まります。

興味や関心の高いユーザーの背中を押す

なかには、フッターにたどり着くまでに、ページを熟読したユーザーもいるでしょう。

ページを熟読したユーザーは、自社の商品やサービスに対して、興味や関心が高まっている状態といえます。

フッターに「お問い合わせ」や「資料請求」などのボタンを設置すれば、迷っているユーザーの背中を押せます。

のちほど、「コンバージョンを意識したフッターデザイン」を紹介しているので、参考にしてください。

コンバージョンとは

ホームぺージでユーザーに達成して欲しいゴール。「お問い合わせ」や「資料請求」の他にも、「予約」や「申し込み」などが考えられます。

ヘッダーに掲載できない情報を補完する

ヘッダーはホームぺージの最上部に位置するため、フッターより閲覧するユーザーは多いです。

ヘッダーの説明

だからといって、ヘッダーに情報を詰め込み過ぎるのはよくありません。重要な情報が埋もれる可能性があるためです。

そこで優先順位をつけ、ヘッダーに掲載できなかった情報をフッターに記載します。

たとえば「企業ロゴ」はヘッダー、「電話番号」や「住所」はフッターに掲載しているホームぺージをよく見かけますよね。

ヘッダーのデザインはフッターによって支えられているといっても過言ではありません。

パソコンサイトのフッターデザイン例

ここでは、パソコンサイトのフッターデザイン例を紹介します。

企業ホームぺージのフッターデザインを確認したところ、おおよそ以下のグループに分けることができました。

回遊率向上を意識したフッターデザイン

サイトマップの機能を持つフッターデザインなら、ユーザーの回遊率(1訪問あたりのページ閲覧数)を向上できます。

サイトマップとは

ホームぺージ全体のページ構成を一覧で記載したもの。

ホームぺージ全体の構成が分かると、目的のページにダイレクトでアクセスが可能。

ヘッダーと違い、フッターは他のコンテンツの邪魔にならないので、縦幅をそれなりに使用できます。

以下、参考サイトです。

西松建設のフッター

▲出典:西松建設

『西松建設』のフッターでは、「実績」や「技術」など、さまざまな情報をカテゴリ化しています。

ホームページ内の構造を一目で確認でき、目的のページにたどり着きやすいフッターデザインです。

bitFlyerのフッター

▲出典:bitFlyer

『bitFlyer(ビットフライヤー)』は、数多くの仮想通貨を取り扱っています。

仮想通貨ごとに販売所は異なるものの、フッターの「サービス」からダイレクトにアクセスできます。

サイトマップの役割を持つフッターデザインのメリットは「網羅性」。

「インフォメーション」や「サポート」など、ユーザーに安心感を与えるページも抜け漏れなく設置できます。

コンバージョンを意識したフッターデザイン

ホームぺージでコンバージョンを獲得するなら、フッターは重要。

フッターで興味や関心が高いユーザーの背中を押せれば、コンバージョンを獲得できます。

以下、参考サイトとなります。

あかつき証券グループ 採用サイトのフッター

▲出典:あかつき証券グループ 採用サイト

『あかつき証券グループ 採用サイト』のフッターには、新卒採用と中途採用それぞれの「エントリーボタン」が設置されています。

フッターの背景色が黒色でも、赤いボタンなら目立ちますよね。ユーザーが見落とす心配はありません。

BOTCHANのフッター

▲出典:BOTCHAN

『BOTCAN(ボッチャン)』のフッターには、「資料ダウンロード」「お問合わせ」「電話番号」など、複数のボタンが設置されています。

それぞれボタンの色を変えているため、認識しやすいデザインになっていますね。

予約を促すフッターデザイン

飲食店、美容院、歯科医院などのホームぺージであれば、ユーザーから「予約」を受け付けたいと考えることもあるでしょう。

予約を受け付けるためには、「電話番号」や「予約ボタン」はもちろん、「営業日時」や「受付時間」など、補足情報を併記すると効果的です。

「予約の受付」もコンバージョンの一つ。ここでは予約に特化したフッターデザインを紹介します。

以下、参考サイトです。

Bandito e Pirataのフッター

▲出典:Bandito e Pirata

『Bandito e Pirata(バンディットエピラータ)』のフッターには、「電話番号」「LINE予約ボタン」と一緒に、「営業時間」や「定休日」が記載されています。

美味しそうな料理の写真も載っており、ユーザーの予約を後押ししてくれるでしょう。

身原病院のフッター

▲出典:身原病院

『身原病院』の「診療予約ボタン」は、診療時間表の直下に設置されています。

「診療可能な曜日や時間を確認してから予約する」という、ユーザーが起こすアクションの流れをよく理解したフッターデザインといえるでしょう。

ページトップに遷移させるフッターデザイン

シンプルなフッターを作りたい方におすすめなのが、ページトップに遷移させるフッターデザインです。

フッターのデザインがシンプルでも、ページトップに遷移させるボタンがあれば、ユーザビリティ(使いやすさ)は損なわれません。

ページトップに戻れば、ヘッダーから「他のページ」へアクセスできます。

以下、参考サイトです。

小学館 採用サイトのフッター

▲出典:小学館 採用サイト

『小学館 採用サイト』のフッターには、苗のイラストの「PAGETOP」ボタンが設置されています。

マウスをのせると「苗が伸びる」といった仕掛けもあり、リクルートサイト特有の「遊び心」を感じます。

動画やアニメーションが特徴のフッターデザイン

動画やアニメーションは動きがあるため、テキストよりも注目されやすいです。

また、インパクトが大きいため、ユーザーの記憶に残りやすいのも特徴の一つ。

「企業メッセージ」や「ブランドイメージ」など、印象付けたい要素があれば、試してみてください。

以下、参考サイトです。

Hair Salon GROENのフッター

▲出典:Hair Salon GROEN(ヘアサロン・グルーン)

『Hair Salon GROEN(ヘアサロン・グルーン)』のフッターで特徴的なのは、店先の様子を「動画」で掲載している点。

お店の雰囲気やお客さんとの接し方が垣間見え、思わず「行ってみようかな」と思わせてくれるフッターデザインですね。

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

▲出典:株式会社リブセンス

『株式会社リブセンス』のフッターには、文字が徐々に表示されるアニメーションが採用されています。

「あたりまえを、発明しよう。」というキャッチフレーズとともに、爽やかながらも強く目を引くデザインになっています。

イラストやアイコンが効果的なフッターデザイン

イラストやアイコンを用いてホームぺージを作る場合、フッターのデザインもひと工夫できます。

フッターにイラストやアイコンを使えば、楽しい雰囲気を演出できたり、重要な要素を目立たせたりできますよ。

以下、参考サイトです。

こどもさんかく歯科のフッター

▲出典:こどもさんかく歯科

『こどもさんかく歯科』のフッターには、イラストやアイコンが効果的に用いられています。

歯科のコンセプトである「さんかく」を表現したキャラクターはもちろん、歯ブラシや虫メガネなどのイラストが楽しい雰囲気を演出。

その他、「テキストリンク」「予約ボタン」「質問ボタン」などにはアイコンを使用し、視認性を高めています。

浦野りんご園のフッター

▲出典:浦野りんご園

『浦野りんご園』のフッターには、掲示板のイラストが使用されており、目を引くデザインになっています。

これなら、「初めて購入する方に向けたメッセージ」も見落とされる心配はないでしょう。

スマホサイトのフッターデザイン例

次に、スマホサイトのフッターデザイン例を紹介します。

ここではスマホだからこそ、より効果を発揮するフッターデザインを紹介します。

情報を絞り込んだフッターデザイン

スマホサイトにおいては、「他のページへのリンク」は「ハンバーガーメニュー」に集約されることも少なくありません。

ハンバーガーメニューとは

ナビゲーション(メニュー)の表示形式の一つ。 横線3本のアイコンデザイン「≡」がハンバーガーに似ていることから名付けられました。近年は横線2本のメニューも多くなっています。

スマホサイトのフッターはパソコンサイトより横幅が狭く、サイトマップのように「他のページへのリンク」を網羅すると、とてつもなく長いフッターになってしまいます。

そのため、情報を絞り込んだフッターデザインを採用する企業ホームぺージも数多く存在します。

以下、参考サイトです。

瓢喜のハンバーガーメニューとフッター

▲出典:瓢箪

『瓢喜(ひょうき)』のフッターデザインは、サイトマップのように「他のページへのリンク」を網羅するのではなく、絞り込んで設置しています。

「店舗一覧」や「こだわり」などへのリンクは、ヘッダーのハンバーガーメニューに設置。ヘッダーを固定表示しているため、ユーザビリティ(使いやすさ)を損なう心配はありません。

フッターに掲載する情報は、ヘッダーとバランスを取りながら調整しましょう。

Chatworkのフッター(アコーディオンメニュー)

▲出典:Chatwork

『Chatwork』のフッターは、「アコーディオンメニュー」を採用しています。

アコーディオンメニューとは

項目をタップすると、隠れているリンクを表示できるメニュー。

パソコンサイトでは「他のページへのリンク」をすべて一覧表示するものの、スマホサイトでは「アコーディオンメニュー」を使ってカテゴリのみに絞っています。

電話発信を意識したフッターデザイン

スマホの特徴は電話をかけられること。パソコンとの決定的な違いの一つです。

ユーザーに「電話で問い合わせもらうこと」をコンバージョンにする場合は、工夫が必要。

単に電話番号を掲載するのではなく、「タップすれば電話をかけられる」ことをユーザーにわかりやすく示しましょう。

以下、参考サイトです。

高松建設のフッター

▲出典:高松建設

『高松建設』のフッターには電話番号が掲載されています。注目したいのは「発信する」というボタン。

仮にこの「発信する」ボタンがなければどうでしょうか。もちろん電話番号を入力して電話をかけるユーザーもいるでしょう。

しかし、入力途中で「面倒くさい」と感じたり、間違った番号にかけたりする可能性もあります。

コンバージョンの獲得を意識する場合、いかにユーザーのハードルを下げるかが鍵になります。

地図を掲載したフッターデザイン

実店舗を運営する会社であれば、「ユーザーに来店してもらう」目的でホームぺージを作るのではないでしょうか。

フッターに地図があれば、自店舗の場所だけでなく、最寄りの情報も提供できます。

道に迷ったユーザーは、スマホでホームぺージにアクセスして住所を確認するでしょう。そのとき、地図があれば役に立ちます。

以下、参考サイトです。

山下フルーツ農園のフッター

▲出典:山下フルーツ農園

『山下フルーツ農園』のフッターには、大きな地図が掲載されています。

さらに住所の近くに「Google map」へのリンクも設置。これならユーザーが住所をコピーして、地図アプリに貼り付ける必要もありません。

SNSへの誘導を意識したフッターデザイン

マーケティングにSNSを活用している企業であれば、フッターにリンクを設置するのがおすすめです。

スマホサイトのフッターにSNSアイコン(リンク)を設置すれば、ユーザーはそのままアプリを起動できます。

以下、参考サイトです。

donbrakoのフッター

▲出典:岡山の新築一戸建て「donbrako」

『donbrako』のフッターはSNSを強調したデザイン。

たとえば、Instagramでは販売中の物件を紹介したり、YouTubeでは物件購入に役立つノウハウを紹介したりしています。

「SNSをチェック」という、ユーザーに行動を促す文言を記載しているのもポイントです。

フッターデザインを作る3つのポイント

フッターデザインを作るときは、ユーザーにとって見やすくて使いやすいものを意識しましょう。

次の3つのポイントを意識して作るのをおすすめします。

フッターデザインを作る3つのポイント
  1. ホームぺージ全体と調和するデザインにする
  2. ページリンクはカテゴリごとに整理する
  3. 著作権を表示する

ホームぺージ全体と調和するデザインにする

フッターをデザインするときは、トンマナを意識しましょう。

トンマナとは

トーン(tone)&マナー(manner)の略称。 広告やWeb制作のデザインにおいて、コンセプトや雰囲気に一貫性をもたせること。

たとえば、ホームぺージ全体がモノトーンなのにもかかわらず、フッターだけ色鮮やかなデザインではユーザーに違和感を与えますよね。

ユーザーがページの最後に目にするフッターだからこそ、納得感を覚えるデザインにしましょう。

ページリンクはカテゴリごとに整理する

フッターにサイトマップの役割を期待する場合、他のページのリンクは、カテゴリごとに整理して設置しましょう。

サイトマップ型フッターの役割は、ホームぺージの構成(全体像)を示すこと。

たとえば、弊社『エックスサーバー』のフッターでは、以下のカテゴリで分けています。

エックスサーバーのフッターカテゴリ
  • 特長
  • 機能
  • 料金
  • お申し込み
  • サポート
エックスサーバーのフッター(カテゴリでリンクを整理)

カテゴリに分けて整理すれば、直接的な表現でなくても、おおよそ何のページへのリンクか判断できます。

著作権を表示する

フッターには、ホームページの著作権者として、「コピーライト」を記載しましょう。

実は、日本においてはコピーライトを表記しなくても、著作権は保護されます。

しかし、コピーライトを表記すれば、著作権に対する自社の意思を明確に示せるのです。

また公式サイトとして、安心感や信頼感をユーザーに与えられます。

なお、コピーライトの正しい書き方は、次のとおりです。

コピーライトの正しい書き方

「コピーライトマーク(©)」+「発行年」+「会社名(著作者の氏名)」

弊社『エックスサーバー』のサービスサイトでは、「© 2003-2022 Xserver Inc.」と記載しています。

エックスサーバーのフッターのコピーライト

フッターデザインをもっと探したい方へ

ひとくちに「フッター」といっても、そのデザインには多くの種類があります。

自社に合うフッターデザインを徹底的に探したいという方は、ギャラリーサイトがおすすめ。

ギャラリーサイトなら、他社のホームぺージを一覧で閲覧できるため、参考になるフッターデザインを探しやすいですよ。

以下の記事で紹介しています。

ホームぺージデザインの参考になるギャラリー・企業サイト計20選

ここでは、とくにフッターが探しやすいギャラリーサイトを紹介します。

フッターデザイン.com

フッターデザイン.com

▲出典:フッターデザイン.com

『フッターデザイン.com』は、フッターをカテゴリごとに探せるギャラリーサイトです。

以下のカテゴリが用意されています。

フッターデザイン.comの検索カテゴリ
  • 一覧
  • イラスト
  • カラムメニュー
  • ページトップへ戻る
  • ロゴ
  • 未分類
  • 横並びメニュー
  • 横並び&カラムメニュー

先入観なくフッターのデザインを探したい方は、「一覧」から探すのがおすすめ。全デザインがまとめて表示されます。

フッターに特化したギャラリーサイトは少ないため、重宝するでしょう。

Parts.

Parts.

▲出典:Parts.

『Parts.(パーツ)』は、「ヘッダー」や「フッター」など、ホームぺージのパーツごとに探せるギャラリーサイト。

SaaSのサービスサイトを中心に取り扱っているため、コンバージョンの獲得を目指すホームぺージなら参考になります。

まとめ

この記事では、フッターの基礎知識や参考にしたい企業ホームぺージを紹介しました。

まとめ
  • フッターが重要視されるのには3つの理由がある
  • 他社のフッターデザインを参考に、自社のホームぺージに合うものを選ぶ
  • フッターはパソコンサイトとスマホサイトで切り分けてデザインする
  •  自社に合うフッターデザインを追求するときは、ギャラリーサイトがおすすめ

ユーザーをサポートするフッターを作れば、ホームぺージの目的は達成しやすくなるでしょう。

それでは素敵なホームぺージの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1のレンタルサーバーであり、16万社の導入実績があります。

12月9日12時まで利用料金最大30%OFFキャンペーン開催中です!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2022年10月時点、hostadvice.com調べ。

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

これから始める方はこちらのホームページの作り方をぜひご覧ください!

【初心者向け】会社ホームページの作り方を基礎から解説

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!