検索…
カタログ 統計
CATALOG › Data & Flow › Table / Data
テーブル / データ
情報テーブル、価格表、スペックシート。整列の型。
70
Patterns
Data & Flow
Group
isValid=0
Verified
CSS
Animation
01
Reference Complete — table-data 01 Sticky Entry
reference-complete-table-data-01-sticky-entry-yamakachi
Sampled Site
16801 / Yamakachi
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: Reference Complete — table-data 01 Sticky Entry
- 概要: 参照サンプル再確認から追加したtable-data向け部品。固定導線つきの大判ファーストビュー。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 31% / 69%、推奨コンテンツ幅 51383px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-table-data-01-sticky-entry-yamakachi"} /-->
CSS:
.section-reference-complete-table-data-01-sticky-entry-yamakachi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-table-data-01-sticky-entry-yamakachi').forEach((el) => el.dataset.ready = 'true');
02
Reference Complete — table-data 02 Editorial Issue
reference-complete-table-data-02-editorial-issue-chiba-dojo
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: Reference Complete — table-data 02 Editorial Issue
- 概要: 参照サンプル再確認から追加したtable-data向け部品。雑誌的な見出しと導入文の編集レイアウト。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 17822px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-table-data-02-editorial-issue-chiba-dojo"} /-->
CSS:
.section-reference-complete-table-data-02-editorial-issue-chiba-dojo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-table-data-02-editorial-issue-chiba-dojo').forEach((el) => el.dataset.ready = 'true');
03
Reference Complete — table-data 03 Brand Index
reference-complete-table-data-03-brand-index-kamata-shoyu
Card Flow
迷わない比較カード
Kamata Shoyu から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: Reference Complete — table-data 03 Brand Index
- 概要: 参照サンプル再確認から追加したtable-data向け部品。複数ブランドやサービスを迷わせず並べる索引。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 17883px、主要ブロック group, paragraph, heading, paragraph, columns, column, 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/reference-complete-table-data-03-brand-index-kamata-shoyu"} /-->
CSS:
.section-reference-complete-table-data-03-brand-index-kamata-shoyu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-table-data-03-brand-index-kamata-shoyu').forEach((el) => el.dataset.ready = 'true');
04
Reference Complete — table-data 04 Recruit Story
reference-complete-table-data-04-recruit-story-nothing-tech
Split Story
写真と要点で信頼を作る
Nothing Tech の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: Reference Complete — table-data 04 Recruit Story
- 概要: 参照サンプル再確認から追加したtable-data向け部品。採用・企業紹介に使える人物/思想の分割構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 17844px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-table-data-04-recruit-story-nothing-tech"} /-->
CSS:
.section-reference-complete-table-data-04-recruit-story-nothing-tech { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-table-data-04-recruit-story-nothing-tech').forEach((el) => el.dataset.ready = 'true');
05
Reference Complete — table-data 05 Commerce Compare
reference-complete-table-data-05-commerce-compare-chugaitoen
Collection Selector
Chugaitoen の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: Reference Complete — table-data 05 Commerce Compare
- 概要: 参照サンプル再確認から追加したtable-data向け部品。料金・商品・プランを比較しやすい構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 17905px、主要ブロック group, group, heading, paragraph, columns, column, 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/reference-complete-table-data-05-commerce-compare-chugaitoen"} /-->
CSS:
.section-reference-complete-table-data-05-commerce-compare-chugaitoen { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-table-data-05-commerce-compare-chugaitoen').forEach((el) => el.dataset.ready = 'true');
06
Reference Complete — table-data 06 Timeline Proof
reference-complete-table-data-06-timeline-proof-iriam-miraito
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: Reference Complete — table-data 06 Timeline Proof
- 概要: 参照サンプル再確認から追加したtable-data向け部品。沿革・導入手順・制作工程の時系列。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 17846px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-table-data-06-timeline-proof-iriam-miraito"} /-->
CSS:
.section-reference-complete-table-data-06-timeline-proof-iriam-miraito { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-table-data-06-timeline-proof-iriam-miraito').forEach((el) => el.dataset.ready = 'true');
07
Reference Complete — table-data 07 Gallery Led
reference-complete-table-data-07-gallery-led-saranosono
Detail
- パターン名: Reference Complete — table-data 07 Gallery Led
- 概要: 参照サンプル再確認から追加したtable-data向け部品。写真量の多い商材を見せるギャラリー導線。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 17927px、主要ブロック group, columns, column, image, column, image, 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/reference-complete-table-data-07-gallery-led-saranosono"} /-->
CSS:
.section-reference-complete-table-data-07-gallery-led-saranosono { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-table-data-07-gallery-led-saranosono').forEach((el) => el.dataset.ready = 'true');
08
Reference Complete — table-data 08 Dashboard Proof
reference-complete-table-data-08-dashboard-proof-junni-newyear
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: Reference Complete — table-data 08 Dashboard Proof
- 概要: 参照サンプル再確認から追加したtable-data向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 17888px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-table-data-08-dashboard-proof-junni-newyear"} /-->
CSS:
.section-reference-complete-table-data-08-dashboard-proof-junni-newyear { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-table-data-08-dashboard-proof-junni-newyear').forEach((el) => el.dataset.ready = 'true');
09
Reference Complete — table-data 09 Contact Ready
reference-complete-table-data-09-contact-ready-favtown
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: Reference Complete — table-data 09 Contact Ready
- 概要: 参照サンプル再確認から追加したtable-data向け部品。問い合わせ前の入力項目を整理する導線。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 17869px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-table-data-09-contact-ready-favtown"} /-->
CSS:
.section-reference-complete-table-data-09-contact-ready-favtown { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-table-data-09-contact-ready-favtown').forEach((el) => el.dataset.ready = 'true');
10
Reference Complete — table-data 10 Mobile Rail
reference-complete-table-data-10-mobile-rail-tsuchitokaze
Tsuchitokaze
About
Works
Journal
Contact
- パターン名: Reference Complete — table-data 10 Mobile Rail
- 概要: 参照サンプル再確認から追加したtable-data向け部品。スマホ閲覧で要点を縦に追えるレール型。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 17990px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-table-data-10-mobile-rail-tsuchitokaze"} /-->
CSS:
.section-reference-complete-table-data-10-mobile-rail-tsuchitokaze { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-table-data-10-mobile-rail-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');
11
SANKOU100 — 026 Tsuchitokaze
sankou100-026-tsuchitokaze
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU100 — 026 Tsuchitokaze
- 概要: SANKOU! sample 026から抽出したeditorial型の商用サイト向け構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 1046px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-026-tsuchitokaze"} /-->
CSS:
.section-sankou100-026-tsuchitokaze { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-026-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');
12
SANKOU100 — 066 Asuzac Recruit
sankou100-066-asuzac-recruit
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU100 — 066 Asuzac Recruit
- 概要: SANKOU! sample 066から抽出したeditorial型の商用サイト向け構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 1086px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-066-asuzac-recruit"} /-->
CSS:
.section-sankou100-066-asuzac-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-066-asuzac-recruit').forEach((el) => el.dataset.ready = 'true');
13
SANKOU Max — table-data 01 Fujiya1935
sankoumax-table-data-01-fujiya1935
Split Story
写真と要点で信頼を作る
Fujiya1935 の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — table-data 01 Fujiya1935
- 概要: SANKOU100 sample setから展開したtable-data向けsplit構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 4841px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-01-fujiya1935"} /-->
CSS:
.section-sankoumax-table-data-01-fujiya1935 { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-01-fujiya1935').forEach((el) => el.dataset.ready = 'true');
14
SANKOU Max — table-data 02 Omodakaya
sankoumax-table-data-02-omodakaya
Card Flow
迷わない比較カード
Omodakaya から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — table-data 02 Omodakaya
- 概要: SANKOU100 sample setから展開したtable-data向けcards構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4882px、主要ブロック group, paragraph, heading, paragraph, columns, column, 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/sankoumax-table-data-02-omodakaya"} /-->
CSS:
.section-sankoumax-table-data-02-omodakaya { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-02-omodakaya').forEach((el) => el.dataset.ready = 'true');
15
SANKOU Max — table-data 03 Favtown
sankoumax-table-data-03-favtown
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
3803
- パターン名: SANKOU Max — table-data 03 Favtown
- 概要: SANKOU100 sample setから展開したtable-data向けcollage構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 33% / 1px / 39% / 31% / 1px、推奨コンテンツ幅 4923px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-03-favtown"} /-->
CSS:
.section-sankoumax-table-data-03-favtown { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-03-favtown').forEach((el) => el.dataset.ready = 'true');
16
SANKOU Max — table-data 04 Mizuya Kyoto
sankoumax-table-data-04-mizuya-kyoto
Mizuya
About
Works
Journal
Contact
- パターン名: SANKOU Max — table-data 04 Mizuya Kyoto
- 概要: SANKOU100 sample setから展開したtable-data向けrail構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 4984px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-04-mizuya-kyoto"} /-->
CSS:
.section-sankoumax-table-data-04-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-04-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');
17
SANKOU Max — table-data 05 Allright Inc
sankoumax-table-data-05-allright-inc
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — table-data 05 Allright Inc
- 概要: SANKOU100 sample setから展開したtable-data向けeditorial構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 49% / 51% / 1px、推奨コンテンツ幅 4825px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-05-allright-inc"} /-->
CSS:
.section-sankoumax-table-data-05-allright-inc { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-05-allright-inc').forEach((el) => el.dataset.ready = 'true');
18
SANKOU Max — table-data 06 Jins Holdings
sankoumax-table-data-06-jins-holdings
Collection Selector
Jins Holdings の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — table-data 06 Jins Holdings
- 概要: SANKOU100 sample setから展開したtable-data向けproduct構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4906px、主要ブロック group, group, heading, paragraph, columns, column, 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/sankoumax-table-data-06-jins-holdings"} /-->
CSS:
.section-sankoumax-table-data-06-jins-holdings { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-06-jins-holdings').forEach((el) => el.dataset.ready = 'true');
19
SANKOU Max — table-data 07 Tsuchitokaze
sankoumax-table-data-07-tsuchitokaze
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — table-data 07 Tsuchitokaze
- 概要: SANKOU100 sample setから展開したtable-data向けtimeline構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4847px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-07-tsuchitokaze"} /-->
CSS:
.section-sankoumax-table-data-07-tsuchitokaze { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-07-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');
20
SANKOU Max — table-data 08 Yamato 50Th
sankoumax-table-data-08-yamato-50th
数字で納得させる
48%
改善率
4分
短縮
26756
導入数
- パターン名: SANKOU Max — table-data 08 Yamato 50Th
- 概要: SANKOU100 sample setから展開したtable-data向けstats構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4768px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-08-yamato-50th"} /-->
CSS:
.section-sankoumax-table-data-08-yamato-50th { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-08-yamato-50th').forEach((el) => el.dataset.ready = 'true');
21
SANKOU Max — table-data 09 Action Npo
sankoumax-table-data-09-action-npo
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — table-data 09 Action Npo
- 概要: SANKOU100 sample setから展開したtable-data向けcontact構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 57% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4889px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-09-action-npo"} /-->
CSS:
.section-sankoumax-table-data-09-action-npo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-09-action-npo').forEach((el) => el.dataset.ready = 'true');
22
SANKOU Max — table-data 10 Mycampus
sankoumax-table-data-10-mycampus
Mycampus
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 3810
- パターン名: SANKOU Max — table-data 10 Mycampus
- 概要: SANKOU100 sample setから展開したtable-data向けfooter構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4930px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-10-mycampus"} /-->
CSS:
.section-sankoumax-table-data-10-mycampus { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-10-mycampus').forEach((el) => el.dataset.ready = 'true');
23
SANKOU Max — table-data 11 Mejinavi
sankoumax-table-data-11-mejinavi
NEWS
Mejinavi から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — table-data 11 Mejinavi
- 概要: SANKOU100 sample setから展開したtable-data向けalert構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4891px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-11-mejinavi"} /-->
CSS:
.section-sankoumax-table-data-11-mejinavi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-11-mejinavi').forEach((el) => el.dataset.ready = 'true');
24
SANKOU Max — table-data 12 Niwaya
sankoumax-table-data-12-niwaya
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — table-data 12 Niwaya
- 概要: SANKOU100 sample setから展開したtable-data向けmap構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4852px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-12-niwaya"} /-->
CSS:
.section-sankoumax-table-data-12-niwaya { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-12-niwaya').forEach((el) => el.dataset.ready = 'true');
25
SANKOU Max — table-data 13 Mindful Connect
sankoumax-table-data-13-mindful-connect
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — table-data 13 Mindful Connect
- 概要: SANKOU100 sample setから展開したtable-data向けform構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4873px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-13-mindful-connect"} /-->
CSS:
.section-sankoumax-table-data-13-mindful-connect { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-13-mindful-connect').forEach((el) => el.dataset.ready = 'true');
26
SANKOU Max — table-data 14 Spicato Daruma
sankoumax-table-data-14-spicato-daruma
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — table-data 14 Spicato Daruma
- 概要: SANKOU100 sample setから展開したtable-data向けtabs構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4794px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-14-spicato-daruma"} /-->
CSS:
.section-sankoumax-table-data-14-spicato-daruma { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-14-spicato-daruma').forEach((el) => el.dataset.ready = 'true');
27
SANKOU Max — table-data 15 Morohoshi Portfolio
sankoumax-table-data-15-morohoshi-portfolio
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — table-data 15 Morohoshi Portfolio
- 概要: SANKOU100 sample setから展開したtable-data向けdashboard構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4895px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-15-morohoshi-portfolio"} /-->
CSS:
.section-sankoumax-table-data-15-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-15-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');
28
SANKOU Max — table-data 16 Vision Structure
sankoumax-table-data-16-vision-structure
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — table-data 16 Vision Structure
- 概要: SANKOU100 sample setから展開したtable-data向けfaq構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4736px、主要ブロック group, paragraph, heading, 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/sankoumax-table-data-16-vision-structure"} /-->
CSS:
.section-sankoumax-table-data-16-vision-structure { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-16-vision-structure').forEach((el) => el.dataset.ready = 'true');
29
SANKOU Max — table-data 17 Nakiri Shota
sankoumax-table-data-17-nakiri-shota
Detail
- パターン名: SANKOU Max — table-data 17 Nakiri Shota
- 概要: SANKOU100 sample setから展開したtable-data向けgallery構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4937px、主要ブロック group, columns, column, image, column, image, 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/sankoumax-table-data-17-nakiri-shota"} /-->
CSS:
.section-sankoumax-table-data-17-nakiri-shota { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-17-nakiri-shota').forEach((el) => el.dataset.ready = 'true');
30
SANKOU Max — table-data 18 Koba Clinic
sankoumax-table-data-18-koba-clinic
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — table-data 18 Koba Clinic
- 概要: SANKOU100 sample setから展開したtable-data向けroster構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4938px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-18-koba-clinic"} /-->
CSS:
.section-sankoumax-table-data-18-koba-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-18-koba-clinic').forEach((el) => el.dataset.ready = 'true');
31
SANKOU Max — table-data 19 Ems Recruit
sankoumax-table-data-19-ems-recruit
3819
Ems Recruit
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — table-data 19 Ems Recruit
- 概要: SANKOU100 sample setから展開したtable-data向けmanifesto構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4719px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-19-ems-recruit"} /-->
CSS:
.section-sankoumax-table-data-19-ems-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-19-ems-recruit').forEach((el) => el.dataset.ready = 'true');
32
SANKOU Max — table-data 20 Felissimo Panda
sankoumax-table-data-20-felissimo-panda
Sampled Site
3820 / Felissimo Panda
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — table-data 20 Felissimo Panda
- 概要: SANKOU100 sample setから展開したtable-data向けcover構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 28% / 72%、推奨コンテンツ幅 12440px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-20-felissimo-panda"} /-->
CSS:
.section-sankoumax-table-data-20-felissimo-panda { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-20-felissimo-panda').forEach((el) => el.dataset.ready = 'true');
33
SANKOU Max — table-data 21 Iriam Miraito
sankoumax-table-data-21-iriam-miraito
Split Story
写真と要点で信頼を作る
Iriam Miraito の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — table-data 21 Iriam Miraito
- 概要: SANKOU100 sample setから展開したtable-data向けsplit構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 4861px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-21-iriam-miraito"} /-->
CSS:
.section-sankoumax-table-data-21-iriam-miraito { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-21-iriam-miraito').forEach((el) => el.dataset.ready = 'true');
34
SANKOU Max — table-data 22 Gaaboo
sankoumax-table-data-22-gaaboo
Card Flow
迷わない比較カード
Gaaboo から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — table-data 22 Gaaboo
- 概要: SANKOU100 sample setから展開したtable-data向けcards構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4902px、主要ブロック group, paragraph, heading, paragraph, columns, column, 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/sankoumax-table-data-22-gaaboo"} /-->
CSS:
.section-sankoumax-table-data-22-gaaboo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-22-gaaboo').forEach((el) => el.dataset.ready = 'true');
35
SANKOU Max — table-data 23 Violet Patisserie
sankoumax-table-data-23-violet-patisserie
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
3823
- パターン名: SANKOU Max — table-data 23 Violet Patisserie
- 概要: SANKOU100 sample setから展開したtable-data向けcollage構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 37% / 1px / 35% / 35% / 1px、推奨コンテンツ幅 4943px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-23-violet-patisserie"} /-->
CSS:
.section-sankoumax-table-data-23-violet-patisserie { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-23-violet-patisserie').forEach((el) => el.dataset.ready = 'true');
36
SANKOU Max — table-data 24 Nii Recruit
sankoumax-table-data-24-nii-recruit
Nii
About
Works
Journal
Contact
- パターン名: SANKOU Max — table-data 24 Nii Recruit
- 概要: SANKOU100 sample setから展開したtable-data向けrail構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 5004px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-24-nii-recruit"} /-->
CSS:
.section-sankoumax-table-data-24-nii-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-24-nii-recruit').forEach((el) => el.dataset.ready = 'true');
37
SANKOU Max — table-data 25 Saranosono
sankoumax-table-data-25-saranosono
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — table-data 25 Saranosono
- 概要: SANKOU100 sample setから展開したtable-data向けeditorial構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 45% / 55% / 1px、推奨コンテンツ幅 4845px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-25-saranosono"} /-->
CSS:
.section-sankoumax-table-data-25-saranosono { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-25-saranosono').forEach((el) => el.dataset.ready = 'true');
38
SANKOU Max — table-data 26 Dac Web
sankoumax-table-data-26-dac-web
Collection Selector
Dac Web の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — table-data 26 Dac Web
- 概要: SANKOU100 sample setから展開したtable-data向けproduct構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4926px、主要ブロック group, group, heading, paragraph, columns, column, 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/sankoumax-table-data-26-dac-web"} /-->
CSS:
.section-sankoumax-table-data-26-dac-web { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-26-dac-web').forEach((el) => el.dataset.ready = 'true');
39
SANKOU Max — table-data 27 Asuzac Recruit
sankoumax-table-data-27-asuzac-recruit
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — table-data 27 Asuzac Recruit
- 概要: SANKOU100 sample setから展開したtable-data向けtimeline構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4867px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-27-asuzac-recruit"} /-->
CSS:
.section-sankoumax-table-data-27-asuzac-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-27-asuzac-recruit').forEach((el) => el.dataset.ready = 'true');
40
SANKOU Max — table-data 28 Suntory Sic
sankoumax-table-data-28-suntory-sic
数字で納得させる
68%
改善率
6分
短縮
26896
導入数
- パターン名: SANKOU Max — table-data 28 Suntory Sic
- 概要: SANKOU100 sample setから展開したtable-data向けstats構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4788px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-28-suntory-sic"} /-->
CSS:
.section-sankoumax-table-data-28-suntory-sic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-28-suntory-sic').forEach((el) => el.dataset.ready = 'true');
41
SANKOU Max — table-data 29 Amano Clinic
sankoumax-table-data-29-amano-clinic
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — table-data 29 Amano Clinic
- 概要: SANKOU100 sample setから展開したtable-data向けcontact構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 53% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4909px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-29-amano-clinic"} /-->
CSS:
.section-sankoumax-table-data-29-amano-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-29-amano-clinic').forEach((el) => el.dataset.ready = 'true');
42
SANKOU Max — table-data 30 Infocus
sankoumax-table-data-30-infocus
Infocus
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 3830
- パターン名: SANKOU Max — table-data 30 Infocus
- 概要: SANKOU100 sample setから展開したtable-data向けfooter構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4950px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-30-infocus"} /-->
CSS:
.section-sankoumax-table-data-30-infocus { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-30-infocus').forEach((el) => el.dataset.ready = 'true');
43
SANKOU Max — table-data 31 Tomore
sankoumax-table-data-31-tomore
NEWS
Tomore から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — table-data 31 Tomore
- 概要: SANKOU100 sample setから展開したtable-data向けalert構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4911px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-31-tomore"} /-->
CSS:
.section-sankoumax-table-data-31-tomore { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-31-tomore').forEach((el) => el.dataset.ready = 'true');
44
SANKOU Max — table-data 32 Dan Brise Barber
sankoumax-table-data-32-dan-brise-barber
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — table-data 32 Dan Brise Barber
- 概要: SANKOU100 sample setから展開したtable-data向けmap構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4872px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-32-dan-brise-barber"} /-->
CSS:
.section-sankoumax-table-data-32-dan-brise-barber { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-32-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');
45
SANKOU Max — table-data 33 Allureville Elements
sankoumax-table-data-33-allureville-elements
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — table-data 33 Allureville Elements
- 概要: SANKOU100 sample setから展開したtable-data向けform構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4893px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-33-allureville-elements"} /-->
CSS:
.section-sankoumax-table-data-33-allureville-elements { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-33-allureville-elements').forEach((el) => el.dataset.ready = 'true');
46
SANKOU Max — table-data 34 Studio Cbr
sankoumax-table-data-34-studio-cbr
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — table-data 34 Studio Cbr
- 概要: SANKOU100 sample setから展開したtable-data向けtabs構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4814px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-34-studio-cbr"} /-->
CSS:
.section-sankoumax-table-data-34-studio-cbr { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-34-studio-cbr').forEach((el) => el.dataset.ready = 'true');
47
SANKOU Max — table-data 35 Yamakachi
sankoumax-table-data-35-yamakachi
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — table-data 35 Yamakachi
- 概要: SANKOU100 sample setから展開したtable-data向けdashboard構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4915px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-35-yamakachi"} /-->
CSS:
.section-sankoumax-table-data-35-yamakachi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-35-yamakachi').forEach((el) => el.dataset.ready = 'true');
48
SANKOU Max — table-data 36 Chiikawa Pocket
sankoumax-table-data-36-chiikawa-pocket
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — table-data 36 Chiikawa Pocket
- 概要: SANKOU100 sample setから展開したtable-data向けfaq構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4756px、主要ブロック group, paragraph, heading, 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/sankoumax-table-data-36-chiikawa-pocket"} /-->
CSS:
.section-sankoumax-table-data-36-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-36-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');
49
SANKOU Max — table-data 37 Chiba Dojo
sankoumax-table-data-37-chiba-dojo
Detail
- パターン名: SANKOU Max — table-data 37 Chiba Dojo
- 概要: SANKOU100 sample setから展開したtable-data向けgallery構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4957px、主要ブロック group, columns, column, image, column, image, 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/sankoumax-table-data-37-chiba-dojo"} /-->
CSS:
.section-sankoumax-table-data-37-chiba-dojo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-37-chiba-dojo').forEach((el) => el.dataset.ready = 'true');
50
SANKOU Max — table-data 38 Twoe
sankoumax-table-data-38-twoe
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — table-data 38 Twoe
- 概要: SANKOU100 sample setから展開したtable-data向けroster構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4958px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-38-twoe"} /-->
CSS:
.section-sankoumax-table-data-38-twoe { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-38-twoe').forEach((el) => el.dataset.ready = 'true');
51
SANKOU Max — table-data 39 Kamata Shoyu
sankoumax-table-data-39-kamata-shoyu
3839
Kamata Shoyu
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — table-data 39 Kamata Shoyu
- 概要: SANKOU100 sample setから展開したtable-data向けmanifesto構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4739px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-39-kamata-shoyu"} /-->
CSS:
.section-sankoumax-table-data-39-kamata-shoyu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-39-kamata-shoyu').forEach((el) => el.dataset.ready = 'true');
52
SANKOU Max — table-data 40 Fumino
sankoumax-table-data-40-fumino
Sampled Site
3840 / Fumino
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — table-data 40 Fumino
- 概要: SANKOU100 sample setから展開したtable-data向けcover構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 30% / 70%、推奨コンテンツ幅 12500px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-40-fumino"} /-->
CSS:
.section-sankoumax-table-data-40-fumino { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-40-fumino').forEach((el) => el.dataset.ready = 'true');
53
SANKOU Max — table-data 41 Anbe Shoten
sankoumax-table-data-41-anbe-shoten
Split Story
写真と要点で信頼を作る
Anbe Shoten の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — table-data 41 Anbe Shoten
- 概要: SANKOU100 sample setから展開したtable-data向けsplit構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 4881px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-41-anbe-shoten"} /-->
CSS:
.section-sankoumax-table-data-41-anbe-shoten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-41-anbe-shoten').forEach((el) => el.dataset.ready = 'true');
54
SANKOU Max — table-data 42 Plaid Alpha
sankoumax-table-data-42-plaid-alpha
Card Flow
迷わない比較カード
Plaid Alpha から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — table-data 42 Plaid Alpha
- 概要: SANKOU100 sample setから展開したtable-data向けcards構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4922px、主要ブロック group, paragraph, heading, paragraph, columns, column, 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/sankoumax-table-data-42-plaid-alpha"} /-->
CSS:
.section-sankoumax-table-data-42-plaid-alpha { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-42-plaid-alpha').forEach((el) => el.dataset.ready = 'true');
55
SANKOU Max — table-data 43 Undimension
sankoumax-table-data-43-undimension
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
3843
- パターン名: SANKOU Max — table-data 43 Undimension
- 概要: SANKOU100 sample setから展開したtable-data向けcollage構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 33% / 1px / 37% / 33% / 1px、推奨コンテンツ幅 4963px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-43-undimension"} /-->
CSS:
.section-sankoumax-table-data-43-undimension { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-43-undimension').forEach((el) => el.dataset.ready = 'true');
56
SANKOU Max — table-data 44 Norikura Hanabi
sankoumax-table-data-44-norikura-hanabi
Norikura
About
Works
Journal
Contact
- パターン名: SANKOU Max — table-data 44 Norikura Hanabi
- 概要: SANKOU100 sample setから展開したtable-data向けrail構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 5024px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-44-norikura-hanabi"} /-->
CSS:
.section-sankoumax-table-data-44-norikura-hanabi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-44-norikura-hanabi').forEach((el) => el.dataset.ready = 'true');
57
SANKOU Max — table-data 45 Chugaitoen
sankoumax-table-data-45-chugaitoen
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — table-data 45 Chugaitoen
- 概要: SANKOU100 sample setから展開したtable-data向けeditorial構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 49% / 51% / 1px、推奨コンテンツ幅 4865px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-45-chugaitoen"} /-->
CSS:
.section-sankoumax-table-data-45-chugaitoen { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-45-chugaitoen').forEach((el) => el.dataset.ready = 'true');
58
SANKOU Max — table-data 46 Favtown Wakayama
sankoumax-table-data-46-favtown-wakayama
Collection Selector
Favtown Wakayama の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — table-data 46 Favtown Wakayama
- 概要: SANKOU100 sample setから展開したtable-data向けproduct構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4946px、主要ブロック group, group, heading, paragraph, columns, column, 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/sankoumax-table-data-46-favtown-wakayama"} /-->
CSS:
.section-sankoumax-table-data-46-favtown-wakayama { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-46-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');
59
SANKOU Max — table-data 47 Palcloset Fashion
sankoumax-table-data-47-palcloset-fashion
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — table-data 47 Palcloset Fashion
- 概要: SANKOU100 sample setから展開したtable-data向けtimeline構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4887px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-47-palcloset-fashion"} /-->
CSS:
.section-sankoumax-table-data-47-palcloset-fashion { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-47-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');
60
SANKOU Max — table-data 48 Michikusa Art
sankoumax-table-data-48-michikusa-art
数字で納得させる
88%
改善率
8分
短縮
27036
導入数
- パターン名: SANKOU Max — table-data 48 Michikusa Art
- 概要: SANKOU100 sample setから展開したtable-data向けstats構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4808px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-48-michikusa-art"} /-->
CSS:
.section-sankoumax-table-data-48-michikusa-art { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-48-michikusa-art').forEach((el) => el.dataset.ready = 'true');
61
SANKOU Max — table-data 49 Tenten
sankoumax-table-data-49-tenten
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — table-data 49 Tenten
- 概要: SANKOU100 sample setから展開したtable-data向けcontact構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 57% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4929px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-49-tenten"} /-->
CSS:
.section-sankoumax-table-data-49-tenten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-49-tenten').forEach((el) => el.dataset.ready = 'true');
62
SANKOU Max — table-data 50 Unipos
sankoumax-table-data-50-unipos
Unipos
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 3850
- パターン名: SANKOU Max — table-data 50 Unipos
- 概要: SANKOU100 sample setから展開したtable-data向けfooter構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4970px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-50-unipos"} /-->
CSS:
.section-sankoumax-table-data-50-unipos { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-50-unipos').forEach((el) => el.dataset.ready = 'true');
63
SANKOU Max — table-data 51 Trail Inc
sankoumax-table-data-51-trail-inc
NEWS
Trail Inc から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — table-data 51 Trail Inc
- 概要: SANKOU100 sample setから展開したtable-data向けalert構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4931px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-51-trail-inc"} /-->
CSS:
.section-sankoumax-table-data-51-trail-inc { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-51-trail-inc').forEach((el) => el.dataset.ready = 'true');
64
SANKOU Max — table-data 52 Applebase
sankoumax-table-data-52-applebase
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — table-data 52 Applebase
- 概要: SANKOU100 sample setから展開したtable-data向けmap構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4892px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版 / Table / Dataをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-52-applebase"} /-->
CSS:
.section-sankoumax-table-data-52-applebase { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-52-applebase').forEach((el) => el.dataset.ready = 'true');
65
SANKOU Max — table-data 53 Meisei Es
sankoumax-table-data-53-meisei-es
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — table-data 53 Meisei Es
- 概要: SANKOU100 sample setから展開したtable-data向けform構成。
- 使用目的: Table / Data領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4913px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Table / Dataをミニマルに見せる余白重視版 / Table / Dataをリッチに見せるカバー/カード強調版 / Table / Dataをコーポレート向けに整える情報密度高め版 / Table / Dataをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-table-data-53-meisei-es"} /-->
CSS:
.section-sankoumax-table-data-53-meisei-es { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-table-data-53-meisei-es').forEach((el) => el.dataset.ready = 'true');
66
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');
67
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');
68
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');
69
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');
70
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