検索…

カタログ統計

CATALOG › Business › Contact

コンタクト

問い合わせフォーム、住所カード、電話 CTA。一次接触の窓口。

Patterns

Business

Group

isValid=0

Verified

CSS

Animation

Contact — Centered CTA

contact-centered-cta

Copy

Link

✉️

プロジェクトについて、
お話しませんか？

無料相談、お見積もり、デモのご依頼。
30 分の打ち合わせで、最適なご提案をいたします。

無料相談を予約する →

または直接メール: [email protected]

パターン名: Contact — Centered CTA
概要: Centered email-icon CTA on a soft sky-pink gradient background.
使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 760px、主要ブロック group, paragraph, heading, paragraph, buttons, button, paragraph

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

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

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

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

Contact — Simple CTA (Tel + Mail)

contact-cta-simple

Copy

Link

お気軽にご連絡ください

お電話かメールでご連絡いただけます・初回相談は無料です

📞 TEL

03-1234-5678

✉ MAIL

[email protected]

パターン名: Contact — Simple CTA (Tel + Mail)
概要: Dark centered contact CTA with big phone number and email address.
使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, heading, paragraph, columns, column, paragraph, paragraph, column

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

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

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

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

Contact — Quality Layout 01

contact-quality-layout-01

Copy

Link

CONTACT

問い合わせを商用サイトで使いやすくする

問い合わせを迷わず振り分ける

相談

受付

見積

確認

採用

返信

サポート

完了

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

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

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

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

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

Contact — Quality Layout 02

contact-quality-layout-02

Copy

Link

CONTACT

問い合わせを迷わず振り分ける

相談

確認

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

見積

返信

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

採用

完了

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

サポート

受付

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

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

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

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

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

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

Contact — Quality Layout 03

contact-quality-layout-03

Copy

Link

問い合わせ

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

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

CONTACT

問い合わせを商用サイトで使いやすくする

問い合わせを迷わず振り分ける

相談

受付までの判断を短く示します。

見積

確認までの判断を短く示します。

採用

返信までの判断を短く示します。

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

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

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

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

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

Contact — Quality Layout 04

contact-quality-layout-04

Copy

Link

CONTACT

問い合わせ

相談

完了

見積

受付

採用

確認

サポート

返信

完了

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

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

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

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

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

Contact — Quality Layout 05

contact-quality-layout-05

Copy

Link

CONTACT

問い合わせを商用サイトで使いやすくする

問い合わせを迷わず振り分ける

相談

受付

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

見積

確認

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

採用

返信

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

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

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

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

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

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

Contact – Quality Layout 06

contact-quality-layout-06

Copy

Link

CONTACT

Contact layout system

問い合わせを迷わず振り分ける

受付

確認

返信

完了

相談

受付

Production-ready block composition.

見積

確認

Production-ready block composition.

採用

返信

Production-ready block composition.

サポート

完了

Production-ready block composition.

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

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

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

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

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

Contact – Quality Layout 07

contact-quality-layout-07

Copy

Link

STATUS

Operational ledger

相談

確認

見積

返信

採用

完了

サポート

受付

Contact

Primary message area

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

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

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

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

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

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

Contact – Quality Layout 08

contact-quality-layout-08

Copy

Link

INDEX

相談

見積

採用

サポート

CONTACT

Contact layout system

問い合わせを迷わず振り分ける

相談

返信

Production-ready block composition.

見積

完了

Production-ready block composition.

NOTES

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

受付

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

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

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

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

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

Contact – Quality Layout 09

contact-quality-layout-09

Copy

Link

CONTACT

Contact layout system

問い合わせを迷わず振り分ける

サポート

完了

Open

相談

受付

Open

見積

確認

Open

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

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

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

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

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

Contact – Quality Layout 10

contact-quality-layout-10

Copy

Link

CONTACT

Contact layout system

問い合わせを迷わず振り分ける

相談

Start

Production-ready block composition.

見積

Compare

Production-ready block composition.

採用

Decide

Production-ready block composition.

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

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

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

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

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

Contact — Split Info + Methods

contact-split

Copy

Link

CONTACT

いつでも、お気軽に。

