ダッシュボード · Dashboard · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Data & Flow › Dashboard

ダッシュボード

管理画面風のメトリクス、ウィジェット、KPI 集約。

4

Patterns

Data & Flow

Group

isValid=0

Verified

CSS

Animation

01

Dashboard — Recent Activity Feed

dashboard-activity-feed

Copy
Link

最近のアクティビティ

山田 太郎 さんがプロジェクトを作成

2 分前

佐藤 花子 さんがコメントを追加

15 分前

田中 健 さんがファイルをアップロード

1 時間前

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

CSS:
.section-dashboard-activity-feed { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-dashboard-activity-feed').forEach((el) => el.dataset.ready = 'true');

02

Dashboard — 4 KPI Tiles

dashboard-kpi-4col

Copy
Link

ダッシュボード

2026.04.27 ・ 最終更新 12 分前

月次売上

¥4.82M

▲ +12.4%

アクティブユーザー

12,847

▲ +5.8%

解約率

2.1%

▼ −0.4%

NPS

+62

▲ +8 pts

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

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

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

03

Dashboard — 4 KPI Tile Row

dashboard-kpi-row

Copy
Link

ACTIVE

2,847

PENDING

184

COMPLETED

12,401

ERRORS

23

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

CSS:
.section-dashboard-kpi-row { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-dashboard-kpi-row').forEach((el) => el.dataset.ready = 'true');

04

Dashboard — Settings Panel with Toggles

dashboard-settings-panel

Copy
Link

通知設定

どの通知を受け取るかをカスタマイズできます

メール通知

重要なアクティビティをメールで受け取る

プッシュ通知

ブラウザ通知でリアルタイムに受け取る

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

CSS:
.section-dashboard-settings-panel { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-dashboard-settings-panel').forEach((el) => el.dataset.ready = 'true');