フッター · フッター
コーポレート向けの多段フッター
ニュースレター帯、5カラムのリンク群、ステータスバッジ、言語切替、SNSアイコンを整理したコーポレートサイト向けの情報密度高めフッター。信頼感の配色と安定したタイポグラフィで、サイト下部に"事務的すぎない"安心感を置く設計。
プレビュー
概要
フッターは、訪問者が離脱する直前に目にする場所です。多くのサイトでは「サイトマップ・著作権・プライバシー」の最小構成で済まされる。しかしB2B SaaSやコーポレートサイトでは、この最下部こそ「ちゃんとした会社である」という総合的な印象を固める最後のチャンスです。
情報量を、信頼に変える
多段フッターは、一見すると要素が多くゴチャついて見えそうです。しかし、ニュースレター・認証バッジ・稼働ステータス・言語切替・SNS——これらを色彩トーンと余白の統一のもとに整然と並べると、情報量はそのまま「この会社は多面的にきちんと運営されている」という信頼の厚みに変わります。一つひとつの要素は小さくても、組み合わせの総和が効くのです。
別れ際の安心感
離脱直前の訪問者は、無意識に「この会社と関わって大丈夫か」を最終判断しています。稼働ステータスの「全システム正常」、第三者認証のバッジ、正直な発行頻度を書いたニュースレター欄——これらは派手ではありませんが、別れ際の不安を静かに打ち消します。フッターは事務的な物置ではなく、信頼を締めくくる場所です。
仕上げの判断軸
構成はブランド列（1.25fr）＋リンク列×4（1fr）の5カラムが扱いやすい比率。各列の見出しは小さな大文字ラベルに固定すると、どの列も同じ「棚」に見えて整います。Changelogなど見てほしいリンクには小さなNEWバッジを。稼働ステータスや言語切替は実サービスと連動させると、演出が実用を兼ねます。SNSアイコンは角丸正方形で統一し、hoverでアクセント色に反応させます。
使いどころ
- B2B SaaS・フィンテック・ヘルステックなど、信頼感と情報量の両立が必要なコーポレート／プロダクトサイト
- グローバル展開済みで言語切替・認証バッジの表示が必要なサイト
- ニュースレター登録を主要CTA の一つとして扱いたい製品
このデザインの分類
- カテゴリ
- フッター
- スタイル
- コーポレート / クール / スイス様式 / SaaS
背景と狙いどころ
AIへの指示文
B2B SaaS / コーポレートサイト向けに、情報密度の高いフッターブロックを作ってください。
キャンバス:
- フッター本体は深めのネイビー (#0e1a2b → #19263c)、文字は (#e6edf7) のオフホワイト、ミュート (#9aa8bf) とクワイエット (#6a7690) の2段階。
- アクセントは空色系ブルー (#4faaff)。リンクhoverとCTAボタンのみ使用。
- サンセリフ (Inter) で統一。見出しの letter-spacing と weight で階層を作る。
フッター構造 (上から):
1. ニュースレター帯 (`nl`):
- 2カラム: 左にコピー (H2 + 1段落)、右にメール入力フォーム。
- H2: "Quarterly notes from the team." clamp(1.5rem, 2.5vw, 2rem)、weight 600、letter-spacing -0.02em。
- コピー: ミュート色、最大 48ch、"Product updates, the occasional engineering write-up..." 具体的な内容と頻度 ("Four emails a year, never more") を明示する。
- フォーム: input (email, flex 1 1 240px) + submit ボタン。input は半透明白背景、focus でアクセントボーダー。ボタンは青アクセント。
- フォーム下に fine print: "We'll never share your address. <Privacy policy>"。
- 下辺に半透明の1px罫線。
2. メインの5カラム (`cols`):
- `1.25fr 1fr 1fr 1fr 1fr` の比率で、最初のカラムがブランド列。
- ブランド列:
- ロゴ: 28px の角丸正方形 (青グラデーション) + ブランド名。
- ミッションステートメント: 最大 28ch、ミュート色、1段落。
- 認証バッジ群: SOC 2 / ISO 27001 / GDPR のような小さなピル (0.72rem, 1pxボーダー, 半透明背景)。
- リンク列 x 4 (Product / Company / Resources / Legal):
- H3: 0.78rem, uppercase, letter-spacing 0.12em, ミュート色。
- ul: 5項目ずつ、0.45remの行間、hover でアクセント色に。
- 新機能には "NEW" の小さな青バッジを span で付与できる構造にする。
3. 下段バー (`bottom`):
- 上辺に半透明の1px罫線。
- 左: コピーライト、Sitemap リンク、"All systems normal" のステータスバッジ (緑の点 + 緑テキスト + 緑枠のピル)。
- 右: 言語スイッチャー (世界アイコンSVG + "English (US)" ピル)、SNSアイコン群 (X / GitHub / LinkedIn / YouTube)。アイコンは 32x32 の角丸正方形に14px SVG、hoverでアクセント色。
- 小さいギャップと flex-wrap で縦積みにも耐える。
レスポンシブ:
- 960px 以下: 5カラムを3カラムに、brand列は全幅に。nl は1カラム積み。
- 560px 以下: 3カラムを2カラムに。
JSは送信ハンドリング以外不要。レイアウトはすべてCSS。
バリエーション
ライトテーマ版
フッター背景を (#f4f6fa)、メインテキストを (#0f172a) に。 ネイビーの濃淡 (nl・cols・bottomの背景差) を1段階ずつ明るく寄せる。 アクセントの青はそのまま。
コンプライアンス重視版
ブランド列のミッションを削除し、代わりに認証バッジを拡張 (8個程度): SOC 2 II / ISO 27001 / HIPAA / GDPR / CCPA / PCI DSS 等。 新たに "Trust Center" リンクを Legal 列のトップに昇格。 ニュースレター帯にも "Compliance updates" のチェックボックスを追加。
よくある質問
5カラムは多すぎませんか？
ニュースレター登録率を上げるコツは？
ステータスバッジは必須？
関連するデザイン
手描きスケッチを散りばめた温度のあるフッター
紙質感のオフホワイトに手描き線のイラスト・ラフな書き込みを散りばめた、温度のあるフッター。クラフトブランド・カフェ・絵本系メディアなど人の手の温もりが武器になる業態に。
B2Bコーポレートの機能紹介セクション
B2B SaaSやエンタープライズ製品向けの機能紹介セクション。落ち着いた寒色配色と整然としたグリッド、データ感のあるアイコンで「実用と信頼」を伝える設計。
スイス様式のシンプルなお問い合わせフォーム
厳格なグリッドと無装飾サンセリフで構築する、スイス国際タイポグラフィ様式のお問い合わせフォーム。色を排し、罫線・余白・タイポの階層だけで「真剣さ」を伝える設計。