お見積もり、デモのご依頼、技術的なご相談など、どんなご質問にも 24 時間以内にお返事いたします。

本社

〒 100-0001
東京都千代田区千代田 1-1
パレスビルディング 8F

営業時間

平日 9:00–18:00（土日祝休み）

📧

メール

[email protected]

📞

お電話

03-1234-5678

💬

ライブチャット

画面右下からいつでも

パターン名: Contact — Split Info + Methods
概要: Two-column contact section with company info and contact method cards.
使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, columns, column, paragraph, heading, paragraph, paragraph, paragraph

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

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

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

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

Contact — 2-Column Info Split

contact-split-info

Copy

Link

所在地

〒100-0001
東京都千代田区千代田 1-1-1
サンプルビル 5F

地下鉄大手町駅徒歩 3 分

営業時間

平日: 10:00 – 19:00
土曜: 11:00 – 17:00
日祝: 休み

※ 臨時休業はお知らせにて告知

パターン名: Contact — 2-Column Info Split
概要: Address on left, business hours on right — essential info split.
使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, columns, column, heading, paragraph, paragraph, column, heading

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

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

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

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

Reference Complete — contact 01 Sticky Entry

reference-complete-contact-01-sticky-entry-tashi-portfolio

Copy

Link

Sampled Site

15201 / Tashi Portfolio

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

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

詳しく見る

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

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

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

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

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

Reference Complete — contact 02 Editorial Issue

reference-complete-contact-02-editorial-issue-morinosato-clinic

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-contact-02-editorial-issue-morinosato-clinic"} /-->

CSS:
.section-reference-complete-contact-02-editorial-issue-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-contact-02-editorial-issue-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');

Reference Complete — contact 03 Brand Index

reference-complete-contact-03-brand-index-junni-newyear

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-contact-03-brand-index-junni-newyear"} /-->

