ホームページ制作期②　フッター制作

前回の「ホームページ制作記録①」では、PC版ヘッダーの構成やグローバルメニュー、メガメニュー、検索機能などを整えました。

今回はその続きとして、PC版フッターの制作記録です。

フッターはページ最下部に表示されるエリアですが、単なる補助リンク置き場ではなく、サイト全体の情報を整理し、ページを読み終えたユーザーの次の行動につなげる役割もあります。

当サイトでは、ヘッダーよりも多くの情報を掲載しつつ、ページ下部が煩雑に見えないよう、情報の分類とレイアウトを先に整理してから実装しました。

ホームページ制作記録①　ヘッダー制作

WordPress＋Cocoonをベースに、PCサポートLSPのホームページを自作していく制作記録です。第1回はPC表示のヘッダー、グローバルメニュー、メガメニュー、検索モーダルを作成しました。

pc-lsp.jp

2026.08.29

まずはフッターに何を載せるか考える

まずはデザインより先に、フッターからアクセスできるようにする情報を整理しました。

ヘッダーでは主要な導線だけに絞っていますが、フッターではサイト内の補助的なページも含めて、もう少し広く案内できる構成にしています。

この6つを大きな分類として扱い、それぞれの中に必要なページへのリンクを配置します。

ヘッダーと同じ情報をそのまま繰り返すのではなく、ヘッダーは主要導線、フッターはサイト全体を補完する案内エリアとして役割を分けました。

Cocoon標準フッターから独自レイアウトへ

WordPressテーマにはCocoonを使用しているため、標準のフッター機能も利用できます。

ただ今回は、PC版ヘッダーと合わせてサイト全体の情報設計や見た目を統一するため、子テーマ側で独自のフッターを実装しています。

構造部分はPHP、レイアウトや装飾はCSSを使い、Cocoon本体を直接変更せずに構築しています。

PC版は情報をカードごとに分類

PC版では、フッター内の情報をひと続きのリンク一覧にはせず、役割ごとにカードとして分割しています。

ページ下部まで来たときに、リンクを一本ずつ探すのではなく、まず「何について知りたいか」を選べるようにするためです。

上段には、利用者が比較的アクセスする可能性の高いページを配置しました。

中でも「サービス案内」は情報量が多いため、ひとつのリンクだけではなく、関連ページまで直接移動できるようにしています。

これによって、たとえば料金だけ確認したい場合でも、サービス案内ページを経由せず直接目的のページへ移動できます。

規約や運営方針は下段にまとめる

プライバシーポリシーや免責事項などは重要なページですが、通常のサービス案内と同じ優先度で並べる必要はありません。

そこで、主要導線とは分けてフッター下段にまとめました。

このあたりは目立たせるというより、必要な時に迷わず見つけられることを優先しています。

ブログとお問い合わせは独立した導線に

「ブログ」と「お問い合わせ」は、他のカードにある一覧リンクとは性質が少し違います。

そこでPC版では、この2項目を独立したカードとして配置し、それぞれにアイコンを加えました。

フッター内の情報量が多い中でも、視覚的に別の役割を持つ項目だと分かるようにしています。

最下部の情報も整理

カードエリアのさらに下には、補助ナビゲーション、コピーライト、ロゴを配置しました。

この部分は主役ではないため、カードエリアよりも視覚的な主張を抑えています。

ロゴに関しては、フッター用の画像をHTMLへ直接固定するのではなく、Cocoon側に設定されているサイトロゴを利用する構成にしました。

これならロゴを変更した場合でも、Cocoonの管理画面からサクッと変更できるようにしました。

PC版フッター完成

細かな余白や各カードの高さ、リンクの配置などを調整し、PC版フッターはこの形になりました。

ヘッダーではサイト内の主要なページへ素早く移動できることを重視しましたが、フッターではもう少し広くサイト全体を案内できるようにしています。

同じナビゲーションでも役割を分けることで、上部と下部で同じメニューを繰り返すだけではない構成にしました。

次回は、「ホームページ制作記録③ モバイルヘッダー・フッター作成」
として、スマートフォン向けに変更したヘッダーとフッターをまとめる予定です。