検索…

カタログ統計

CATALOG › Business › Pricing

料金プラン

サブスクリプション、買い切り、比較表。意思決定の最終ステップ。

Patterns

Business

Group

isValid=0

Verified

CSS

Animation

Pricing — 3 Tier with Featured

pricing-3tier

Copy

Link

PRICING

シンプルな料金体系

あなたのチームに最適なプランをお選びください。

Starter

小規模チームに最適

¥0

/ 月・永久無料

✓ 3 ユーザーまで
✓ 基本機能
✓ コミュニティサポート
✓ 1 GB ストレージ

無料で始める

★ MOST POPULAR

Pro

成長するチーム向け

¥2,980

/ ユーザー / 月

✓ 無制限ユーザー
✓ 全機能アクセス
✓ 優先サポート
✓ 100 GB ストレージ
✓ API アクセス

14 日間無料トライアル

Enterprise

大規模組織向け

Custom

お見積もりいたします

✓ Pro の全機能
✓ SSO ・ SAML
✓ 専任カスタマーサクセス
✓ 無制限ストレージ
✓ SLA 保証

お問い合わせ

パターン名: Pricing — 3 Tier with Featured
概要: Three pricing cards with the middle tier highlighted on a gradient.
使用目的: Pricing領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px、推奨コンテンツ幅 1180px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/pricing-3tier"} /-->

