テーブル / データ · Table / Data · Blanc Nail
検索…
カタログ 統計
CATALOG › Data & Flow › Table / Data
テーブル / データ
情報テーブル、価格表、スペックシート。整列の型。
5
Patterns
Data & Flow
Group
isValid=0
Verified
CSS
Animation
01
Table — Pricing Sheet
table-data-pricing
料金表
サービス内容
料金 (税込)
初回コンサルティング (60 分)
¥0 無料
スタンダードプラン (月額)
¥48,000 / 月〜
プロフェッショナルプラン (月額)
¥120,000 / 月〜
エンタープライズ ・ カスタム開発
お見積り
- パターン名: Table — Pricing Sheet
- 概要: Bordered pricing table with dark header row and right-aligned amounts.
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 880px、主要ブロック group, heading, group, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/table-data-pricing"} /-->
CSS:
.section-table-data-pricing { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-table-data-pricing').forEach((el) => el.dataset.ready = 'true');
02
Table — Content Ops Schedule
table-data-schedule-matrix
CONTENT OPS
更新運用スケジュール
月・水・金
コンテンツ更新
火曜日
広告レポート確認
木曜日
改善タスク棚卸し
第 1 金曜日
月次レビュー
毎日 09:00
問い合わせ一次確認
- パターン名: Table — Content Ops Schedule
- 概要: Striped schedule matrix for recurring website operation tasks.
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 760px、主要ブロック group, paragraph, heading, group, group, paragraph, paragraph, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/table-data-schedule-matrix"} /-->
CSS:
.section-table-data-schedule-matrix { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-table-data-schedule-matrix').forEach((el) => el.dataset.ready = 'true');
03
Table — Definition Rows (会社概要)
table-data-simple
会社概要
商号
株式会社 SAKURA STUDIO
設立
2018 年 4 月
代表取締役
山田 美咲
資本金
1 億円
所在地
東京都渋谷区神宮前 4-X-X
- パターン名: Table — Definition Rows (会社概要)
- 概要: Two-column definition list with bottom borders, ideal for company-info tables.
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px / 1px、推奨コンテンツ幅 880px、主要ブロック group, heading, group, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/table-data-simple"} /-->
CSS:
.section-table-data-simple { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-table-data-simple').forEach((el) => el.dataset.ready = 'true');
04
Table — Striped Spec Sheet
table-data-specs
商品スペック
サイズ
W 320 × H 240 × D 110 mm
重量
680 g
素材
本革 ・ 真鍮金具
原産国
日本
保証
1 年間 (修理対応無料)
- パターン名: Table — Striped Spec Sheet
- 概要: Striped two-column spec table inside a card, suited for product specs.
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 720px、主要ブロック group, group, heading, group, group, paragraph, paragraph, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/table-data-specs"} /-->
CSS:
.section-table-data-specs { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-table-data-specs').forEach((el) => el.dataset.ready = 'true');
05
Table — Operations Status Rows
table-data-status-rows
OPERATIONS
運用ステータス一覧
公開サイト
正常
フォーム通知
確認中
計測タグ
正常
バックアップ
本日 03:00
- パターン名: Table — Operations Status Rows
- 概要: Compact status table for site operations, forms, analytics and backups.
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 760px、主要ブロック group, paragraph, heading, group, group, paragraph, paragraph, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/table-data-status-rows"} /-->
CSS:
.section-table-data-status-rows { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-table-data-status-rows').forEach((el) => el.dataset.ready = 'true');
← Previous
Comparison
比較
Next →
Timeline / Step
タイムライン
◈ 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