フッター

2 カラム コンパクトフッター

左にブランド名と短いキャッチ・著作権表記、右に主要リンクを2グループ並べただけの簡潔なフッターです。 display:grid で2カラムに分割し、リンクは会社情報系と規約系の2列に整理しています。情報を盛り込みすぎず、サイトの締めくくりを軽く保つ構成です。

プレビュー

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

左にブランド名と短いキャッチ・著作権表記、右に主要リンクを2グループ並べただけの簡潔なフッターです。display:gridで2カラムに分割し、リンクは会社情報系と規約系の2列に整理しています。情報を盛り込みすぎず、サイトの締めくくりを軽く保つ構成です。

向いている場面

  • 1ページ完結のランディングページの末尾
  • 記事中心で情報量を抑えたいブログやオウンドメディア
  • 大規模なサイトマップ型フッターが過剰になる小規模サイト

カスタマイズと注意点

リンク先は実在するページに必ず差し替えてください。aタグにhrefが無いままだとクリックできず、検索エンジンも辿れません。プライバシーポリシーや利用規約、特定商取引法に基づく表記など、サービスに必要な法的リンクを過不足なく置きます。背景が濃色なので文字色のコントラストを確保し、画面が狭いスマートフォンでは2カラムを縦積みに変えて読みやすくします。著作権の年号は公開後に古くならないよう、表示する場合は最新へ更新するか、運用で見直す仕組みを決めておくと安心です。

よくある質問

リンクをもっと増やしたいです
右側のnavを増やせば3列以上に拡張できますが、コンパクトさが売りのパーツです。項目が多いならサイトマップ型の大きなフッターに作り替えたほうが整理しやすくなります。
スマートフォンで2カラムが窮屈です
画面幅が狭いときはメディアクエリでgrid-template-columnsを1列に変え、ブランド情報とリンクを縦に積むと読みやすくなります。リンクのタップ領域も十分に取ってください。