Webサイトを制作する上で、ヘッダーとフッターは非常に重要な役割を担っていますが、上部に表示されて目立つヘッダーとは違い、フッターについては優先度が低くなりがちです。
フッターは、サイトマップ的要素や企業情報など重要事項の掲載、またSNSへのリンクを設置するなど、サイトや企業全体の情報を整理しつつ、信頼を獲得するための場所として非常に重要な役割を担っています。
今回は、そんなフッターの役割への理解を深めていただいた上で、作成や修正に便利なツールのご紹介もしていきますので、ぜひ最後までご覧ください。
フッターの役割
1-1.ナビゲーション（サイトマップ）
サイトマップや、訴求したいページへの導線を設置することでナビゲーションとしての役割を果たし回遊率アップが見込めます。
見やすさは意識するべきですが、フッターはヘッダーのようにコンパクトに収めておく必要はないため、サイト全体の構造を示すことが可能です。そのため、目的のページや誘導したいページへ最短距離で案内でき、離脱を防ぐことに繋がります。
1-2.重要情報への導線
SNSへの導線
企業やショップのSNSアカウントの活用は今では当たり前となり、サイト外でのタッチポイントとして重要性もますます高まっています。わかりやすい導線設置で流入を図ることで、SNSのフォロワーを増やしたり、内容次第ではコンバージョンへの後押しになったりして、相互作用が期待できます。
関連外部サイトへの導線
運営会社は同じでも、提供サービスの違う外部サイトをお持ちの場合、フッターに導線を設置することで、よりユーザーのニーズに近いサービスや商品を提供できる可能性があります。
例えば、リクルートサイトであれば「ハイクラスに特化している転職サービス」や「IT業界に特化している転職サービス」など、ユーザーの属性に合わせた特化サイトの導線をフッターに設置しておくことでユーザーの求めるものによりマッチした情報を提供できる場合があります。
コンバージョンへの導線
お問い合わせフォームへのリンクや、電話番号などの導線を設置することで、迷わずコンバージョンできるようにしておきます。
ヘッダーとは違いフッターはページの下部にあるため、フッターをチェックしている時点でページ全体を確認した後の見込みの高いユーザーである可能性が高いとも考えられます。次の行動を促すコンバージョンへの導線を設置することで、見込み顧客の取りこぼしを防げます。
1-3.必要情報の共有
企業情報
会社の住所・連絡先・プライバシーポリシー・所属団体など、公式の企業情報を掲載しておくことで、安心感や信頼感につながります。
連絡先
お問い合わせフォームや電話番号は、コンバージョンという観点以外からも、明示しておくことで安心感につながります。既存の顧客や取引先からの問い合わせ窓口の案内としても、設置しておくと親切です。
地図
所在地を地図で明示することで信頼感につながったり、小売やブランドのホームページであればリアル店舗への来店を促したりすることができます。
地図の掲載の際にはGoogleマップを活用することで、ユーザー自身が操作できる地図の中で所在地が確認できるのでおすすめです。
コピーライト
コピーライトとはフッターの最下部に表記するもので、著作権に関する主張と理解してもらうと良いと思います。表記しておくことで、ホームページの著作権は守られており転載してはいけない、と表明していることになります。
サイト種別によるフッターの違い
一口にフッターと言っても、企業やサイトの目的によって様々な要素・デザインのフッターがあります。サイト種別にいくつか例をご紹介していきますので、企業イメージや目的による違いなどを理解していただければと思います。
2-1.コーポレートサイト
コピーライトのほか、記載しなければならない要素についてシンプルにリンクを設置、サイトマップも詳細は遷移させてから表示することですっきりとしたフッターデザインに。最近では当たり前になったSNSについてもわかりやすくリンクを設置して、信頼感と無駄のないデザインが印象的。
シンプルながらも、SNSへのリンクとなるアイコンがしっかり目立っていてメリハリがあるフッター。コーポレートサイトですが、お問い合わせや公式ショップなどの次アクションを促す導線があるのもポイント。
2-2.ブランドサイト
要素の優先順位が明確なデザインで、コピーライトやサイトマップなどは控えめにしているのが印象的。ブランドについて知ってもらえるよう目立つデザインでサイト内ページへのリンクが設置されている。あるいは、他のブランドへの導線をロゴで設置しているのもポイント。
ブランドイメージを最後まで損なわないデザインが印象的。コピーライトとブランドの補足情報以外には、ブランド認知を目的とした導線のみを設置し、できるだけ無駄を省いた構成がブランドサイトとしての徹底ぶりを感じるフッター。
2-3.リクルーティングサイト
あらゆる立場のユーザーを想定した価値提供を感じるフッター。グループサイトへの導線もしっかり貼っておくことで、どんなニーズにも対応できる守備範囲の広さのアピールが効いているのがポイント。
コンバージョン導線がしっかり貼られているのが印象的。あれこれ寄り道する隙を与えず、サイトの目的であるコンバージョンへの最短距離が意識された構成。
2-4.ECサイト
アイコンを効果的に用いて、サイトイメージに合ったポップな印象のデザイン。ECサイトでは問い合わせではなく購入がゴールであるため、疑問への解決策にすぐに辿り着きいち早く購入してもらえるよう、ぱっと見てわかるデザインでインフォメーション導線を設置しているのがポイント。
2-5.Webメディア
ユーザーのほしい情報にすぐにアクセスできるよう、カテゴリやキーワード別で導線が設置され、ニーズに寄り添う姿勢を感じる構成。デザインはシンプルでも、カテゴリだけでなく”話題のキーワード”として項目を立てることで、より目を引く導線になっているのがポイント。
カテゴリで提示するのではなく、自分で検索するパターンの導線。通販を一緒に運営しているサイトのため、ラジオボタンで対象を切り替えられるのがポイント。
2-6.ランディングページ
コンバージョンボタンをしっかり配置した上で、信頼感を与える情報を明示。ランディングページは広告色が強く、ユーザーの警戒心も強い可能性があるため、会社概要やお問い合わせにすぐアクセスできることも安心感を与えられるポイント。
フッター素材を無料で作れるツール
フッターに使用する素材を無料で作れるツールを紹介していきます。コンバージョンのためのボタンや、企業イメージに合ったアイコンまたは背景画像などの素材を準備する際にぜひお役立てください。
3-1.Canva
デザイン編集ツールで、写真の加工はもちろん画像やアイコンの作成、動画編集を行えます。無料プランでもたくさんのテンプレートが用意され、スマホ・PC・紙など、さまざまな媒体に適応する素材を作成できあらゆる用途で活用できます。
また、メンバーを招待することで同時編集が可能になるため、チームでの利用にもおすすめです。直感的に操作できるツールです。
3-2.PicsArt
デザイン編集ツールです。無料プランでは、機能の制限がありながらも動画編集を含む基本的なデザイン編集作業は行うことができ、一部テンプレートも使用できます。用途に合わせて直感的に操作できるツールなので、デザイン編集に苦手意識があっても問題なく利用できるのではないでしょうか。
3-3.PhotoScapeX
https://apps.microsoft.com/store/detail/photoscape-x/9NBLGGH4TWWG?hl=ja-jp&gl=JP
写真の補正・編集ツールです。初心者にも使いやすい機能でありながらも、プロのように写真にエフェクトやフレームを追加したり、コラージュしたりできます。写真を使用した素材を準備したい場合にはとてもおすすめのツールです。
3-4.PIXLR
写真の補正・編集ツールです。タッチアップを簡単に行なったり、AIの力を借りた自動判別で背景除去を行なったりできます。
無料プランには機能制限が多いですが、期間限定でプレミアムをお試しできるので写真を使用したい場合にはチェックしてみてください。
3-5.Fotor
写真の補正・編集ツールです。写真のレタッチやフィルター加工、文字入れ、背景除去などを簡単に行えます。チュートリアルやガイドが豊富に用意されているので、初めてでも安心して利用できます。
フッターデザインの作成や修正に必要なスキルとツール
素材や要素が準備できたとしても、余白・サイズなどのバランスが取れたフッターの作成および修正には、HTMLとCSSの知識が必要になります。HTMLとCSSのソースコードを変更することで、フッターが整います。
4-1.HTMLの役割
HTMLは、Webページ内の構造を記述するためのマークアップ言語のことです。HTMLでは、タグを使用してテキストや画像、リンクなどのあらゆるデータをコンピュータが読み取れるように記述していきます。
タグには、見出し（＜h2＞や＜h3＞など）や段落（＜p＞）を定義していくものや、画像の表示（＜img src=””＞）やリンク設定（＜a href=””＞）の指示を出すものなど、さまざまな種類が存在しており、これらを組み合わせることで、Webページの要素へと意味づけを行っていくことができます。
そして、次にご説明するCSSはHTMLにデザインを施す役割を担い、この組み合わせによりWebページが完成することになります。フッターの作成にも、もちろんこの準備が必要です。
4-2.CSSの役割
HTMLで中身の記述が完了したら、次にCSSを使い見た目の装飾に関して記述していきます。色やサイズ、余白の大きさやレイアウトなど、デザインに関する全てをCSSで指定します。
以上のように、HTMLとCSSの記述を行いコーディングしていくことでWebページが完成しますが、HTML・CSSの知識や技術がない場合には外注する必要があります。
4-3.コーディング知識不要な便利ツール
KARTE Blocksを活用することで、HTMLやCSSの知識がなくてもサイト修正ができるようになります。
KARTE Blocks
例えば、野原ホールディングス株式会社が運営する建材通販サイト「アウンワークス」では、以前外部委託していた期間は迅速に対応できていなかった施策実行について、KARTE Blocksを導入することで、施策実行量の増加、さらにはサイトの効果を上げることに成功しています。
アウンワークスでは、ヘッダーの「検索窓の強調」という改善において、ツールを活用。ノーコードで検索窓を目立たせる改善を行い、検索回数が11%向上し検索経由の購入率を15%上げることに成功。
参考：効果が見積もりにくい施策も、“小さく試す”が可能に。施策の精度と成果を高めるKARTE Blocks活用
ヘッダーと同じく、フッターにおいても、直感的に操作できるKARTE Blocksを活用することで、ノーコードでデザインの変更を行うことが可能になるため、コーディングの技術がなくて不安がある場合にはツールの導入もぜひご検討ください。
まとめ
ヘッダーだけではなくフッターにも重要な役割があり、サイトの目的次第で工夫の必要があるとお分かりいただけたでしょうか。また、作成や修正に必要な技術は、便利なツールでカバーできることも今回ご紹介しました。
自社サイトの回遊率アップやコンバージョン率アップに向けて、ぜひフッターの見直しや改善にも着手してみてください。
KARTE BlocksKARTE Blocks Blogフッターの役割とデザインの作成や修正に役立つおすすめツール
