検索…
カタログ 統計
CATALOG › Content › Testimonials
レビュー / 推薦
顧客の声、推薦文、評価。信頼を可視化する構成。
70
Patterns
Content
Group
isValid=0
Verified
CSS
Animation
01
Reference Complete — testimonials 01 Sticky Entry
reference-complete-testimonials-01-sticky-entry-kikyougaoka
Sampled Site
14501 / Kikyougaoka
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: Reference Complete — testimonials 01 Sticky Entry
- 概要: 参照サンプル再確認から追加したtestimonials向け部品。固定導線つきの大判ファーストビュー。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 26% / 74%、推奨コンテンツ幅 44483px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-testimonials-01-sticky-entry-kikyougaoka"} /-->
CSS:
.section-reference-complete-testimonials-01-sticky-entry-kikyougaoka { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-testimonials-01-sticky-entry-kikyougaoka').forEach((el) => el.dataset.ready = 'true');
02
Reference Complete — testimonials 02 Editorial Issue
reference-complete-testimonials-02-editorial-issue-serious-ceramic
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: Reference Complete — testimonials 02 Editorial Issue
- 概要: 参照サンプル再確認から追加したtestimonials向け部品。雑誌的な見出しと導入文の編集レイアウト。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 15522px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-testimonials-02-editorial-issue-serious-ceramic"} /-->
CSS:
.section-reference-complete-testimonials-02-editorial-issue-serious-ceramic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-testimonials-02-editorial-issue-serious-ceramic').forEach((el) => el.dataset.ready = 'true');
03
Reference Complete — testimonials 03 Brand Index
reference-complete-testimonials-03-brand-index-notahotel-architects
Card Flow
迷わない比較カード
Notahotel Architects から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: Reference Complete — testimonials 03 Brand Index
- 概要: 参照サンプル再確認から追加したtestimonials向け部品。複数ブランドやサービスを迷わせず並べる索引。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 15583px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-testimonials-03-brand-index-notahotel-architects"} /-->
CSS:
.section-reference-complete-testimonials-03-brand-index-notahotel-architects { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-testimonials-03-brand-index-notahotel-architects').forEach((el) => el.dataset.ready = 'true');
04
Reference Complete — testimonials 04 Recruit Story
reference-complete-testimonials-04-recruit-story-felissimo-panda
Split Story
写真と要点で信頼を作る
Felissimo Panda の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: Reference Complete — testimonials 04 Recruit Story
- 概要: 参照サンプル再確認から追加したtestimonials向け部品。採用・企業紹介に使える人物/思想の分割構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 15544px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-testimonials-04-recruit-story-felissimo-panda"} /-->
CSS:
.section-reference-complete-testimonials-04-recruit-story-felissimo-panda { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-testimonials-04-recruit-story-felissimo-panda').forEach((el) => el.dataset.ready = 'true');
05
Reference Complete — testimonials 05 Commerce Compare
reference-complete-testimonials-05-commerce-compare-glanta
Collection Selector
Glanta の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: Reference Complete — testimonials 05 Commerce Compare
- 概要: 参照サンプル再確認から追加したtestimonials向け部品。料金・商品・プランを比較しやすい構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 15605px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-testimonials-05-commerce-compare-glanta"} /-->
CSS:
.section-reference-complete-testimonials-05-commerce-compare-glanta { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-testimonials-05-commerce-compare-glanta').forEach((el) => el.dataset.ready = 'true');
06
Reference Complete — testimonials 06 Timeline Proof
reference-complete-testimonials-06-timeline-proof-plaid-alpha
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: Reference Complete — testimonials 06 Timeline Proof
- 概要: 参照サンプル再確認から追加したtestimonials向け部品。沿革・導入手順・制作工程の時系列。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 15546px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-testimonials-06-timeline-proof-plaid-alpha"} /-->
CSS:
.section-reference-complete-testimonials-06-timeline-proof-plaid-alpha { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-testimonials-06-timeline-proof-plaid-alpha').forEach((el) => el.dataset.ready = 'true');
07
Reference Complete — testimonials 07 Gallery Led
reference-complete-testimonials-07-gallery-led-favtown-wakayama
Detail
- パターン名: Reference Complete — testimonials 07 Gallery Led
- 概要: 参照サンプル再確認から追加したtestimonials向け部品。写真量の多い商材を見せるギャラリー導線。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 15627px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-testimonials-07-gallery-led-favtown-wakayama"} /-->
CSS:
.section-reference-complete-testimonials-07-gallery-led-favtown-wakayama { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-testimonials-07-gallery-led-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');
08
Reference Complete — testimonials 08 Dashboard Proof
reference-complete-testimonials-08-dashboard-proof-echitora
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: Reference Complete — testimonials 08 Dashboard Proof
- 概要: 参照サンプル再確認から追加したtestimonials向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 15588px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-testimonials-08-dashboard-proof-echitora"} /-->
CSS:
.section-reference-complete-testimonials-08-dashboard-proof-echitora { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-testimonials-08-dashboard-proof-echitora').forEach((el) => el.dataset.ready = 'true');
09
Reference Complete — testimonials 09 Contact Ready
reference-complete-testimonials-09-contact-ready-nii-recruit
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: Reference Complete — testimonials 09 Contact Ready
- 概要: 参照サンプル再確認から追加したtestimonials向け部品。問い合わせ前の入力項目を整理する導線。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 15569px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-testimonials-09-contact-ready-nii-recruit"} /-->
CSS:
.section-reference-complete-testimonials-09-contact-ready-nii-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-testimonials-09-contact-ready-nii-recruit').forEach((el) => el.dataset.ready = 'true');
10
Reference Complete — testimonials 10 Mobile Rail
reference-complete-testimonials-10-mobile-rail-suntory-sic
Suntory
About
Works
Journal
Contact
- パターン名: Reference Complete — testimonials 10 Mobile Rail
- 概要: 参照サンプル再確認から追加したtestimonials向け部品。スマホ閲覧で要点を縦に追えるレール型。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 15690px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-testimonials-10-mobile-rail-suntory-sic"} /-->
CSS:
.section-reference-complete-testimonials-10-mobile-rail-suntory-sic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-testimonials-10-mobile-rail-suntory-sic').forEach((el) => el.dataset.ready = 'true');
11
SANKOU100 — 018 Rim Jins
sankou100-018-rim-jins
Detail
- パターン名: SANKOU100 — 018 Rim Jins
- 概要: SANKOU! sample 018から抽出したgallery型の商用サイト向け構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 1138px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-018-rim-jins"} /-->
CSS:
.section-sankou100-018-rim-jins { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-018-rim-jins').forEach((el) => el.dataset.ready = 'true');
12
SANKOU100 — 058 Dodasports
sankou100-058-dodasports
Detail
- パターン名: SANKOU100 — 058 Dodasports
- 概要: SANKOU! sample 058から抽出したgallery型の商用サイト向け構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 1178px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-058-dodasports"} /-->
CSS:
.section-sankou100-058-dodasports { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-058-dodasports').forEach((el) => el.dataset.ready = 'true');
13
SANKOU100 — 098 Favtown
sankou100-098-favtown
Detail
- パターン名: SANKOU100 — 098 Favtown
- 概要: SANKOU! sample 098から抽出したgallery型の商用サイト向け構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 1218px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-098-favtown"} /-->
CSS:
.section-sankou100-098-favtown { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-098-favtown').forEach((el) => el.dataset.ready = 'true');
14
SANKOU Max — testimonials 01 Mec Residence Recruit
sankoumax-testimonials-01-mec-residence-recruit
Collection Selector
Mec Residence Recruit の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — testimonials 01 Mec Residence Recruit
- 概要: SANKOU100 sample setから展開したtestimonials向けproduct構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 2601px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-01-mec-residence-recruit"} /-->
CSS:
.section-sankoumax-testimonials-01-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-01-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');
15
SANKOU Max — testimonials 02 Greenpark Santo
sankoumax-testimonials-02-greenpark-santo
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — testimonials 02 Greenpark Santo
- 概要: SANKOU100 sample setから展開したtestimonials向けtimeline構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2542px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-02-greenpark-santo"} /-->
CSS:
.section-sankoumax-testimonials-02-greenpark-santo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-02-greenpark-santo').forEach((el) => el.dataset.ready = 'true');
16
SANKOU Max — testimonials 03 Land Sapporo
sankoumax-testimonials-03-land-sapporo
数字で納得させる
53%
改善率
3分
短縮
10621
導入数
- パターン名: SANKOU Max — testimonials 03 Land Sapporo
- 概要: SANKOU100 sample setから展開したtestimonials向けstats構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2463px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-03-land-sapporo"} /-->
CSS:
.section-sankoumax-testimonials-03-land-sapporo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-03-land-sapporo').forEach((el) => el.dataset.ready = 'true');
17
SANKOU Max — testimonials 04 Tokachi Fruits
sankoumax-testimonials-04-tokachi-fruits
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — testimonials 04 Tokachi Fruits
- 概要: SANKOU100 sample setから展開したtestimonials向けcontact構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 58% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2584px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-04-tokachi-fruits"} /-->
CSS:
.section-sankoumax-testimonials-04-tokachi-fruits { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-04-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');
18
SANKOU Max — testimonials 05 Echitora
sankoumax-testimonials-05-echitora
Echitora
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 1505
- パターン名: SANKOU Max — testimonials 05 Echitora
- 概要: SANKOU100 sample setから展開したtestimonials向けfooter構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 2625px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-05-echitora"} /-->
CSS:
.section-sankoumax-testimonials-05-echitora { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-05-echitora').forEach((el) => el.dataset.ready = 'true');
19
SANKOU Max — testimonials 06 Megamis
sankoumax-testimonials-06-megamis
NEWS
Megamis から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — testimonials 06 Megamis
- 概要: SANKOU100 sample setから展開したtestimonials向けalert構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 2586px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-06-megamis"} /-->
CSS:
.section-sankoumax-testimonials-06-megamis { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-06-megamis').forEach((el) => el.dataset.ready = 'true');
20
SANKOU Max — testimonials 07 Kagami
sankoumax-testimonials-07-kagami
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — testimonials 07 Kagami
- 概要: SANKOU100 sample setから展開したtestimonials向けmap構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2547px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-07-kagami"} /-->
CSS:
.section-sankoumax-testimonials-07-kagami { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-07-kagami').forEach((el) => el.dataset.ready = 'true');
21
SANKOU Max — testimonials 08 Antscr
sankoumax-testimonials-08-antscr
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — testimonials 08 Antscr
- 概要: SANKOU100 sample setから展開したtestimonials向けform構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 2568px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-08-antscr"} /-->
CSS:
.section-sankoumax-testimonials-08-antscr { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-08-antscr').forEach((el) => el.dataset.ready = 'true');
22
SANKOU Max — testimonials 09 Meisei Kg
sankoumax-testimonials-09-meisei-kg
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — testimonials 09 Meisei Kg
- 概要: SANKOU100 sample setから展開したtestimonials向けtabs構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2489px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-09-meisei-kg"} /-->
CSS:
.section-sankoumax-testimonials-09-meisei-kg { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-09-meisei-kg').forEach((el) => el.dataset.ready = 'true');
23
SANKOU Max — testimonials 10 Iamwithyou
sankoumax-testimonials-10-iamwithyou
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — testimonials 10 Iamwithyou
- 概要: SANKOU100 sample setから展開したtestimonials向けdashboard構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 2590px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-10-iamwithyou"} /-->
CSS:
.section-sankoumax-testimonials-10-iamwithyou { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-10-iamwithyou').forEach((el) => el.dataset.ready = 'true');
24
SANKOU Max — testimonials 11 Depsoa
sankoumax-testimonials-11-depsoa
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — testimonials 11 Depsoa
- 概要: SANKOU100 sample setから展開したtestimonials向けfaq構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2431px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-11-depsoa"} /-->
CSS:
.section-sankoumax-testimonials-11-depsoa { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-11-depsoa').forEach((el) => el.dataset.ready = 'true');
25
SANKOU Max — testimonials 12 Nothing Tech
sankoumax-testimonials-12-nothing-tech
Detail
- パターン名: SANKOU Max — testimonials 12 Nothing Tech
- 概要: SANKOU100 sample setから展開したtestimonials向けgallery構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2632px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-12-nothing-tech"} /-->
CSS:
.section-sankoumax-testimonials-12-nothing-tech { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-12-nothing-tech').forEach((el) => el.dataset.ready = 'true');
26
SANKOU Max — testimonials 13 Upvege
sankoumax-testimonials-13-upvege
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — testimonials 13 Upvege
- 概要: SANKOU100 sample setから展開したtestimonials向けroster構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2633px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-13-upvege"} /-->
CSS:
.section-sankoumax-testimonials-13-upvege { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-13-upvege').forEach((el) => el.dataset.ready = 'true');
27
SANKOU Max — testimonials 14 Fujiya1935
sankoumax-testimonials-14-fujiya1935
1514
Fujiya1935
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — testimonials 14 Fujiya1935
- 概要: SANKOU100 sample setから展開したtestimonials向けmanifesto構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2414px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-14-fujiya1935"} /-->
CSS:
.section-sankoumax-testimonials-14-fujiya1935 { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-14-fujiya1935').forEach((el) => el.dataset.ready = 'true');
28
SANKOU Max — testimonials 15 Omodakaya
sankoumax-testimonials-15-omodakaya
Sampled Site
1515 / Omodakaya
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — testimonials 15 Omodakaya
- 概要: SANKOU100 sample setから展開したtestimonials向けcover構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 27% / 73%、推奨コンテンツ幅 5525px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-15-omodakaya"} /-->
CSS:
.section-sankoumax-testimonials-15-omodakaya { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-15-omodakaya').forEach((el) => el.dataset.ready = 'true');
29
SANKOU Max — testimonials 16 Favtown
sankoumax-testimonials-16-favtown
Split Story
写真と要点で信頼を作る
Favtown の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — testimonials 16 Favtown
- 概要: SANKOU100 sample setから展開したtestimonials向けsplit構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 2556px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-16-favtown"} /-->
CSS:
.section-sankoumax-testimonials-16-favtown { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-16-favtown').forEach((el) => el.dataset.ready = 'true');
30
SANKOU Max — testimonials 17 Mizuya Kyoto
sankoumax-testimonials-17-mizuya-kyoto
Card Flow
迷わない比較カード
Mizuya Kyoto から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — testimonials 17 Mizuya Kyoto
- 概要: SANKOU100 sample setから展開したtestimonials向けcards構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2597px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-17-mizuya-kyoto"} /-->
CSS:
.section-sankoumax-testimonials-17-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-17-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');
31
SANKOU Max — testimonials 18 Allright Inc
sankoumax-testimonials-18-allright-inc
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
1518
- パターン名: SANKOU Max — testimonials 18 Allright Inc
- 概要: SANKOU100 sample setから展開したtestimonials向けcollage構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 36% / 1px / 34% / 36% / 1px、推奨コンテンツ幅 2638px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-18-allright-inc"} /-->
CSS:
.section-sankoumax-testimonials-18-allright-inc { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-18-allright-inc').forEach((el) => el.dataset.ready = 'true');
32
SANKOU Max — testimonials 19 Jins Holdings
sankoumax-testimonials-19-jins-holdings
Jins
About
Works
Journal
Contact
- パターン名: SANKOU Max — testimonials 19 Jins Holdings
- 概要: SANKOU100 sample setから展開したtestimonials向けrail構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2699px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-19-jins-holdings"} /-->
CSS:
.section-sankoumax-testimonials-19-jins-holdings { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-19-jins-holdings').forEach((el) => el.dataset.ready = 'true');
33
SANKOU Max — testimonials 20 Tsuchitokaze
sankoumax-testimonials-20-tsuchitokaze
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — testimonials 20 Tsuchitokaze
- 概要: SANKOU100 sample setから展開したtestimonials向けeditorial構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 56% / 1px、推奨コンテンツ幅 2540px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-20-tsuchitokaze"} /-->
CSS:
.section-sankoumax-testimonials-20-tsuchitokaze { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-20-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');
34
SANKOU Max — testimonials 21 Yamato 50Th
sankoumax-testimonials-21-yamato-50th
Collection Selector
Yamato 50Th の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — testimonials 21 Yamato 50Th
- 概要: SANKOU100 sample setから展開したtestimonials向けproduct構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 2621px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-21-yamato-50th"} /-->
CSS:
.section-sankoumax-testimonials-21-yamato-50th { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-21-yamato-50th').forEach((el) => el.dataset.ready = 'true');
35
SANKOU Max — testimonials 22 Action Npo
sankoumax-testimonials-22-action-npo
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — testimonials 22 Action Npo
- 概要: SANKOU100 sample setから展開したtestimonials向けtimeline構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2562px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-22-action-npo"} /-->
CSS:
.section-sankoumax-testimonials-22-action-npo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-22-action-npo').forEach((el) => el.dataset.ready = 'true');
36
SANKOU Max — testimonials 23 Mycampus
sankoumax-testimonials-23-mycampus
数字で納得させる
73%
改善率
5分
短縮
10761
導入数
- パターン名: SANKOU Max — testimonials 23 Mycampus
- 概要: SANKOU100 sample setから展開したtestimonials向けstats構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2483px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-23-mycampus"} /-->
CSS:
.section-sankoumax-testimonials-23-mycampus { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-23-mycampus').forEach((el) => el.dataset.ready = 'true');
37
SANKOU Max — testimonials 24 Mejinavi
sankoumax-testimonials-24-mejinavi
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — testimonials 24 Mejinavi
- 概要: SANKOU100 sample setから展開したtestimonials向けcontact構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 54% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2604px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-24-mejinavi"} /-->
CSS:
.section-sankoumax-testimonials-24-mejinavi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-24-mejinavi').forEach((el) => el.dataset.ready = 'true');
38
SANKOU Max — testimonials 25 Niwaya
sankoumax-testimonials-25-niwaya
Niwaya
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 1525
- パターン名: SANKOU Max — testimonials 25 Niwaya
- 概要: SANKOU100 sample setから展開したtestimonials向けfooter構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 2645px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-25-niwaya"} /-->
CSS:
.section-sankoumax-testimonials-25-niwaya { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-25-niwaya').forEach((el) => el.dataset.ready = 'true');
39
SANKOU Max — testimonials 26 Mindful Connect
sankoumax-testimonials-26-mindful-connect
NEWS
Mindful Connect から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — testimonials 26 Mindful Connect
- 概要: SANKOU100 sample setから展開したtestimonials向けalert構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 2606px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-26-mindful-connect"} /-->
CSS:
.section-sankoumax-testimonials-26-mindful-connect { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-26-mindful-connect').forEach((el) => el.dataset.ready = 'true');
40
SANKOU Max — testimonials 27 Spicato Daruma
sankoumax-testimonials-27-spicato-daruma
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — testimonials 27 Spicato Daruma
- 概要: SANKOU100 sample setから展開したtestimonials向けmap構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2567px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-27-spicato-daruma"} /-->
CSS:
.section-sankoumax-testimonials-27-spicato-daruma { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-27-spicato-daruma').forEach((el) => el.dataset.ready = 'true');
41
SANKOU Max — testimonials 28 Morohoshi Portfolio
sankoumax-testimonials-28-morohoshi-portfolio
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — testimonials 28 Morohoshi Portfolio
- 概要: SANKOU100 sample setから展開したtestimonials向けform構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 2588px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-28-morohoshi-portfolio"} /-->
CSS:
.section-sankoumax-testimonials-28-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-28-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');
42
SANKOU Max — testimonials 29 Vision Structure
sankoumax-testimonials-29-vision-structure
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — testimonials 29 Vision Structure
- 概要: SANKOU100 sample setから展開したtestimonials向けtabs構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2509px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-29-vision-structure"} /-->
CSS:
.section-sankoumax-testimonials-29-vision-structure { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-29-vision-structure').forEach((el) => el.dataset.ready = 'true');
43
SANKOU Max — testimonials 30 Nakiri Shota
sankoumax-testimonials-30-nakiri-shota
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — testimonials 30 Nakiri Shota
- 概要: SANKOU100 sample setから展開したtestimonials向けdashboard構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 2610px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-30-nakiri-shota"} /-->
CSS:
.section-sankoumax-testimonials-30-nakiri-shota { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-30-nakiri-shota').forEach((el) => el.dataset.ready = 'true');
44
SANKOU Max — testimonials 31 Koba Clinic
sankoumax-testimonials-31-koba-clinic
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — testimonials 31 Koba Clinic
- 概要: SANKOU100 sample setから展開したtestimonials向けfaq構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2451px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-31-koba-clinic"} /-->
CSS:
.section-sankoumax-testimonials-31-koba-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-31-koba-clinic').forEach((el) => el.dataset.ready = 'true');
45
SANKOU Max — testimonials 32 Ems Recruit
sankoumax-testimonials-32-ems-recruit
Detail
- パターン名: SANKOU Max — testimonials 32 Ems Recruit
- 概要: SANKOU100 sample setから展開したtestimonials向けgallery構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2652px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-32-ems-recruit"} /-->
CSS:
.section-sankoumax-testimonials-32-ems-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-32-ems-recruit').forEach((el) => el.dataset.ready = 'true');
46
SANKOU Max — testimonials 33 Felissimo Panda
sankoumax-testimonials-33-felissimo-panda
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — testimonials 33 Felissimo Panda
- 概要: SANKOU100 sample setから展開したtestimonials向けroster構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2653px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-33-felissimo-panda"} /-->
CSS:
.section-sankoumax-testimonials-33-felissimo-panda { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-33-felissimo-panda').forEach((el) => el.dataset.ready = 'true');
47
SANKOU Max — testimonials 34 Iriam Miraito
sankoumax-testimonials-34-iriam-miraito
1534
Iriam Miraito
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — testimonials 34 Iriam Miraito
- 概要: SANKOU100 sample setから展開したtestimonials向けmanifesto構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2434px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-34-iriam-miraito"} /-->
CSS:
.section-sankoumax-testimonials-34-iriam-miraito { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-34-iriam-miraito').forEach((el) => el.dataset.ready = 'true');
48
SANKOU Max — testimonials 35 Gaaboo
sankoumax-testimonials-35-gaaboo
Sampled Site
1535 / Gaaboo
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — testimonials 35 Gaaboo
- 概要: SANKOU100 sample setから展開したtestimonials向けcover構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 29% / 71%、推奨コンテンツ幅 5585px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-35-gaaboo"} /-->
CSS:
.section-sankoumax-testimonials-35-gaaboo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-35-gaaboo').forEach((el) => el.dataset.ready = 'true');
49
SANKOU Max — testimonials 36 Violet Patisserie
sankoumax-testimonials-36-violet-patisserie
Split Story
写真と要点で信頼を作る
Violet Patisserie の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — testimonials 36 Violet Patisserie
- 概要: SANKOU100 sample setから展開したtestimonials向けsplit構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 2576px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-36-violet-patisserie"} /-->
CSS:
.section-sankoumax-testimonials-36-violet-patisserie { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-36-violet-patisserie').forEach((el) => el.dataset.ready = 'true');
50
SANKOU Max — testimonials 37 Nii Recruit
sankoumax-testimonials-37-nii-recruit
Card Flow
迷わない比較カード
Nii Recruit から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — testimonials 37 Nii Recruit
- 概要: SANKOU100 sample setから展開したtestimonials向けcards構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2617px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-37-nii-recruit"} /-->
CSS:
.section-sankoumax-testimonials-37-nii-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-37-nii-recruit').forEach((el) => el.dataset.ready = 'true');
51
SANKOU Max — testimonials 38 Saranosono
sankoumax-testimonials-38-saranosono
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
1538
- パターン名: SANKOU Max — testimonials 38 Saranosono
- 概要: SANKOU100 sample setから展開したtestimonials向けcollage構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 32% / 1px / 36% / 34% / 1px、推奨コンテンツ幅 2658px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-38-saranosono"} /-->
CSS:
.section-sankoumax-testimonials-38-saranosono { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-38-saranosono').forEach((el) => el.dataset.ready = 'true');
52
SANKOU Max — testimonials 39 Dac Web
sankoumax-testimonials-39-dac-web
Dac
About
Works
Journal
Contact
- パターン名: SANKOU Max — testimonials 39 Dac Web
- 概要: SANKOU100 sample setから展開したtestimonials向けrail構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2719px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-39-dac-web"} /-->
CSS:
.section-sankoumax-testimonials-39-dac-web { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-39-dac-web').forEach((el) => el.dataset.ready = 'true');
53
SANKOU Max — testimonials 40 Asuzac Recruit
sankoumax-testimonials-40-asuzac-recruit
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — testimonials 40 Asuzac Recruit
- 概要: SANKOU100 sample setから展開したtestimonials向けeditorial構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 48% / 52% / 1px、推奨コンテンツ幅 2560px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-40-asuzac-recruit"} /-->
CSS:
.section-sankoumax-testimonials-40-asuzac-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-40-asuzac-recruit').forEach((el) => el.dataset.ready = 'true');
54
SANKOU Max — testimonials 41 Suntory Sic
sankoumax-testimonials-41-suntory-sic
Collection Selector
Suntory Sic の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — testimonials 41 Suntory Sic
- 概要: SANKOU100 sample setから展開したtestimonials向けproduct構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 2641px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-41-suntory-sic"} /-->
CSS:
.section-sankoumax-testimonials-41-suntory-sic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-41-suntory-sic').forEach((el) => el.dataset.ready = 'true');
55
SANKOU Max — testimonials 42 Amano Clinic
sankoumax-testimonials-42-amano-clinic
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — testimonials 42 Amano Clinic
- 概要: SANKOU100 sample setから展開したtestimonials向けtimeline構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2582px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-42-amano-clinic"} /-->
CSS:
.section-sankoumax-testimonials-42-amano-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-42-amano-clinic').forEach((el) => el.dataset.ready = 'true');
56
SANKOU Max — testimonials 43 Infocus
sankoumax-testimonials-43-infocus
数字で納得させる
23%
改善率
7分
短縮
10901
導入数
- パターン名: SANKOU Max — testimonials 43 Infocus
- 概要: SANKOU100 sample setから展開したtestimonials向けstats構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2503px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-43-infocus"} /-->
CSS:
.section-sankoumax-testimonials-43-infocus { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-43-infocus').forEach((el) => el.dataset.ready = 'true');
57
SANKOU Max — testimonials 44 Tomore
sankoumax-testimonials-44-tomore
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — testimonials 44 Tomore
- 概要: SANKOU100 sample setから展開したtestimonials向けcontact構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 58% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2624px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-44-tomore"} /-->
CSS:
.section-sankoumax-testimonials-44-tomore { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-44-tomore').forEach((el) => el.dataset.ready = 'true');
58
SANKOU Max — testimonials 45 Dan Brise Barber
sankoumax-testimonials-45-dan-brise-barber
Dan Brise Barber
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 1545
- パターン名: SANKOU Max — testimonials 45 Dan Brise Barber
- 概要: SANKOU100 sample setから展開したtestimonials向けfooter構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 2665px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-45-dan-brise-barber"} /-->
CSS:
.section-sankoumax-testimonials-45-dan-brise-barber { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-45-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');
59
SANKOU Max — testimonials 46 Allureville Elements
sankoumax-testimonials-46-allureville-elements
NEWS
Allureville Elements から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — testimonials 46 Allureville Elements
- 概要: SANKOU100 sample setから展開したtestimonials向けalert構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 2626px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-46-allureville-elements"} /-->
CSS:
.section-sankoumax-testimonials-46-allureville-elements { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-46-allureville-elements').forEach((el) => el.dataset.ready = 'true');
60
SANKOU Max — testimonials 47 Studio Cbr
sankoumax-testimonials-47-studio-cbr
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — testimonials 47 Studio Cbr
- 概要: SANKOU100 sample setから展開したtestimonials向けmap構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2587px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-47-studio-cbr"} /-->
CSS:
.section-sankoumax-testimonials-47-studio-cbr { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-47-studio-cbr').forEach((el) => el.dataset.ready = 'true');
61
SANKOU Max — testimonials 48 Yamakachi
sankoumax-testimonials-48-yamakachi
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — testimonials 48 Yamakachi
- 概要: SANKOU100 sample setから展開したtestimonials向けform構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 2608px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-48-yamakachi"} /-->
CSS:
.section-sankoumax-testimonials-48-yamakachi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-48-yamakachi').forEach((el) => el.dataset.ready = 'true');
62
SANKOU Max — testimonials 49 Chiikawa Pocket
sankoumax-testimonials-49-chiikawa-pocket
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — testimonials 49 Chiikawa Pocket
- 概要: SANKOU100 sample setから展開したtestimonials向けtabs構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2529px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-49-chiikawa-pocket"} /-->
CSS:
.section-sankoumax-testimonials-49-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-49-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');
63
SANKOU Max — testimonials 50 Chiba Dojo
sankoumax-testimonials-50-chiba-dojo
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — testimonials 50 Chiba Dojo
- 概要: SANKOU100 sample setから展開したtestimonials向けdashboard構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 2630px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-50-chiba-dojo"} /-->
CSS:
.section-sankoumax-testimonials-50-chiba-dojo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-50-chiba-dojo').forEach((el) => el.dataset.ready = 'true');
64
SANKOU Max — testimonials 51 Twoe
sankoumax-testimonials-51-twoe
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — testimonials 51 Twoe
- 概要: SANKOU100 sample setから展開したtestimonials向けfaq構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2471px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-51-twoe"} /-->
CSS:
.section-sankoumax-testimonials-51-twoe { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-51-twoe').forEach((el) => el.dataset.ready = 'true');
65
SANKOU Max — testimonials 52 Kamata Shoyu
sankoumax-testimonials-52-kamata-shoyu
Detail
- パターン名: SANKOU Max — testimonials 52 Kamata Shoyu
- 概要: SANKOU100 sample setから展開したtestimonials向けgallery構成。
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2672px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-testimonials-52-kamata-shoyu"} /-->
CSS:
.section-sankoumax-testimonials-52-kamata-shoyu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-testimonials-52-kamata-shoyu').forEach((el) => el.dataset.ready = 'true');
66
Testimonial — Single Hero Quote
testimonial-single-hero
★ ★ ★ ★ ★
“導入してから半年、チームの生産性が 2 倍になりました。もう元には戻れません。”
鈴木 健一
株式会社サンプル ・ CTO
- パターン名: Testimonial — Single Hero Quote
- 概要: Single centered customer quote with star rating and name/role.
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, paragraph, paragraph, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonial-single-hero"} /-->
CSS:
.section-testimonial-single-hero { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-testimonial-single-hero').forEach((el) => el.dataset.ready = 'true');
67
Testimonial — Video Card
testimonial-video-card
▶
“素晴らしい体験でした。チームがより強くなった実感があります。”
田中 さん ・ マーケティング部
- パターン名: Testimonial — Video Card
- 概要: Dark card with video thumbnail + customer quote below.
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 640px、主要ブロック group, group, group, paragraph, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonial-video-card"} /-->
CSS:
.section-testimonial-video-card { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-testimonial-video-card').forEach((el) => el.dataset.ready = 'true');
68
Testimonials — 3 Card Quotes
testimonials-3card
TESTIMONIALS
お客様の声
★★★★★
「導入から 1 ヶ月で生産性が 2 倍になりました。サポートも丁寧で安心できます。」
田中 美咲
プロダクトマネージャー / Acme Inc.
★★★★★
「直感的なインターフェースで、エンジニア以外のメンバーもすぐに使いこなせました。」
山田 健司
CTO / Beta Solutions
★★★★★
「コスト削減と品質向上を同時に実現できました。経営層への報告もしやすくなりました。」
佐藤 由香
マーケティング部長 / Gamma Corp.
- パターン名: Testimonials — 3 Card Quotes
- 概要: Three customer testimonials with stars, quote and avatar.
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 48px / 48px / 48px、推奨コンテンツ幅 1180px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-3card"} /-->
CSS:
.section-testimonials-3card { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-testimonials-3card').forEach((el) => el.dataset.ready = 'true');
69
Testimonials — 4 Card Grid
testimonials-grid-4
3,000+ 社が信頼
“圧倒的にサポートが手厚い。社内文化にもフィットしました。”
— 高橋 真理子, COO
“開発スピードが 3 倍に。コストパフォーマンスも素晴らしい。”
— 渡辺 大輔, リードエンジニア
“複雑だった業務がシンプルに。チーム全員が満足しています。”
— 中村 沙織, プロジェクトリーダー
“投資対効果が抜群。経営陣にも勧められる品質です。”
— 小林 翔, 取締役
- パターン名: Testimonials — 4 Card Grid
- 概要: Compact 4-column testimonial grid for social proof.
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1180px、主要ブロック group, heading, columns, column, group, paragraph, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをミニマルに見せる余白重視版 / Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-grid-4"} /-->
CSS:
.section-testimonials-grid-4 { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-testimonials-grid-4').forEach((el) => el.dataset.ready = 'true');
70
Testimonials — Large Quote
testimonials-large-quote
“
これまで使ったどのツールよりも、チームの会話が活性化しました。導入を決めて本当に良かったです。
鈴木 翔太
CEO / Delta Studio
- パターン名: Testimonials — Large Quote
- 概要: Single large testimonial quote on dark background with author info.
- 使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 56px、推奨コンテンツ幅 880px、主要ブロック group, paragraph, heading, group, image, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Testimonialsをリッチに見せるカバー/カード強調版 / Testimonialsをコーポレート向けに整える情報密度高め版 / Testimonialsをカジュアルに見せるアイコン/ラベル強調版 / Testimonialsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-large-quote"} /-->
CSS:
.section-testimonials-large-quote { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-testimonials-large-quote').forEach((el) => el.dataset.ready = 'true');
← Previous
Call to Action
コール トゥ アクション
Next →
Team
チーム
◈ Blanc Nail
Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。
Foundations
- ヒーロー
- ヘッダー
- フッター
- ナビゲーション
- タイポグラフィ
Content
- フィーチャー
- スタッツ
- コール トゥ アクション
- レビュー / 推薦
- チーム
Business
- 料金プラン
- 商品 / EC
- アクセス / 営業時間
- メニュー (飲食)
- コンタクト
UI Components
- カードレイアウト
- モーダル / アコーディオン
- タブ / セグメント
- バナー / アラート
- SNS
© 2026 Blanc Nail · Built with WordPress + Block Editor v1.0 · isValid=0