スタッツ

パターン名: Reference Complete — stats 01 Sticky Entry
概要: 参照サンプル再確認から追加したstats向け部品。固定導線つきの大判ファーストビュー。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 24% / 76%、推奨コンテンツ幅 43883px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-stats-01-sticky-entry-mycampus"} /-->

CSS:
.section-reference-complete-stats-01-sticky-entry-mycampus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-stats-01-sticky-entry-mycampus').forEach((el) => el.dataset.ready = 'true');

Reference Complete — stats 02 Editorial Issue

reference-complete-stats-02-editorial-issue-niwaya

Copy

Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

背景を伝える
選ぶ理由を示す
次の行動へ進める

パターン名: Reference Complete — stats 02 Editorial Issue
概要: 参照サンプル再確認から追加したstats向け部品。雑誌的な見出しと導入文の編集レイアウト。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 15322px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-stats-02-editorial-issue-niwaya"} /-->

CSS:
.section-reference-complete-stats-02-editorial-issue-niwaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-stats-02-editorial-issue-niwaya').forEach((el) => el.dataset.ready = 'true');

Reference Complete — stats 03 Brand Index

reference-complete-stats-03-brand-index-spicato-daruma

Copy

Link

Card Flow

迷わない比較カード

Spicato Daruma から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: Reference Complete — stats 03 Brand Index
概要: 参照サンプル再確認から追加したstats向け部品。複数ブランドやサービスを迷わせず並べる索引。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 15383px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-stats-03-brand-index-spicato-daruma"} /-->

