フッターデザインの役割とは？注意点や具体的な参考事例を紹介

フッターとはサイト下部のエリアのこと

フッターとはページの一番下の部分に設けられるエリアのことです。

フッターに載せる情報をしっかりと選ぶことによって、ユーザーの行動を誘導したり、より使いやすいサイトへと改善したりできます。そのため、フッターの情報とデザインを工夫することは、サイト全体の質や効果を向上させるのに役立つでしょう。

フッターデザインの5つの役割

フッターデザインの役割は上記の5つです。

それぞれ詳しく解説します。

読者へ次の行動を促す

サイトのフッター部分（最下部）まで閲覧しているユーザーは強い興味を持っている可能性が高く、アクションを促すことで成約につながりやすいためです。

ユーザーに促すアクションとしては、以下があります。

たとえば、フッターに「お問い合わせ」の項目を入れることで、ユーザーからのコンタクトを受け取れるようになります。お問い合わせで疑問の解消や相談も受付ができれば、成約につながる可能性も高まるでしょう。

記事の締めとしてフッターでアクションを求めると、コンバージョン率が上がります。

項目の前後に「無料で相談できます」「〇〇日までのキャンペーン」などのコピーを用いることで、より効果的に行動を促せるでしょう。

SNSへ誘導する

フッターにInstagramやTwitterのSNSリンクを設置することで、自社のSNSに誘導できます。

動画や写真をSNSで発信している場合、SNSに飛んで見てくれるユーザーも存在しています。SNSでの認知が広がったり、フォロワーが増えたりする可能性が高いでしょう。

SNSのフォロワーが多いことは、企業の知名度を上げ、会社自体の価値を上げることにつながります。

デザイン効果を高める

フッターデザインは、ページとサイト全体のデザイン性を高められます。

サイトもしくはページで用いられているカラーバリエーションに合った色をフッターでも使用しましょう。トーンを合わせたり、メインコンテンツの柄に寄せたりすることで、サイト全体のバランスを取れます。

重要な情報をフッターに載せたいのであれば、より明るい色合いにして強調するというテクニックも使えます。大事なのは、ページとサイト全体とのバランスを考慮してデザインを決めていくことです。

フッターは単に補足情報を載せるためのパーツではなく、デザインに影響をもたらす重要なパーツという意識を持ちましょう。

企業情報や著作情報を表示する

フッターには、企業情報や著作情報を表示する役割があります。

たとえば、以下の内容があります。

上記の内容をフッターに記載しましょう。

ユーザーがサイトを見て、どんな会社が運営しているのか不安にさせないことが大切です。

サイトマップやナビゲーションとして機能させる

サイトの中に収められている情報をカテゴリ分けをして、それぞれのカテゴリリンクを置きましょう。

サイト全体が明確にテーマごとに階層分けされているのであれば、その階層の上部を紹介してリンクを置くこともできます。

サイトマップとして役割を果たす際には、短いテキストのみのリンクを貼ることが多いでしょう。フッターのデザインをシンプルにすることで、ユーザーが見やすくなります。

フッターにコンパクトなサイトマップがあると、機能的でサイト内を迷うことなく目的の情報を発見できるでしょう。

【目的別】フッターデザイン説明4選

目的別にサイトのデザインを4つ紹介します。

行動を促すためのデザインの場合

行動を促すデザインの方法として、テキストリンクではなく、バナーにするやり方があります。バナーに触れるとイメージが変わるアニメーション効果を入れることで、強調できます。

シンプルにまとめたい場合には、フッターに簡単なボタンを配置することで、ユーザーが迷うこともありません。「無料相談申し込み」の文字を入れて、背景と異なる色のボタンを挿入すれば、誘導しやすくなります。

キャンペーンサービスの申し込みであれば、期間の日付を入れたり、お得な価格を記載するのも1つの方法でしょう。

SNSへ誘導するためのデザインの場合

フッターデザインでSNSに誘導するために、デザインをシンプルにするのも方法の1つです。デザインがシンプルだと、SNSアイコンが目立ち、ユーザーはクリックしやすいでしょう。

たとえば、トヨタ自動車株式会社のデザインは背景が黒で、SNSアイコンがカラーになっています。

背景が黒のため、カラーを際立たせられるでしょう。

強調したいページを紹介する場合

1つのサイト内で異なるサービスを提供したり、姉妹サイトを紹介したりする場合は、フッターにサービスやサイトのロゴを載せるのも1つの方法です。

通常のサイトマップと分けて、左右のどちらかにサイトのロゴやバナーを寄せて整理することで、デザイン性が高まるでしょう。

キャンペーンページに誘導したい場合には、ページのアイキャッチ画像を挿入するのも方法です。この際には、画像表示は小さくなるので、シンプルな画像を選択しましょう。

サイトマップ向けのデザインの場合

サイトマップとしてフッターを使う際には、テーマごとのカテゴリは、テキストのみでシンプルに表現します。

たとえば、店舗やサービスを検索できるポータルサイトであれば、検索ページのリンクだけでなく、小さな検索窓を設けられます。検索したいワードを入力すれば、すぐに必要な情報に到達できるのがメリットでしょう。

