検索…

カタログ統計

CATALOG › Foundations › Header

ヘッダー

サイト最上部のナビゲーション。ロゴ・メニュー・CTA の構成。

Patterns

Foundations

Group

isValid=0

Verified

CSS

Animation

Header — Centered Editorial Logo

header-centered-editorial

Copy

Link

BRAND

About

Work

Journal

Contact

パターン名: Header — Centered Editorial Logo
概要: Elegant centered logo wordmark with navigation row below (editorial style).
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 1200px、主要ブロック group, heading, group, paragraph, paragraph, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-centered-editorial"} /-->

CSS:
.section-header-centered-editorial { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-centered-editorial').forEach((el) => el.dataset.ready = 'true');

Header — Centered Logo (Editorial)

header-centered-logo

Copy

Link

特集

記事

ライブラリ

JOURNAL

検索

ログイン

パターン名: Header — Centered Logo (Editorial)
概要: Newspaper-style header with centered brand and nav split left and right.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 30% / 35%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, group, paragraph, paragraph, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-centered-logo"} /-->

CSS:
.section-header-centered-logo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-centered-logo').forEach((el) => el.dataset.ready = 'true');

Header — Dark Glass Pill

header-dark-glass

Copy

Link

◇ Studio

Work

About

Journal

Contact

Book a call ↗

パターン名: Header — Dark Glass Pill
概要: Dark navbar with translucent rounded pill, suited for landing-page heroes.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 1240px、主要ブロック group, group, heading, group, paragraph, paragraph, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-dark-glass"} /-->

CSS:
.section-header-dark-glass { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-dark-glass').forEach((el) => el.dataset.ready = 'true');

Header — Minimal Bar

header-minimal-bar

Copy

Link

◆ Brandmark

機能

料金

事例

会社情報

無料で始める

パターン名: Header — Minimal Bar
概要: Clean white bar with brand mark, four nav links and a primary CTA pill.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 1180px、主要ブロック group, group, heading, group, paragraph, paragraph, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-minimal-bar"} /-->

CSS:
.section-header-minimal-bar { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-minimal-bar').forEach((el) => el.dataset.ready = 'true');

Header — Quality Layout 01

header-quality-layout-01

Copy

Link

HEADER

ヘッダーを商用サイトで使いやすくする

初動の回遊と主要導線を整える

サービス

比較

料金

相談

事例

開始

資料

移動

パターン名: Header — Quality Layout 01
概要: ヘッダー category commercial part with a distinct production layout.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 58% / 42% / 1px、推奨コンテンツ幅 1260px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-quality-layout-01"} /-->

CSS:
.section-header-quality-layout-01 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-quality-layout-01').forEach((el) => el.dataset.ready = 'true');

Header — Quality Layout 02

header-quality-layout-02

Copy

Link

HEADER

初動の回遊と主要導線を整える

サービス

相談

実運用で差し替えやすい短い補足欄です。

料金

開始

実運用で差し替えやすい短い補足欄です。

事例

移動

実運用で差し替えやすい短い補足欄です。

資料

比較

実運用で差し替えやすい短い補足欄です。

パターン名: Header — Quality Layout 02
概要: ヘッダー category commercial part with a distinct production layout.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 25% / 25% / 1px / 25% / 25%、推奨コンテンツ幅 1020px、主要ブロック group, cover, paragraph, heading, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-quality-layout-02"} /-->

CSS:
.section-header-quality-layout-02 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-quality-layout-02').forEach((el) => el.dataset.ready = 'true');

Header — Quality Layout 03

header-quality-layout-03

Copy

Link

ヘッダー

用途を固定して内容を展開

左に役割、右に実データを置くため、サイト制作時に差し替えやすい構成です。

HEADER

ヘッダーを商用サイトで使いやすくする

初動の回遊と主要導線を整える

サービス

移動までの判断を短く示します。

料金

比較までの判断を短く示します。

事例

相談までの判断を短く示します。

資料

開始までの判断を短く示します。

パターン名: Header — Quality Layout 03
概要: ヘッダー category commercial part with a distinct production layout.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 1px / 54%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, group, group, paragraph, heading, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-quality-layout-03"} /-->

CSS:
.section-header-quality-layout-03 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-quality-layout-03').forEach((el) => el.dataset.ready = 'true');

Header — Quality Layout 04

header-quality-layout-04

Copy

Link

HEADER

ヘッダー

サービス

移動

料金

比較

事例

相談

資料

開始

移動

パターン名: Header — Quality Layout 04
概要: ヘッダー category commercial part with a distinct production layout.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px、推奨コンテンツ幅 780px、主要ブロック group, group, group, paragraph, heading, group, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-quality-layout-04"} /-->

CSS:
.section-header-quality-layout-04 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-quality-layout-04').forEach((el) => el.dataset.ready = 'true');

Header — Quality Layout 05

header-quality-layout-05

Copy

Link

HEADER

ヘッダーを商用サイトで使いやすくする

初動の回遊と主要導線を整える

サービス

比較

実運用で差し替えやすい短い補足欄です。

料金

相談

実運用で差し替えやすい短い補足欄です。

事例

開始

実運用で差し替えやすい短い補足欄です。

パターン名: Header — Quality Layout 05
概要: ヘッダー category commercial part with a distinct production layout.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 62% / 1px / 38% / 1px、推奨コンテンツ幅 940px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-quality-layout-05"} /-->

CSS:
.section-header-quality-layout-05 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-quality-layout-05').forEach((el) => el.dataset.ready = 'true');

Header – Quality Layout 06

header-quality-layout-06

Copy

Link

HEADER

Header layout system

初動の回遊と主要導線を整える

比較

相談

開始

移動

サービス

比較

Production-ready block composition.

料金

相談

Production-ready block composition.

事例

開始

Production-ready block composition.

資料

移動

Production-ready block composition.

パターン名: Header – Quality Layout 06
概要: Header category commercial part with a second distinct layout family.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px、推奨コンテンツ幅 1095px、主要ブロック group, paragraph, heading, paragraph, group, group, paragraph, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-quality-layout-06"} /-->

CSS:
.section-header-quality-layout-06 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-quality-layout-06').forEach((el) => el.dataset.ready = 'true');

Header – Quality Layout 07

header-quality-layout-07

Copy

Link

STATUS

Operational ledger

サービス

相談

料金

開始

事例

移動

資料

比較

Header

Primary message area

A larger visual field for direction, recovery, proof, or navigation.

パターン名: Header – Quality Layout 07
概要: Header category commercial part with a second distinct layout family.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 42% / 1px / 58%、推奨コンテンツ幅 1160px、主要ブロック group, columns, column, group, paragraph, heading, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-quality-layout-07"} /-->

CSS:
.section-header-quality-layout-07 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-quality-layout-07').forEach((el) => el.dataset.ready = 'true');

Header – Quality Layout 08

header-quality-layout-08

Copy

Link

INDEX

サービス

料金

事例

資料

HEADER

Header layout system

初動の回遊と主要導線を整える

サービス

開始

Production-ready block composition.

料金

移動

Production-ready block composition.

NOTES

Use this side pane for prerequisites, links, secondary explanation, or local navigation.

比較

パターン名: Header – Quality Layout 08
概要: Header category commercial part with a second distinct layout family.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 26% / 1px / 48% / 1px / 50%、推奨コンテンツ幅 1255px、主要ブロック group, columns, column, group, paragraph, group, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-quality-layout-08"} /-->

CSS:
.section-header-quality-layout-08 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-quality-layout-08').forEach((el) => el.dataset.ready = 'true');

Header – Quality Layout 09

header-quality-layout-09

Copy

Link

HEADER

Header layout system

初動の回遊と主要導線を整える

サービス

移動

Open

料金

比較

Open

事例

相談

Open

パターン名: Header – Quality Layout 09
概要: Header category commercial part with a second distinct layout family.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px、推奨コンテンツ幅 1260px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-quality-layout-09"} /-->

CSS:
.section-header-quality-layout-09 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-quality-layout-09').forEach((el) => el.dataset.ready = 'true');

Header – Quality Layout 10

header-quality-layout-10

Copy

Link

HEADER

Header layout system

初動の回遊と主要導線を整える

サービス

Start

Production-ready block composition.

料金

Compare

Production-ready block composition.

事例

Decide

Production-ready block composition.

パターン名: Header – Quality Layout 10
概要: Header category commercial part with a second distinct layout family.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 35% / 35% / 1px / 30%、推奨コンテンツ幅 1320px、主要ブロック group, cover, paragraph, heading, paragraph, columns, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-quality-layout-10"} /-->

CSS:
.section-header-quality-layout-10 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-quality-layout-10').forEach((el) => el.dataset.ready = 'true');

Header — Logo + Login + CTA

header-split-cta

Copy

Link

◆ Studio

ログイン

無料で試す

パターン名: Header — Logo + Login + CTA
概要: Compact split header: brand mark left, secondary link + primary CTA button right.
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 1200px、主要ブロック group, group, heading, group, paragraph, buttons, button

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/header-split-cta"} /-->

CSS:
.section-header-split-cta { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-header-split-cta').forEach((el) => el.dataset.ready = 'true');

Reference Brand — Center Logo Header

reference-brand-center-logo-header

Copy

Link

NEW / Brand story issue has been released

contact / order now

studio

Local brand archive

peace put

Reserve

パターン名: Reference Brand — Center Logo Header
概要: 告知バーと中央ロゴを組み合わせたブランドサイト向けヘッダー。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 24% / 52% / 24%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, paragraph, column, paragraph, group, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-brand-center-logo-header"} /-->

CSS:
.section-reference-brand-center-logo-header { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-brand-center-logo-header').forEach((el) => el.dataset.ready = 'true');

Reference Complete — header 01 Sticky Entry

reference-complete-header-01-sticky-entry-fumino

Copy

Link

Sampled Site

15301 / Fumino

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る

パターン名: Reference Complete — header 01 Sticky Entry
概要: 参照サンプル再確認から追加したheader向け部品。固定導線つきの大判ファーストビュー。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 25% / 75%、推奨コンテンツ幅 46883px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-header-01-sticky-entry-fumino"} /-->

CSS:
.section-reference-complete-header-01-sticky-entry-fumino { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-header-01-sticky-entry-fumino').forEach((el) => el.dataset.ready = 'true');

Reference Complete — header 02 Editorial Issue

reference-complete-header-02-editorial-issue-plaid-alpha

Copy

Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

背景を伝える
選ぶ理由を示す
次の行動へ進める

記事を見る

パターン名: Reference Complete — header 02 Editorial Issue
概要: 参照サンプル再確認から追加したheader向け部品。雑誌的な見出しと導入文の編集レイアウト。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 16322px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-header-02-editorial-issue-plaid-alpha"} /-->

CSS:
.section-reference-complete-header-02-editorial-issue-plaid-alpha { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-header-02-editorial-issue-plaid-alpha').forEach((el) => el.dataset.ready = 'true');

Reference Complete — header 03 Brand Index

reference-complete-header-03-brand-index-norikura-hanabi

Copy

Link

Card Flow

迷わない比較カード

Norikura Hanabi から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: Reference Complete — header 03 Brand Index
概要: 参照サンプル再確認から追加したheader向け部品。複数ブランドやサービスを迷わせず並べる索引。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 16383px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-header-03-brand-index-norikura-hanabi"} /-->

CSS:
.section-reference-complete-header-03-brand-index-norikura-hanabi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-header-03-brand-index-norikura-hanabi').forEach((el) => el.dataset.ready = 'true');

Reference Complete — header 04 Recruit Story

reference-complete-header-04-recruit-story-mizuya-kyoto

Copy

Link

Split Story

写真と要点で信頼を作る

Mizuya Kyoto の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

パターン名: Reference Complete — header 04 Recruit Story
概要: 参照サンプル再確認から追加したheader向け部品。採用・企業紹介に使える人物/思想の分割構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 16344px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-header-04-recruit-story-mizuya-kyoto"} /-->

CSS:
.section-reference-complete-header-04-recruit-story-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-header-04-recruit-story-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');

Reference Complete — header 05 Commerce Compare

reference-complete-header-05-commerce-compare-unipos

Copy

Link

Collection Selector

Unipos の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

パターン名: Reference Complete — header 05 Commerce Compare
概要: 参照サンプル再確認から追加したheader向け部品。料金・商品・プランを比較しやすい構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 16405px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-header-05-commerce-compare-unipos"} /-->

CSS:
.section-reference-complete-header-05-commerce-compare-unipos { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-header-05-commerce-compare-unipos').forEach((el) => el.dataset.ready = 'true');

Reference Complete — header 06 Timeline Proof

reference-complete-header-06-timeline-proof-dac-web

Copy

Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

パターン名: Reference Complete — header 06 Timeline Proof
概要: 参照サンプル再確認から追加したheader向け部品。沿革・導入手順・制作工程の時系列。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 16346px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-header-06-timeline-proof-dac-web"} /-->

CSS:
.section-reference-complete-header-06-timeline-proof-dac-web { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-header-06-timeline-proof-dac-web').forEach((el) => el.dataset.ready = 'true');

Reference Complete — header 07 Gallery Led

reference-complete-header-07-gallery-led-infocus

Copy

Link

Detail

パターン名: Reference Complete — header 07 Gallery Led
概要: 参照サンプル再確認から追加したheader向け部品。写真量の多い商材を見せるギャラリー導線。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 16427px、主要ブロック group, columns, column, image, column, image, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-header-07-gallery-led-infocus"} /-->

CSS:
.section-reference-complete-header-07-gallery-led-infocus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-header-07-gallery-led-infocus').forEach((el) => el.dataset.ready = 'true');

Reference Complete — header 08 Dashboard Proof

reference-complete-header-08-dashboard-proof-newspicks-business

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

パターン名: Reference Complete — header 08 Dashboard Proof
概要: 参照サンプル再確認から追加したheader向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 16388px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-header-08-dashboard-proof-newspicks-business"} /-->

CSS:
.section-reference-complete-header-08-dashboard-proof-newspicks-business { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-header-08-dashboard-proof-newspicks-business').forEach((el) => el.dataset.ready = 'true');

Reference Complete — header 09 Contact Ready

reference-complete-header-09-contact-ready-yamato-50th

Copy

Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する

パターン名: Reference Complete — header 09 Contact Ready
概要: 参照サンプル再確認から追加したheader向け部品。問い合わせ前の入力項目を整理する導線。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 16369px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-header-09-contact-ready-yamato-50th"} /-->

CSS:
.section-reference-complete-header-09-contact-ready-yamato-50th { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-header-09-contact-ready-yamato-50th').forEach((el) => el.dataset.ready = 'true');

Reference Complete — header 10 Mobile Rail

reference-complete-header-10-mobile-rail-niwaya

Copy

Link

Niwaya

About

Works

Journal

Contact

Reserve

パターン名: Reference Complete — header 10 Mobile Rail
概要: 参照サンプル再確認から追加したheader向け部品。スマホ閲覧で要点を縦に追えるレール型。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 16490px、主要ブロック group, columns, column, heading, column, columns, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-header-10-mobile-rail-niwaya"} /-->

CSS:
.section-reference-complete-header-10-mobile-rail-niwaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-header-10-mobile-rail-niwaya').forEach((el) => el.dataset.ready = 'true');

Reference Recruit — Transparent Nav Header

reference-recruit-transparent-header

Copy

Link

Forest Service

パターン名: Reference Recruit — Transparent Nav Header
概要: 採用サイト向けの透明感ある横長ヘッダー。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 48% / 22%、推奨コンテンツ幅 1220px、主要ブロック group, columns, column, heading, column, buttons, button, button

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-recruit-transparent-header"} /-->

CSS:
.section-reference-recruit-transparent-header { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-recruit-transparent-header').forEach((el) => el.dataset.ready = 'true');

SANKOU — Silent Split Header

sankou-ryokan-silent-split-header

Copy

Link

MIZU

Stay / Dining / Reservation

静かな余白でブランド名と予約導線を分離するミニマルヘッダー。

Reserve

パターン名: SANKOU — Silent Split Header
概要: 宿泊・飲食向けの余白を活かした三分割ヘッダー。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 28% / 52% / 20%、推奨コンテンツ幅 1240px、主要ブロック group, columns, column, heading, paragraph, column, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-ryokan-silent-split-header"} /-->

CSS:
.section-sankou-ryokan-silent-split-header { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-ryokan-silent-split-header').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 003 Koba Clinic

sankou100-003-koba-clinic

Copy

Link

Card Flow

迷わない比較カード

Koba Clinic から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: SANKOU100 — 003 Koba Clinic
概要: SANKOU! sample 003から抽出したcards型の商用サイト向け構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1083px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-003-koba-clinic"} /-->

CSS:
.section-sankou100-003-koba-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-003-koba-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 043 Twoe

sankou100-043-twoe

Copy

Link

Card Flow

迷わない比較カード

Twoe から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: SANKOU100 — 043 Twoe
概要: SANKOU! sample 043から抽出したcards型の商用サイト向け構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1123px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-043-twoe"} /-->

CSS:
.section-sankou100-043-twoe { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-043-twoe').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 083 Serious Ceramic

sankou100-083-serious-ceramic

Copy

Link

Card Flow

迷わない比較カード

Serious Ceramic から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: SANKOU100 — 083 Serious Ceramic
概要: SANKOU! sample 083から抽出したcards型の商用サイト向け構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1163px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-083-serious-ceramic"} /-->

CSS:
.section-sankou100-083-serious-ceramic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-083-serious-ceramic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 01 Chiikawa Pocket

sankoumax-header-01-chiikawa-pocket

Copy

Link

Collection Selector

Chiikawa Pocket の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

パターン名: SANKOU Max — header 01 Chiikawa Pocket
概要: SANKOU100 sample setから展開したheader向けproduct構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 3401px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-01-chiikawa-pocket"} /-->

CSS:
.section-sankoumax-header-01-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-01-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 02 Chiba Dojo

sankoumax-header-02-chiba-dojo

Copy

Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

パターン名: SANKOU Max — header 02 Chiba Dojo
概要: SANKOU100 sample setから展開したheader向けtimeline構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3342px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-02-chiba-dojo"} /-->

CSS:
.section-sankoumax-header-02-chiba-dojo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-02-chiba-dojo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 03 Twoe

sankoumax-header-03-twoe

Copy

Link

数字で納得させる

83%

改善率

11分

短縮

16221

導入数

パターン名: SANKOU Max — header 03 Twoe
概要: SANKOU100 sample setから展開したheader向けstats構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3263px、主要ブロック group, heading, columns, column, group, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-03-twoe"} /-->

CSS:
.section-sankoumax-header-03-twoe { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-03-twoe').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 04 Kamata Shoyu

sankoumax-header-04-kamata-shoyu

Copy

Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

パターン名: SANKOU Max — header 04 Kamata Shoyu
概要: SANKOU100 sample setから展開したheader向けcontact構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 58% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3384px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-04-kamata-shoyu"} /-->

CSS:
.section-sankoumax-header-04-kamata-shoyu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-04-kamata-shoyu').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 05 Fumino

sankoumax-header-05-fumino

Copy

Link

Fumino

商用サイトの締めに必要な主要リンクを整理します。

About
Service
Works

News
Recruit
Contact

Sample 2305

パターン名: SANKOU Max — header 05 Fumino
概要: SANKOU100 sample setから展開したheader向けfooter構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 3425px、主要ブロック group, columns, column, heading, paragraph, column, list, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-05-fumino"} /-->

CSS:
.section-sankoumax-header-05-fumino { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-05-fumino').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 06 Anbe Shoten

sankoumax-header-06-anbe-shoten

Copy

Link

NEWS

Anbe Shoten から抽出した告知導線。重要なお知らせを短く表示します。

確認する

パターン名: SANKOU Max — header 06 Anbe Shoten
概要: SANKOU100 sample setから展開したheader向けalert構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 3386px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-06-anbe-shoten"} /-->

CSS:
.section-sankoumax-header-06-anbe-shoten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-06-anbe-shoten').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 07 Plaid Alpha

sankoumax-header-07-plaid-alpha

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

パターン名: SANKOU Max — header 07 Plaid Alpha
概要: SANKOU100 sample setから展開したheader向けmap構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3347px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-07-plaid-alpha"} /-->

CSS:
.section-sankoumax-header-07-plaid-alpha { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-07-plaid-alpha').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 08 Undimension

sankoumax-header-08-undimension

Copy

Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する

パターン名: SANKOU Max — header 08 Undimension
概要: SANKOU100 sample setから展開したheader向けform構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 3368px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-08-undimension"} /-->

CSS:
.section-sankoumax-header-08-undimension { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-08-undimension').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 09 Norikura Hanabi

sankoumax-header-09-norikura-hanabi

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

商品、採用、サービス紹介で情報量を抑えて見せるタブ型。

パターン名: SANKOU Max — header 09 Norikura Hanabi
概要: SANKOU100 sample setから展開したheader向けtabs構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3289px、主要ブロック group, group, columns, column, group, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-09-norikura-hanabi"} /-->

CSS:
.section-sankoumax-header-09-norikura-hanabi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-09-norikura-hanabi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 10 Chugaitoen

sankoumax-header-10-chugaitoen

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

パターン名: SANKOU Max — header 10 Chugaitoen
概要: SANKOU100 sample setから展開したheader向けdashboard構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 3390px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-10-chugaitoen"} /-->

CSS:
.section-sankoumax-header-10-chugaitoen { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-10-chugaitoen').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 11 Favtown Wakayama

sankoumax-header-11-favtown-wakayama

Copy

Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

パターン名: SANKOU Max — header 11 Favtown Wakayama
概要: SANKOU100 sample setから展開したheader向けfaq構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3231px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-11-favtown-wakayama"} /-->

CSS:
.section-sankoumax-header-11-favtown-wakayama { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-11-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 12 Palcloset Fashion

sankoumax-header-12-palcloset-fashion

Copy

Link

Detail

パターン名: SANKOU Max — header 12 Palcloset Fashion
概要: SANKOU100 sample setから展開したheader向けgallery構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 3432px、主要ブロック group, columns, column, image, column, image, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-12-palcloset-fashion"} /-->

CSS:
.section-sankoumax-header-12-palcloset-fashion { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-12-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 13 Michikusa Art

sankoumax-header-13-michikusa-art

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — header 13 Michikusa Art
概要: SANKOU100 sample setから展開したheader向けroster構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 3433px、主要ブロック group, heading, columns, column, image, paragraph, column, image

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-13-michikusa-art"} /-->

CSS:
.section-sankoumax-header-13-michikusa-art { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-13-michikusa-art').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 14 Tenten

sankoumax-header-14-tenten

Copy

Link

2314

Tenten

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

パターン名: SANKOU Max — header 14 Tenten
概要: SANKOU100 sample setから展開したheader向けmanifesto構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 3214px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-14-tenten"} /-->

CSS:
.section-sankoumax-header-14-tenten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-14-tenten').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 15 Unipos

sankoumax-header-15-unipos

Copy

Link

Sampled Site

2315 / Unipos

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る

パターン名: SANKOU Max — header 15 Unipos
概要: SANKOU100 sample setから展開したheader向けcover構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 26% / 74%、推奨コンテンツ幅 7925px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-15-unipos"} /-->

CSS:
.section-sankoumax-header-15-unipos { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-15-unipos').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 16 Trail Inc

sankoumax-header-16-trail-inc

Copy

Link

Split Story

写真と要点で信頼を作る

Trail Inc の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

パターン名: SANKOU Max — header 16 Trail Inc
概要: SANKOU100 sample setから展開したheader向けsplit構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 3356px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-16-trail-inc"} /-->

CSS:
.section-sankoumax-header-16-trail-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-16-trail-inc').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 17 Applebase

sankoumax-header-17-applebase

Copy

Link

Card Flow

迷わない比較カード

Applebase から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: SANKOU Max — header 17 Applebase
概要: SANKOU100 sample setから展開したheader向けcards構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3397px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-17-applebase"} /-->

CSS:
.section-sankoumax-header-17-applebase { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-17-applebase').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 18 Meisei Es

sankoumax-header-18-meisei-es

Copy

Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

2318

パターン名: SANKOU Max — header 18 Meisei Es
概要: SANKOU100 sample setから展開したheader向けcollage構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 36% / 1px / 36% / 34% / 1px、推奨コンテンツ幅 3438px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-18-meisei-es"} /-->

CSS:
.section-sankoumax-header-18-meisei-es { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-18-meisei-es').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 19 Unicell

sankoumax-header-19-unicell

Copy

Link

Unicell

About

Works

Journal

Contact

Reserve

パターン名: SANKOU Max — header 19 Unicell
概要: SANKOU100 sample setから展開したheader向けrail構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 3499px、主要ブロック group, columns, column, heading, column, columns, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-19-unicell"} /-->

CSS:
.section-sankoumax-header-19-unicell { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-19-unicell').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 20 Uki Editions

sankoumax-header-20-uki-editions

Copy

Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

背景を伝える
選ぶ理由を示す
次の行動へ進める

記事を見る

パターン名: SANKOU Max — header 20 Uki Editions
概要: SANKOU100 sample setから展開したheader向けeditorial構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 56% / 1px、推奨コンテンツ幅 3340px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-20-uki-editions"} /-->

CSS:
.section-sankoumax-header-20-uki-editions { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-20-uki-editions').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 21 Kikyougaoka

sankoumax-header-21-kikyougaoka

Copy

Link

Collection Selector

Kikyougaoka の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

パターン名: SANKOU Max — header 21 Kikyougaoka
概要: SANKOU100 sample setから展開したheader向けproduct構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 3421px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-21-kikyougaoka"} /-->

CSS:
.section-sankoumax-header-21-kikyougaoka { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-21-kikyougaoka').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 22 J Security

sankoumax-header-22-j-security

Copy

Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

パターン名: SANKOU Max — header 22 J Security
概要: SANKOU100 sample setから展開したheader向けtimeline構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3362px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-22-j-security"} /-->

CSS:
.section-sankoumax-header-22-j-security { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-22-j-security').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 23 Serious Ceramic

sankoumax-header-23-serious-ceramic

Copy

Link

数字で納得させる

33%

改善率

4分

短縮

16361

導入数

パターン名: SANKOU Max — header 23 Serious Ceramic
概要: SANKOU100 sample setから展開したheader向けstats構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3283px、主要ブロック group, heading, columns, column, group, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-23-serious-ceramic"} /-->

CSS:
.section-sankoumax-header-23-serious-ceramic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-23-serious-ceramic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 24 Tsumari Chamame

sankoumax-header-24-tsumari-chamame

Copy

Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

パターン名: SANKOU Max — header 24 Tsumari Chamame
概要: SANKOU100 sample setから展開したheader向けcontact構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 54% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3404px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-24-tsumari-chamame"} /-->

CSS:
.section-sankoumax-header-24-tsumari-chamame { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-24-tsumari-chamame').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 25 Notahotel Architects

sankoumax-header-25-notahotel-architects

Copy

Link

Notahotel Architects

商用サイトの締めに必要な主要リンクを整理します。

About
Service
Works

News
Recruit
Contact

Sample 2325

パターン名: SANKOU Max — header 25 Notahotel Architects
概要: SANKOU100 sample setから展開したheader向けfooter構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 3445px、主要ブロック group, columns, column, heading, paragraph, column, list, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-25-notahotel-architects"} /-->

CSS:
.section-sankoumax-header-25-notahotel-architects { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-25-notahotel-architects').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 26 Montblanc Pictures

sankoumax-header-26-montblanc-pictures

Copy

Link

NEWS

Montblanc Pictures から抽出した告知導線。重要なお知らせを短く表示します。

確認する

パターン名: SANKOU Max — header 26 Montblanc Pictures
概要: SANKOU100 sample setから展開したheader向けalert構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 3406px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-26-montblanc-pictures"} /-->

CSS:
.section-sankoumax-header-26-montblanc-pictures { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-26-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 27 Tattoo Rays

sankoumax-header-27-tattoo-rays

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

パターン名: SANKOU Max — header 27 Tattoo Rays
概要: SANKOU100 sample setから展開したheader向けmap構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3367px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-27-tattoo-rays"} /-->

CSS:
.section-sankoumax-header-27-tattoo-rays { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-27-tattoo-rays').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 28 Rim Jins

sankoumax-header-28-rim-jins

Copy

Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する

パターン名: SANKOU Max — header 28 Rim Jins
概要: SANKOU100 sample setから展開したheader向けform構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 3388px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-28-rim-jins"} /-->

CSS:
.section-sankoumax-header-28-rim-jins { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-28-rim-jins').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 29 Obunko

sankoumax-header-29-obunko

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

商品、採用、サービス紹介で情報量を抑えて見せるタブ型。

パターン名: SANKOU Max — header 29 Obunko
概要: SANKOU100 sample setから展開したheader向けtabs構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3309px、主要ブロック group, group, columns, column, group, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-29-obunko"} /-->

CSS:
.section-sankoumax-header-29-obunko { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-29-obunko').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 30 Pronets Recruit

sankoumax-header-30-pronets-recruit

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

パターン名: SANKOU Max — header 30 Pronets Recruit
概要: SANKOU100 sample setから展開したheader向けdashboard構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 3410px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-30-pronets-recruit"} /-->

CSS:
.section-sankoumax-header-30-pronets-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-30-pronets-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 31 Glanta

sankoumax-header-31-glanta

Copy

Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

パターン名: SANKOU Max — header 31 Glanta
概要: SANKOU100 sample setから展開したheader向けfaq構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3251px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-31-glanta"} /-->

CSS:
.section-sankoumax-header-31-glanta { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-31-glanta').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 32 Tashi Portfolio

sankoumax-header-32-tashi-portfolio

Copy

Link

Detail

パターン名: SANKOU Max — header 32 Tashi Portfolio
概要: SANKOU100 sample setから展開したheader向けgallery構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 3452px、主要ブロック group, columns, column, image, column, image, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-32-tashi-portfolio"} /-->

CSS:
.section-sankoumax-header-32-tashi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-32-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 33 Kitanohashi

sankoumax-header-33-kitanohashi

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — header 33 Kitanohashi
概要: SANKOU100 sample setから展開したheader向けroster構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 3453px、主要ブロック group, heading, columns, column, image, paragraph, column, image

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-33-kitanohashi"} /-->

CSS:
.section-sankoumax-header-33-kitanohashi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-33-kitanohashi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 34 Morinosato Clinic

sankoumax-header-34-morinosato-clinic

Copy

Link

2334

Morinosato Clinic

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

パターン名: SANKOU Max — header 34 Morinosato Clinic
概要: SANKOU100 sample setから展開したheader向けmanifesto構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 3234px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-34-morinosato-clinic"} /-->

CSS:
.section-sankoumax-header-34-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-34-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 35 Asuzac Highschool

sankoumax-header-35-asuzac-highschool

Copy

Link

Sampled Site

2335 / Asuzac Highschool

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る

パターン名: SANKOU Max — header 35 Asuzac Highschool
概要: SANKOU100 sample setから展開したheader向けcover構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 28% / 72%、推奨コンテンツ幅 7985px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-35-asuzac-highschool"} /-->

CSS:
.section-sankoumax-header-35-asuzac-highschool { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-35-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 36 Junni Newyear

sankoumax-header-36-junni-newyear

Copy

Link

Split Story

写真と要点で信頼を作る

Junni Newyear の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

パターン名: SANKOU Max — header 36 Junni Newyear
概要: SANKOU100 sample setから展開したheader向けsplit構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 3376px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-36-junni-newyear"} /-->

CSS:
.section-sankoumax-header-36-junni-newyear { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-36-junni-newyear').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 37 Mizota Ks

sankoumax-header-37-mizota-ks

Copy

Link

Card Flow

迷わない比較カード

Mizota Ks から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: SANKOU Max — header 37 Mizota Ks
概要: SANKOU100 sample setから展開したheader向けcards構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3417px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-37-mizota-ks"} /-->

CSS:
.section-sankoumax-header-37-mizota-ks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-37-mizota-ks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 38 Nissan Career

sankoumax-header-38-nissan-career

Copy

Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

2338

パターン名: SANKOU Max — header 38 Nissan Career
概要: SANKOU100 sample setから展開したheader向けcollage構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 32% / 1px / 38% / 32% / 1px、推奨コンテンツ幅 3458px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版 / Headerをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-38-nissan-career"} /-->

CSS:
.section-sankoumax-header-38-nissan-career { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-38-nissan-career').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — header 39 Shueisha Recruit

sankoumax-header-39-shueisha-recruit

Copy

Link

Shueisha

About

Works

Journal

Contact

Reserve

パターン名: SANKOU Max — header 39 Shueisha Recruit
概要: SANKOU100 sample setから展開したheader向けrail構成。
使用目的: Header領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 3519px、主要ブロック group, columns, column, heading, column, columns, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Headerをミニマルに見せる余白重視版 / Headerをリッチに見せるカバー/カード強調版 / Headerをコーポレート向けに整える情報密度高め版 / Headerをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-header-39-shueisha-recruit"} /-->

CSS:
.section-sankoumax-header-39-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-header-39-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');

◈ Blanc Nail

Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。

Foundations

ヒーロー
ヘッダー
フッター
ナビゲーション
タイポグラフィ

Content

フィーチャー
スタッツ
コールトゥアクション
レビュー / 推薦
チーム

Business

料金プラン
商品 / EC
アクセス / 営業時間
メニュー (飲食)
コンタクト

UI Components

カードレイアウト
モーダル / アコーディオン
タブ / セグメント
バナー / アラート
SNS

ヘッダー · Header · Blanc Nail

ヘッダー

BRAND

JOURNAL

◇ Studio

◆ Brandmark

ヘッダーを商用サイトで使いやすくする

初動の回遊と主要導線を整える

用途を固定して内容を展開

ヘッダーを商用サイトで使いやすくする

サービス

料金

事例

資料

ヘッダー

ヘッダーを商用サイトで使いやすくする

Header layout system

Operational ledger

Primary message area

Header layout system

Header layout system

サービス

料金

事例

Header layout system

◆ Studio

peace put

商用サイトの入口を強くする

読み物のように理解させる

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

体験の流れを一列で見せる

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Niwaya

Forest Service

MIZU

迷わない比較カード

見つける

選ぶ

進む

迷わない比較カード

見つける

選ぶ

進む

迷わない比較カード

見つける

選ぶ

進む

Collection Selector

選びやすい商品導線

体験の流れを一列で見せる

出会う

試す

続ける

数字で納得させる

83%

11分

16221

次の相談先を明確にする

Fumino

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

不安を先回りして解消する

People Line

静かな思想を置く

商用サイトの入口を強くする

写真と要点で信頼を作る