マルチカラムサイトフッター
ブランド説明・サイトリンク群・連絡先・SNSテキストリンクを整理した多段フッター。Material Symbolsで連絡先を補助し、最下部にコピーライトを置く。
このパーツの使いどころと実装ポイント
このパーツは、ブランド説明・サイトリンク群・連絡先・SNSリンクを整理した多段フッターです。grid-template-columns:1.6fr 1fr 1fr 1.2fr で4つの列を幅に強弱を付けて配置し、左の説明列を広く、リンク列を均等に取ります。連絡先にはインラインSVGのアイコンを添え、最下部にコピーライトを置きます。リンク群は nav 要素でまとめられており、サイト構造を機械的にも伝えやすくしています。
向いている場面
- ページ数の多いコーポレートサイトの、網羅的なサイト案内として
- サービス・会社情報・問い合わせを整理して見せたいとき
- SNSや連絡先への導線を、控えめにまとめて置きたいとき
差し替えどころは、ブランド説明文・各列の見出しとリンク・連絡先・SNSリンクです。SNSはブランドロゴが必要なものはインラインSVGのロゴを保持し、テキストリンクのままでも構いません。リンク列は2〜3列が扱いやすく、項目はサイトの主要ページに絞ると迷いが減ります。
実装上の注意
リンク群を nav でまとめ、見出しは h3 で階層を示しています。連絡先アイコンは装飾なので、テキストと重複する情報なら aria-hidden で読み上げを省きます。暗い背景に淡い文字の配色なので、リンク文字のコントラストが弱くなりすぎないか確認してください。4列はスマートフォンでは縦積みになる前提で、列の順序が読みやすいかをチェックします。
よくある質問
SNSのアイコンはMaterial Symbolsに置き換えてよいですか？
メールや住所などの連絡先アイコンはMaterial Symbolsで問題ありませんが、Instagram・X・GitHubといったブランドやSNSのロゴはMaterial Symbolsには含まれていません。これらは各サービスの公式ブランドSVGを保持してください。勝手に似たアイコンに置き換えると、見分けがつきにくくなりブランド表記としても不適切になります。
リンク列が多すぎて縦に長くなります。どう整理しますか？
1列あたりの項目は5〜6個までに抑え、列はサービス・会社情報・問い合わせなど意味のまとまりで分けると見通しが良くなります。項目が増えすぎる場合は、フッターには主要ページだけを置き、詳細はサイトマップページへ誘導する方法もあります。スマートフォンでは縦積みになるため、重要な列を上に並べると親切です。