検索窓を入れない場合でも、検索ページを別々に目立たせてリンクを貼ることも可能です。すぐに目に飛び込んでクリックしやすくなるようにデザインすることで、利便性が高まります。

【パソコン向け】フッターデザインの参考事例3選

パソコン向けのフッターデザインの参考事例は下記の3つです。

それぞれ詳しく解説します。

1. トヨタ自動車株式会社

出典：トヨタ自動車株式会社

トヨタ自動車株式会社は、日本を代表する自動車会社です。

サイトのフッターデザインには、サイトマップ、プライバシーポリシー、企業情報、SNSリンクが取り入れられています。

背景が黒になっているため、SNSリンクが際立っています。フッターまで辿り着いた方は、SNSリンクをクリックする可能性が高いでしょう。

シンプルなフッターデザインを採用したい企業は、トヨタ自動車株式会社のサイトが参考になります。

2.株式会社吉野家

引用：株式会社吉野家

株式会社吉野家は、日本を代表する牛丼チェーンです。

株式会社吉野家のフッターには、店舗検索やテイクアウトの予約などができる機能があるので、ユーザーが行動できる工夫をしています。

企業情報やIR情報などフッターを見るだけで、顧客や投資家が知りたい吉野家の情報が揃っているため、余計な検索が必要ありません。

チェーン店や複数の店舗を持っている企業は、参考にしましょう。

3. 佐川急便株式会社

：出典佐川急便株式会社

佐川急便株式会社は、日本を代表する宅配業者です。

フッターには荷物の再配達の受付ができるリンクを貼っているので、ユーザーが迷わずにサイト内を行動できるでしょう。アプリがダウンロードできるリンクや、Facebookのリンクがあります。

グローバル化に合わせて、英語表記にクリック1つでできる仕組みは、ユーザーにとって使いやすいサイトでしょう。

【スマホ向け】フッターデザインの参考事例3選

スマホ向けのフッターデザインの参考事例は下記の3つです。

1. 株式会社ユニクロ

出典：株式会社ユニクロ

株式会社は、世界的なファッションブランドです。

スマホで見ると、縦長のフッターデザインになっており、すべてのページが画面に収まるように工夫されています。

ユーザーは画面をスクロールしなくてもフッター画面を確認できるため、すぐに目的の情報にたどり着けるでしょう。

画面上部には、常時カートアイコンや検索窓、メニューバーがあるため、探し物に迷う場合でもすぐに検索も可能です。

2. 山下フルーツ農園

引用：山下フルーツ農園

山下フルーツ農園は、長野県にあるフルーツ園です。

フッターには、山下フルーツ農園の地図が配置されており、マップをタップすると、Googleマップに飛ぶように設定されています。

フッターデザインは非常にシンプルで、情報が必要最低限しかありません。画面いっぱいにマップを表示することが目的なため、山下フルーツ農園に来れないユーザーは少ないでしょう。

企業の場所が分かりにくい場所にある場合は、山下フルーツ農園を参考にマップを導入するのも1つの方法です。

3. ChatWork株式会社

引用：ChatWork株式会社

株式会社ChatWorkは、やり取りや連絡などができるチャットツールを提供している会社です。

フッターは、アコーディオンを採用しており、カテゴリが表示されているコンパクトなデザインです。アコーディオンは、コンテンツが折りたためるブロックのことで、クリックすることでコンテンツの中身がわかる仕組み。

ユーザーに伝えたい情報が多い場合でも、アコーディオンを活用することで、情報を見たいユーザーに適切に伝えられます。

コンパクトなデザインにしたい場合は、株式会社ChatWorkを参考にしましょう。

フッターデザインを作れるツール3選

フッターデザインを作るツールは下記の3つです。

1. Canva

Canvaは、世界中で使われている無料の画像編集ツールです。

Canvaは、数千種類のテンプレートが準備されており、一からデザインを作る必要はありません。また、1つの画像を複数人で編集、共有できるので、複数のメンバーと企画を運営するときに役立つでしょう。

 Canvaの料金プランは以下のとおりです。

無料と有料のプランがあり、無料でも十分使えますが、有料にすると使える画像の種類が増えます。他の企業と被らないオリジナルの画像作成が可能です。

2. PhotoScapeX

PhotoScapeXは、画像を加工できる処理ソフトです。

PhotoScapeXは以下のことができます。

上記のように、フレームや吹き出し、モザイクなどの加工ができ、細かいところまで編集できるのが特徴です。

操作が簡単なため、操作方法を学ぶ必要もありません。

また、WindowsとMacのどちらでも利用できます。

無料でダウンロードできるので、興味がある方はPhotoScapeXで画像編集してみましょう。

3. PIXLR

PIXLRは、写真の補正や編集ができるツールです。

パソコンやスマホ、タブレットなどどのデバイスでも画像加工できます。

AIを活用した背景除去ができるところがPIXLRの特徴でしょう。

他にも、アニメーションや動画などの編集もできるため、他のツールを使う必要がありません。写真を使った加工をしたい場合は、PIXLRを活用してみましょう。

フッターデザインに取り入れるべき5つの要素

