検索…
カタログ 統計
CATALOG › Foundations › Footer
フッター
サイト下部の総合案内。リンク群、ニュースレター、SNS 配置。
70
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
Reference Complete — footer 01 Sticky Entry
reference-complete-footer-01-sticky-entry-omodakaya
Sampled Site
14701 / Omodakaya
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: Reference Complete — footer 01 Sticky Entry
- 概要: 参照サンプル再確認から追加したfooter向け部品。固定導線つきの大判ファーストビュー。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 28% / 72%、推奨コンテンツ幅 45083px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-footer-01-sticky-entry-omodakaya"} /-->
CSS:
.section-reference-complete-footer-01-sticky-entry-omodakaya { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-footer-01-sticky-entry-omodakaya').forEach((el) => el.dataset.ready = 'true');
06
Reference Complete — footer 02 Editorial Issue
reference-complete-footer-02-editorial-issue-mizuya-kyoto
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: Reference Complete — footer 02 Editorial Issue
- 概要: 参照サンプル再確認から追加したfooter向け部品。雑誌的な見出しと導入文の編集レイアウト。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 15722px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-footer-02-editorial-issue-mizuya-kyoto"} /-->
CSS:
.section-reference-complete-footer-02-editorial-issue-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-footer-02-editorial-issue-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');
07
Reference Complete — footer 03 Brand Index
reference-complete-footer-03-brand-index-jins-holdings
Card Flow
迷わない比較カード
Jins Holdings から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: Reference Complete — footer 03 Brand Index
- 概要: 参照サンプル再確認から追加したfooter向け部品。複数ブランドやサービスを迷わせず並べる索引。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 15783px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-footer-03-brand-index-jins-holdings"} /-->
CSS:
.section-reference-complete-footer-03-brand-index-jins-holdings { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-footer-03-brand-index-jins-holdings').forEach((el) => el.dataset.ready = 'true');
08
Reference Complete — footer 04 Recruit Story
reference-complete-footer-04-recruit-story-glanta
Split Story
写真と要点で信頼を作る
Glanta の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: Reference Complete — footer 04 Recruit Story
- 概要: 参照サンプル再確認から追加したfooter向け部品。採用・企業紹介に使える人物/思想の分割構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 15744px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-footer-04-recruit-story-glanta"} /-->
CSS:
.section-reference-complete-footer-04-recruit-story-glanta { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-footer-04-recruit-story-glanta').forEach((el) => el.dataset.ready = 'true');
09
Reference Complete — footer 05 Commerce Compare
reference-complete-footer-05-commerce-compare-niwaya
Collection Selector
Niwaya の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: Reference Complete — footer 05 Commerce Compare
- 概要: 参照サンプル再確認から追加したfooter向け部品。料金・商品・プランを比較しやすい構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 15805px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-footer-05-commerce-compare-niwaya"} /-->
CSS:
.section-reference-complete-footer-05-commerce-compare-niwaya { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-footer-05-commerce-compare-niwaya').forEach((el) => el.dataset.ready = 'true');
10
Reference Complete — footer 06 Timeline Proof
reference-complete-footer-06-timeline-proof-mec-residence-recruit
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: Reference Complete — footer 06 Timeline Proof
- 概要: 参照サンプル再確認から追加したfooter向け部品。沿革・導入手順・制作工程の時系列。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 15746px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-footer-06-timeline-proof-mec-residence-recruit"} /-->
CSS:
.section-reference-complete-footer-06-timeline-proof-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-footer-06-timeline-proof-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');
11
Reference Complete — footer 07 Gallery Led
reference-complete-footer-07-gallery-led-echitora
Detail
- パターン名: Reference Complete — footer 07 Gallery Led
- 概要: 参照サンプル再確認から追加したfooter向け部品。写真量の多い商材を見せるギャラリー導線。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 15827px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-footer-07-gallery-led-echitora"} /-->
CSS:
.section-reference-complete-footer-07-gallery-led-echitora { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-footer-07-gallery-led-echitora').forEach((el) => el.dataset.ready = 'true');
12
Reference Complete — footer 08 Dashboard Proof
reference-complete-footer-08-dashboard-proof-twoe
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: Reference Complete — footer 08 Dashboard Proof
- 概要: 参照サンプル再確認から追加したfooter向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 15788px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-footer-08-dashboard-proof-twoe"} /-->
CSS:
.section-reference-complete-footer-08-dashboard-proof-twoe { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-footer-08-dashboard-proof-twoe').forEach((el) => el.dataset.ready = 'true');
13
Reference Complete — footer 09 Contact Ready
reference-complete-footer-09-contact-ready-asuzac-highschool
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: Reference Complete — footer 09 Contact Ready
- 概要: 参照サンプル再確認から追加したfooter向け部品。問い合わせ前の入力項目を整理する導線。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 15769px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-footer-09-contact-ready-asuzac-highschool"} /-->
CSS:
.section-reference-complete-footer-09-contact-ready-asuzac-highschool { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-footer-09-contact-ready-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');
14
Reference Complete — footer 10 Mobile Rail
reference-complete-footer-10-mobile-rail-shueisha-recruit
Shueisha
About
Works
Journal
Contact
- パターン名: Reference Complete — footer 10 Mobile Rail
- 概要: 参照サンプル再確認から追加したfooter向け部品。スマホ閲覧で要点を縦に追えるレール型。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 15890px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-footer-10-mobile-rail-shueisha-recruit"} /-->
CSS:
.section-reference-complete-footer-10-mobile-rail-shueisha-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-footer-10-mobile-rail-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');
15
Reference Brand — Dark Editorial Footer
reference-dark-editorial-footer
Blanc Journal
Archive / Culture / Recruit / Contact
menu
- Brand story
- Shop
- Recruit
- News
- パターン名: Reference Brand — Dark Editorial Footer
- 概要: ブランドサイト向けの暗色大型フッター。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 28% / 28%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, heading, paragraph, column, paragraph, list
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-dark-editorial-footer"} /-->
CSS:
.section-reference-dark-editorial-footer { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-dark-editorial-footer').forEach((el) => el.dataset.ready = 'true');
16
SANKOU100 — 015 Studio Cbr
sankou100-015-studio-cbr
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU100 — 015 Studio Cbr
- 概要: SANKOU! sample 015から抽出したtabs型の商用サイト向け構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 995px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-015-studio-cbr"} /-->
CSS:
.section-sankou100-015-studio-cbr { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-015-studio-cbr').forEach((el) => el.dataset.ready = 'true');
17
SANKOU100 — 055 Unicell
sankou100-055-unicell
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU100 — 055 Unicell
- 概要: SANKOU! sample 055から抽出したtabs型の商用サイト向け構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 1035px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-055-unicell"} /-->
CSS:
.section-sankou100-055-unicell { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-055-unicell').forEach((el) => el.dataset.ready = 'true');
18
SANKOU100 — 095 Shueisha Recruit
sankou100-095-shueisha-recruit
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU100 — 095 Shueisha Recruit
- 概要: SANKOU! sample 095から抽出したtabs型の商用サイト向け構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 1075px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-095-shueisha-recruit"} /-->
CSS:
.section-sankou100-095-shueisha-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-095-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');
19
SANKOU Max — footer 01 Unipos
sankoumax-footer-01-unipos
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — footer 01 Unipos
- 概要: SANKOU100 sample setから展開したfooter向けfaq構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2621px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-01-unipos"} /-->
CSS:
.section-sankoumax-footer-01-unipos { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-01-unipos').forEach((el) => el.dataset.ready = 'true');
20
SANKOU Max — footer 02 Trail Inc
sankoumax-footer-02-trail-inc
Detail
- パターン名: SANKOU Max — footer 02 Trail Inc
- 概要: SANKOU100 sample setから展開したfooter向けgallery構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2822px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-02-trail-inc"} /-->
CSS:
.section-sankoumax-footer-02-trail-inc { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-02-trail-inc').forEach((el) => el.dataset.ready = 'true');
21
SANKOU Max — footer 03 Applebase
sankoumax-footer-03-applebase
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — footer 03 Applebase
- 概要: SANKOU100 sample setから展開したfooter向けroster構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2823px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-03-applebase"} /-->
CSS:
.section-sankoumax-footer-03-applebase { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-03-applebase').forEach((el) => el.dataset.ready = 'true');
22
SANKOU Max — footer 04 Meisei Es
sankoumax-footer-04-meisei-es
1704
Meisei Es
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — footer 04 Meisei Es
- 概要: SANKOU100 sample setから展開したfooter向けmanifesto構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2604px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-04-meisei-es"} /-->
CSS:
.section-sankoumax-footer-04-meisei-es { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-04-meisei-es').forEach((el) => el.dataset.ready = 'true');
23
SANKOU Max — footer 05 Unicell
sankoumax-footer-05-unicell
Sampled Site
1705 / Unicell
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — footer 05 Unicell
- 概要: SANKOU100 sample setから展開したfooter向けcover構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 28% / 72%、推奨コンテンツ幅 6095px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-05-unicell"} /-->
CSS:
.section-sankoumax-footer-05-unicell { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-05-unicell').forEach((el) => el.dataset.ready = 'true');
24
SANKOU Max — footer 06 Uki Editions
sankoumax-footer-06-uki-editions
Split Story
写真と要点で信頼を作る
Uki Editions の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — footer 06 Uki Editions
- 概要: SANKOU100 sample setから展開したfooter向けsplit構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 2746px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-06-uki-editions"} /-->
CSS:
.section-sankoumax-footer-06-uki-editions { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-06-uki-editions').forEach((el) => el.dataset.ready = 'true');
25
SANKOU Max — footer 07 Kikyougaoka
sankoumax-footer-07-kikyougaoka
Card Flow
迷わない比較カード
Kikyougaoka から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — footer 07 Kikyougaoka
- 概要: SANKOU100 sample setから展開したfooter向けcards構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2787px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-07-kikyougaoka"} /-->
CSS:
.section-sankoumax-footer-07-kikyougaoka { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-07-kikyougaoka').forEach((el) => el.dataset.ready = 'true');
26
SANKOU Max — footer 08 J Security
sankoumax-footer-08-j-security
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
1708
- パターン名: SANKOU Max — footer 08 J Security
- 概要: SANKOU100 sample setから展開したfooter向けcollage構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 38% / 32% / 1px、推奨コンテンツ幅 2828px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-08-j-security"} /-->
CSS:
.section-sankoumax-footer-08-j-security { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-08-j-security').forEach((el) => el.dataset.ready = 'true');
27
SANKOU Max — footer 09 Serious Ceramic
sankoumax-footer-09-serious-ceramic
Serious
About
Works
Journal
Contact
- パターン名: SANKOU Max — footer 09 Serious Ceramic
- 概要: SANKOU100 sample setから展開したfooter向けrail構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2889px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-09-serious-ceramic"} /-->
CSS:
.section-sankoumax-footer-09-serious-ceramic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-09-serious-ceramic').forEach((el) => el.dataset.ready = 'true');
28
SANKOU Max — footer 10 Tsumari Chamame
sankoumax-footer-10-tsumari-chamame
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — footer 10 Tsumari Chamame
- 概要: SANKOU100 sample setから展開したfooter向けeditorial構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 2730px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-10-tsumari-chamame"} /-->
CSS:
.section-sankoumax-footer-10-tsumari-chamame { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-10-tsumari-chamame').forEach((el) => el.dataset.ready = 'true');
29
SANKOU Max — footer 11 Notahotel Architects
sankoumax-footer-11-notahotel-architects
Collection Selector
Notahotel Architects の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — footer 11 Notahotel Architects
- 概要: SANKOU100 sample setから展開したfooter向けproduct構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 2811px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-11-notahotel-architects"} /-->
CSS:
.section-sankoumax-footer-11-notahotel-architects { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-11-notahotel-architects').forEach((el) => el.dataset.ready = 'true');
30
SANKOU Max — footer 12 Montblanc Pictures
sankoumax-footer-12-montblanc-pictures
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — footer 12 Montblanc Pictures
- 概要: SANKOU100 sample setから展開したfooter向けtimeline構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2752px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-12-montblanc-pictures"} /-->
CSS:
.section-sankoumax-footer-12-montblanc-pictures { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-12-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');
31
SANKOU Max — footer 13 Tattoo Rays
sankoumax-footer-13-tattoo-rays
数字で納得させる
53%
改善率
6分
短縮
12091
導入数
- パターン名: SANKOU Max — footer 13 Tattoo Rays
- 概要: SANKOU100 sample setから展開したfooter向けstats構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2673px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-13-tattoo-rays"} /-->
CSS:
.section-sankoumax-footer-13-tattoo-rays { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-13-tattoo-rays').forEach((el) => el.dataset.ready = 'true');
32
SANKOU Max — footer 14 Rim Jins
sankoumax-footer-14-rim-jins
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — footer 14 Rim Jins
- 概要: SANKOU100 sample setから展開したfooter向けcontact構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 56% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2794px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-14-rim-jins"} /-->
CSS:
.section-sankoumax-footer-14-rim-jins { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-14-rim-jins').forEach((el) => el.dataset.ready = 'true');
33
SANKOU Max — footer 15 Obunko
sankoumax-footer-15-obunko
Obunko
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 1715
- パターン名: SANKOU Max — footer 15 Obunko
- 概要: SANKOU100 sample setから展開したfooter向けfooter構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 2835px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-15-obunko"} /-->
CSS:
.section-sankoumax-footer-15-obunko { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-15-obunko').forEach((el) => el.dataset.ready = 'true');
34
SANKOU Max — footer 16 Pronets Recruit
sankoumax-footer-16-pronets-recruit
NEWS
Pronets Recruit から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — footer 16 Pronets Recruit
- 概要: SANKOU100 sample setから展開したfooter向けalert構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 2796px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-16-pronets-recruit"} /-->
CSS:
.section-sankoumax-footer-16-pronets-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-16-pronets-recruit').forEach((el) => el.dataset.ready = 'true');
35
SANKOU Max — footer 17 Glanta
sankoumax-footer-17-glanta
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — footer 17 Glanta
- 概要: SANKOU100 sample setから展開したfooter向けmap構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2757px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-17-glanta"} /-->
CSS:
.section-sankoumax-footer-17-glanta { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-17-glanta').forEach((el) => el.dataset.ready = 'true');
36
SANKOU Max — footer 18 Tashi Portfolio
sankoumax-footer-18-tashi-portfolio
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — footer 18 Tashi Portfolio
- 概要: SANKOU100 sample setから展開したfooter向けform構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 2778px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-18-tashi-portfolio"} /-->
CSS:
.section-sankoumax-footer-18-tashi-portfolio { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-18-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');
37
SANKOU Max — footer 19 Kitanohashi
sankoumax-footer-19-kitanohashi
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — footer 19 Kitanohashi
- 概要: SANKOU100 sample setから展開したfooter向けtabs構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2699px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-19-kitanohashi"} /-->
CSS:
.section-sankoumax-footer-19-kitanohashi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-19-kitanohashi').forEach((el) => el.dataset.ready = 'true');
38
SANKOU Max — footer 20 Morinosato Clinic
sankoumax-footer-20-morinosato-clinic
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — footer 20 Morinosato Clinic
- 概要: SANKOU100 sample setから展開したfooter向けdashboard構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 2800px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-20-morinosato-clinic"} /-->
CSS:
.section-sankoumax-footer-20-morinosato-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-20-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');
39
SANKOU Max — footer 21 Asuzac Highschool
sankoumax-footer-21-asuzac-highschool
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — footer 21 Asuzac Highschool
- 概要: SANKOU100 sample setから展開したfooter向けfaq構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2641px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-21-asuzac-highschool"} /-->
CSS:
.section-sankoumax-footer-21-asuzac-highschool { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-21-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');
40
SANKOU Max — footer 22 Junni Newyear
sankoumax-footer-22-junni-newyear
Detail
- パターン名: SANKOU Max — footer 22 Junni Newyear
- 概要: SANKOU100 sample setから展開したfooter向けgallery構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2842px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-22-junni-newyear"} /-->
CSS:
.section-sankoumax-footer-22-junni-newyear { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-22-junni-newyear').forEach((el) => el.dataset.ready = 'true');
41
SANKOU Max — footer 23 Mizota Ks
sankoumax-footer-23-mizota-ks
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — footer 23 Mizota Ks
- 概要: SANKOU100 sample setから展開したfooter向けroster構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2843px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-23-mizota-ks"} /-->
CSS:
.section-sankoumax-footer-23-mizota-ks { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-23-mizota-ks').forEach((el) => el.dataset.ready = 'true');
42
SANKOU Max — footer 24 Nissan Career
sankoumax-footer-24-nissan-career
1724
Nissan Career
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — footer 24 Nissan Career
- 概要: SANKOU100 sample setから展開したfooter向けmanifesto構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2624px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-24-nissan-career"} /-->
CSS:
.section-sankoumax-footer-24-nissan-career { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-24-nissan-career').forEach((el) => el.dataset.ready = 'true');
43
SANKOU Max — footer 25 Shueisha Recruit
sankoumax-footer-25-shueisha-recruit
Sampled Site
1725 / Shueisha Recruit
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — footer 25 Shueisha Recruit
- 概要: SANKOU100 sample setから展開したfooter向けcover構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 30% / 70%、推奨コンテンツ幅 6155px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-25-shueisha-recruit"} /-->
CSS:
.section-sankoumax-footer-25-shueisha-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-25-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');
44
SANKOU Max — footer 26 Sanu Weekday
sankoumax-footer-26-sanu-weekday
Split Story
写真と要点で信頼を作る
Sanu Weekday の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — footer 26 Sanu Weekday
- 概要: SANKOU100 sample setから展開したfooter向けsplit構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 2766px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-26-sanu-weekday"} /-->
CSS:
.section-sankoumax-footer-26-sanu-weekday { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-26-sanu-weekday').forEach((el) => el.dataset.ready = 'true');
45
SANKOU Max — footer 27 Newspicks Business
sankoumax-footer-27-newspicks-business
Card Flow
迷わない比較カード
Newspicks Business から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — footer 27 Newspicks Business
- 概要: SANKOU100 sample setから展開したfooter向けcards構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2807px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-27-newspicks-business"} /-->
CSS:
.section-sankoumax-footer-27-newspicks-business { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-27-newspicks-business').forEach((el) => el.dataset.ready = 'true');
46
SANKOU Max — footer 28 Miyakawa Lab
sankoumax-footer-28-miyakawa-lab
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
1728
- パターン名: SANKOU Max — footer 28 Miyakawa Lab
- 概要: SANKOU100 sample setから展開したfooter向けcollage構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 1px / 34% / 36% / 1px、推奨コンテンツ幅 2848px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-28-miyakawa-lab"} /-->
CSS:
.section-sankoumax-footer-28-miyakawa-lab { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-28-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');
47
SANKOU Max — footer 29 Matsuo Komuten
sankoumax-footer-29-matsuo-komuten
Matsuo
About
Works
Journal
Contact
- パターン名: SANKOU Max — footer 29 Matsuo Komuten
- 概要: SANKOU100 sample setから展開したfooter向けrail構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2909px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-29-matsuo-komuten"} /-->
CSS:
.section-sankoumax-footer-29-matsuo-komuten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-29-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');
48
SANKOU Max — footer 30 Yokohama Timberwharf
sankoumax-footer-30-yokohama-timberwharf
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — footer 30 Yokohama Timberwharf
- 概要: SANKOU100 sample setから展開したfooter向けeditorial構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 2750px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-30-yokohama-timberwharf"} /-->
CSS:
.section-sankoumax-footer-30-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-30-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');
49
SANKOU Max — footer 31 Janu
sankoumax-footer-31-janu
Collection Selector
Janu の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — footer 31 Janu
- 概要: SANKOU100 sample setから展開したfooter向けproduct構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 2831px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-31-janu"} /-->
CSS:
.section-sankoumax-footer-31-janu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-31-janu').forEach((el) => el.dataset.ready = 'true');
50
SANKOU Max — footer 32 Daimatsu
sankoumax-footer-32-daimatsu
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — footer 32 Daimatsu
- 概要: SANKOU100 sample setから展開したfooter向けtimeline構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2772px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-32-daimatsu"} /-->
CSS:
.section-sankoumax-footer-32-daimatsu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-32-daimatsu').forEach((el) => el.dataset.ready = 'true');
51
SANKOU Max — footer 33 Omotesando Ortho
sankoumax-footer-33-omotesando-ortho
数字で納得させる
73%
改善率
8分
短縮
12231
導入数
- パターン名: SANKOU Max — footer 33 Omotesando Ortho
- 概要: SANKOU100 sample setから展開したfooter向けstats構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2693px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-33-omotesando-ortho"} /-->
CSS:
.section-sankoumax-footer-33-omotesando-ortho { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-33-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');
52
SANKOU Max — footer 34 Dodasports
sankoumax-footer-34-dodasports
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — footer 34 Dodasports
- 概要: SANKOU100 sample setから展開したfooter向けcontact構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 52% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2814px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-34-dodasports"} /-->
CSS:
.section-sankoumax-footer-34-dodasports { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-34-dodasports').forEach((el) => el.dataset.ready = 'true');
53
SANKOU Max — footer 35 Ja Aichi Recruit
sankoumax-footer-35-ja-aichi-recruit
Ja Aichi Recruit
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 1735
- パターン名: SANKOU Max — footer 35 Ja Aichi Recruit
- 概要: SANKOU100 sample setから展開したfooter向けfooter構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 2855px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-35-ja-aichi-recruit"} /-->
CSS:
.section-sankoumax-footer-35-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-35-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');
54
SANKOU Max — footer 36 Kiyasuku
sankoumax-footer-36-kiyasuku
NEWS
Kiyasuku から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — footer 36 Kiyasuku
- 概要: SANKOU100 sample setから展開したfooter向けalert構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 2816px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-36-kiyasuku"} /-->
CSS:
.section-sankoumax-footer-36-kiyasuku { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-36-kiyasuku').forEach((el) => el.dataset.ready = 'true');
55
SANKOU Max — footer 37 Hirono Recruit
sankoumax-footer-37-hirono-recruit
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — footer 37 Hirono Recruit
- 概要: SANKOU100 sample setから展開したfooter向けmap構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2777px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-37-hirono-recruit"} /-->
CSS:
.section-sankoumax-footer-37-hirono-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-37-hirono-recruit').forEach((el) => el.dataset.ready = 'true');
56
SANKOU Max — footer 38 Ichizenbooks
sankoumax-footer-38-ichizenbooks
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — footer 38 Ichizenbooks
- 概要: SANKOU100 sample setから展開したfooter向けform構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 2798px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-38-ichizenbooks"} /-->
CSS:
.section-sankoumax-footer-38-ichizenbooks { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-38-ichizenbooks').forEach((el) => el.dataset.ready = 'true');
57
SANKOU Max — footer 39 Mec Residence Recruit
sankoumax-footer-39-mec-residence-recruit
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — footer 39 Mec Residence Recruit
- 概要: SANKOU100 sample setから展開したfooter向けtabs構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2719px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-39-mec-residence-recruit"} /-->
CSS:
.section-sankoumax-footer-39-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-39-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');
58
SANKOU Max — footer 40 Greenpark Santo
sankoumax-footer-40-greenpark-santo
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — footer 40 Greenpark Santo
- 概要: SANKOU100 sample setから展開したfooter向けdashboard構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 2820px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-40-greenpark-santo"} /-->
CSS:
.section-sankoumax-footer-40-greenpark-santo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-40-greenpark-santo').forEach((el) => el.dataset.ready = 'true');
59
SANKOU Max — footer 41 Land Sapporo
sankoumax-footer-41-land-sapporo
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — footer 41 Land Sapporo
- 概要: SANKOU100 sample setから展開したfooter向けfaq構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2661px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-41-land-sapporo"} /-->
CSS:
.section-sankoumax-footer-41-land-sapporo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-41-land-sapporo').forEach((el) => el.dataset.ready = 'true');
60
SANKOU Max — footer 42 Tokachi Fruits
sankoumax-footer-42-tokachi-fruits
Detail
- パターン名: SANKOU Max — footer 42 Tokachi Fruits
- 概要: SANKOU100 sample setから展開したfooter向けgallery構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2862px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-42-tokachi-fruits"} /-->
CSS:
.section-sankoumax-footer-42-tokachi-fruits { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-42-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');
61
SANKOU Max — footer 43 Echitora
sankoumax-footer-43-echitora
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — footer 43 Echitora
- 概要: SANKOU100 sample setから展開したfooter向けroster構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2863px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-43-echitora"} /-->
CSS:
.section-sankoumax-footer-43-echitora { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-43-echitora').forEach((el) => el.dataset.ready = 'true');
62
SANKOU Max — footer 44 Megamis
sankoumax-footer-44-megamis
1744
Megamis
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — footer 44 Megamis
- 概要: SANKOU100 sample setから展開したfooter向けmanifesto構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2644px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-44-megamis"} /-->
CSS:
.section-sankoumax-footer-44-megamis { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-44-megamis').forEach((el) => el.dataset.ready = 'true');
63
SANKOU Max — footer 45 Kagami
sankoumax-footer-45-kagami
Sampled Site
1745 / Kagami
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — footer 45 Kagami
- 概要: SANKOU100 sample setから展開したfooter向けcover構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 32% / 68%、推奨コンテンツ幅 6215px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-45-kagami"} /-->
CSS:
.section-sankoumax-footer-45-kagami { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-45-kagami').forEach((el) => el.dataset.ready = 'true');
64
SANKOU Max — footer 46 Antscr
sankoumax-footer-46-antscr
Split Story
写真と要点で信頼を作る
Antscr の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — footer 46 Antscr
- 概要: SANKOU100 sample setから展開したfooter向けsplit構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 2786px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-46-antscr"} /-->
CSS:
.section-sankoumax-footer-46-antscr { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-46-antscr').forEach((el) => el.dataset.ready = 'true');
65
SANKOU Max — footer 47 Meisei Kg
sankoumax-footer-47-meisei-kg
Card Flow
迷わない比較カード
Meisei Kg から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — footer 47 Meisei Kg
- 概要: SANKOU100 sample setから展開したfooter向けcards構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2827px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-47-meisei-kg"} /-->
CSS:
.section-sankoumax-footer-47-meisei-kg { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-47-meisei-kg').forEach((el) => el.dataset.ready = 'true');
66
SANKOU Max — footer 48 Iamwithyou
sankoumax-footer-48-iamwithyou
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
1748
- パターン名: SANKOU Max — footer 48 Iamwithyou
- 概要: SANKOU100 sample setから展開したfooter向けcollage構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 36% / 34% / 1px、推奨コンテンツ幅 2868px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-48-iamwithyou"} /-->
CSS:
.section-sankoumax-footer-48-iamwithyou { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-48-iamwithyou').forEach((el) => el.dataset.ready = 'true');
67
SANKOU Max — footer 49 Depsoa
sankoumax-footer-49-depsoa
Depsoa
About
Works
Journal
Contact
- パターン名: SANKOU Max — footer 49 Depsoa
- 概要: SANKOU100 sample setから展開したfooter向けrail構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2929px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-49-depsoa"} /-->
CSS:
.section-sankoumax-footer-49-depsoa { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-49-depsoa').forEach((el) => el.dataset.ready = 'true');
68
SANKOU Max — footer 50 Nothing Tech
sankoumax-footer-50-nothing-tech
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — footer 50 Nothing Tech
- 概要: SANKOU100 sample setから展開したfooter向けeditorial構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 2770px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-50-nothing-tech"} /-->
CSS:
.section-sankoumax-footer-50-nothing-tech { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-50-nothing-tech').forEach((el) => el.dataset.ready = 'true');
69
SANKOU Max — footer 51 Upvege
sankoumax-footer-51-upvege
Collection Selector
Upvege の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — footer 51 Upvege
- 概要: SANKOU100 sample setから展開したfooter向けproduct構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 2851px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版 / Footerをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-51-upvege"} /-->
CSS:
.section-sankoumax-footer-51-upvege { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-51-upvege').forEach((el) => el.dataset.ready = 'true');
70
SANKOU Max — footer 52 Fujiya1935
sankoumax-footer-52-fujiya1935
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — footer 52 Fujiya1935
- 概要: SANKOU100 sample setから展開したfooter向けtimeline構成。
- 使用目的: Footer領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2792px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Footerをミニマルに見せる余白重視版 / Footerをリッチに見せるカバー/カード強調版 / Footerをコーポレート向けに整える情報密度高め版 / Footerをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-footer-52-fujiya1935"} /-->
CSS:
.section-sankoumax-footer-52-fujiya1935 { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-footer-52-fujiya1935').forEach((el) => el.dataset.ready = 'true');
← Previous
Header
ヘッダー
Next →
Navigation
ナビゲーション
◈ Blanc Nail
Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。
Foundations
- ヒーロー
- ヘッダー
- フッター
- ナビゲーション
- タイポグラフィ
Content
- フィーチャー
- スタッツ
- コール トゥ アクション
- レビュー / 推薦
- チーム
Business
- 料金プラン
- 商品 / EC
- アクセス / 営業時間
- メニュー (飲食)
- コンタクト
UI Components
- カードレイアウト
- モーダル / アコーディオン
- タブ / セグメント
- バナー / アラート
- SNS
© 2026 Blanc Nail · Built with WordPress + Block Editor v1.0 · isValid=0