スタッツ · Statistics · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Content › Statistics

スタッツ

数字でインパクトを与える KPI ブロック。プログレス表示も含む。

15

Patterns

Content

Group

isValid=0

Verified

CSS

Animation

01

Stats — 4 Column Big Numbers

stats-4col

Copy
Link

10M+

アクティブユーザー

99.99%

稼働率

200+

グローバル拠点

24/7

サポート

  • パターン名: Stats — 4 Column Big Numbers
  • 概要: Four big gradient-text stats in clean columns.
  • 使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, paragraph, paragraph, column, paragraph, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-4col"} /-->

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

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

02

Stats — Gradient Banner

stats-banner-gradient

Copy
Link

$2.4B

取引総額

150K

企業導入

4.9★

顧客評価

  • パターン名: Stats — Gradient Banner
  • 概要: Three big stats on a deep purple-pink gradient banner.
  • 使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, heading, paragraph, column, heading, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-banner-gradient"} /-->

CSS:
.section-stats-banner-gradient { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-stats-banner-gradient').forEach((el) => el.dataset.ready = 'true');

03

Stats — Big Number Grid (Dark)

stats-big-number-grid

Copy
Link

10K+

利用者数

99.9%

稼働率

4.9★

ユーザー評価

24/7

サポート

  • パターン名: Stats — Big Number Grid (Dark)
  • 概要: Dark 4-column grid of large colored KPI numbers for hero use.
  • 使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, columns, column, paragraph, paragraph, column, paragraph, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-big-number-grid"} /-->

CSS:
.section-stats-big-number-grid { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-stats-big-number-grid').forEach((el) => el.dataset.ready = 'true');

04

Stats — Horizontal Progress Bars

stats-comparison-bars

Copy
Link

月次パフォーマンス

売上目標 ・ 85%

新規獲得 ・ 62%

顧客満足度 ・ 94%

  • パターン名: Stats — Horizontal Progress Bars
  • 概要: Three labeled horizontal progress bars showing KPI vs target.
  • 使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 640px、主要ブロック group, heading, group, group, paragraph, group, group, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-comparison-bars"} /-->

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

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

05

Stats — Cards with Icons

stats-with-icon

Copy
Link

📈

+340%

月間アクティブユーザー成長率（直近12ヶ月）

⏱️

24ms

平均レスポンスタイム（グローバル平均）

  • パターン名: Stats — Cards with Icons
  • 概要: Two stat cards with icons, big numbers and description.
  • 使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 960px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-with-icon"} /-->

CSS:
.section-stats-with-icon { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-stats-with-icon').forEach((el) => el.dataset.ready = 'true');

06

Stats — FX01 Count Up

fx-count

Copy
Link

累計 1280 杯を提供

  • パターン名: 数字カウントアップ — Stats — FX01 Count Up
  • 概要: スクロールで数値が0から本当に回って到達する
  • 適用シーン: 実績数・提供数・座席数
  • 使い方: 段落に fx-count。数値はコードエディタでb要素の–fxnと表示数字を揃えて編集
  • メリット: @property復活で真のカウントアップ
  • デメリット: 数値変更は2箇所を揃える
  • バリエーション案: サイズ
  • 実装時の注意点: 実数値のみ使用(架空数値は不可の運用)
使い方: 段落に fx-count。数値はコードエディタでb要素の--fxnと表示数字を揃えて編集
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

07

Stats — FX02 Star Fill

fx-star-fill

Copy
Link

★★★★★

  • パターン名: 星が満ちる — Stats — FX02 Star Fill
  • 概要: 評価の星がスクロールで満ちていく
  • 適用シーン: レビュー平均・満足度
  • 使い方: 要素に fx-star-fill
  • メリット: 評価の視覚化が1クラス
  • デメリット: –
  • バリエーション案: 星数
  • 実装時の注意点: 実評価に基づく表示を
使い方: 要素に fx-star-fill
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

08

Stats — FX03 Reading Bar

fx-progress

Copy
Link

ページ上端に読了バー

このカタログの上端にも表示中(fx-progress)。空のグループに付けるだけ。

  • パターン名: 読了バー — Stats — FX03 Reading Bar
  • 概要: ページ上端に読み進み度のバーが伸びる
  • 適用シーン: 長文記事・レシピ・規約
  • 使い方: ページ先頭に空グループ+fx-progress(1個で全ページ分)
  • メリット: 現在地の安心感
  • デメリット: 短いページには不要
  • バリエーション案: 色・太さ
  • 実装時の注意点: ページに1つだけ
使い方: ページ先頭に空グループ+fx-progress(1個で全ページ分)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

← Previous

Features

フィーチャー

←

Next →

Call to Action

コール トゥ アクション

→

◈ 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

06

Stats — EX01 Four Column Light

stats-ex01-4col-light

Copy
Link

28年

創業からの歩み

8,400件

累計対応実績

4.8

レビュー平均(5点満点)

96%

リピート率

  • パターン名: Stats — EX01 Four Column Light
  • 概要: Four key numbers on white with hairline separators feel.
  • 使用目的: Stats領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-ex01-4col-light"} /-->

CSS:
.section-stats-ex01-4col-light { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-stats-ex01-4col-light').forEach((el) => el.dataset.ready = 'true');

07

Stats — EX02 Gradient Band Three

stats-ex02-gradient-band

Copy
Link

120社

取引先

35万個

年間出荷数

0.02%

不良品率

  • パターン名: Stats — EX02 Gradient Band Three
  • 概要: Three numbers on a vivid gradient band.
  • 使用目的: Stats領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-ex02-gradient-band"} /-->

CSS:
.section-stats-ex02-gradient-band { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-stats-ex02-gradient-band').forEach((el) => el.dataset.ready = 'true');

08

Stats — EX03 One Big Number

stats-ex03-big-single

Copy
Link

ひとつの数字

10,000

創業から数えて、お直しした靴の数。
一足ずつ、持ち主の歩き方と向き合ってきました。

  • パターン名: Stats — EX03 One Big Number
  • 概要: A single oversized statistic with supporting sentence.
  • 使用目的: Stats領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-ex03-big-single"} /-->

CSS:
.section-stats-ex03-big-single { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-stats-ex03-big-single').forEach((el) => el.dataset.ready = 'true');

09

Stats — EX04 Icon Stat Cards

stats-ex04-icon-cards

Copy
Link

⏱️

最短 30 分

お問い合わせから駆けつけまで(市内)

🧰

365 日対応

年末年始も受付しています

🛡️

保証 1 年

施工後の不具合は無償で対応

  • パターン名: Stats — EX04 Icon Stat Cards
  • 概要: Three stat cards with emoji icons and notes.
  • 使用目的: Stats領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-ex04-icon-cards"} /-->

CSS:
.section-stats-ex04-icon-cards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-stats-ex04-icon-cards').forEach((el) => el.dataset.ready = 'true');

10

Stats — EX05 Dark Inline Row

stats-ex05-dark-inline

Copy
Link

受賞歴 7 件

|

掲載メディア 23 媒体

|

会員数 18,000 人

  • パターン名: Stats — EX05 Dark Inline Row
  • 概要: Compact dark strip with three inline stats and a divider feel.
  • 使用目的: Stats領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-ex05-dark-inline"} /-->

CSS:
.section-stats-ex05-dark-inline { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-stats-ex05-dark-inline').forEach((el) => el.dataset.ready = 'true');

11

Stats — EX06 Before After Numbers

stats-ex06-before-after

Copy
Link

導入後 6 ヶ月の変化

BEFORE

月 42 時間

→

AFTER

月 9 時間

事務作業にかかる時間(当社調べ ・ 導入 12 社平均)

  • パターン名: Stats — EX06 Before After Numbers
  • 概要: Improvement shown as before and after numbers with an arrow.
  • 使用目的: Stats領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-ex06-before-after"} /-->

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

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

12

Stats — EX07 Milestone Years

stats-ex07-milestones

Copy
Link

1998

商店街の一角で創業

2012

現在の本店へ移転 ・ 工房併設

2024

オンラインストア開設

  • パターン名: Stats — EX07 Milestone Years
  • 概要: Three milestone years with short captions in a row.
  • 使用目的: Stats領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-ex07-milestones"} /-->

CSS:
.section-stats-ex07-milestones { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-stats-ex07-milestones').forEach((el) => el.dataset.ready = 'true');

13

Stats — EX08 Percent Grid

stats-ex08-percent-grid

Copy
Link

ご利用アンケートより

92%

「友人にすすめたい」

88%

「説明が分かりやすい」

79%

「価格に納得感がある」

95%

「また利用したい」

2025年12月実施 ・ 回答 412 件

  • パターン名: Stats — EX08 Percent Grid
  • 概要: Customer-survey percentages in a two-by-two colored grid.
  • 使用目的: Stats領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-ex08-percent-grid"} /-->

CSS:
.section-stats-ex08-percent-grid { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-stats-ex08-percent-grid').forEach((el) => el.dataset.ready = 'true');

14

Stats — EX09 Trust Badge Row

stats-ex09-trust-badges

Copy
Link

🌱 国産材 100%

🏅 品評会受賞 7 回

🚚 全国 2,300 店へ出荷

♻️ 端材再利用率 98%

  • パターン名: Stats — EX09 Trust Badge Row
  • 概要: Reassurance badges with small numbers in pill chips.
  • 使用目的: Stats領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-ex09-trust-badges"} /-->

CSS:
.section-stats-ex09-trust-badges { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-stats-ex09-trust-badges').forEach((el) => el.dataset.ready = 'true');

15

Stats — EX10 Compact Two Stat Strip

stats-ex10-compact-strip

Copy
Link

数字は、信頼のいちばん静かな証明です。

継続率 97%

年間契約のお客さま

紹介率 41%

新規のご相談経路

  • パターン名: Stats — EX10 Compact Two Stat Strip
  • 概要: Slim strip pairing one statement with two supporting numbers.
  • 使用目的: Stats領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/stats-ex10-compact-strip"} /-->

CSS:
.section-stats-ex10-compact-strip { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-stats-ex10-compact-strip').forEach((el) => el.dataset.ready = 'true');