検索…

カタログ統計

CATALOG › Content › Testimonials

レビュー / 推薦

顧客の声、推薦文、評価。信頼を可視化する構成。

Patterns

Content

Group

isValid=0

Verified

CSS

Animation

Testimonial — Single Hero Quote

testimonial-single-hero

Copy

Link

★ ★ ★ ★ ★

“導入してから半年、チームの生産性が 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');

Testimonial — Video Card

testimonial-video-card

Copy

Link

▶

“素晴らしい体験でした。チームがより強くなった実感があります。”

田中さん・マーケティング部

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

Testimonials — 3 Card Quotes

testimonials-3card

Copy

Link

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

Testimonials — 4 Card Grid

testimonials-grid-4

Copy

Link

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

Testimonials — Large Quote

testimonials-large-quote

Copy

Link

“

これまで使ったどのツールよりも、チームの会話が活性化しました。導入を決めて本当に良かったです。

鈴木翔太

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

◈ Blanc Nail

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

Foundations

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

Content

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

Business

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

UI Components

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

Testimonials — EX01 Stars Three Cards

testimonials-ex01-stars-3card

Copy

Link

お客様の声

★★★★★

「説明がとても丁寧で、初めてでも安心してお任せできました。仕上がりも想像以上です。」

40代・女性

★★★★★

「友人の紹介で利用しました。価格以上の価値があると思います。次回もお願いする予定です。」

30代・男性

★★★★☆

「予約が取りづらいのが玉にきずですが、それも人気の証拠。通い続けたいお店です。」

50代・女性

パターン名: Testimonials — EX01 Stars Three Cards
概要: Three review cards with star ratings and attributions.
使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-ex01-stars-3card"} /-->

