ミニマルダークフッター
ロゴ＋タグライン、ナビゲーション、SNSアイコン、コピーライトをまとめた、濃紺ベースのミニマルなダークフッターです。上段は display:flex と justify-content:space-between でブランド・ナビ・SNSを横一列に配置し、折り返し可能にしています。
このパーツの使いどころと実装ポイント
ロゴ＋タグライン、ナビゲーション、SNSアイコン、コピーライトをまとめた、濃紺ベースのミニマルなダークフッターです。上段は display:flex と justify-content:space-between でブランド・ナビ・SNSを横一列に配置し、折り返し可能にしています。下に細い区切り線を引き、その下に著作権表示を置く定番の構造です。ナビは nav 要素に aria-label を付けて役割を明示しています。
向いている場面
落ち着いた印象のコーポレートサイト、ポートフォリオ、SaaSのランディングページなど、サイト全体を引き締めたい場面に向きます。ダーク基調なので、上のコンテンツが明るい配色でも視覚的な区切りとして機能します。
カスタマイズと注意点
- リンクの文字色は
rgba(255,255,255,.7)など半透明の白で、ホバー時に不透明へ戻すと上品な反応になります。暗背景上のコントラストは読みやすさのため確保してください。 - SNSアイコンは現状ダミー記号で入っていますが、Instagram や X などのブランドロゴは Material Symbols に無いため、ブランド公式のSVGに差し替えるのが適切です。
- ナビ項目が増えても
flex-wrapで自動的に折り返るため、スマホ幅でも崩れにくい設計です。
よくある質問
暗い背景なのでリンクが読みにくくなりませんか？
リンクは半透明の白文字で表示され、ホバー時に不透明な白へ変化します。本文とのコントラストは確保されていますが、項目を増やす際は文字色の明度を保ち、暗背景でも十分読める状態を維持してください。
SNSアイコンを本物のロゴに変えるべきですか？
はい。サンプルでは記号で代用していますが、InstagramやXなどのブランドロゴはアイコンフォントに含まれないため、各社公式のSVGロゴに差し替えるのが正しい運用です。リンクにはaria-labelでサービス名を付けておくとアクセシビリティも保てます。