検索…

カタログ統計

CATALOG › Data & Flow › Comparison

比較

プラン比較、競合との対比、ビフォア/アフターの可視化。

Patterns

Data & Flow

Group

isValid=0

Verified

CSS

Animation

Comparison — Decision Scorecards

comparison-decision-scorecards

Copy

Link

DECISION SUPPORT

導入前後の判断スコア

Speed

Before

手作業 6h

After

自動化 15m

Cost

Before

月 18 万円

After

月 6 万円

Risk

Before

属人化高

After

標準化済

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-decision-scorecards"} /-->

CSS:
.section-comparison-decision-scorecards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-decision-scorecards').forEach((el) => el.dataset.ready = 'true');

Comparison — Plan Feature Matrix

comparison-feature-matrix

Copy

Link

プラン比較

機能

FREE

PRO

プロジェクト数

3 件まで

無制限

チームメンバー

2 人まで

無制限

優先サポート

—

✓

SSO ログイン

—

✓

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-feature-matrix"} /-->

CSS:
.section-comparison-feature-matrix { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-feature-matrix').forEach((el) => el.dataset.ready = 'true');

Comparison — Pros / Cons List

comparison-pros-cons

Copy

Link

メリット・デメリット

○ Pros

✓ 初期費用なしで始められる

✓ 既存システムとそのまま連携

✓ 国内サポートが日本語対応

✓ 1 アカウントで複数拠点

△ Cons

△ オフライン環境では使えない

△ レガシー Excel 形式は非対応

△ 月次更新でやや重い処理あり

△ カスタム開発はオプション

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-pros-cons"} /-->

CSS:
.section-comparison-pros-cons { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-pros-cons').forEach((el) => el.dataset.ready = 'true');

Comparison — Site Type Checklist

comparison-selection-checklist

Copy

Link

SITE TYPE

構築方針の選び方

小規模サイト向け

✓ 更新頻度が低い

✓ ページ数が 10 以下

✓ 問い合わせ導線が中心

成長サイト向け

✓ CMS 運用者が複数いる

✓ 記事や商品が増え続ける

✓ 計測・改善サイクルが必要

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-selection-checklist"} /-->

CSS:
.section-comparison-selection-checklist { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-selection-checklist').forEach((el) => el.dataset.ready = 'true');

Comparison — Before / After 2-Column

comparison-vs-2col

Copy

Link

これまで vs これから

BEFORE

手作業中心の運用

✕ 集計に毎週 6 時間以上

✕ 部署ごとにバラバラの数字

✕ 意思決定が後手に回る

AFTER

自動連携で意思決定が即時に

✓ 集計はリアルタイム

✓ 全社で同じダッシュボード

✓ 異常検知が自動アラート

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

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

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

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

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

Comparison — EX01 Two Plan Columns

comparison-ex01-two-plans

Copy

Link

プラン比較

スポット利用

✓ 必要なときだけ依頼
✓ 契約期間の縛りなし
− 都度見積りが必要
− 優先対応の対象外

顧問契約(おすすめ)

✓ 月額定額で相談し放題
✓ 24 時間以内の優先対応
✓ 定期レポートつき
✓ 割引価格で追加依頼

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-ex01-two-plans"} /-->

CSS:
.section-comparison-ex01-two-plans { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-ex01-two-plans').forEach((el) => el.dataset.ready = 'true');

Comparison — EX02 Old Way New Way

comparison-ex02-old-new

Copy

Link

いつものやり方と、くらべてみる

これまで

毎週末にまとめて家事
気づけば食材を廃棄
献立を考えるのが苦痛

このサービスなら

平日 30 分の下ごしらえだけ
使い切りレシピで廃棄ゼロへ
献立は毎週おまかせ

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-ex02-old-new"} /-->

CSS:
.section-comparison-ex02-old-new { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-ex02-old-new').forEach((el) => el.dataset.ready = 'true');

Comparison — EX03 Three Grade Columns

comparison-ex03-3col-grades

Copy

Link

グレード比較

スタンダード材

耐久年数〜10 年
保証 2 年
カラー 4 色

ハイグレード材 ★

耐久年数〜25 年
保証 10 年
カラー 12 色

プレミアム材

耐久年数〜40 年
保証 15 年
無垢材・受注生産

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-ex03-3col-grades"} /-->

CSS:
.section-comparison-ex03-3col-grades { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-ex03-3col-grades').forEach((el) => el.dataset.ready = 'true');

Comparison — EX04 Pros and Cons

comparison-ex04-pros-cons

Copy

Link

正直にお伝えします

向いている方

✓ 長く使う前提で選びたい
✓ 手入れの時間を楽しめる
✓ 経年変化が好き

向いていないかもしれない方

− とにかく安く揃えたい
− 手入れはしたくない
− すぐに買い替える予定

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-ex04-pros-cons"} /-->

CSS:
.section-comparison-ex04-pros-cons { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-ex04-pros-cons').forEach((el) => el.dataset.ready = 'true');

Comparison — EX05 Feature Matrix Rows

comparison-ex05-matrix-rows

Copy

Link

項目

ライト

プロ

月内の対応回数

2 回

無制限

休日・夜間の駆けつけ

—

✓

月額(税込)

¥9,900

¥24,200

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-ex05-matrix-rows"} /-->

CSS:
.section-comparison-ex05-matrix-rows { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-ex05-matrix-rows').forEach((el) => el.dataset.ready = 'true');

Comparison — EX06 Before After Split

comparison-ex06-before-after-photo

Copy

Link

BEFORE — 施工前

AFTER — 施工後

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-ex06-before-after-photo"} /-->

CSS:
.section-comparison-ex06-before-after-photo { max-width: 1200px; margin-inline: auto; }

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

Comparison — EX07 Value Bars

comparison-ex07-value-bars

Copy

Link

満足度の内訳

仕上がり・ 4.9

— 98% —

説明の分かりやすさ・ 4.7

価格の納得感・ 4.4

2025年度ご利用後アンケート(回答 326 件・ 5 点満点)

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-ex07-value-bars"} /-->

CSS:
.section-comparison-ex07-value-bars { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-ex07-value-bars').forEach((el) => el.dataset.ready = 'true');

Comparison — EX08 Neutral A B C

comparison-ex08-abc-neutral

Copy

Link

どのタイプが合っていますか?

それぞれ得意分野が違います。迷ったらご相談ください。

TYPE A

水性タイプ

におい控えめで室内向き。乾きが早く扱いやすい。

TYPE B

油性タイプ

耐久性と艶が魅力。屋外や水回りに強い。

TYPE C

自然塗料タイプ

木の質感を生かす仕上がり。小さなお子さまのいる家庭に。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-ex08-abc-neutral"} /-->

CSS:
.section-comparison-ex08-abc-neutral { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-ex08-abc-neutral').forEach((el) => el.dataset.ready = 'true');

Comparison — EX09 Two Ways Zen

comparison-ex09-zen-two-ways

Copy

Link

ふたつの仕立て

並仕立て

日常使いの定番。
納期約 2 週間・ ¥22,000 から。

誂え仕立て

寸法も素材もあなた仕様に。
納期約 6 週間・ ¥58,000 から。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-ex09-zen-two-ways"} /-->

CSS:
.section-comparison-ex09-zen-two-ways { max-width: 1200px; margin-inline: auto; }

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

Comparison — EX10 Summary Verdict Band

comparison-ex10-verdict

Copy

Link

まとめ — 選び方の目安

迷ったらスタンダード。週 3 回以上使うならプロ仕様。
頻度が読めない方は、まず単発でお試しください。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-ex10-verdict"} /-->

CSS:
.section-comparison-ex10-verdict { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-ex10-verdict').forEach((el) => el.dataset.ready = 'true');

比較 · Comparison · Blanc Nail

比較

導入前後の判断スコア

プラン比較

メリット ・ デメリット

○ Pros

△ Cons

構築方針の選び方

小規模サイト向け

成長サイト向け

これまで vs これから

手作業中心の運用

自動連携で意思決定が即時に

プラン比較

スポット利用

顧問契約(おすすめ)

いつものやり方と、くらべてみる

グレード比較

スタンダード材

ハイグレード材 ★

プレミアム材

正直にお伝えします

満足度の内訳

どのタイプが合っていますか?

水性タイプ

油性タイプ

自然塗料タイプ

ふたつの仕立て

並仕立て

誂え仕立て

まとめ — 選び方の目安

メリット・デメリット