検索…

カタログ統計

CATALOG › Content › FAQ

FAQ

よくある質問。アコーディオン、2 列、カテゴリ分類。

Patterns

Content

Group

isValid=0

Verified

CSS

Animation

FAQ — Two Column

faq-2col

Copy

Link

FAQ

よくあるご質問

無料トライアルはありますか？

14 日間の無料トライアルをご用意しています。クレジットカードの登録は不要で、すべての機能をお試しいただけます。

支払い方法は？

クレジットカード（Visa, Mastercard, JCB, AMEX）、銀行振込、PayPal にてお支払いいただけます。法人のお客様は請求書払いも可能です。

途中でプランを変更できますか？

いつでもアップグレード／ダウングレード可能です。差額は日割り計算で精算されます。

解約はいつでもできますか？

いつでも解約可能です。違約金は一切かかりません。解約後も次回請求日までは引き続きご利用いただけます。

データのセキュリティは？

SOC 2 Type II ・ ISO 27001 認証取得済みです。すべてのデータは AES-256 で暗号化、転送時には TLS 1.3 を使用します。

サポートはどう受けられますか？

メール、チャット、電話の 3 つの方法でサポートを提供しています。Pro プラン以上は優先サポート対応です。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/faq-2col"} /-->

CSS:
.section-faq-2col { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-faq-2col').forEach((el) => el.dataset.ready = 'true');

FAQ — Card List

faq-card-list

Copy

Link

疑問にお答えします

他にご質問があれば、お気軽にお問い合わせください。

Q. どのような業界で利用されていますか？

SaaS、E コマース、金融、医療、教育など、幅広い業界の 3,000 社以上にご利用いただいています。

Q. 既存ツールから移行できますか？

主要な競合製品からのデータ移行ツールをご用意しています。専任エンジニアが移行をサポートいたします。

Q. API ドキュメントは公開されていますか？

REST API ・ GraphQL ・ Webhook をすべて提供しています。詳細は開発者ポータルをご覧ください。

Q. 日本語での問い合わせは可能ですか？

もちろんです。日本語ネイティブのカスタマーサクセスチームが平日 9:00–18:00 に対応しております。

パターン名: FAQ — Card List
概要: Single-column FAQ rendered as Q/A cards with hover lift.
使用目的: FAQ領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 760px、主要ブロック group, heading, paragraph, group, group, heading, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/faq-card-list"} /-->

CSS:
.section-faq-card-list { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-faq-card-list').forEach((el) => el.dataset.ready = 'true');

FAQ — 4 Category Tiles

faq-category-tiles

Copy

Link

カテゴリから探す

💳

お支払い

12 件の質問

📦

配送・商品

8 件の質問

👤

アカウント

15 件の質問

🛠️

技術サポート

23 件の質問

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/faq-category-tiles"} /-->

CSS:
.section-faq-category-tiles { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-faq-category-tiles').forEach((el) => el.dataset.ready = 'true');

FAQ — Quality Layout 01

faq-quality-layout-01

Copy

Link

FAQ

FAQを商用サイトで使いやすくする

疑問を整理して不安を減らす

料金

回答

契約

補足

操作

関連

解約

相談

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

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

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

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

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

FAQ — Quality Layout 02

faq-quality-layout-02

Copy

Link

FAQ

疑問を整理して不安を減らす

料金

補足

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

契約

関連

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

操作

相談

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

解約

回答

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

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

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

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

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

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

FAQ — Quality Layout 03

faq-quality-layout-03

Copy

Link

FAQ

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

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

FAQ

FAQを商用サイトで使いやすくする

疑問を整理して不安を減らす

料金

回答までの判断を短く示します。

契約

補足までの判断を短く示します。

操作

関連までの判断を短く示します。

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

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

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

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

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

FAQ — Quality Layout 04

faq-quality-layout-04

Copy

Link

FAQ

料金

相談

契約

回答

操作

補足

解約

関連

相談

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

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

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

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

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

FAQ — Quality Layout 05

faq-quality-layout-05

Copy

Link

FAQ

FAQを商用サイトで使いやすくする

疑問を整理して不安を減らす

料金

回答

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

契約

補足

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

操作

関連

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

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

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

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

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

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

FAQ – Quality Layout 06

faq-quality-layout-06

Copy

Link

FAQ

FAQ layout system

疑問を整理して不安を減らす

回答

補足

関連

相談

料金

回答

Production-ready block composition.

契約

補足

Production-ready block composition.

操作

関連

Production-ready block composition.

解約

相談

Production-ready block composition.

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

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

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

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

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

FAQ – Quality Layout 07

faq-quality-layout-07

Copy

Link

STATUS

Operational ledger

料金

補足

契約

関連

操作

相談

解約

回答

FAQ

Primary message area

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

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

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

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

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

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

FAQ – Quality Layout 08

faq-quality-layout-08

Copy

Link

INDEX

料金

契約

操作

解約

FAQ

FAQ layout system

疑問を整理して不安を減らす

料金

関連

Production-ready block composition.

契約

相談

Production-ready block composition.

NOTES

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

回答

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

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

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

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

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

FAQ – Quality Layout 09

faq-quality-layout-09

Copy

Link

FAQ

FAQ layout system

疑問を整理して不安を減らす

解約

相談

Open

料金

回答

Open

契約

補足

Open

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

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

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

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

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

FAQ – Quality Layout 10

faq-quality-layout-10

Copy

Link

FAQ

FAQ layout system

疑問を整理して不安を減らす

料金

Start

Production-ready block composition.

契約

Compare

Production-ready block composition.

操作

Decide

Production-ready block composition.

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

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

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

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

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

Reference Complete — faq 01 Sticky Entry

reference-complete-faq-01-sticky-entry-michikusa-art

Copy

Link

Sampled Site

14901 / Michikusa Art

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

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

詳しく見る

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

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

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

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

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

Reference Complete — faq 02 Editorial Issue

reference-complete-faq-02-editorial-issue-unipos

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

Reference Complete — faq 03 Brand Index

reference-complete-faq-03-brand-index-applebase

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

Reference Complete — faq 04 Recruit Story

reference-complete-faq-04-recruit-story-niwaya

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

Reference Complete — faq 05 Commerce Compare

reference-complete-faq-05-commerce-compare-serious-ceramic

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

Reference Complete — faq 06 Timeline Proof

reference-complete-faq-06-timeline-proof-studio-cbr

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-faq-06-timeline-proof-studio-cbr"} /-->

CSS:
.section-reference-complete-faq-06-timeline-proof-studio-cbr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-faq-06-timeline-proof-studio-cbr').forEach((el) => el.dataset.ready = 'true');

Reference Complete — faq 07 Gallery Led

reference-complete-faq-07-gallery-led-twoe

Copy

Link

Detail

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

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

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

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

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

Reference Complete — faq 08 Dashboard Proof

reference-complete-faq-08-dashboard-proof-ja-aichi-recruit

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-faq-08-dashboard-proof-ja-aichi-recruit"} /-->

CSS:
.section-reference-complete-faq-08-dashboard-proof-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-faq-08-dashboard-proof-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');

Reference Complete — faq 09 Contact Ready

reference-complete-faq-09-contact-ready-vision-structure

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

Reference Complete — faq 10 Mobile Rail

reference-complete-faq-10-mobile-rail-felissimo-panda

Copy

Link

Felissimo

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU Max — faq 01 Niwaya

sankoumax-faq-01-niwaya

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

SANKOU Max — faq 02 Mindful Connect

sankoumax-faq-02-mindful-connect

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — faq 03 Spicato Daruma

sankoumax-faq-03-spicato-daruma

Copy

Link

数字で納得させる

33%

改善率

7分

短縮

13421

導入数

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

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

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

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

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

SANKOU Max — faq 04 Morohoshi Portfolio

sankoumax-faq-04-morohoshi-portfolio

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — faq 05 Vision Structure

sankoumax-faq-05-vision-structure

Copy

Link

Vision Structure

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

About
Service
Works

News
Recruit
Contact

Sample 1905

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

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

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

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

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

SANKOU Max — faq 06 Nakiri Shota

sankoumax-faq-06-nakiri-shota

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — faq 07 Koba Clinic

sankoumax-faq-07-koba-clinic

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — faq 08 Ems Recruit

sankoumax-faq-08-ems-recruit

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — faq 09 Felissimo Panda

sankoumax-faq-09-felissimo-panda

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — faq 10 Iriam Miraito

sankoumax-faq-10-iriam-miraito

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — faq 11 Gaaboo

sankoumax-faq-11-gaaboo

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — faq 12 Violet Patisserie

sankoumax-faq-12-violet-patisserie

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — faq 13 Nii Recruit

sankoumax-faq-13-nii-recruit

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — faq 14 Saranosono

sankoumax-faq-14-saranosono

Copy

Link

1914

Saranosono

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — faq 15 Dac Web

sankoumax-faq-15-dac-web

Copy

Link

Sampled Site

1915 / Dac Web

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — faq 16 Asuzac Recruit

sankoumax-faq-16-asuzac-recruit

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — faq 17 Suntory Sic

sankoumax-faq-17-suntory-sic

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

SANKOU Max — faq 18 Amano Clinic

sankoumax-faq-18-amano-clinic

Copy

Link

Collage

素材感を重ねる

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

1918

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

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

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

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

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

SANKOU Max — faq 19 Infocus

sankoumax-faq-19-infocus

Copy

Link

Infocus

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU Max — faq 20 Tomore

sankoumax-faq-20-tomore

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

SANKOU Max — faq 21 Dan Brise Barber

sankoumax-faq-21-dan-brise-barber

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

SANKOU Max — faq 22 Allureville Elements

sankoumax-faq-22-allureville-elements

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — faq 23 Studio Cbr

sankoumax-faq-23-studio-cbr

Copy

Link

数字で納得させる

53%

改善率

9分

短縮

13561

導入数

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

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

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

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

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

SANKOU Max — faq 24 Yamakachi

sankoumax-faq-24-yamakachi

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — faq 25 Chiikawa Pocket

sankoumax-faq-25-chiikawa-pocket

Copy

Link

Chiikawa Pocket

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

About
Service
Works

News
Recruit
Contact

Sample 1925

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

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

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

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

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

SANKOU Max — faq 26 Chiba Dojo

sankoumax-faq-26-chiba-dojo

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — faq 27 Twoe

sankoumax-faq-27-twoe

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — faq 28 Kamata Shoyu

sankoumax-faq-28-kamata-shoyu

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — faq 29 Fumino

sankoumax-faq-29-fumino

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — faq 30 Anbe Shoten

sankoumax-faq-30-anbe-shoten

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — faq 31 Plaid Alpha

sankoumax-faq-31-plaid-alpha

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — faq 32 Undimension

sankoumax-faq-32-undimension

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — faq 33 Norikura Hanabi

sankoumax-faq-33-norikura-hanabi

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — faq 34 Chugaitoen

sankoumax-faq-34-chugaitoen

Copy

Link

1934

Chugaitoen

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — faq 35 Favtown Wakayama

sankoumax-faq-35-favtown-wakayama

Copy

Link

Sampled Site

1935 / Favtown Wakayama

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — faq 36 Palcloset Fashion

sankoumax-faq-36-palcloset-fashion

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — faq 37 Michikusa Art

sankoumax-faq-37-michikusa-art

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

SANKOU Max — faq 38 Tenten

sankoumax-faq-38-tenten

Copy

Link

Collage

素材感を重ねる

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

1938

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

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

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

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

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

SANKOU Max — faq 39 Unipos

sankoumax-faq-39-unipos

Copy

Link

Unipos

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU Max — faq 40 Trail Inc

sankoumax-faq-40-trail-inc

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

SANKOU Max — faq 41 Applebase

sankoumax-faq-41-applebase

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

SANKOU Max — faq 42 Meisei Es

sankoumax-faq-42-meisei-es

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — faq 43 Unicell

sankoumax-faq-43-unicell

Copy

Link

数字で納得させる

73%

改善率

11分

短縮

13701

導入数

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

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

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

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

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

SANKOU Max — faq 44 Uki Editions

sankoumax-faq-44-uki-editions

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — faq 45 Kikyougaoka

sankoumax-faq-45-kikyougaoka

Copy

Link

Kikyougaoka

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

About
Service
Works

News
Recruit
Contact

Sample 1945

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

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

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

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

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

SANKOU Max — faq 46 J Security

sankoumax-faq-46-j-security

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — faq 47 Serious Ceramic

sankoumax-faq-47-serious-ceramic

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

◈ Blanc Nail

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

Foundations

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

Content

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

Business

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

UI Components

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

FAQ · FAQ · Blanc Nail

FAQ

よくあるご質問

無料トライアルはありますか？

支払い方法は？

途中でプランを変更できますか？

解約はいつでもできますか？

データのセキュリティは？

サポートはどう受けられますか？

疑問にお答えします

Q. どのような業界で利用されていますか？

Q. 既存ツールから移行できますか？

Q. API ドキュメントは公開されていますか？

Q. 日本語での問い合わせは可能ですか？

カテゴリから探す

FAQを商用サイトで使いやすくする

疑問を整理して不安を減らす

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

FAQを商用サイトで使いやすくする

料金

契約

操作

FAQ

FAQを商用サイトで使いやすくする

FAQ layout system

Operational ledger

Primary message area

FAQ layout system

FAQ layout system

解約

料金

契約

FAQ layout system

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

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

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Felissimo

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

33%

7分

13421

次の相談先を明確にする

Vision Structure

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

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

People Line

静かな思想を置く

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

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Infocus

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

Collection Selector