サイトマップ付きフッター

このパーツの使いどころと実装ポイント

このパーツは、ロゴとキャッチコピー、SNSアイコン、3カラムのナビゲーション、コピーライト行をひとつにまとめた本格的なサイトフッターです。レイアウトは display:grid で組み、幅220pxのブランド列と残り幅のナビ列に分けています。画面幅640px以下では grid-template-columns:1fr に切り替わり、ブランドとナビが縦積みになるため、スマートフォンでも各リンクが押しやすく並びます。

向いている場面

コーポレートサイトやサービスサイトなど、ページ数が多くフッターからのサイト内回遊を促したいサイトに向きます。たとえば制作会社、士業事務所、地域の店舗サイトなどで、サービス・会社情報・サポートの3グループにリンクを整理して置くと、訪問者が目的のページへたどり着きやすくなります。

カスタマイズと注意点

• ナビは3カラム固定ではなく、項目数に応じて ft__col を増減できます。リンク数が多い場合はグリッドの列定義を見直します。
• SNSアイコンには aria-label が付いているので、スクリーンリーダーでもリンク先が伝わります。差し替える際もラベルを残してください。
• 暗い背景に淡色テキストを重ねる配色のため、コピーライトなど小さな文字の色は読みやすいコントラストを保つよう調整します。