検索…

カタログ統計

CATALOG › Data & Flow › Comparison

比較

プラン比較、競合との対比、ビフォア/アフターの可視化。

Patterns

Data & Flow

Group

isValid=0

Verified

CSS

Animation

Comparison — Decision Scorecards

comparison-decision-scorecards

Copy

Link

DECISION SUPPORT

導入前後の判断スコア

Speed

Before

手作業 6h

After

自動化 15m

Cost

Before

月 18 万円

After

月 6 万円

Risk

Before

属人化高

After

標準化済

パターン名: Comparison — Decision Scorecards
概要: Scorecard-style comparison for before/after decision criteria.
使用目的: Comparison領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-decision-scorecards"} /-->

CSS:
.section-comparison-decision-scorecards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-decision-scorecards').forEach((el) => el.dataset.ready = 'true');

Comparison — Plan Feature Matrix

comparison-feature-matrix

Copy

Link

プラン比較

機能

FREE

PRO

プロジェクト数

3 件まで

無制限

チームメンバー

2 人まで

無制限

優先サポート

—

✓

SSO ログイン

—

✓

パターン名: Comparison — Plan Feature Matrix
概要: Two-plan feature matrix with checkmarks and dash placeholders.
使用目的: Comparison領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 880px、主要ブロック group, heading, group, group, paragraph, paragraph, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-feature-matrix"} /-->

