ヘッダー · Header · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Foundations › Header

ヘッダー

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

15

Patterns

Foundations

Group

isValid=0

Verified

CSS

Animation

01

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');

02

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');

03

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');

04

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');

05

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');

06

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');

07

Header — Quality Layout 03

header-quality-layout-03

Copy
Link

ヘッダー

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

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

HEADER

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

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

01

サービス

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

02

料金

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

03

事例

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

04

資料

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

  • パターン名: 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');

08

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');

09

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');

10

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');

11

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');

12

Header – Quality Layout 08

header-quality-layout-08

Copy
Link

INDEX

01

サービス

02

料金

03

事例

04

資料

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');

13

Header – Quality Layout 09

header-quality-layout-09

Copy
Link

HEADER

Header layout system

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

01

サービス

移動

Open

02

料金

比較

Open

03

事例

相談

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');

14

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');

15

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');