フッター · Footer · Blanc Nail
検索…
カタログ 統計
CATALOG › Foundations › Footer
フッター
サイト下部の総合案内。リンク群、ニュースレター、SNS 配置。
14
Patterns
Foundations
Group
isValid=0
Verified
CSS
Animation
01
Footer — Dark 4 Column
footer-dark-4col
◆ STUDIO
未来を創るチームのための、次世代プラットフォーム。
𝕏 ✦ ▶ 📷
プロダクト
機能
料金
API ドキュメント
変更履歴
会社情報
会社概要
採用情報
ブログ
プレスリリース
サポート
ヘルプセンター
お問い合わせ
ステータス
セキュリティ
© 2026 STUDIO Inc. All rights reserved.
- パターン名: Footer — Dark 4 Column
- 概要: Dark navy 4-column footer with brand, links and copyright.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 21.66% / 21.67% / 21.67%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, heading, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-dark-4col"} /-->
CSS:
.section-footer-dark-4col { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-dark-4col').forEach((el) => el.dataset.ready = 'true');
02
Footer — Gradient Multi Column
footer-gradient
私たちと、未来を創ろう。
あなたのビジネスを次のレベルへ。
3,000+ 社が選ぶ理由を、お試しください。
プロダクト
機能
料金
API
会社
概要
採用
お問い合わせ
リーガル
プライバシー
利用規約
Cookie
© 2026 STUDIO Inc. Made with ♥ in Tokyo.
- パターン名: Footer — Gradient Multi Column
- 概要: Indigo gradient footer with brand, three link columns and tagline.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, heading, paragraph, buttons, button, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-gradient"} /-->
CSS:
.section-footer-gradient { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-gradient').forEach((el) => el.dataset.ready = 'true');
03
Footer — Minimal Centered
footer-minimal
◆ STUDIO
機能 ・ 料金 ・ ブログ ・ お問い合わせ
© 2026 STUDIO Inc.
- パターン名: Footer — Minimal Centered
- 概要: Minimal centered footer with brand, inline links and copyright.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 720px、主要ブロック group, heading, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-minimal"} /-->
CSS:
.section-footer-minimal { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-minimal').forEach((el) => el.dataset.ready = 'true');
04
Footer — Newsletter + Copyright
footer-newsletter
最新情報を受け取る
月 1 回、業界の最新動向と Tips をお届けします。
© 2026 STUDIO Inc.
プライバシー ・ 利用規約 ・ Cookie
- パターン名: Footer — Newsletter + Copyright
- 概要: Two-stage footer: gradient newsletter top, dark copyright bottom.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, group, heading, paragraph, buttons, button, group, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-newsletter"} /-->
CSS:
.section-footer-newsletter { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-newsletter').forEach((el) => el.dataset.ready = 'true');
05
Footer — EX01 Minimal Centered
footer-ex01-minimal-center
◆ BRAND NAME
ホーム
サービス
料金
アクセス
お問い合わせ
© 2026 Brand Name All rights reserved.
- パターン名: Footer — EX01 Minimal Centered
- 概要: Centered brand, one nav row and copyright on light gray.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-ex01-minimal-center"} /-->
CSS:
.section-footer-ex01-minimal-center { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-ex01-minimal-center').forEach((el) => el.dataset.ready = 'true');
06
Footer — EX02 Warm Three Column
footer-ex02-warm-3col
◆ 工房ブランド
手しごとの道具と暮らしの品を、つくり手の言葉とともにお届けします。
SHOP
商品一覧
新着入荷
ギフト包装
お直し・修理
SUPPORT
ご利用ガイド
配送・送料
よくあるご質問
お問い合わせ
© 2026 工房ブランド
プライバシーポリシー ・ 特定商取引法に基づく表記
- パターン名: Footer — EX02 Warm Three Column
- 概要: Warm beige footer: brand intro plus two link columns and legal bar.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-ex02-warm-3col"} /-->
CSS:
.section-footer-ex02-warm-3col { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-ex02-warm-3col').forEach((el) => el.dataset.ready = 'true');
07
Footer — EX03 Zen Vertical
footer-ex03-zen-vertical
屋号印
京都市中京区例町 1-2-3
10:00 — 18:00 ／ 水曜定休
TEL 075-000-0000
© 2026 YAGOIN — ALL RIGHTS RESERVED
- パターン名: Footer — EX03 Zen Vertical
- 概要: Quiet Japanese footer: centered store info between thin rules.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-ex03-zen-vertical"} /-->
CSS:
.section-footer-ex03-zen-vertical { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-ex03-zen-vertical').forEach((el) => el.dataset.ready = 'true');
08
Footer — EX04 CTA Band Footer
footer-ex04-cta-top
まずは無料相談から始めましょう
◆ COMPANY
会社概要 ・ 採用情報 ・ プライバシーポリシー ・ © 2026 Company Inc.
- パターン名: Footer — EX04 CTA Band Footer
- 概要: Footer led by a conversion band, then compact links and legal.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-ex04-cta-top"} /-->
CSS:
.section-footer-ex04-cta-top { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-ex04-cta-top').forEach((el) => el.dataset.ready = 'true');
09
Footer — EX05 Shop Info Footer
footer-ex05-shop-info
食堂みなみ
営業時間
11:30 — 14:00
17:30 — 22:00（月曜定休）
所在地
京都市下京区例通 4-5-6
例駅から徒歩 3 分
ご予約
075-000-0000
© 2026 食堂みなみ ・ プライバシーポリシー
- パターン名: Footer — EX05 Shop Info Footer
- 概要: Store-first footer: hours, address and phone in three columns plus legal.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-ex05-shop-info"} /-->
CSS:
.section-footer-ex05-shop-info { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-ex05-shop-info').forEach((el) => el.dataset.ready = 'true');
10
Footer — EX06 Newsletter Dark
footer-ex06-newsletter
新作とイベントの案内をお届けします
月 2 回まで ・ いつでも解除できます
商品一覧
店舗案内
読みもの
お問い合わせ
© 2026 Brand
- パターン名: Footer — EX06 Newsletter Dark
- 概要: Dark footer with newsletter invitation row and link columns.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-ex06-newsletter"} /-->
CSS:
.section-footer-ex06-newsletter { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-ex06-newsletter').forEach((el) => el.dataset.ready = 'true');
11
Footer — EX07 Corporate Four Column
footer-ex07-corporate-4col
◆ 株式会社サンプル
〒600-0000 京都市中京区例町 1-2-3
平日 9:00 — 18:00
SERVICE
事業内容
導入の流れ
料金
COMPANY
会社概要
採用情報
お知らせ
CONTACT
© 2026 Sample Inc.
プライバシーポリシー ・ サイトマップ
- パターン名: Footer — EX07 Corporate Four Column
- 概要: Corporate footer: brand, two sitemap columns, contact column and legal bar.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-ex07-corporate-4col"} /-->
CSS:
.section-footer-ex07-corporate-4col { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-ex07-corporate-4col').forEach((el) => el.dataset.ready = 'true');
12
Footer — EX08 Social First
footer-ex08-social-first
最新情報は SNS でお知らせしています
𝕏 X (Twitter)
▶ YouTube
💬 LINE
© 2026 Atelier Sample ・ プライバシーポリシー
- パターン名: Footer — EX08 Social First
- 概要: Footer centered on social channels with short brand note.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-ex08-social-first"} /-->
CSS:
.section-footer-ex08-social-first { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-ex08-social-first').forEach((el) => el.dataset.ready = 'true');
13
Footer — EX09 Gradient Modern
footer-ex09-gradient-modern
◆ STUDIO LOGO
つくる人の隣で、いちばん頼れる存在に。
制作実績
料金プラン
ブログ
お問い合わせ
© 2026 STUDIO LOGO ・ PRIVACY ・ TERMS
- パターン名: Footer — EX09 Gradient Modern
- 概要: Modern gradient footer with tagline and pill quick links.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-ex09-gradient-modern"} /-->
CSS:
.section-footer-ex09-gradient-modern { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-ex09-gradient-modern').forEach((el) => el.dataset.ready = 'true');
14
Footer — EX10 Compact Single Bar
footer-ex10-compact-bar
© 2026 ◆ Brand Inc. All rights reserved.
利用規約 ・ プライバシー ・ 運営会社
- パターン名: Footer — EX10 Compact Single Bar
- 概要: One-line compact footer bar: copyright left, three links right.
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/footer-ex10-compact-bar"} /-->
CSS:
.section-footer-ex10-compact-bar { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-footer-ex10-compact-bar').forEach((el) => el.dataset.ready = 'true');