CSS:
.section-testimonials-ex01-stars-3card { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-testimonials-ex01-stars-3card').forEach((el) => el.dataset.ready = 'true');

Testimonials — EX02 Big Single Quote

testimonials-ex02-big-quote

Copy

Link

“

ここに来ると、背筋が伸びる。
そんな場所に出会えたことが、いちばんの収穫でした。

受講歴 2 年・会社員

パターン名: Testimonials — EX02 Big Single Quote
概要: One large centered quote with avatar attribution.
使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-ex02-big-quote"} /-->

CSS:
.section-testimonials-ex02-big-quote { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-testimonials-ex02-big-quote').forEach((el) => el.dataset.ready = 'true');

Testimonials — EX03 Case with Stat

testimonials-ex03-case-stat

Copy

Link

導入事例 — 小売業さま

「相談から伴走まで、ここまでやってくれるとは思いませんでした。」

店舗運営ご担当者さま・ご利用 1 年

+42%

ご利用後の問い合わせ数

パターン名: Testimonials — EX03 Case with Stat
概要: Customer case: quote left, outcome stat right.
使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-ex03-case-stat"} /-->

CSS:
.section-testimonials-ex03-case-stat { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-testimonials-ex03-case-stat').forEach((el) => el.dataset.ready = 'true');

Testimonials — EX04 Compact 2×2

testimonials-ex04-2×2

Copy

Link

利用者の声

「毎回楽しみに通っています。雰囲気がとにかく良い。」

20代・学生

「子ども連れでも気兼ねなく過ごせるのがありがたいです。」

30代・主婦

「技術が確かなので、人にすすめやすい。家族で利用しています。」

50代・会社員

「アフターフォローまで丁寧。長く付き合いたいお店です。」

60代・自営業

パターン名: Testimonials — EX04 Compact 2×2
概要: Four short reviews in a two-by-two grid.
使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-ex04-2x2"} /-->

CSS:
.section-testimonials-ex04-2x2 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-testimonials-ex04-2x2').forEach((el) => el.dataset.ready = 'true');

Testimonials — EX05 Quote Band Gradient

testimonials-ex05-quote-band

Copy

Link

「野菜の味が違う、と家族が言いました。
それがいちばん嬉しかった。」

定期便ご利用・ 2 年目のお客さま

パターン名: Testimonials — EX05 Quote Band Gradient
概要: Full-width gradient band carrying one strong customer quote.
使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-ex05-quote-band"} /-->

CSS:
.section-testimonials-ex05-quote-band { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-testimonials-ex05-quote-band').forEach((el) => el.dataset.ready = 'true');

Testimonials — EX06 Avatar Trust Row

testimonials-ex06-avatars-row

Copy

Link

満足度 98% ・ご紹介での来店が 4 割

2025 年ご利用アンケートより（回答 312 件）

パターン名: Testimonials — EX06 Avatar Trust Row
概要: Avatar cluster with satisfaction stat and short caption.
使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-ex06-avatars-row"} /-->

CSS:
.section-testimonials-ex06-avatars-row { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-testimonials-ex06-avatars-row').forEach((el) => el.dataset.ready = 'true');

Testimonials — EX07 Before After Voices

testimonials-ex07-before-after

Copy

Link

通う前と、いま。

BEFORE

「運動は三日坊主。何から始めればいいか分からず、体力の衰えだけを感じていました。」

AFTER — 6ヶ月

「週 2 回が習慣になり、階段が苦になりません。数字より、気持ちが前向きになったのが大きいです。」

50代女性・週2回コース。効果には個人差があります。

パターン名: Testimonials — EX07 Before After Voices
概要: Two-column before and after customer feelings.
使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-ex07-before-after"} /-->

CSS:
.section-testimonials-ex07-before-after { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-testimonials-ex07-before-after').forEach((el) => el.dataset.ready = 'true');

Testimonials — EX08 SNS Style Cards

testimonials-ex08-sns-cards

Copy

Link

みんなの投稿

ずっと気になってたお店、ついに行けた。期待を超えてきた…また行く 🙌

@sample_user01

スタッフさんの距離感がちょうどよくて居心地最高。雨の日に行くのもおすすめ ☔

@sample_user02

手土産にしたらすごく喜ばれた。包装まで素敵なので贈り物に推せます 🎁

@sample_user03

パターン名: Testimonials — EX08 SNS Style Cards
概要: Three short SNS-style posts with handles.
使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-ex08-sns-cards"} /-->

CSS:
.section-testimonials-ex08-sns-cards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-testimonials-ex08-sns-cards').forEach((el) => el.dataset.ready = 'true');

Testimonials — EX09 Zen Single Voice

testimonials-ex09-zen-single

Copy

Link

お客さまからの手紙

母の形見の石を、仕立て直していただきました。
箱を開けた瞬間、涙が出ました。
母がそばに戻ってきたようで。
大切に、毎日身につけています。

— お仕立て直しのお客さまより

パターン名: Testimonials — EX09 Zen Single Voice
概要: Quiet single testimonial with vertical rhythm for Japanese craft brands.
使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-ex09-zen-single"} /-->

CSS:
.section-testimonials-ex09-zen-single { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-testimonials-ex09-zen-single').forEach((el) => el.dataset.ready = 'true');

Testimonials — EX10 Photo Voice Split

testimonials-ex10-photo-voice

Copy

Link

INTERVIEW — お客さまの声

「半信半疑で始めた習いごとが、
いまでは生活の真ん中にあります。」

最初は月 1 回のつもりが、気づけば週 1 回に。続けられた理由は、毎回の小さな達成感と、先生の声かけだと思います。発表会という目標ができてからは、日々の練習も楽しくなりました。

受講 3 年目・会社員（30代）

パターン名: Testimonials — EX10 Photo Voice Split
概要: Customer photo beside an in-depth voice with highlights.
使用目的: Testimonials領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/testimonials-ex10-photo-voice"} /-->

CSS:
.section-testimonials-ex10-photo-voice { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-testimonials-ex10-photo-voice').forEach((el) => el.dataset.ready = 'true');

レビュー / 推薦 · Testimonials · Blanc Nail

レビュー / 推薦

お客様の声

3,000+ 社が信頼

これまで使ったどのツールよりも、チームの会話が活性化しました。導入を決めて本当に良かったです。

お客様の声

ここに来ると、背筋が伸びる。そんな場所に出会えたことが、いちばんの収穫でした。

「相談から伴走まで、ここまでやってくれるとは思いませんでした。」

利用者の声

「野菜の味が違う、と家族が言いました。それがいちばん嬉しかった。」

通う前と、いま。

みんなの投稿

「半信半疑で始めた習いごとが、いまでは生活の真ん中にあります。」

ここに来ると、背筋が伸びる。
そんな場所に出会えたことが、いちばんの収穫でした。

「野菜の味が違う、と家族が言いました。
それがいちばん嬉しかった。」

「半信半疑で始めた習いごとが、
いまでは生活の真ん中にあります。」