フッターデザインに取り入れるべき要素は下記の5つです。

1. 会社名とロゴ

フッターには、会社名とロゴを載せるのは必須です。特に会社のロゴは、企業の認知度向上や、印象を残りやすくする効果があります。

会社名とロゴを掲載することで、自社のイメージをユーザーに認知してもらえるでしょう。

2. コピーライト

コピーライトは、サイトの著作権のことです。

コピーライトがないと、サイトを所有していることを証明できないので、必ずフッターに取り入れましょう。

コピーライトがあると、無断転載の防止ができます。許可なしに共有、複製などをしてはいけないことを具体的に記載しましょう。

3. プライバシーポリシー

企業サイトでは、プライバシーポリシーを設置しなければなりません。

プライバシーポリシーとは、個人情報の保護を行うための方針のことです。

サイト内で支払い情報や個人データなどを集めるときに、プライバシーポリシーの掲載が義務付けられています。

ユーザーの個人情報の扱い方を明らかにすることが目的なので、ユーザーは安心してサイトを使ってくれるでしょう。

4. お問い合わせ

フッターにお問い合わせを設置することで、ユーザーの不安がなくなります。

お問い合わせに載せる情報として、会社の住所、電話番号などが挙げられるでしょう。情報があると信用できる会社としてみられます。

会社の電話番号を載せるときは、番号をクリックして電話できるようにすると、ユーザーも使いやすいでしょう。

5. SNS

SNSをやっている企業は、フッターにSNSアイコンを掲載しましょう。

フッターにあるだけで、SNSをやっていると知らせられるので、フォロワーが増える可能性があります。フォロワーを伸ばすため、サイトでは公開していないことをSNSで発信するのがおすすめです。

SNSのフォロワーが多いと、自社の情報をより多くの人に伝えられるでしょう。

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

フッターデザイン作成の注意点は上記の5つです。くわしく解説します。

権利関係の表示に注意する

多くのサイトがフッターに「Copyright」といった著作権、商標についての注意書きを入れています。表記は特に法令上必要なものでもなく、サーバーとの契約で入れるべきものでもありません。

サイト内の文章をコピペされてしまったり、画像を盗用されてしまったりする恐れがあるので必要になります。

表示があればすべての被害を防げるわけではありませんが、それでも抑止力として一定の効果が期待できるでしょう。また、自分たちのサイトがオリジナルものであり、しっかりと著作権などの権利を意識して制作していることを示すためにも役立ちます。

デザインをシンプルにまとめる

デザインをシンプルにし、ユーザーが見やすくなる工夫が必要です。フッターはページの最下部にあり、小さなパーツであるため、何も工夫をしないと多くのユーザーに見過ごされてしまいます。

しかし、たくさんの情報を入れると、どうしても見づらくなるため、重要性の高いものだけに絞ってまとめることが求められるでしょう。たくさんのリンクがあると、ユーザーは見るのをやめてしまう傾向がありますので注意が必要です。

サイトマップの階層に注意する

サイトマップのみのフッターにするときには、個々のページをリストのようにまとめるのではなく、階層付けをして作るようにしましょう。階層にすることで、テーマごとにページがまとまり、ユーザーの探す時間を減らせられるでしょう。

階層のトップのリンクについてはテキストを大きくしたり、下の階層と色を変えたりして、はっきりと区別しておくことがポイントです。カテゴリごとに色を変えるというのも1つの方法です。

まとめ

フッターデザインの役割や取り入れるべき要素、注意点を紹介しました。

フッターはサイト全体にわたって使われるパーツなので、デザインや掲載する内容を工夫することはとても重要です。フッターの役割を知り、ユーザーにとって見やすいサイトを作ることで、会社の売上につながる可能性は高いでしょう。

フッターのデザインがわからない場合は、無料で「比較ビズ」では複数の業者を一括見積もりできるので、活用してください。

監修者のコメント

株式会社KOKOROMI

代表取締役　�皸羸疑�

お客様の強みを引き出す集客に強いホームページやECサイトを制作。SEO対策からSNS、広告運用など、成果を確実に出すための継続的なWEBマーケティング・運用サポートも行い、クライアントのWEBを使った事業展開を手厚くサポート。経済産業省認定の情報処理支援機関として、よりお客様に沿った形でのIT導入も行っている。

詳しく見る

ホームページにおいてのフッターは、サイトマップ的な役割、変動するキャンペーンやバナーの設置、会社情報の掲載、お問い合わせのリンクなど、サイト内での行動を促す場所でもあります。

あまり重要ではない場所と思われがちですが、充実したフッターであれば、より次の行動へ誘導することができます。探していた以外の情報も得ることができれば、ユーザーの満足度の向上にも繋がります。

メインコンテンツではありませんが、無意識のうちにユーザーの目に入る、まさに「縁の下の力持ち」です。 また、フッターはデザインも大切になります。

小さいスペースではありますが、情報がしっかりと色分けされ、集められた情報を最適化させてユーザーに伝えるデザインができているかで、満足度も大きく変わります。フッター部分まで、効果を考え、丁寧に制作を進める業者選びをおすすめします。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。