サイトマップ型 フッター
サイトマップ型 フッターは、 ロゴ・キャッチ・SNSアイコン・サイト内リンク群・著作権表記 をまとめた、企業サイト定番のフルフッターです。このサンプルは grid-template-columns:1fr 2fr でブランド領域とリンク領域を分け、狭い画面では一列に積み替わります。
このパーツの使いどころと実装ポイント
サイトマップ型 フッターは、ロゴ・キャッチ・SNSアイコン・サイト内リンク群・著作権表記をまとめた、企業サイト定番のフルフッターです。このサンプルはgrid-template-columns:1fr 2frでブランド領域とリンク領域を分け、狭い画面では一列に積み替わります。SNSアイコンはブランドロゴを保つためインラインSVGで実装されています。
向いている場面
ページ数の多いコーポレートサイトやメディアに向きます。フッターを第二のナビとして使い、どのページからでも主要セクションへ移動できるようにしたい場面に適しています。
カスタマイズと注意点
リンク群は見出しごとにグループ化でき、列を増減して情報量を調整できます。SNSアイコンは各サービスの公式ロゴをSVGで保持し、aria-labelでリンク先を明示してください。背景が濃色のため、リンクのコントラストとホバー状態を確保すると操作性が上がります。著作権の年号は自動更新にするか定期的に見直し、サイトマップとしての網羅性を保つために主要ページを漏れなく載せることが大切です。
よくある質問
フッターにサイトマップ的なリンクを置く意味はありますか
あります。フッターはどのページにも表示されるため、主要ページへの第二の入口になります。ユーザーの回遊を助けるだけでなく、サイト内のリンク構造が明確になり、各ページが見つけられやすくなる効果も期待できます。
SNSアイコンはアイコンフォントで置き換えてよいですか
ブランドロゴはインラインSVGで保つのが安全です。X・Instagram・Facebookなどの公式ロゴは形が決まっており、汎用アイコンセットには無いか正確でないことがあります。aria-labelでリンク先を明示することも忘れないでください。