進捗 / ステータス · Progress / Status · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Utility › Progress / Status

進捗 / ステータス

プログレスバー、ステップ進捗、状態バッジ表示。

4

Patterns

Utility

Group

isValid=0

Verified

CSS

Animation

01

Progress — 3 Circular Gauges

progress-circle-set

Copy
Link

85%

完了率

62%

月間目標

92%

ストレージ使用

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

CSS:
.section-progress-circle-set { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-progress-circle-set').forEach((el) => el.dataset.ready = 'true');

02

Progress — 3 KPI Metric Cards

progress-metric-cards

Copy
Link

今月の売上

¥1.24M

▲ 12.4% 先月比

新規ユーザー

847

▲ 8.1% 先週比

転換率

3.8%

▼ 0.3% 先月比

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

CSS:
.section-progress-metric-cards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-progress-metric-cards').forEach((el) => el.dataset.ready = 'true');

03

Progress — Three Status Bars

progress-status-bars

Copy
Link

進捗 ・ ステータス

プロフィール完成度

85%

月間目標 ・ 売上

62%

ストレージ使用量

92%

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

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

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

04

Progress — 6 Status Badge Pills

progress-status-pills

Copy
Link

ステータス バッジ

● 公開中

● 審査中

● 下書き

● エラー

● 処理中

● プレミアム

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

CSS:
.section-progress-status-pills { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-progress-status-pills').forEach((el) => el.dataset.ready = 'true');