CSS:
.section-reference-complete-contact-03-brand-index-junni-newyear { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-contact-03-brand-index-junni-newyear').forEach((el) => el.dataset.ready = 'true');

Reference Complete — contact 04 Recruit Story

reference-complete-contact-04-recruit-story-tomore

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

Reference Complete — contact 05 Commerce Compare

reference-complete-contact-05-commerce-compare-miyakawa-lab

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

Reference Complete — contact 06 Timeline Proof

reference-complete-contact-06-timeline-proof-meisei-es

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-contact-06-timeline-proof-meisei-es"} /-->

CSS:
.section-reference-complete-contact-06-timeline-proof-meisei-es { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-contact-06-timeline-proof-meisei-es').forEach((el) => el.dataset.ready = 'true');

Reference Complete — contact 07 Gallery Led

reference-complete-contact-07-gallery-led-j-security

Copy

Link

Detail

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

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

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

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

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

Reference Complete — contact 08 Dashboard Proof

reference-complete-contact-08-dashboard-proof-favtown

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

Reference Complete — contact 09 Contact Ready

reference-complete-contact-09-contact-ready-yamakachi

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

Reference Complete — contact 10 Mobile Rail

reference-complete-contact-10-mobile-rail-kamata-shoyu

Copy

Link

Kamata

About

Works

Journal

Contact

Reserve

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

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

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

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

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

Reference Brand — Concierge Contact Panel

reference-concierge-contact-panel

Copy

Link

contact

相談の入口も、ブランド体験にする。

問い合わせ、予約、採用応募を、落ち着いたトーンで受け止めるパネル。

LINE / Mail

希望日時
相談内容
写真や資料
返信希望時間

相談する

パターン名: Reference Brand — Concierge Contact Panel
概要: 商用サイト向けの相談導線パネル。
使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 1080px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-concierge-contact-panel"} /-->

CSS:
.section-reference-concierge-contact-panel { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-concierge-contact-panel').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 014 Tokachi Fruits

sankou100-014-tokachi-fruits

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-014-tokachi-fruits"} /-->

CSS:
.section-sankou100-014-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-014-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 054 Mejinavi

sankou100-054-mejinavi

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU100 — 094 Tomore

sankou100-094-tomore

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — contact 01 Allright Inc

sankoumax-contact-01-allright-inc

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-01-allright-inc"} /-->

CSS:
.section-sankoumax-contact-01-allright-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-01-allright-inc').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 02 Jins Holdings

sankoumax-contact-02-jins-holdings

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-02-jins-holdings"} /-->

CSS:
.section-sankoumax-contact-02-jins-holdings { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-02-jins-holdings').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 03 Tsuchitokaze

sankoumax-contact-03-tsuchitokaze

Copy

Link

Collage

素材感を重ねる

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

2203

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

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

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

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

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

SANKOU Max — contact 04 Yamato 50Th

sankoumax-contact-04-yamato-50th

Copy

Link

Yamato

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-04-yamato-50th"} /-->

CSS:
.section-sankoumax-contact-04-yamato-50th { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-04-yamato-50th').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 05 Action Npo

sankoumax-contact-05-action-npo

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-05-action-npo"} /-->

CSS:
.section-sankoumax-contact-05-action-npo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — contact 06 Mycampus

sankoumax-contact-06-mycampus

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-06-mycampus"} /-->

CSS:
.section-sankoumax-contact-06-mycampus { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — contact 07 Mejinavi

sankoumax-contact-07-mejinavi

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-07-mejinavi"} /-->

CSS:
.section-sankoumax-contact-07-mejinavi { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — contact 08 Niwaya

sankoumax-contact-08-niwaya

Copy

Link

数字で納得させる

58%

改善率

6分

短縮

15556

導入数

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

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

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

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

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

SANKOU Max — contact 09 Mindful Connect

sankoumax-contact-09-mindful-connect

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-09-mindful-connect"} /-->

CSS:
.section-sankoumax-contact-09-mindful-connect { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-09-mindful-connect').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 10 Spicato Daruma

sankoumax-contact-10-spicato-daruma

Copy

Link

Spicato Daruma

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

About
Service
Works

News
Recruit
Contact

Sample 2210

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-10-spicato-daruma"} /-->

CSS:
.section-sankoumax-contact-10-spicato-daruma { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — contact 11 Morohoshi Portfolio

sankoumax-contact-11-morohoshi-portfolio

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-11-morohoshi-portfolio"} /-->

CSS:
.section-sankoumax-contact-11-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-11-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 12 Vision Structure

sankoumax-contact-12-vision-structure

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-12-vision-structure"} /-->

CSS:
.section-sankoumax-contact-12-vision-structure { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-12-vision-structure').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 13 Nakiri Shota

sankoumax-contact-13-nakiri-shota

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-13-nakiri-shota"} /-->

CSS:
.section-sankoumax-contact-13-nakiri-shota { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-13-nakiri-shota').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 14 Koba Clinic

sankoumax-contact-14-koba-clinic

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-14-koba-clinic"} /-->

CSS:
.section-sankoumax-contact-14-koba-clinic { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — contact 15 Ems Recruit

sankoumax-contact-15-ems-recruit

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-15-ems-recruit"} /-->

CSS:
.section-sankoumax-contact-15-ems-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — contact 16 Felissimo Panda

sankoumax-contact-16-felissimo-panda

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-16-felissimo-panda"} /-->

CSS:
.section-sankoumax-contact-16-felissimo-panda { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-16-felissimo-panda').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 17 Iriam Miraito

sankoumax-contact-17-iriam-miraito

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-17-iriam-miraito"} /-->

CSS:
.section-sankoumax-contact-17-iriam-miraito { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — contact 18 Gaaboo

sankoumax-contact-18-gaaboo

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-18-gaaboo"} /-->

CSS:
.section-sankoumax-contact-18-gaaboo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — contact 19 Violet Patisserie

sankoumax-contact-19-violet-patisserie

Copy

Link

2219

Violet Patisserie

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-19-violet-patisserie"} /-->

CSS:
.section-sankoumax-contact-19-violet-patisserie { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — contact 20 Nii Recruit

sankoumax-contact-20-nii-recruit

Copy

Link

Sampled Site

2220 / Nii Recruit

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-20-nii-recruit"} /-->

CSS:
.section-sankoumax-contact-20-nii-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-20-nii-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 21 Saranosono

sankoumax-contact-21-saranosono

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — contact 22 Dac Web

sankoumax-contact-22-dac-web

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-22-dac-web"} /-->

CSS:
.section-sankoumax-contact-22-dac-web { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-22-dac-web').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 23 Asuzac Recruit

sankoumax-contact-23-asuzac-recruit

Copy

Link

Collage

素材感を重ねる

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

2223

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-23-asuzac-recruit"} /-->

CSS:
.section-sankoumax-contact-23-asuzac-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-23-asuzac-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 24 Suntory Sic

sankoumax-contact-24-suntory-sic

Copy

Link

Suntory

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-24-suntory-sic"} /-->

CSS:
.section-sankoumax-contact-24-suntory-sic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-24-suntory-sic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 25 Amano Clinic

sankoumax-contact-25-amano-clinic

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-25-amano-clinic"} /-->

CSS:
.section-sankoumax-contact-25-amano-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-25-amano-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 26 Infocus

sankoumax-contact-26-infocus

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-26-infocus"} /-->

CSS:
.section-sankoumax-contact-26-infocus { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — contact 27 Tomore

sankoumax-contact-27-tomore

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-27-tomore"} /-->

CSS:
.section-sankoumax-contact-27-tomore { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — contact 28 Dan Brise Barber

sankoumax-contact-28-dan-brise-barber

Copy

Link

数字で納得させる

78%

改善率

8分

短縮

15696

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-28-dan-brise-barber"} /-->

CSS:
.section-sankoumax-contact-28-dan-brise-barber { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-28-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 29 Allureville Elements

sankoumax-contact-29-allureville-elements

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-29-allureville-elements"} /-->

CSS:
.section-sankoumax-contact-29-allureville-elements { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — contact 30 Studio Cbr

sankoumax-contact-30-studio-cbr

Copy

Link

Studio Cbr

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

About
Service
Works

News
Recruit
Contact

Sample 2230

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-contact-30-studio-cbr"} /-->

CSS:
.section-sankoumax-contact-30-studio-cbr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-contact-30-studio-cbr').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — contact 31 Yamakachi

sankoumax-contact-31-yamakachi

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — contact 32 Chiikawa Pocket

sankoumax-contact-32-chiikawa-pocket

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — contact 33 Chiba Dojo

sankoumax-contact-33-chiba-dojo

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — contact 34 Twoe

sankoumax-contact-34-twoe

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — contact 35 Kamata Shoyu

sankoumax-contact-35-kamata-shoyu

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — contact 36 Fumino

sankoumax-contact-36-fumino

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — contact 37 Anbe Shoten

sankoumax-contact-37-anbe-shoten

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — contact 38 Plaid Alpha

sankoumax-contact-38-plaid-alpha

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — contact 39 Undimension

sankoumax-contact-39-undimension

Copy

Link

2239

Undimension

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — contact 40 Norikura Hanabi

sankoumax-contact-40-norikura-hanabi

Copy

Link

Sampled Site

2240 / Norikura Hanabi

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — contact 41 Chugaitoen

sankoumax-contact-41-chugaitoen

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — contact 42 Favtown Wakayama

sankoumax-contact-42-favtown-wakayama

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

◈ Blanc Nail

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

Foundations

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

Content

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

Business

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

UI Components

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

コンタクト · Contact · Blanc Nail

コンタクト

プロジェクトについて、お話しませんか？

お気軽にご連絡ください

問い合わせを商用サイトで使いやすくする

問い合わせを迷わず振り分ける

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

問い合わせを商用サイトで使いやすくする

相談

見積

採用

問い合わせ

問い合わせを商用サイトで使いやすくする

Contact layout system

Operational ledger

Primary message area

Contact layout system

Contact layout system

サポート

相談

見積

Contact layout system

いつでも、お気軽に。

メール

お電話

ライブチャット

所在地

営業時間

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

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

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Kamata

相談の入口も、ブランド体験にする。

LINE / Mail

入力前に安心させる

入力前に安心させる

入力前に安心させる

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Yamato

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

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

58%

6分

15556

次の相談先を明確にする

Spicato Daruma

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

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

People Line

静かな思想を置く

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

写真と要点で信頼を作る

プロジェクトについて、
お話しませんか？