検索…

カタログ統計

CATALOG › Content › Features

フィーチャー

サービスの強みを並列に提示。3 / 4 / 6 列のグリッドバリエーション。

Patterns

Content

Group

isValid=0

Verified

CSS

Animation

Features — 3 Column Icon Cards

features-3col-icons

Copy

Link

FEATURES

選ばれる3つの理由

⚡

高速パフォーマンス

ミリ秒単位で応答する最適化されたエンジン。大規模トラフィックでも安定した動作を保証します。

🛡️

エンタープライズ級セキュリティ

SOC 2 Type II 認定、エンドツーエンド暗号化、ロールベースのアクセス制御で大切なデータを保護。

🚀

かんたんスケーリング

ワンクリックで容量を拡張。需要に応じて自動でリソースを最適化、コストを抑えながら成長を支援。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/features-3col-icons"} /-->

CSS:
.section-features-3col-icons { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-3col-icons').forEach((el) => el.dataset.ready = 'true');

Features — Alternating Image Rows

features-alternating

Copy

Link

🎨 DESIGN

美しさは、機能の一部

細部まで磨き上げられたインターフェース。視覚的な階層、色彩のバランス、タイポグラフィの調和。すべてが一つの体験として機能します。

⚙️ ENGINEERING

堅牢なアーキテクチャ

マイクロサービス、自動スケーリング、グローバル CDN。最先端の技術スタックで、99.99% の稼働率と数百万リクエスト/秒の処理を実現。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/features-alternating"} /-->

CSS:
.section-features-alternating { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-alternating').forEach((el) => el.dataset.ready = 'true');

Features — Bento Grid

features-bento

Copy

Link

プラットフォーム全体像

⚡ Real-time

瞬時に反映されるデータ更新

WebSocket ベースのリアルタイム同期。チームメンバーの操作が即座に画面へ反映されます。

🔐

セキュア

SOC 2 / GDPR 準拠

🌍

グローバル

200+ エッジロケーション

✨ AI Powered

AI が支援する次世代ワークフロー

繰り返し作業を自動化、提案を生成、エラーを事前に発見。あなたの仕事を 10倍速く。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/features-bento"} /-->

CSS:
.section-features-bento { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-bento').forEach((el) => el.dataset.ready = 'true');

Features — Numbered Steps

features-numbered

Copy

Link

導入までの 4 ステップ

01

サインアップ

メールアドレスだけで 30 秒以内にアカウント作成。

02

セットアップ

ガイド付きセットアップで 5 分以内に環境準備完了。

03

カスタマイズ

ニーズに合わせて柔軟に調整、テンプレートも充実。

04

ローンチ

ワンクリックで本番環境へ、世界中のユーザーへ届けます。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/features-numbered"} /-->

CSS:
.section-features-numbered { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-numbered').forEach((el) => el.dataset.ready = 'true');

Reference Brand — Service Feature Band

reference-brand-service-feature-band

Copy

Link

service points

機能説明ではなく、体験価値として見せる。

空気感

写真や余白で印象を先に伝えます。

導線

次に見てほしいページを自然に提示します。

信頼

実績や人の情報へスムーズにつなぎます。

パターン名: Reference Brand — Service Feature Band
概要: ブランドサイト向けに体験価値で見せる特徴セクション。
使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1120px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-brand-service-feature-band"} /-->

CSS:
.section-reference-brand-service-feature-band { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-brand-service-feature-band').forEach((el) => el.dataset.ready = 'true');

Reference Complete — features 01 Sticky Entry

reference-complete-features-01-sticky-entry-chiba-dojo

Copy

Link

Sampled Site

14201 / Chiba Dojo

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

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

詳しく見る

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

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

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

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

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

Reference Complete — features 02 Editorial Issue

reference-complete-features-02-editorial-issue-kamata-shoyu

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

Reference Complete — features 03 Brand Index

reference-complete-features-03-brand-index-anbe-shoten

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-features-03-brand-index-anbe-shoten"} /-->

CSS:
.section-reference-complete-features-03-brand-index-anbe-shoten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-features-03-brand-index-anbe-shoten').forEach((el) => el.dataset.ready = 'true');

Reference Complete — features 04 Recruit Story

reference-complete-features-04-recruit-story-fujiya1935

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

Reference Complete — features 05 Commerce Compare

reference-complete-features-05-commerce-compare-palcloset-fashion

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

Reference Complete — features 06 Timeline Proof

reference-complete-features-06-timeline-proof-violet-patisserie

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

Reference Complete — features 07 Gallery Led

reference-complete-features-07-gallery-led-asuzac-recruit

Copy

Link

Detail

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

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

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

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

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

Reference Complete — features 08 Dashboard Proof

reference-complete-features-08-dashboard-proof-nissan-career

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

Reference Complete — features 09 Contact Ready

reference-complete-features-09-contact-ready-allright-inc

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

Reference Complete — features 10 Mobile Rail

reference-complete-features-10-mobile-rail-action-npo

Copy

Link

Action

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-features-10-mobile-rail-action-npo"} /-->

CSS:
.section-reference-complete-features-10-mobile-rail-action-npo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-features-10-mobile-rail-action-npo').forEach((el) => el.dataset.ready = 'true');

SANKOU — Clinic Blob Service Hero

sankou-clinic-blob-service-hero

Copy

Link

Clinic guide

迷わず選べる診療入口

大きな番号と丸いサービス面で、初診ユーザーの選択を簡単にします。

01

発熱外来

02

小児診療

03

予約相談

パターン名: SANKOU — Clinic Blob Service Hero
概要: 医療・保育・教育向けの丸いサービス入口レイアウト。
使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-clinic-blob-service-hero"} /-->

CSS:
.section-sankou-clinic-blob-service-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-clinic-blob-service-hero').forEach((el) => el.dataset.ready = 'true');

SANKOU — Lab Illustration Bulletin

sankou-lab-illustration-bulletin

Copy

Link

Lab / Culture

良い休息を研究する

働くこと

制度や研究テーマを短く示す。

休むこと

生活の余白も同じ重さで並べる。

パターン名: SANKOU — Lab Illustration Bulletin
概要: 研究室・採用・カルチャー紹介向けの掲示板風レイアウト。
使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 1px / 1px / 50%、推奨コンテンツ幅 1140px、主要ブロック group, columns, column, paragraph, heading, columns, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-lab-illustration-bulletin"} /-->

CSS:
.section-sankou-lab-illustration-bulletin { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-lab-illustration-bulletin').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 002 Sanu Weekday

sankou100-002-sanu-weekday

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-002-sanu-weekday"} /-->

CSS:
.section-sankou100-002-sanu-weekday { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-002-sanu-weekday').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 042 Antscr

sankou100-042-antscr

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU100 — 082 Morohoshi Portfolio

sankou100-082-morohoshi-portfolio

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-082-morohoshi-portfolio"} /-->

CSS:
.section-sankou100-082-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — features 01 Antscr

sankoumax-features-01-antscr

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — features 02 Meisei Kg

sankoumax-features-02-meisei-kg

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — features 03 Iamwithyou

sankoumax-features-03-iamwithyou

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — features 04 Depsoa

sankoumax-features-04-depsoa

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — features 05 Nothing Tech

sankoumax-features-05-nothing-tech

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — features 06 Upvege

sankoumax-features-06-upvege

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — features 07 Fujiya1935

sankoumax-features-07-fujiya1935

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — features 08 Omodakaya

sankoumax-features-08-omodakaya

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — features 09 Favtown

sankoumax-features-09-favtown

Copy

Link

1209

Favtown

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — features 10 Mizuya Kyoto

sankoumax-features-10-mizuya-kyoto

Copy

Link

Sampled Site

1210 / Mizuya Kyoto

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — features 11 Allright Inc

sankoumax-features-11-allright-inc

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — features 12 Jins Holdings

sankoumax-features-12-jins-holdings

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

SANKOU Max — features 13 Tsuchitokaze

sankoumax-features-13-tsuchitokaze

Copy

Link

Collage

素材感を重ねる

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

1213

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

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

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

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

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

SANKOU Max — features 14 Yamato 50Th

sankoumax-features-14-yamato-50th

Copy

Link

Yamato

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU Max — features 15 Action Npo

sankoumax-features-15-action-npo

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

SANKOU Max — features 16 Mycampus

sankoumax-features-16-mycampus

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

SANKOU Max — features 17 Mejinavi

sankoumax-features-17-mejinavi

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — features 18 Niwaya

sankoumax-features-18-niwaya

Copy

Link

数字で納得させる

48%

改善率

6分

短縮

8626

導入数

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

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

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

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

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

SANKOU Max — features 19 Mindful Connect

sankoumax-features-19-mindful-connect

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — features 20 Spicato Daruma

sankoumax-features-20-spicato-daruma

Copy

Link

Spicato Daruma

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

About
Service
Works

News
Recruit
Contact

Sample 1220

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

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

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

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

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

SANKOU Max — features 21 Morohoshi Portfolio

sankoumax-features-21-morohoshi-portfolio

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — features 22 Vision Structure

sankoumax-features-22-vision-structure

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — features 23 Nakiri Shota

sankoumax-features-23-nakiri-shota

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — features 24 Koba Clinic

sankoumax-features-24-koba-clinic

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — features 25 Ems Recruit

sankoumax-features-25-ems-recruit

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — features 26 Felissimo Panda

sankoumax-features-26-felissimo-panda

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — features 27 Iriam Miraito

sankoumax-features-27-iriam-miraito

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — features 28 Gaaboo

sankoumax-features-28-gaaboo

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — features 29 Violet Patisserie

sankoumax-features-29-violet-patisserie

Copy

Link

1229

Violet Patisserie

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — features 30 Nii Recruit

sankoumax-features-30-nii-recruit

Copy

Link

Sampled Site

1230 / Nii Recruit

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — features 31 Saranosono

sankoumax-features-31-saranosono

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — features 32 Dac Web

sankoumax-features-32-dac-web

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

SANKOU Max — features 33 Asuzac Recruit

sankoumax-features-33-asuzac-recruit

Copy

Link

Collage

素材感を重ねる

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

1233

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

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

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

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

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

SANKOU Max — features 34 Suntory Sic

sankoumax-features-34-suntory-sic

Copy

Link

Suntory

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU Max — features 35 Amano Clinic

sankoumax-features-35-amano-clinic

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

SANKOU Max — features 36 Infocus

sankoumax-features-36-infocus

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

SANKOU Max — features 37 Tomore

sankoumax-features-37-tomore

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — features 38 Dan Brise Barber

sankoumax-features-38-dan-brise-barber

Copy

Link

数字で納得させる

68%

改善率

8分

短縮

8766

導入数

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

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

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

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

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

SANKOU Max — features 39 Allureville Elements

sankoumax-features-39-allureville-elements

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — features 40 Studio Cbr

sankoumax-features-40-studio-cbr

Copy

Link

Studio Cbr

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

About
Service
Works

News
Recruit
Contact

Sample 1240

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

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

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

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

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

SANKOU Max — features 41 Yamakachi

sankoumax-features-41-yamakachi

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — features 42 Chiikawa Pocket

sankoumax-features-42-chiikawa-pocket

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — features 43 Chiba Dojo

sankoumax-features-43-chiba-dojo

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — features 44 Twoe

sankoumax-features-44-twoe

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — features 45 Kamata Shoyu

sankoumax-features-45-kamata-shoyu

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — features 46 Fumino

sankoumax-features-46-fumino

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — features 47 Anbe Shoten

sankoumax-features-47-anbe-shoten

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — features 48 Plaid Alpha

sankoumax-features-48-plaid-alpha

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — features 49 Undimension

sankoumax-features-49-undimension

Copy

Link

1249

Undimension

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — features 50 Norikura Hanabi

sankoumax-features-50-norikura-hanabi

Copy

Link

Sampled Site

1250 / Norikura Hanabi

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

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

詳しく見る

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

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

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

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

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

◈ Blanc Nail

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

Foundations

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

Content

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

Business

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

UI Components

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

フィーチャー · Features · Blanc Nail

フィーチャー

選ばれる3つの理由

高速パフォーマンス

エンタープライズ級セキュリティ

かんたんスケーリング

美しさは、機能の一部

堅牢なアーキテクチャ

プラットフォーム全体像

瞬時に反映されるデータ更新

セキュア

グローバル

AI が支援する次世代ワークフロー

導入までの 4 ステップ

01

サインアップ

02

セットアップ

03

カスタマイズ

04

ローンチ

機能説明ではなく、体験価値として見せる。

空気感

導線

信頼

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

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

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Action

迷わず選べる診療入口

01

02

03

良い休息を研究する

写真と要点で信頼を作る

写真と要点で信頼を作る

写真と要点で信頼を作る

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

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

People Line

静かな思想を置く

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

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Yamato

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

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

48%

6分

8626

次の相談先を明確にする

Spicato Daruma