コンタクト · Contact · Blanc Nail
検索…
カタログ 統計
CATALOG › Business › Contact
コンタクト
問い合わせフォーム、住所カード、電話 CTA。一次接触の窓口。
24
Patterns
Business
Group
isValid=0
Verified
CSS
Animation
01
Contact — Centered CTA
contact-centered-cta
- パターン名: 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');
02
Contact — Simple CTA (Tel + Mail)
contact-cta-simple
- パターン名: 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');
03
Contact — Quality Layout 01
contact-quality-layout-01
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');
04
Contact — Quality Layout 02
contact-quality-layout-02
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');
05
Contact — Quality Layout 03
contact-quality-layout-03
問い合わせ
用途を固定して内容を展開
左に役割、右に実データを置くため、サイト制作時に差し替えやすい構成です。
CONTACT
問い合わせを商用サイトで使いやすくする
問い合わせを迷わず振り分ける
01
相談
受付までの判断を短く示します。
02
見積
確認までの判断を短く示します。
03
採用
返信までの判断を短く示します。
- パターン名: 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');
06
Contact — Quality Layout 04
contact-quality-layout-04
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');
07
Contact — Quality Layout 05
contact-quality-layout-05
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');
08
Contact – Quality Layout 06
contact-quality-layout-06
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');
09
Contact – Quality Layout 07
contact-quality-layout-07
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');
10
Contact – Quality Layout 08
contact-quality-layout-08
INDEX
01
相談
02
見積
03
採用
04
サポート
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');
11
Contact – Quality Layout 09
contact-quality-layout-09
CONTACT
Contact layout system
問い合わせを迷わず振り分ける
01
サポート
完了
Open
02
相談
受付
Open
03
見積
確認
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');
12
Contact – Quality Layout 10
contact-quality-layout-10
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');
13
Contact — Split Info + Methods
contact-split
CONTACT
いつでも、お気軽に。
お見積もり、デモのご依頼、技術的なご相談など、どんなご質問にも 24 時間以内にお返事いたします。
本社
〒 100-0001
東京都千代田区千代田 1-1
パレスビルディング 8F
営業時間
平日 9:00–18:00（土日祝休み）
- パターン名: 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');
14
Contact — 2-Column Info Split
contact-split-info
所在地
〒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');
15
Contact — EX01 Phone and Web Cards
contact-ex01-tel-web
ご予約・お問い合わせ
📞
お電話で
075-000-0000
受付 10:00 — 18:00（水曜定休）
✉️
フォームで（24時間受付）
二営業日以内にご返信します。
- パターン名: Contact — EX01 Phone and Web Cards
- 概要: Two contact channels side by side: phone card and web form card.
- 使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/contact-ex01-tel-web"} /-->
CSS:
.section-contact-ex01-tel-web { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-contact-ex01-tel-web').forEach((el) => el.dataset.ready = 'true');
16
Contact — EX02 LINE First
contact-ex02-line-first
LINE でかんたん予約
友だち追加して、希望日時を送るだけ。
空き状況の確認やメニューのご相談もそのままどうぞ。
- パターン名: Contact — EX02 LINE First
- 概要: Messaging-first contact block with LINE emphasis and alternatives.
- 使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/contact-ex02-line-first"} /-->
CSS:
.section-contact-ex02-line-first { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-contact-ex02-line-first').forEach((el) => el.dataset.ready = 'true');
17
Contact — EX03 Consultation Steps
contact-ex03-steps
ご相談の流れ
STEP 01
お問い合わせ
フォームまたはお電話で。現状とご希望をざっくりで構いません。
STEP 02
無料ヒアリング
30 分ほどお話を伺い、最適な進め方と概算費用をご提案します。
STEP 03
ご契約・開始
内容にご納得いただけたらスタート。途中経過も随時共有します。
- パターン名: Contact — EX03 Consultation Steps
- 概要: Three steps from inquiry to start, ending with a CTA.
- 使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/contact-ex03-steps"} /-->
CSS:
.section-contact-ex03-steps { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-contact-ex03-steps').forEach((el) => el.dataset.ready = 'true');
18
Contact — EX04 Recruit Inquiry
contact-ex04-recruit
RECRUIT
一緒に働く仲間を募集しています
経験よりも、人柄と意欲を大切にしています。
見学だけでも歓迎です。お気軽にご連絡ください。
- パターン名: Contact — EX04 Recruit Inquiry
- 概要: Recruiting contact band with role note and apply button.
- 使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/contact-ex04-recruit"} /-->
CSS:
.section-contact-ex04-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-contact-ex04-recruit').forEach((el) => el.dataset.ready = 'true');
19
Contact — EX05 FAQ First Contact
contact-ex05-faq-link
お問い合わせの前に
よくいただくご質問は FAQ にまとめています。
該当がなければ、フォームからお気軽にどうぞ。
- パターン名: Contact — EX05 FAQ First Contact
- 概要: Suggest the FAQ before contacting, with both options as buttons.
- 使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/contact-ex05-faq-link"} /-->
CSS:
.section-contact-ex05-faq-link { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-contact-ex05-faq-link').forEach((el) => el.dataset.ready = 'true');
20
Contact — EX06 Urgent Notice Strip
contact-ex06-emergency
水まわりのトラブルは 24 時間受付
最短 30 分で駆けつけます。出張見積りは無料です。
📞 0120-00-0000
- パターン名: Contact — EX06 Urgent Notice Strip
- 概要: High-visibility urgent contact strip with a large phone number.
- 使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/contact-ex06-emergency"} /-->
CSS:
.section-contact-ex06-emergency { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-contact-ex06-emergency').forEach((el) => el.dataset.ready = 'true');
21
Contact — EX07 Visit Reservation Split
contact-ex07-visit-reserve
ご来店予約
ゆっくりご覧いただける
個別のご案内です
ご予約のお客さまを優先してご案内しています。ご希望の日時を選んで、専任スタッフとじっくりご相談ください。所要時間はおよそ 60 分です。
- パターン名: Contact — EX07 Visit Reservation Split
- 概要: Store visit reservation: interior photo and booking info side by side.
- 使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/contact-ex07-visit-reserve"} /-->
CSS:
.section-contact-ex07-visit-reserve { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-contact-ex07-visit-reserve').forEach((el) => el.dataset.ready = 'true');
22
Contact — EX08 Glass Card on Gradient
contact-ex08-glass-card
まずは話を聞いてみませんか
オンライン相談にも対応しています。
無理な勧誘は一切ありません。
- パターン名: Contact — EX08 Glass Card on Gradient
- 概要: Contact CTA inside a glass card on a vivid gradient.
- 使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/contact-ex08-glass-card"} /-->
CSS:
.section-contact-ex08-glass-card { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-contact-ex08-glass-card').forEach((el) => el.dataset.ready = 'true');
23
Contact — EX09 Response Time Promise
contact-ex09-hours-note
お返事についてのお約束
⏱️
二営業日以内に
必ずご返信します
🔒
個人情報は相談対応
のみに使用します
🤝
しつこい営業は
いたしません
- パターン名: Contact — EX09 Response Time Promise
- 概要: Sets reply expectations: response window, channels, what to include.
- 使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/contact-ex09-hours-note"} /-->
CSS:
.section-contact-ex09-hours-note { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-contact-ex09-hours-note').forEach((el) => el.dataset.ready = 'true');
24
Contact — EX10 Zen Invitation
contact-ex10-zen-invite
— ご縁を、お待ちしています —
どうぞ、お気軽に
お声がけください。
小さなご相談ほど、歓迎です。
一通ずつ、店主が目を通してお返事しています。
- パターン名: Contact — EX10 Zen Invitation
- 概要: Quiet Japanese-style closing invitation with a single understated CTA.
- 使用目的: Contact領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/contact-ex10-zen-invite"} /-->
CSS:
.section-contact-ex10-zen-invite { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-contact-ex10-zen-invite').forEach((el) => el.dataset.ready = 'true');