CSS:
.section-pricing-3tier { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-pricing-3tier').forEach((el) => el.dataset.ready = 'true');

Pricing — 4 Tier Compact

pricing-compare-4col

Copy

Link

プランを比較する

最適なプランをひと目で。

Personal

¥980

/ 月

1 ユーザー
5 GB

Team

¥2,980

/ 月

10 ユーザー
100 GB

★ Business

¥9,800

/ 月

無制限
1 TB

Enterprise

Custom

お見積もり

SSO ・ SLA
無制限

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/pricing-compare-4col"} /-->

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

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

Pricing — Feature Comparison Table

pricing-comparison-table

Copy

Link

プラン比較

	Free	Pro	Enterprise
プロジェクト数	3	無制限	無制限
ストレージ	1 GB	100 GB	1 TB
チームメンバー	1	10	無制限
優先サポート	—	✓	✓
SLA 99.9%	—	—	✓

パターン名: Pricing — Feature Comparison Table
概要: Striped comparison table listing features across Free / Pro / Enterprise tiers.
使用目的: Pricing領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, heading, table

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

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

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

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

Pricing — Simple Monthly / Annual

pricing-simple-2tier

Copy

Link

SIMPLE PRICING

月額 or 年額、どちらでも

月額プラン

¥1,980

/ ユーザー / 月

✓ いつでもキャンセル可能
✓ 月単位の請求
✓ メールサポート

月額で始める

2 ヶ月分お得

年額プラン

¥19,800

/ ユーザー / 年（実質 ¥1,650/月）

✓ 年間 2 ヶ月無料
✓ 優先サポート
✓ 早期アクセス機能

年額で始める

パターン名: Pricing — Simple Monthly / Annual
概要: Two-tier dark pricing with monthly and annual plans, annual highlighted on a purple gradient.
使用目的: Pricing領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 960px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/pricing-simple-2tier"} /-->

CSS:
.section-pricing-simple-2tier { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-pricing-simple-2tier').forEach((el) => el.dataset.ready = 'true');

Pricing — Single Recommended Card

pricing-single-emphasis

Copy

Link

★ RECOMMENDED

Pro プラン

¥2,980/月

初回 14 日間無料・いつでも解約可能

無料で始める

パターン名: Pricing — Single Recommended Card
概要: Solo pricing card emphasizing the recommended plan with brand-color border.
使用目的: Pricing領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 2px、推奨コンテンツ幅 420px、主要ブロック group, group, paragraph, heading, paragraph, paragraph, buttons, button

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/pricing-single-emphasis"} /-->

CSS:
.section-pricing-single-emphasis { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-pricing-single-emphasis').forEach((el) => el.dataset.ready = 'true');

Reference Complete — pricing 01 Sticky Entry

reference-complete-pricing-01-sticky-entry-sanu-weekday

Copy

Link

Sampled Site

14801 / Sanu Weekday

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

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

詳しく見る

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

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

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

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

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

Reference Complete — pricing 02 Editorial Issue

reference-complete-pricing-02-editorial-issue-miyakawa-lab

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

Reference Complete — pricing 03 Brand Index

reference-complete-pricing-03-brand-index-yokohama-timberwharf

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-pricing-03-brand-index-yokohama-timberwharf"} /-->

CSS:
.section-reference-complete-pricing-03-brand-index-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-pricing-03-brand-index-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');

Reference Complete — pricing 04 Recruit Story

reference-complete-pricing-04-recruit-story-kamata-shoyu

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

Reference Complete — pricing 05 Commerce Compare

reference-complete-pricing-05-commerce-compare-kiyasuku

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

Reference Complete — pricing 06 Timeline Proof

reference-complete-pricing-06-timeline-proof-montblanc-pictures

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

Reference Complete — pricing 07 Gallery Led

reference-complete-pricing-07-gallery-led-pronets-recruit

Copy

Link

Detail

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

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

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

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

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

Reference Complete — pricing 08 Dashboard Proof

reference-complete-pricing-08-dashboard-proof-mejinavi

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

Reference Complete — pricing 09 Contact Ready

reference-complete-pricing-09-contact-ready-undimension

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

Reference Complete — pricing 10 Mobile Rail

reference-complete-pricing-10-mobile-rail-palcloset-fashion

Copy

Link

Palcloset

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-pricing-10-mobile-rail-palcloset-fashion"} /-->

CSS:
.section-reference-complete-pricing-10-mobile-rail-palcloset-fashion { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-pricing-10-mobile-rail-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 020 Tenten

sankou100-020-tenten

Copy

Link

020

Tenten

静かな思想を置く

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

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

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

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

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

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

SANKOU100 — 060 Morinosato Clinic

sankou100-060-morinosato-clinic

Copy

Link

060

Morinosato Clinic

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-060-morinosato-clinic"} /-->

CSS:
.section-sankou100-060-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

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

SANKOU100 — 100 Greenpark Santo

sankou100-100-greenpark-santo

Copy

Link

100

Greenpark Santo

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-100-greenpark-santo"} /-->

CSS:
.section-sankou100-100-greenpark-santo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-100-greenpark-santo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — pricing 01 Daimatsu

sankoumax-pricing-01-daimatsu

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-01-daimatsu"} /-->

CSS:
.section-sankoumax-pricing-01-daimatsu { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — pricing 02 Omotesando Ortho

sankoumax-pricing-02-omotesando-ortho

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-02-omotesando-ortho"} /-->

CSS:
.section-sankoumax-pricing-02-omotesando-ortho { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-pricing-02-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — pricing 03 Dodasports

sankoumax-pricing-03-dodasports

Copy

Link

Collage

素材感を重ねる

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

1803

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

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

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

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

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

SANKOU Max — pricing 04 Ja Aichi Recruit

sankoumax-pricing-04-ja-aichi-recruit

Copy

Link

Ja

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-04-ja-aichi-recruit"} /-->

CSS:
.section-sankoumax-pricing-04-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-pricing-04-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — pricing 05 Kiyasuku

sankoumax-pricing-05-kiyasuku

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

SANKOU Max — pricing 06 Hirono Recruit

sankoumax-pricing-06-hirono-recruit

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-06-hirono-recruit"} /-->

CSS:
.section-sankoumax-pricing-06-hirono-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — pricing 07 Ichizenbooks

sankoumax-pricing-07-ichizenbooks

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-07-ichizenbooks"} /-->

CSS:
.section-sankoumax-pricing-07-ichizenbooks { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — pricing 08 Mec Residence Recruit

sankoumax-pricing-08-mec-residence-recruit

Copy

Link

数字で納得させる

78%

改善率

11分

短縮

12756

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-08-mec-residence-recruit"} /-->

CSS:
.section-sankoumax-pricing-08-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-pricing-08-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — pricing 09 Greenpark Santo

sankoumax-pricing-09-greenpark-santo

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-09-greenpark-santo"} /-->

CSS:
.section-sankoumax-pricing-09-greenpark-santo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-pricing-09-greenpark-santo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — pricing 10 Land Sapporo

sankoumax-pricing-10-land-sapporo

Copy

Link

Land Sapporo

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

About
Service
Works

News
Recruit
Contact

Sample 1810

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-10-land-sapporo"} /-->

CSS:
.section-sankoumax-pricing-10-land-sapporo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — pricing 11 Tokachi Fruits

sankoumax-pricing-11-tokachi-fruits

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-11-tokachi-fruits"} /-->

CSS:
.section-sankoumax-pricing-11-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-pricing-11-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — pricing 12 Echitora

sankoumax-pricing-12-echitora

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-12-echitora"} /-->

CSS:
.section-sankoumax-pricing-12-echitora { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — pricing 13 Megamis

sankoumax-pricing-13-megamis

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — pricing 14 Kagami

sankoumax-pricing-14-kagami

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-14-kagami"} /-->

CSS:
.section-sankoumax-pricing-14-kagami { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — pricing 15 Antscr

sankoumax-pricing-15-antscr

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — pricing 16 Meisei Kg

sankoumax-pricing-16-meisei-kg

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-16-meisei-kg"} /-->

CSS:
.section-sankoumax-pricing-16-meisei-kg { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-pricing-16-meisei-kg').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — pricing 17 Iamwithyou

sankoumax-pricing-17-iamwithyou

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-17-iamwithyou"} /-->

CSS:
.section-sankoumax-pricing-17-iamwithyou { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — pricing 18 Depsoa

sankoumax-pricing-18-depsoa

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — pricing 19 Nothing Tech

sankoumax-pricing-19-nothing-tech

Copy

Link

1819

Nothing Tech

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-19-nothing-tech"} /-->

CSS:
.section-sankoumax-pricing-19-nothing-tech { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-pricing-19-nothing-tech').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — pricing 20 Upvege

sankoumax-pricing-20-upvege

Copy

Link

Sampled Site

1820 / Upvege

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — pricing 21 Fujiya1935

sankoumax-pricing-21-fujiya1935

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-21-fujiya1935"} /-->

CSS:
.section-sankoumax-pricing-21-fujiya1935 { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — pricing 22 Omodakaya

sankoumax-pricing-22-omodakaya

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-22-omodakaya"} /-->

CSS:
.section-sankoumax-pricing-22-omodakaya { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — pricing 23 Favtown

sankoumax-pricing-23-favtown

Copy

Link

Collage

素材感を重ねる

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

1823

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

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

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

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

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

SANKOU Max — pricing 24 Mizuya Kyoto

sankoumax-pricing-24-mizuya-kyoto

Copy

Link

Mizuya

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-24-mizuya-kyoto"} /-->

CSS:
.section-sankoumax-pricing-24-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — pricing 25 Allright Inc

sankoumax-pricing-25-allright-inc

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-25-allright-inc"} /-->

CSS:
.section-sankoumax-pricing-25-allright-inc { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — pricing 26 Jins Holdings

sankoumax-pricing-26-jins-holdings

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-pricing-26-jins-holdings"} /-->

CSS:
.section-sankoumax-pricing-26-jins-holdings { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-pricing-26-jins-holdings').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — pricing 27 Tsuchitokaze

sankoumax-pricing-27-tsuchitokaze

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — pricing 28 Yamato 50Th

sankoumax-pricing-28-yamato-50th

Copy

Link

数字で納得させる

28%

改善率

4分

短縮

12896

導入数

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

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

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

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

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

SANKOU Max — pricing 29 Action Npo

sankoumax-pricing-29-action-npo

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — pricing 30 Mycampus

sankoumax-pricing-30-mycampus

Copy

Link

Mycampus

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

About
Service
Works

News
Recruit
Contact

Sample 1830

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

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

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

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

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

SANKOU Max — pricing 31 Mejinavi

sankoumax-pricing-31-mejinavi

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — pricing 32 Niwaya

sankoumax-pricing-32-niwaya

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — pricing 33 Mindful Connect

sankoumax-pricing-33-mindful-connect

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — pricing 34 Spicato Daruma

sankoumax-pricing-34-spicato-daruma

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — pricing 35 Morohoshi Portfolio

sankoumax-pricing-35-morohoshi-portfolio

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — pricing 36 Vision Structure

sankoumax-pricing-36-vision-structure

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — pricing 37 Nakiri Shota

sankoumax-pricing-37-nakiri-shota

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — pricing 38 Koba Clinic

sankoumax-pricing-38-koba-clinic

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — pricing 39 Ems Recruit

sankoumax-pricing-39-ems-recruit

Copy

Link

1839

Ems Recruit

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — pricing 40 Felissimo Panda

sankoumax-pricing-40-felissimo-panda

Copy

Link

Sampled Site

1840 / Felissimo Panda

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — pricing 41 Iriam Miraito

sankoumax-pricing-41-iriam-miraito

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — pricing 42 Gaaboo

sankoumax-pricing-42-gaaboo

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

SANKOU Max — pricing 43 Violet Patisserie

sankoumax-pricing-43-violet-patisserie

Copy

Link

Collage

素材感を重ねる

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

1843

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

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

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

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

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

SANKOU Max — pricing 44 Nii Recruit

sankoumax-pricing-44-nii-recruit

Copy

Link

Nii

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU Max — pricing 45 Saranosono

sankoumax-pricing-45-saranosono

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

SANKOU Max — pricing 46 Dac Web

sankoumax-pricing-46-dac-web

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

SANKOU Max — pricing 47 Asuzac Recruit

sankoumax-pricing-47-asuzac-recruit

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — pricing 48 Suntory Sic

sankoumax-pricing-48-suntory-sic

Copy

Link

数字で納得させる

48%

改善率

6分

短縮

13036

導入数

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

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

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

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

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

SANKOU Max — pricing 49 Amano Clinic

sankoumax-pricing-49-amano-clinic

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — pricing 50 Infocus

sankoumax-pricing-50-infocus

Copy

Link

Infocus

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

About
Service
Works

News
Recruit
Contact

Sample 1850

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

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

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

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

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

SANKOU Max — pricing 51 Tomore

sankoumax-pricing-51-tomore

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — pricing 52 Dan Brise Barber

sankoumax-pricing-52-dan-brise-barber

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

◈ Blanc Nail

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

Foundations

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

Content

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

Business

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

UI Components

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

料金プラン · Pricing · Blanc Nail

料金プラン

シンプルな料金体系

Starter

Pro

Enterprise

プランを比較する

プラン比較

月額 or 年額、どちらでも

月額プラン

年額プラン

Pro プラン

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

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

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Palcloset

静かな思想を置く

静かな思想を置く

静かな思想を置く

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Ja

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

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

78%

11分

12756

次の相談先を明確にする

Land Sapporo

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

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

People Line

静かな思想を置く

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

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Mizuya

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

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

28%

4分

12896

次の相談先を明確にする