CSS:
.section-reference-complete-stats-03-brand-index-spicato-daruma { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-stats-03-brand-index-spicato-daruma').forEach((el) => el.dataset.ready = 'true');

Reference Complete — stats 04 Recruit Story

reference-complete-stats-04-recruit-story-shueisha-recruit

Copy

Link

Split Story

写真と要点で信頼を作る

Shueisha Recruit の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

パターン名: Reference Complete — stats 04 Recruit Story
概要: 参照サンプル再確認から追加したstats向け部品。採用・企業紹介に使える人物/思想の分割構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 15344px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-stats-04-recruit-story-shueisha-recruit"} /-->

CSS:
.section-reference-complete-stats-04-recruit-story-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-stats-04-recruit-story-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');

Reference Complete — stats 05 Commerce Compare

reference-complete-stats-05-commerce-compare-felissimo-panda

Copy

Link

Collection Selector

Felissimo Panda の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

パターン名: Reference Complete — stats 05 Commerce Compare
概要: 参照サンプル再確認から追加したstats向け部品。料金・商品・プランを比較しやすい構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 15405px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-stats-05-commerce-compare-felissimo-panda"} /-->

CSS:
.section-reference-complete-stats-05-commerce-compare-felissimo-panda { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-stats-05-commerce-compare-felissimo-panda').forEach((el) => el.dataset.ready = 'true');

Reference Complete — stats 06 Timeline Proof

reference-complete-stats-06-timeline-proof-meisei-kg

Copy

Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

パターン名: Reference Complete — stats 06 Timeline Proof
概要: 参照サンプル再確認から追加したstats向け部品。沿革・導入手順・制作工程の時系列。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 15346px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-stats-06-timeline-proof-meisei-kg"} /-->

CSS:
.section-reference-complete-stats-06-timeline-proof-meisei-kg { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-stats-06-timeline-proof-meisei-kg').forEach((el) => el.dataset.ready = 'true');

Reference Complete — stats 07 Gallery Led

reference-complete-stats-07-gallery-led-upvege

Copy

Link

Detail

パターン名: Reference Complete — stats 07 Gallery Led
概要: 参照サンプル再確認から追加したstats向け部品。写真量の多い商材を見せるギャラリー導線。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 15427px、主要ブロック group, columns, column, image, column, image, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-stats-07-gallery-led-upvege"} /-->

CSS:
.section-reference-complete-stats-07-gallery-led-upvege { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-stats-07-gallery-led-upvege').forEach((el) => el.dataset.ready = 'true');

Reference Complete — stats 08 Dashboard Proof

reference-complete-stats-08-dashboard-proof-favtown-wakayama

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

パターン名: Reference Complete — stats 08 Dashboard Proof
概要: 参照サンプル再確認から追加したstats向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 15388px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-stats-08-dashboard-proof-favtown-wakayama"} /-->

CSS:
.section-reference-complete-stats-08-dashboard-proof-favtown-wakayama { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-stats-08-dashboard-proof-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');

Reference Complete — stats 09 Contact Ready

reference-complete-stats-09-contact-ready-matsuo-komuten

Copy

Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する

パターン名: Reference Complete — stats 09 Contact Ready
概要: 参照サンプル再確認から追加したstats向け部品。問い合わせ前の入力項目を整理する導線。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 15369px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-stats-09-contact-ready-matsuo-komuten"} /-->

CSS:
.section-reference-complete-stats-09-contact-ready-matsuo-komuten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-stats-09-contact-ready-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');

Reference Complete — stats 10 Mobile Rail

reference-complete-stats-10-mobile-rail-omotesando-ortho

Copy

Link

Omotesando

About

Works

Journal

Contact

パターン名: Reference Complete — stats 10 Mobile Rail
概要: 参照サンプル再確認から追加したstats向け部品。スマホ閲覧で要点を縦に追えるレール型。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 15490px、主要ブロック group, columns, column, heading, column, columns, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-stats-10-mobile-rail-omotesando-ortho"} /-->

CSS:
.section-reference-complete-stats-10-mobile-rail-omotesando-ortho { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-stats-10-mobile-rail-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 017 Felissimo Panda

sankou100-017-felissimo-panda

Copy

Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

パターン名: SANKOU100 — 017 Felissimo Panda
概要: SANKOU! sample 017から抽出したfaq型の商用サイト向け構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 937px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-017-felissimo-panda"} /-->

CSS:
.section-sankou100-017-felissimo-panda { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-017-felissimo-panda').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 057 Fumino

sankou100-057-fumino

Copy

Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

パターン名: SANKOU100 — 057 Fumino
概要: SANKOU! sample 057から抽出したfaq型の商用サイト向け構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 977px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-057-fumino"} /-->

CSS:
.section-sankou100-057-fumino { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-057-fumino').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 097 Notahotel Architects

sankou100-097-notahotel-architects

Copy

Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

パターン名: SANKOU100 — 097 Notahotel Architects
概要: SANKOU! sample 097から抽出したfaq型の商用サイト向け構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1017px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-097-notahotel-architects"} /-->

CSS:
.section-sankou100-097-notahotel-architects { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-097-notahotel-architects').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 01 Dac Web

sankoumax-stats-01-dac-web

Copy

Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

パターン名: SANKOU Max — stats 01 Dac Web
概要: SANKOU100 sample setから展開したstats向けfaq構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2221px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-01-dac-web"} /-->

CSS:
.section-sankoumax-stats-01-dac-web { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-01-dac-web').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 02 Asuzac Recruit

sankoumax-stats-02-asuzac-recruit

Copy

Link

Detail

パターン名: SANKOU Max — stats 02 Asuzac Recruit
概要: SANKOU100 sample setから展開したstats向けgallery構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2422px、主要ブロック group, columns, column, image, column, image, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-02-asuzac-recruit"} /-->

CSS:
.section-sankoumax-stats-02-asuzac-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-02-asuzac-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 03 Suntory Sic

sankoumax-stats-03-suntory-sic

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — stats 03 Suntory Sic
概要: SANKOU100 sample setから展開したstats向けroster構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2423px、主要ブロック group, heading, columns, column, image, paragraph, column, image

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-03-suntory-sic"} /-->

CSS:
.section-sankoumax-stats-03-suntory-sic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-03-suntory-sic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 04 Amano Clinic

sankoumax-stats-04-amano-clinic

Copy

Link

1304

Amano Clinic

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

パターン名: SANKOU Max — stats 04 Amano Clinic
概要: SANKOU100 sample setから展開したstats向けmanifesto構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2204px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-04-amano-clinic"} /-->

CSS:
.section-sankoumax-stats-04-amano-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-04-amano-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 05 Infocus

sankoumax-stats-05-infocus

Copy

Link

Sampled Site

1305 / Infocus

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

パターン名: SANKOU Max — stats 05 Infocus
概要: SANKOU100 sample setから展開したstats向けcover構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 24% / 76%、推奨コンテンツ幅 4895px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-05-infocus"} /-->

CSS:
.section-sankoumax-stats-05-infocus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-05-infocus').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 06 Tomore

sankoumax-stats-06-tomore

Copy

Link

Split Story

写真と要点で信頼を作る

Tomore の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

パターン名: SANKOU Max — stats 06 Tomore
概要: SANKOU100 sample setから展開したstats向けsplit構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 2346px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-06-tomore"} /-->

CSS:
.section-sankoumax-stats-06-tomore { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-06-tomore').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 07 Dan Brise Barber

sankoumax-stats-07-dan-brise-barber

Copy

Link

Card Flow

迷わない比較カード

Dan Brise Barber から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: SANKOU Max — stats 07 Dan Brise Barber
概要: SANKOU100 sample setから展開したstats向けcards構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2387px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-07-dan-brise-barber"} /-->

CSS:
.section-sankoumax-stats-07-dan-brise-barber { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-07-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 08 Allureville Elements

sankoumax-stats-08-allureville-elements

Copy

Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

1308

パターン名: SANKOU Max — stats 08 Allureville Elements
概要: SANKOU100 sample setから展開したstats向けcollage構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 34% / 36% / 1px、推奨コンテンツ幅 2428px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-08-allureville-elements"} /-->

CSS:
.section-sankoumax-stats-08-allureville-elements { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-08-allureville-elements').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 09 Studio Cbr

sankoumax-stats-09-studio-cbr

Copy

Link

Studio

About

Works

Journal

Contact

パターン名: SANKOU Max — stats 09 Studio Cbr
概要: SANKOU100 sample setから展開したstats向けrail構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2489px、主要ブロック group, columns, column, heading, column, columns, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-09-studio-cbr"} /-->

CSS:
.section-sankoumax-stats-09-studio-cbr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-09-studio-cbr').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 10 Yamakachi

sankoumax-stats-10-yamakachi

Copy

Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

背景を伝える
選ぶ理由を示す
次の行動へ進める

パターン名: SANKOU Max — stats 10 Yamakachi
概要: SANKOU100 sample setから展開したstats向けeditorial構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 2330px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-10-yamakachi"} /-->

CSS:
.section-sankoumax-stats-10-yamakachi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-10-yamakachi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 11 Chiikawa Pocket

sankoumax-stats-11-chiikawa-pocket

Copy

Link

Collection Selector

Chiikawa Pocket の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

パターン名: SANKOU Max — stats 11 Chiikawa Pocket
概要: SANKOU100 sample setから展開したstats向けproduct構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 2411px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-11-chiikawa-pocket"} /-->

CSS:
.section-sankoumax-stats-11-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-11-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 12 Chiba Dojo

sankoumax-stats-12-chiba-dojo

Copy

Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

パターン名: SANKOU Max — stats 12 Chiba Dojo
概要: SANKOU100 sample setから展開したstats向けtimeline構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2352px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-12-chiba-dojo"} /-->

CSS:
.section-sankoumax-stats-12-chiba-dojo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-12-chiba-dojo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 13 Twoe

sankoumax-stats-13-twoe

Copy

Link

数字で納得させる

73%

改善率

11分

短縮

9291

導入数

パターン名: SANKOU Max — stats 13 Twoe
概要: SANKOU100 sample setから展開したstats向けstats構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2273px、主要ブロック group, heading, columns, column, group, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-13-twoe"} /-->

CSS:
.section-sankoumax-stats-13-twoe { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-13-twoe').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 14 Kamata Shoyu

sankoumax-stats-14-kamata-shoyu

Copy

Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

パターン名: SANKOU Max — stats 14 Kamata Shoyu
概要: SANKOU100 sample setから展開したstats向けcontact構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 56% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2394px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-14-kamata-shoyu"} /-->

CSS:
.section-sankoumax-stats-14-kamata-shoyu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-14-kamata-shoyu').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 15 Fumino

sankoumax-stats-15-fumino

Copy

Link

Fumino

商用サイトの締めに必要な主要リンクを整理します。

About
Service
Works

News
Recruit
Contact

Sample 1315

パターン名: SANKOU Max — stats 15 Fumino
概要: SANKOU100 sample setから展開したstats向けfooter構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 2435px、主要ブロック group, columns, column, heading, paragraph, column, list, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-15-fumino"} /-->

CSS:
.section-sankoumax-stats-15-fumino { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-15-fumino').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 16 Anbe Shoten

sankoumax-stats-16-anbe-shoten

Copy

Link

NEWS

Anbe Shoten から抽出した告知導線。重要なお知らせを短く表示します。

確認する

パターン名: SANKOU Max — stats 16 Anbe Shoten
概要: SANKOU100 sample setから展開したstats向けalert構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 2396px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-16-anbe-shoten"} /-->

CSS:
.section-sankoumax-stats-16-anbe-shoten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-16-anbe-shoten').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 17 Plaid Alpha

sankoumax-stats-17-plaid-alpha

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

パターン名: SANKOU Max — stats 17 Plaid Alpha
概要: SANKOU100 sample setから展開したstats向けmap構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2357px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-17-plaid-alpha"} /-->

CSS:
.section-sankoumax-stats-17-plaid-alpha { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-17-plaid-alpha').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 18 Undimension

sankoumax-stats-18-undimension

Copy

Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する

パターン名: SANKOU Max — stats 18 Undimension
概要: SANKOU100 sample setから展開したstats向けform構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 2378px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-18-undimension"} /-->

CSS:
.section-sankoumax-stats-18-undimension { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-18-undimension').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 19 Norikura Hanabi

sankoumax-stats-19-norikura-hanabi

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

商品、採用、サービス紹介で情報量を抑えて見せるタブ型。

パターン名: SANKOU Max — stats 19 Norikura Hanabi
概要: SANKOU100 sample setから展開したstats向けtabs構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2299px、主要ブロック group, group, columns, column, group, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-19-norikura-hanabi"} /-->

CSS:
.section-sankoumax-stats-19-norikura-hanabi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-19-norikura-hanabi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 20 Chugaitoen

sankoumax-stats-20-chugaitoen

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

パターン名: SANKOU Max — stats 20 Chugaitoen
概要: SANKOU100 sample setから展開したstats向けdashboard構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 2400px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-20-chugaitoen"} /-->

CSS:
.section-sankoumax-stats-20-chugaitoen { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-20-chugaitoen').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 21 Favtown Wakayama

sankoumax-stats-21-favtown-wakayama

Copy

Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

パターン名: SANKOU Max — stats 21 Favtown Wakayama
概要: SANKOU100 sample setから展開したstats向けfaq構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2241px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-21-favtown-wakayama"} /-->

CSS:
.section-sankoumax-stats-21-favtown-wakayama { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-21-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 22 Palcloset Fashion

sankoumax-stats-22-palcloset-fashion

Copy

Link

Detail

パターン名: SANKOU Max — stats 22 Palcloset Fashion
概要: SANKOU100 sample setから展開したstats向けgallery構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2442px、主要ブロック group, columns, column, image, column, image, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-22-palcloset-fashion"} /-->

CSS:
.section-sankoumax-stats-22-palcloset-fashion { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-22-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 23 Michikusa Art

sankoumax-stats-23-michikusa-art

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — stats 23 Michikusa Art
概要: SANKOU100 sample setから展開したstats向けroster構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2443px、主要ブロック group, heading, columns, column, image, paragraph, column, image

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-23-michikusa-art"} /-->

CSS:
.section-sankoumax-stats-23-michikusa-art { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-23-michikusa-art').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 24 Tenten

sankoumax-stats-24-tenten

Copy

Link

1324

Tenten

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

パターン名: SANKOU Max — stats 24 Tenten
概要: SANKOU100 sample setから展開したstats向けmanifesto構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2224px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-24-tenten"} /-->

CSS:
.section-sankoumax-stats-24-tenten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-24-tenten').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 25 Unipos

sankoumax-stats-25-unipos

Copy

Link

Sampled Site

1325 / Unipos

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

パターン名: SANKOU Max — stats 25 Unipos
概要: SANKOU100 sample setから展開したstats向けcover構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 26% / 74%、推奨コンテンツ幅 4955px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-25-unipos"} /-->

CSS:
.section-sankoumax-stats-25-unipos { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-25-unipos').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 26 Trail Inc

sankoumax-stats-26-trail-inc

Copy

Link

Split Story

写真と要点で信頼を作る

Trail Inc の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

パターン名: SANKOU Max — stats 26 Trail Inc
概要: SANKOU100 sample setから展開したstats向けsplit構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 2366px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-26-trail-inc"} /-->

CSS:
.section-sankoumax-stats-26-trail-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-26-trail-inc').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 27 Applebase

sankoumax-stats-27-applebase

Copy

Link

Card Flow

迷わない比較カード

Applebase から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: SANKOU Max — stats 27 Applebase
概要: SANKOU100 sample setから展開したstats向けcards構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2407px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-27-applebase"} /-->

CSS:
.section-sankoumax-stats-27-applebase { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-27-applebase').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 28 Meisei Es

sankoumax-stats-28-meisei-es

Copy

Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

1328

パターン名: SANKOU Max — stats 28 Meisei Es
概要: SANKOU100 sample setから展開したstats向けcollage構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 1px / 36% / 34% / 1px、推奨コンテンツ幅 2448px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-28-meisei-es"} /-->

CSS:
.section-sankoumax-stats-28-meisei-es { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-28-meisei-es').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 29 Unicell

sankoumax-stats-29-unicell

Copy

Link

Unicell

About

Works

Journal

Contact

パターン名: SANKOU Max — stats 29 Unicell
概要: SANKOU100 sample setから展開したstats向けrail構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2509px、主要ブロック group, columns, column, heading, column, columns, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-29-unicell"} /-->

CSS:
.section-sankoumax-stats-29-unicell { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-29-unicell').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 30 Uki Editions

sankoumax-stats-30-uki-editions

Copy

Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

背景を伝える
選ぶ理由を示す
次の行動へ進める

パターン名: SANKOU Max — stats 30 Uki Editions
概要: SANKOU100 sample setから展開したstats向けeditorial構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 2350px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-30-uki-editions"} /-->

CSS:
.section-sankoumax-stats-30-uki-editions { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-30-uki-editions').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 31 Kikyougaoka

sankoumax-stats-31-kikyougaoka

Copy

Link

Collection Selector

Kikyougaoka の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

パターン名: SANKOU Max — stats 31 Kikyougaoka
概要: SANKOU100 sample setから展開したstats向けproduct構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 2431px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-31-kikyougaoka"} /-->

CSS:
.section-sankoumax-stats-31-kikyougaoka { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-31-kikyougaoka').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 32 J Security

sankoumax-stats-32-j-security

Copy

Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

パターン名: SANKOU Max — stats 32 J Security
概要: SANKOU100 sample setから展開したstats向けtimeline構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2372px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-32-j-security"} /-->

CSS:
.section-sankoumax-stats-32-j-security { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-32-j-security').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 33 Serious Ceramic

sankoumax-stats-33-serious-ceramic

Copy

Link

数字で納得させる

23%

改善率

4分

短縮

9431

導入数

パターン名: SANKOU Max — stats 33 Serious Ceramic
概要: SANKOU100 sample setから展開したstats向けstats構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2293px、主要ブロック group, heading, columns, column, group, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-33-serious-ceramic"} /-->

CSS:
.section-sankoumax-stats-33-serious-ceramic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-33-serious-ceramic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 34 Tsumari Chamame

sankoumax-stats-34-tsumari-chamame

Copy

Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

パターン名: SANKOU Max — stats 34 Tsumari Chamame
概要: SANKOU100 sample setから展開したstats向けcontact構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 52% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2414px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-34-tsumari-chamame"} /-->

CSS:
.section-sankoumax-stats-34-tsumari-chamame { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-34-tsumari-chamame').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 35 Notahotel Architects

sankoumax-stats-35-notahotel-architects

Copy

Link

Notahotel Architects

商用サイトの締めに必要な主要リンクを整理します。

About
Service
Works

News
Recruit
Contact

Sample 1335

パターン名: SANKOU Max — stats 35 Notahotel Architects
概要: SANKOU100 sample setから展開したstats向けfooter構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 2455px、主要ブロック group, columns, column, heading, paragraph, column, list, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-35-notahotel-architects"} /-->

CSS:
.section-sankoumax-stats-35-notahotel-architects { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-35-notahotel-architects').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 36 Montblanc Pictures

sankoumax-stats-36-montblanc-pictures

Copy

Link

NEWS

Montblanc Pictures から抽出した告知導線。重要なお知らせを短く表示します。

確認する

パターン名: SANKOU Max — stats 36 Montblanc Pictures
概要: SANKOU100 sample setから展開したstats向けalert構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 2416px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-36-montblanc-pictures"} /-->

CSS:
.section-sankoumax-stats-36-montblanc-pictures { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-36-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 37 Tattoo Rays

sankoumax-stats-37-tattoo-rays

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

パターン名: SANKOU Max — stats 37 Tattoo Rays
概要: SANKOU100 sample setから展開したstats向けmap構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2377px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-37-tattoo-rays"} /-->

CSS:
.section-sankoumax-stats-37-tattoo-rays { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-37-tattoo-rays').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 38 Rim Jins

sankoumax-stats-38-rim-jins

Copy

Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する

パターン名: SANKOU Max — stats 38 Rim Jins
概要: SANKOU100 sample setから展開したstats向けform構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 2398px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-38-rim-jins"} /-->

CSS:
.section-sankoumax-stats-38-rim-jins { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-38-rim-jins').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 39 Obunko

sankoumax-stats-39-obunko

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

商品、採用、サービス紹介で情報量を抑えて見せるタブ型。

パターン名: SANKOU Max — stats 39 Obunko
概要: SANKOU100 sample setから展開したstats向けtabs構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2319px、主要ブロック group, group, columns, column, group, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-39-obunko"} /-->

CSS:
.section-sankoumax-stats-39-obunko { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-39-obunko').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 40 Pronets Recruit

sankoumax-stats-40-pronets-recruit

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

パターン名: SANKOU Max — stats 40 Pronets Recruit
概要: SANKOU100 sample setから展開したstats向けdashboard構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 2420px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-40-pronets-recruit"} /-->

CSS:
.section-sankoumax-stats-40-pronets-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-40-pronets-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 41 Glanta

sankoumax-stats-41-glanta

Copy

Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

パターン名: SANKOU Max — stats 41 Glanta
概要: SANKOU100 sample setから展開したstats向けfaq構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2261px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-41-glanta"} /-->

CSS:
.section-sankoumax-stats-41-glanta { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-41-glanta').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 42 Tashi Portfolio

sankoumax-stats-42-tashi-portfolio

Copy

Link

Detail

パターン名: SANKOU Max — stats 42 Tashi Portfolio
概要: SANKOU100 sample setから展開したstats向けgallery構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2462px、主要ブロック group, columns, column, image, column, image, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-42-tashi-portfolio"} /-->

CSS:
.section-sankoumax-stats-42-tashi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-42-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 43 Kitanohashi

sankoumax-stats-43-kitanohashi

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — stats 43 Kitanohashi
概要: SANKOU100 sample setから展開したstats向けroster構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2463px、主要ブロック group, heading, columns, column, image, paragraph, column, image

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-43-kitanohashi"} /-->

CSS:
.section-sankoumax-stats-43-kitanohashi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-43-kitanohashi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 44 Morinosato Clinic

sankoumax-stats-44-morinosato-clinic

Copy

Link

1344

Morinosato Clinic

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

パターン名: SANKOU Max — stats 44 Morinosato Clinic
概要: SANKOU100 sample setから展開したstats向けmanifesto構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2244px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-44-morinosato-clinic"} /-->

CSS:
.section-sankoumax-stats-44-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-44-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 45 Asuzac Highschool

sankoumax-stats-45-asuzac-highschool

Copy

Link

Sampled Site

1345 / Asuzac Highschool

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

パターン名: SANKOU Max — stats 45 Asuzac Highschool
概要: SANKOU100 sample setから展開したstats向けcover構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 28% / 72%、推奨コンテンツ幅 5015px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-45-asuzac-highschool"} /-->

CSS:
.section-sankoumax-stats-45-asuzac-highschool { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-45-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 46 Junni Newyear

sankoumax-stats-46-junni-newyear

Copy

Link

Split Story

写真と要点で信頼を作る

Junni Newyear の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

パターン名: SANKOU Max — stats 46 Junni Newyear
概要: SANKOU100 sample setから展開したstats向けsplit構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 2386px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-46-junni-newyear"} /-->

CSS:
.section-sankoumax-stats-46-junni-newyear { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-46-junni-newyear').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 47 Mizota Ks

sankoumax-stats-47-mizota-ks

Copy

Link

Card Flow

迷わない比較カード

Mizota Ks から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: SANKOU Max — stats 47 Mizota Ks
概要: SANKOU100 sample setから展開したstats向けcards構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2427px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-47-mizota-ks"} /-->

CSS:
.section-sankoumax-stats-47-mizota-ks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-47-mizota-ks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 48 Nissan Career

sankoumax-stats-48-nissan-career

Copy

Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

1348

パターン名: SANKOU Max — stats 48 Nissan Career
概要: SANKOU100 sample setから展開したstats向けcollage構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 38% / 32% / 1px、推奨コンテンツ幅 2468px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをミニマルに見せる余白重視版 / Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-48-nissan-career"} /-->

CSS:
.section-sankoumax-stats-48-nissan-career { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-48-nissan-career').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 49 Shueisha Recruit

sankoumax-stats-49-shueisha-recruit

Copy

Link

Shueisha

About

Works

Journal

Contact

パターン名: SANKOU Max — stats 49 Shueisha Recruit
概要: SANKOU100 sample setから展開したstats向けrail構成。
使用目的: Statistics領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2529px、主要ブロック group, columns, column, heading, column, columns, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Statisticsをリッチに見せるカバー/カード強調版 / Statisticsをコーポレート向けに整える情報密度高め版 / Statisticsをカジュアルに見せるアイコン/ラベル強調版 / Statisticsをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-stats-49-shueisha-recruit"} /-->

CSS:
.section-sankoumax-stats-49-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-stats-49-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — stats 50 Sanu Weekday

sankoumax-stats-50-sanu-weekday

Copy

Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

背景を伝える
選ぶ理由を示す
次の行動へ進める