CSS:
.section-comparison-feature-matrix { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-feature-matrix').forEach((el) => el.dataset.ready = 'true');

Comparison — Pros / Cons List

comparison-pros-cons

Copy

Link

メリット・デメリット

○ Pros

✓ 初期費用なしで始められる

✓ 既存システムとそのまま連携

✓ 国内サポートが日本語対応

✓ 1 アカウントで複数拠点

△ Cons

△ オフライン環境では使えない

△ レガシー Excel 形式は非対応

△ 月次更新でやや重い処理あり

△ カスタム開発はオプション

パターン名: Comparison — Pros / Cons List
概要: Two-column pros / cons list with green and red category headings.
使用目的: Comparison領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 2px / 2px、推奨コンテンツ幅 880px、主要ブロック group, heading, columns, column, heading, paragraph, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-pros-cons"} /-->

CSS:
.section-comparison-pros-cons { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-pros-cons').forEach((el) => el.dataset.ready = 'true');

Comparison — Site Type Checklist

comparison-selection-checklist

Copy

Link

SITE TYPE

構築方針の選び方

小規模サイト向け

✓ 更新頻度が低い

✓ ページ数が 10 以下

✓ 問い合わせ導線が中心

成長サイト向け

✓ CMS 運用者が複数いる

✓ 記事や商品が増え続ける

✓ 計測・改善サイクルが必要

パターン名: Comparison — Site Type Checklist
概要: Two checklist cards comparing small-site and growth-site build strategies.
使用目的: Comparison領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 920px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-selection-checklist"} /-->

CSS:
.section-comparison-selection-checklist { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-selection-checklist').forEach((el) => el.dataset.ready = 'true');

Comparison — Before / After 2-Column

comparison-vs-2col

Copy

Link

これまで vs これから

BEFORE

手作業中心の運用

✕ 集計に毎週 6 時間以上

✕ 部署ごとにバラバラの数字

✕ 意思決定が後手に回る

AFTER

自動連携で意思決定が即時に

✓ 集計はリアルタイム

✓ 全社で同じダッシュボード

✓ 異常検知が自動アラート

パターン名: Comparison — Before / After 2-Column
概要: Side-by-side red/green Before vs After cards with bullet checkmarks.
使用目的: Comparison領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, heading, columns, column, group, paragraph, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/comparison-vs-2col"} /-->

CSS:
.section-comparison-vs-2col { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-comparison-vs-2col').forEach((el) => el.dataset.ready = 'true');

Reference Complete — comparison 01 Sticky Entry

reference-complete-comparison-01-sticky-entry-vision-structure

Copy

Link

Sampled Site

16501 / Vision Structure

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

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

詳しく見る

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

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

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

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

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

Reference Complete — comparison 02 Editorial Issue

reference-complete-comparison-02-editorial-issue-koba-clinic

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

Reference Complete — comparison 03 Brand Index

reference-complete-comparison-03-brand-index-felissimo-panda

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-comparison-03-brand-index-felissimo-panda"} /-->

CSS:
.section-reference-complete-comparison-03-brand-index-felissimo-panda { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-comparison-03-brand-index-felissimo-panda').forEach((el) => el.dataset.ready = 'true');

Reference Complete — comparison 04 Recruit Story

reference-complete-comparison-04-recruit-story-janu

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

Reference Complete — comparison 05 Commerce Compare

reference-complete-comparison-05-commerce-compare-dac-web

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-comparison-05-commerce-compare-dac-web"} /-->

CSS:
.section-reference-complete-comparison-05-commerce-compare-dac-web { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-comparison-05-commerce-compare-dac-web').forEach((el) => el.dataset.ready = 'true');

Reference Complete — comparison 06 Timeline Proof

reference-complete-comparison-06-timeline-proof-omodakaya

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

Reference Complete — comparison 07 Gallery Led

reference-complete-comparison-07-gallery-led-jins-holdings

Copy

Link

Detail

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

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

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

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

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

Reference Complete — comparison 08 Dashboard Proof

reference-complete-comparison-08-dashboard-proof-applebase

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

Reference Complete — comparison 09 Contact Ready

reference-complete-comparison-09-contact-ready-ja-aichi-recruit

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-comparison-09-contact-ready-ja-aichi-recruit"} /-->

CSS:
.section-reference-complete-comparison-09-contact-ready-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-comparison-09-contact-ready-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');

Reference Complete — comparison 10 Mobile Rail

reference-complete-comparison-10-mobile-rail-mec-residence-recruit

Copy

Link

Mec

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-comparison-10-mobile-rail-mec-residence-recruit"} /-->

CSS:
.section-reference-complete-comparison-10-mobile-rail-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-comparison-10-mobile-rail-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 024 Iriam Miraito

sankou100-024-iriam-miraito

Copy

Link

Collage

素材感を重ねる

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

024

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-024-iriam-miraito"} /-->

CSS:
.section-sankou100-024-iriam-miraito { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-024-iriam-miraito').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 064 Anbe Shoten

sankou100-064-anbe-shoten

Copy

Link

Collage

素材感を重ねる

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

064

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-064-anbe-shoten"} /-->

CSS:
.section-sankou100-064-anbe-shoten { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — comparison 01 Yamato 50Th

sankoumax-comparison-01-yamato-50th

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-01-yamato-50th"} /-->

CSS:
.section-sankoumax-comparison-01-yamato-50th { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-comparison-01-yamato-50th').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — comparison 02 Action Npo

sankoumax-comparison-02-action-npo

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-02-action-npo"} /-->

CSS:
.section-sankoumax-comparison-02-action-npo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-comparison-02-action-npo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — comparison 03 Mycampus

sankoumax-comparison-03-mycampus

Copy

Link

数字で納得させる

23%

改善率

5分

短縮

24621

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-03-mycampus"} /-->

CSS:
.section-sankoumax-comparison-03-mycampus { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — comparison 04 Mejinavi

sankoumax-comparison-04-mejinavi

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-04-mejinavi"} /-->

CSS:
.section-sankoumax-comparison-04-mejinavi { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — comparison 05 Niwaya

sankoumax-comparison-05-niwaya

Copy

Link

Niwaya

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

About
Service
Works

News
Recruit
Contact

Sample 3505

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

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

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

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

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

SANKOU Max — comparison 06 Mindful Connect

sankoumax-comparison-06-mindful-connect

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-06-mindful-connect"} /-->

CSS:
.section-sankoumax-comparison-06-mindful-connect { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — comparison 07 Spicato Daruma

sankoumax-comparison-07-spicato-daruma

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-07-spicato-daruma"} /-->

CSS:
.section-sankoumax-comparison-07-spicato-daruma { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-comparison-07-spicato-daruma').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — comparison 08 Morohoshi Portfolio

sankoumax-comparison-08-morohoshi-portfolio

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-08-morohoshi-portfolio"} /-->

CSS:
.section-sankoumax-comparison-08-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-comparison-08-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — comparison 09 Vision Structure

sankoumax-comparison-09-vision-structure

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-09-vision-structure"} /-->

CSS:
.section-sankoumax-comparison-09-vision-structure { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-comparison-09-vision-structure').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — comparison 10 Nakiri Shota

sankoumax-comparison-10-nakiri-shota

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-10-nakiri-shota"} /-->

CSS:
.section-sankoumax-comparison-10-nakiri-shota { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — comparison 11 Koba Clinic

sankoumax-comparison-11-koba-clinic

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-11-koba-clinic"} /-->

CSS:
.section-sankoumax-comparison-11-koba-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-comparison-11-koba-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — comparison 12 Ems Recruit

sankoumax-comparison-12-ems-recruit

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-12-ems-recruit"} /-->

CSS:
.section-sankoumax-comparison-12-ems-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-comparison-12-ems-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — comparison 13 Felissimo Panda

sankoumax-comparison-13-felissimo-panda

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-13-felissimo-panda"} /-->

CSS:
.section-sankoumax-comparison-13-felissimo-panda { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — comparison 14 Iriam Miraito

sankoumax-comparison-14-iriam-miraito

Copy

Link

3514

Iriam Miraito

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-14-iriam-miraito"} /-->

CSS:
.section-sankoumax-comparison-14-iriam-miraito { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-comparison-14-iriam-miraito').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — comparison 15 Gaaboo

sankoumax-comparison-15-gaaboo

Copy

Link

Sampled Site

3515 / Gaaboo

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — comparison 16 Violet Patisserie

sankoumax-comparison-16-violet-patisserie

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-16-violet-patisserie"} /-->

CSS:
.section-sankoumax-comparison-16-violet-patisserie { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-comparison-16-violet-patisserie').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — comparison 17 Nii Recruit

sankoumax-comparison-17-nii-recruit

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-comparison-17-nii-recruit"} /-->

CSS:
.section-sankoumax-comparison-17-nii-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-comparison-17-nii-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — comparison 18 Saranosono

sankoumax-comparison-18-saranosono

Copy

Link

Collage

素材感を重ねる

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

3518

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

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

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

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

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

SANKOU Max — comparison 19 Dac Web

sankoumax-comparison-19-dac-web

Copy

Link

Dac

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU Max — comparison 20 Asuzac Recruit

sankoumax-comparison-20-asuzac-recruit

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

SANKOU Max — comparison 21 Suntory Sic

sankoumax-comparison-21-suntory-sic

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

SANKOU Max — comparison 22 Amano Clinic

sankoumax-comparison-22-amano-clinic

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — comparison 23 Infocus

sankoumax-comparison-23-infocus

Copy

Link

数字で納得させる

43%

改善率

7分

短縮

24761

導入数

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

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

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

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

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

SANKOU Max — comparison 24 Tomore

sankoumax-comparison-24-tomore

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — comparison 25 Dan Brise Barber

sankoumax-comparison-25-dan-brise-barber

Copy

Link

Dan Brise Barber

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

About
Service
Works

News
Recruit
Contact

Sample 3525

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

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

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

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

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

SANKOU Max — comparison 26 Allureville Elements

sankoumax-comparison-26-allureville-elements

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — comparison 27 Studio Cbr

sankoumax-comparison-27-studio-cbr

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — comparison 28 Yamakachi

sankoumax-comparison-28-yamakachi

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — comparison 29 Chiikawa Pocket

sankoumax-comparison-29-chiikawa-pocket

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — comparison 30 Chiba Dojo

sankoumax-comparison-30-chiba-dojo

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — comparison 31 Twoe

sankoumax-comparison-31-twoe

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — comparison 32 Kamata Shoyu

sankoumax-comparison-32-kamata-shoyu

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — comparison 33 Fumino

sankoumax-comparison-33-fumino

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — comparison 34 Anbe Shoten

sankoumax-comparison-34-anbe-shoten

Copy

Link

3534

Anbe Shoten

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — comparison 35 Plaid Alpha

sankoumax-comparison-35-plaid-alpha

Copy

Link

Sampled Site

3535 / Plaid Alpha

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — comparison 36 Undimension

sankoumax-comparison-36-undimension

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — comparison 37 Norikura Hanabi

sankoumax-comparison-37-norikura-hanabi

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

SANKOU Max — comparison 38 Chugaitoen

sankoumax-comparison-38-chugaitoen

Copy

Link

Collage

素材感を重ねる

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

3538

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

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

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

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

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

SANKOU Max — comparison 39 Favtown Wakayama

sankoumax-comparison-39-favtown-wakayama

Copy

Link

Favtown

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU Max — comparison 40 Palcloset Fashion

sankoumax-comparison-40-palcloset-fashion

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

SANKOU Max — comparison 41 Michikusa Art

sankoumax-comparison-41-michikusa-art

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

SANKOU Max — comparison 42 Tenten

sankoumax-comparison-42-tenten

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — comparison 43 Unipos

sankoumax-comparison-43-unipos

Copy

Link

数字で納得させる

63%

改善率

9分

短縮

24901

導入数

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

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

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

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

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

SANKOU Max — comparison 44 Trail Inc

sankoumax-comparison-44-trail-inc

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — comparison 45 Applebase

sankoumax-comparison-45-applebase

Copy

Link

Applebase

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

About
Service
Works

News
Recruit
Contact

Sample 3545

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

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

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

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

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

SANKOU Max — comparison 46 Meisei Es

sankoumax-comparison-46-meisei-es

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — comparison 47 Unicell

sankoumax-comparison-47-unicell

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — comparison 48 Uki Editions

sankoumax-comparison-48-uki-editions

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — comparison 49 Kikyougaoka

sankoumax-comparison-49-kikyougaoka

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — comparison 50 J Security

sankoumax-comparison-50-j-security

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — comparison 51 Serious Ceramic

sankoumax-comparison-51-serious-ceramic

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — comparison 52 Tsumari Chamame

sankoumax-comparison-52-tsumari-chamame

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — comparison 53 Notahotel Architects

sankoumax-comparison-53-notahotel-architects

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

◈ Blanc Nail

Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。

Foundations

ヒーロー
ヘッダー
フッター
ナビゲーション
タイポグラフィ

Content

フィーチャー
スタッツ
コールトゥアクション
レビュー / 推薦
チーム

Business

料金プラン
商品 / EC
アクセス / 営業時間
メニュー (飲食)
コンタクト

UI Components

カードレイアウト
モーダル / アコーディオン
タブ / セグメント
バナー / アラート
SNS

比較 · Comparison · Blanc Nail

比較

導入前後の判断スコア

プラン比較

メリット ・ デメリット

○ Pros

△ Cons

構築方針の選び方

小規模サイト向け

成長サイト向け

これまで vs これから

手作業中心の運用

自動連携で意思決定が即時に

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

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

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Mec

素材感を重ねる

素材感を重ねる

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

23%

5分

24621

次の相談先を明確にする

Niwaya

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

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

People Line

静かな思想を置く

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

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Dac

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

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

43%

7分

24761

次の相談先を明確にする

Dan Brise Barber

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

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

People Line

メリット・デメリット