検索…
カタログ 統計
CATALOG › Motion › Gradient / Glass
グラデ / ガラス
グラスモルフィズム、グラデーションオーバーレイ、深度演出。
70
Patterns
Motion
Group
isValid=0
Verified
CSS
Animation
01
Glass — Floating Nav Pill
glass-nav-bar
◆ Glass Nav
機能
料金
ログイン
- パターン名: Glass — Floating Nav Pill
- 概要: Frosted glass navigation pill on vibrant gradient background.
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 880px、主要ブロック group, group, paragraph, group, paragraph, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/glass-nav-bar"} /-->
CSS:
.section-glass-nav-bar { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-glass-nav-bar').forEach((el) => el.dataset.ready = 'true');
02
Gradient — 3 Aurora Cards
gradient-aurora-card
🌌
Aurora
青から紫へ、夜のオーロラのような流れるグラデーション。
💎
Frosted Glass
背景がうっすら透ける、すりガラスの質感。
🌅
Sunset
夕暮れ時の空のような、あたたかな色彩のグラデーション。
- パターン名: Gradient — 3 Aurora Cards
- 概要: Three gradient cards (Aurora / Frosted Glass / Sunset) showcasing color treatments.
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px、推奨コンテンツ幅 880px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/gradient-aurora-card"} /-->
CSS:
.section-gradient-aurora-card { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-gradient-aurora-card').forEach((el) => el.dataset.ready = 'true');
03
Gradient — Feature Strip (3 Stats)
gradient-feature-strip
99.9%
稼働率
24/7
サポート
SOC 2
セキュリティ
- パターン名: Gradient — Feature Strip (3 Stats)
- 概要: Vibrant gradient strip with 3 KPI highlights (uptime / support / compliance).
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, columns, column, paragraph, paragraph, column, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/gradient-feature-strip"} /-->
CSS:
.section-gradient-feature-strip { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-gradient-feature-strip').forEach((el) => el.dataset.ready = 'true');
04
Gradient — Glass Hero (Sunset)
gradient-glass-hero
✨ NEW ・ GLASSMORPHISM
未来のインターフェース、
ここから始まる。
ガラスのような透明感と、虹のように移ろうグラデーションが調和する、新世代のビジュアル言語。
- パターン名: Gradient — Glass Hero (Sunset)
- 概要: Sunset gradient backdrop with translucent glass card hero — modern visual showcase.
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 880px、主要ブロック group, group, paragraph, heading, paragraph, buttons, button
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/gradient-glass-hero"} /-->
CSS:
.section-gradient-glass-hero { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-gradient-glass-hero').forEach((el) => el.dataset.ready = 'true');
05
Reference Complete — gradient-glass 01 Sticky Entry
reference-complete-gradient-glass-01-sticky-entry-favtown-wakayama
Sampled Site
17501 / Favtown Wakayama
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: Reference Complete — gradient-glass 01 Sticky Entry
- 概要: 参照サンプル再確認から追加したgradient-glass向け部品。固定導線つきの大判ファーストビュー。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 29% / 71%、推奨コンテンツ幅 53483px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-gradient-glass-01-sticky-entry-favtown-wakayama"} /-->
CSS:
.section-reference-complete-gradient-glass-01-sticky-entry-favtown-wakayama { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-gradient-glass-01-sticky-entry-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');
06
Reference Complete — gradient-glass 02 Editorial Issue
reference-complete-gradient-glass-02-editorial-issue-michikusa-art
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: Reference Complete — gradient-glass 02 Editorial Issue
- 概要: 参照サンプル再確認から追加したgradient-glass向け部品。雑誌的な見出しと導入文の編集レイアウト。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 18522px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-gradient-glass-02-editorial-issue-michikusa-art"} /-->
CSS:
.section-reference-complete-gradient-glass-02-editorial-issue-michikusa-art { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-gradient-glass-02-editorial-issue-michikusa-art').forEach((el) => el.dataset.ready = 'true');
07
Reference Complete — gradient-glass 03 Brand Index
reference-complete-gradient-glass-03-brand-index-unipos
Card Flow
迷わない比較カード
Unipos から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: Reference Complete — gradient-glass 03 Brand Index
- 概要: 参照サンプル再確認から追加したgradient-glass向け部品。複数ブランドやサービスを迷わせず並べる索引。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 18583px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-gradient-glass-03-brand-index-unipos"} /-->
CSS:
.section-reference-complete-gradient-glass-03-brand-index-unipos { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-gradient-glass-03-brand-index-unipos').forEach((el) => el.dataset.ready = 'true');
08
Reference Complete — gradient-glass 04 Recruit Story
reference-complete-gradient-glass-04-recruit-story-mycampus
Split Story
写真と要点で信頼を作る
Mycampus の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: Reference Complete — gradient-glass 04 Recruit Story
- 概要: 参照サンプル再確認から追加したgradient-glass向け部品。採用・企業紹介に使える人物/思想の分割構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 18544px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-gradient-glass-04-recruit-story-mycampus"} /-->
CSS:
.section-reference-complete-gradient-glass-04-recruit-story-mycampus { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-gradient-glass-04-recruit-story-mycampus').forEach((el) => el.dataset.ready = 'true');
09
Reference Complete — gradient-glass 05 Commerce Compare
reference-complete-gradient-glass-05-commerce-compare-kikyougaoka
Collection Selector
Kikyougaoka の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: Reference Complete — gradient-glass 05 Commerce Compare
- 概要: 参照サンプル再確認から追加したgradient-glass向け部品。料金・商品・プランを比較しやすい構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 18605px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-gradient-glass-05-commerce-compare-kikyougaoka"} /-->
CSS:
.section-reference-complete-gradient-glass-05-commerce-compare-kikyougaoka { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-gradient-glass-05-commerce-compare-kikyougaoka').forEach((el) => el.dataset.ready = 'true');
10
Reference Complete — gradient-glass 06 Timeline Proof
reference-complete-gradient-glass-06-timeline-proof-dan-brise-barber
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: Reference Complete — gradient-glass 06 Timeline Proof
- 概要: 参照サンプル再確認から追加したgradient-glass向け部品。沿革・導入手順・制作工程の時系列。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 18546px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-gradient-glass-06-timeline-proof-dan-brise-barber"} /-->
CSS:
.section-reference-complete-gradient-glass-06-timeline-proof-dan-brise-barber { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-gradient-glass-06-timeline-proof-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');
11
Reference Complete — gradient-glass 07 Gallery Led
reference-complete-gradient-glass-07-gallery-led-chiikawa-pocket
Detail
- パターン名: Reference Complete — gradient-glass 07 Gallery Led
- 概要: 参照サンプル再確認から追加したgradient-glass向け部品。写真量の多い商材を見せるギャラリー導線。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 18627px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-gradient-glass-07-gallery-led-chiikawa-pocket"} /-->
CSS:
.section-reference-complete-gradient-glass-07-gallery-led-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-gradient-glass-07-gallery-led-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');
12
Reference Complete — gradient-glass 08 Dashboard Proof
reference-complete-gradient-glass-08-dashboard-proof-omotesando-ortho
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: Reference Complete — gradient-glass 08 Dashboard Proof
- 概要: 参照サンプル再確認から追加したgradient-glass向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 18588px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-gradient-glass-08-dashboard-proof-omotesando-ortho"} /-->
CSS:
.section-reference-complete-gradient-glass-08-dashboard-proof-omotesando-ortho { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-gradient-glass-08-dashboard-proof-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');
13
Reference Complete — gradient-glass 09 Contact Ready
reference-complete-gradient-glass-09-contact-ready-spicato-daruma
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: Reference Complete — gradient-glass 09 Contact Ready
- 概要: 参照サンプル再確認から追加したgradient-glass向け部品。問い合わせ前の入力項目を整理する導線。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 18569px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-gradient-glass-09-contact-ready-spicato-daruma"} /-->
CSS:
.section-reference-complete-gradient-glass-09-contact-ready-spicato-daruma { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-gradient-glass-09-contact-ready-spicato-daruma').forEach((el) => el.dataset.ready = 'true');
14
Reference Complete — gradient-glass 10 Mobile Rail
reference-complete-gradient-glass-10-mobile-rail-koba-clinic
Koba
About
Works
Journal
Contact
- パターン名: Reference Complete — gradient-glass 10 Mobile Rail
- 概要: 参照サンプル再確認から追加したgradient-glass向け部品。スマホ閲覧で要点を縦に追えるレール型。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 18690px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-gradient-glass-10-mobile-rail-koba-clinic"} /-->
CSS:
.section-reference-complete-gradient-glass-10-mobile-rail-koba-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-gradient-glass-10-mobile-rail-koba-clinic').forEach((el) => el.dataset.ready = 'true');
15
SANKOU100 — 033 Yamato 50Th
sankou100-033-yamato-50th
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU100 — 033 Yamato 50Th
- 概要: SANKOU! sample 033から抽出したmap型の商用サイト向け構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1073px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-033-yamato-50th"} /-->
CSS:
.section-sankou100-033-yamato-50th { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-033-yamato-50th').forEach((el) => el.dataset.ready = 'true');
16
SANKOU100 — 073 Suntory Sic
sankou100-073-suntory-sic
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU100 — 073 Suntory Sic
- 概要: SANKOU! sample 073から抽出したmap型の商用サイト向け構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1113px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-073-suntory-sic"} /-->
CSS:
.section-sankou100-073-suntory-sic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-073-suntory-sic').forEach((el) => el.dataset.ready = 'true');
17
SANKOU Max — gradient-glass 01 Koba Clinic
sankoumax-gradient-glass-01-koba-clinic
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — gradient-glass 01 Koba Clinic
- 概要: SANKOU100 sample setから展開したgradient-glass向けfaq構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5421px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-01-koba-clinic"} /-->
CSS:
.section-sankoumax-gradient-glass-01-koba-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-01-koba-clinic').forEach((el) => el.dataset.ready = 'true');
18
SANKOU Max — gradient-glass 02 Ems Recruit
sankoumax-gradient-glass-02-ems-recruit
Detail
- パターン名: SANKOU Max — gradient-glass 02 Ems Recruit
- 概要: SANKOU100 sample setから展開したgradient-glass向けgallery構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 5622px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-02-ems-recruit"} /-->
CSS:
.section-sankoumax-gradient-glass-02-ems-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-02-ems-recruit').forEach((el) => el.dataset.ready = 'true');
19
SANKOU Max — gradient-glass 03 Felissimo Panda
sankoumax-gradient-glass-03-felissimo-panda
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — gradient-glass 03 Felissimo Panda
- 概要: SANKOU100 sample setから展開したgradient-glass向けroster構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 5623px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-03-felissimo-panda"} /-->
CSS:
.section-sankoumax-gradient-glass-03-felissimo-panda { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-03-felissimo-panda').forEach((el) => el.dataset.ready = 'true');
20
SANKOU Max — gradient-glass 04 Iriam Miraito
sankoumax-gradient-glass-04-iriam-miraito
4504
Iriam Miraito
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — gradient-glass 04 Iriam Miraito
- 概要: SANKOU100 sample setから展開したgradient-glass向けmanifesto構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 5404px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-04-iriam-miraito"} /-->
CSS:
.section-sankoumax-gradient-glass-04-iriam-miraito { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-04-iriam-miraito').forEach((el) => el.dataset.ready = 'true');
21
SANKOU Max — gradient-glass 05 Gaaboo
sankoumax-gradient-glass-05-gaaboo
Sampled Site
4505 / Gaaboo
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — gradient-glass 05 Gaaboo
- 概要: SANKOU100 sample setから展開したgradient-glass向けcover構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 29% / 71%、推奨コンテンツ幅 14495px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-05-gaaboo"} /-->
CSS:
.section-sankoumax-gradient-glass-05-gaaboo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-05-gaaboo').forEach((el) => el.dataset.ready = 'true');
22
SANKOU Max — gradient-glass 06 Violet Patisserie
sankoumax-gradient-glass-06-violet-patisserie
Split Story
写真と要点で信頼を作る
Violet Patisserie の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — gradient-glass 06 Violet Patisserie
- 概要: SANKOU100 sample setから展開したgradient-glass向けsplit構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 5546px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-06-violet-patisserie"} /-->
CSS:
.section-sankoumax-gradient-glass-06-violet-patisserie { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-06-violet-patisserie').forEach((el) => el.dataset.ready = 'true');
23
SANKOU Max — gradient-glass 07 Nii Recruit
sankoumax-gradient-glass-07-nii-recruit
Card Flow
迷わない比較カード
Nii Recruit から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — gradient-glass 07 Nii Recruit
- 概要: SANKOU100 sample setから展開したgradient-glass向けcards構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5587px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-07-nii-recruit"} /-->
CSS:
.section-sankoumax-gradient-glass-07-nii-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-07-nii-recruit').forEach((el) => el.dataset.ready = 'true');
24
SANKOU Max — gradient-glass 08 Saranosono
sankoumax-gradient-glass-08-saranosono
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
4508
- パターン名: SANKOU Max — gradient-glass 08 Saranosono
- 概要: SANKOU100 sample setから展開したgradient-glass向けcollage構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 36% / 34% / 1px、推奨コンテンツ幅 5628px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-08-saranosono"} /-->
CSS:
.section-sankoumax-gradient-glass-08-saranosono { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-08-saranosono').forEach((el) => el.dataset.ready = 'true');
25
SANKOU Max — gradient-glass 09 Dac Web
sankoumax-gradient-glass-09-dac-web
Dac
About
Works
Journal
Contact
- パターン名: SANKOU Max — gradient-glass 09 Dac Web
- 概要: SANKOU100 sample setから展開したgradient-glass向けrail構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 5689px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-09-dac-web"} /-->
CSS:
.section-sankoumax-gradient-glass-09-dac-web { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-09-dac-web').forEach((el) => el.dataset.ready = 'true');
26
SANKOU Max — gradient-glass 10 Asuzac Recruit
sankoumax-gradient-glass-10-asuzac-recruit
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — gradient-glass 10 Asuzac Recruit
- 概要: SANKOU100 sample setから展開したgradient-glass向けeditorial構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 5530px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-10-asuzac-recruit"} /-->
CSS:
.section-sankoumax-gradient-glass-10-asuzac-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-10-asuzac-recruit').forEach((el) => el.dataset.ready = 'true');
27
SANKOU Max — gradient-glass 11 Suntory Sic
sankoumax-gradient-glass-11-suntory-sic
Collection Selector
Suntory Sic の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — gradient-glass 11 Suntory Sic
- 概要: SANKOU100 sample setから展開したgradient-glass向けproduct構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 5611px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-11-suntory-sic"} /-->
CSS:
.section-sankoumax-gradient-glass-11-suntory-sic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-11-suntory-sic').forEach((el) => el.dataset.ready = 'true');
28
SANKOU Max — gradient-glass 12 Amano Clinic
sankoumax-gradient-glass-12-amano-clinic
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — gradient-glass 12 Amano Clinic
- 概要: SANKOU100 sample setから展開したgradient-glass向けtimeline構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5552px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-12-amano-clinic"} /-->
CSS:
.section-sankoumax-gradient-glass-12-amano-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-12-amano-clinic').forEach((el) => el.dataset.ready = 'true');
29
SANKOU Max — gradient-glass 13 Infocus
sankoumax-gradient-glass-13-infocus
数字で納得させる
53%
改善率
7分
短縮
31691
導入数
- パターン名: SANKOU Max — gradient-glass 13 Infocus
- 概要: SANKOU100 sample setから展開したgradient-glass向けstats構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5473px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-13-infocus"} /-->
CSS:
.section-sankoumax-gradient-glass-13-infocus { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-13-infocus').forEach((el) => el.dataset.ready = 'true');
30
SANKOU Max — gradient-glass 14 Tomore
sankoumax-gradient-glass-14-tomore
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — gradient-glass 14 Tomore
- 概要: SANKOU100 sample setから展開したgradient-glass向けcontact構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 56% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 5594px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-14-tomore"} /-->
CSS:
.section-sankoumax-gradient-glass-14-tomore { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-14-tomore').forEach((el) => el.dataset.ready = 'true');
31
SANKOU Max — gradient-glass 15 Dan Brise Barber
sankoumax-gradient-glass-15-dan-brise-barber
Dan Brise Barber
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 4515
- パターン名: SANKOU Max — gradient-glass 15 Dan Brise Barber
- 概要: SANKOU100 sample setから展開したgradient-glass向けfooter構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 5635px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-15-dan-brise-barber"} /-->
CSS:
.section-sankoumax-gradient-glass-15-dan-brise-barber { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-15-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');
32
SANKOU Max — gradient-glass 16 Allureville Elements
sankoumax-gradient-glass-16-allureville-elements
NEWS
Allureville Elements から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — gradient-glass 16 Allureville Elements
- 概要: SANKOU100 sample setから展開したgradient-glass向けalert構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 5596px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-16-allureville-elements"} /-->
CSS:
.section-sankoumax-gradient-glass-16-allureville-elements { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-16-allureville-elements').forEach((el) => el.dataset.ready = 'true');
33
SANKOU Max — gradient-glass 17 Studio Cbr
sankoumax-gradient-glass-17-studio-cbr
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — gradient-glass 17 Studio Cbr
- 概要: SANKOU100 sample setから展開したgradient-glass向けmap構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5557px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-17-studio-cbr"} /-->
CSS:
.section-sankoumax-gradient-glass-17-studio-cbr { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-17-studio-cbr').forEach((el) => el.dataset.ready = 'true');
34
SANKOU Max — gradient-glass 18 Yamakachi
sankoumax-gradient-glass-18-yamakachi
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — gradient-glass 18 Yamakachi
- 概要: SANKOU100 sample setから展開したgradient-glass向けform構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 5578px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-18-yamakachi"} /-->
CSS:
.section-sankoumax-gradient-glass-18-yamakachi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-18-yamakachi').forEach((el) => el.dataset.ready = 'true');
35
SANKOU Max — gradient-glass 19 Chiikawa Pocket
sankoumax-gradient-glass-19-chiikawa-pocket
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — gradient-glass 19 Chiikawa Pocket
- 概要: SANKOU100 sample setから展開したgradient-glass向けtabs構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 5499px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-19-chiikawa-pocket"} /-->
CSS:
.section-sankoumax-gradient-glass-19-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-19-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');
36
SANKOU Max — gradient-glass 20 Chiba Dojo
sankoumax-gradient-glass-20-chiba-dojo
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — gradient-glass 20 Chiba Dojo
- 概要: SANKOU100 sample setから展開したgradient-glass向けdashboard構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 5600px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-20-chiba-dojo"} /-->
CSS:
.section-sankoumax-gradient-glass-20-chiba-dojo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-20-chiba-dojo').forEach((el) => el.dataset.ready = 'true');
37
SANKOU Max — gradient-glass 21 Twoe
sankoumax-gradient-glass-21-twoe
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — gradient-glass 21 Twoe
- 概要: SANKOU100 sample setから展開したgradient-glass向けfaq構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5441px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-21-twoe"} /-->
CSS:
.section-sankoumax-gradient-glass-21-twoe { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-21-twoe').forEach((el) => el.dataset.ready = 'true');
38
SANKOU Max — gradient-glass 22 Kamata Shoyu
sankoumax-gradient-glass-22-kamata-shoyu
Detail
- パターン名: SANKOU Max — gradient-glass 22 Kamata Shoyu
- 概要: SANKOU100 sample setから展開したgradient-glass向けgallery構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 5642px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-22-kamata-shoyu"} /-->
CSS:
.section-sankoumax-gradient-glass-22-kamata-shoyu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-22-kamata-shoyu').forEach((el) => el.dataset.ready = 'true');
39
SANKOU Max — gradient-glass 23 Fumino
sankoumax-gradient-glass-23-fumino
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — gradient-glass 23 Fumino
- 概要: SANKOU100 sample setから展開したgradient-glass向けroster構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 5643px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-23-fumino"} /-->
CSS:
.section-sankoumax-gradient-glass-23-fumino { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-23-fumino').forEach((el) => el.dataset.ready = 'true');
40
SANKOU Max — gradient-glass 24 Anbe Shoten
sankoumax-gradient-glass-24-anbe-shoten
4524
Anbe Shoten
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — gradient-glass 24 Anbe Shoten
- 概要: SANKOU100 sample setから展開したgradient-glass向けmanifesto構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 5424px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-24-anbe-shoten"} /-->
CSS:
.section-sankoumax-gradient-glass-24-anbe-shoten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-24-anbe-shoten').forEach((el) => el.dataset.ready = 'true');
41
SANKOU Max — gradient-glass 25 Plaid Alpha
sankoumax-gradient-glass-25-plaid-alpha
Sampled Site
4525 / Plaid Alpha
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — gradient-glass 25 Plaid Alpha
- 概要: SANKOU100 sample setから展開したgradient-glass向けcover構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 31% / 69%、推奨コンテンツ幅 14555px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-25-plaid-alpha"} /-->
CSS:
.section-sankoumax-gradient-glass-25-plaid-alpha { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-25-plaid-alpha').forEach((el) => el.dataset.ready = 'true');
42
SANKOU Max — gradient-glass 26 Undimension
sankoumax-gradient-glass-26-undimension
Split Story
写真と要点で信頼を作る
Undimension の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — gradient-glass 26 Undimension
- 概要: SANKOU100 sample setから展開したgradient-glass向けsplit構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 5566px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-26-undimension"} /-->
CSS:
.section-sankoumax-gradient-glass-26-undimension { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-26-undimension').forEach((el) => el.dataset.ready = 'true');
43
SANKOU Max — gradient-glass 27 Norikura Hanabi
sankoumax-gradient-glass-27-norikura-hanabi
Card Flow
迷わない比較カード
Norikura Hanabi から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — gradient-glass 27 Norikura Hanabi
- 概要: SANKOU100 sample setから展開したgradient-glass向けcards構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5607px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-27-norikura-hanabi"} /-->
CSS:
.section-sankoumax-gradient-glass-27-norikura-hanabi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-27-norikura-hanabi').forEach((el) => el.dataset.ready = 'true');
44
SANKOU Max — gradient-glass 28 Chugaitoen
sankoumax-gradient-glass-28-chugaitoen
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
4528
- パターン名: SANKOU Max — gradient-glass 28 Chugaitoen
- 概要: SANKOU100 sample setから展開したgradient-glass向けcollage構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 1px / 38% / 32% / 1px、推奨コンテンツ幅 5648px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-28-chugaitoen"} /-->
CSS:
.section-sankoumax-gradient-glass-28-chugaitoen { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-28-chugaitoen').forEach((el) => el.dataset.ready = 'true');
45
SANKOU Max — gradient-glass 29 Favtown Wakayama
sankoumax-gradient-glass-29-favtown-wakayama
Favtown
About
Works
Journal
Contact
- パターン名: SANKOU Max — gradient-glass 29 Favtown Wakayama
- 概要: SANKOU100 sample setから展開したgradient-glass向けrail構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 5709px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-29-favtown-wakayama"} /-->
CSS:
.section-sankoumax-gradient-glass-29-favtown-wakayama { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-29-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');
46
SANKOU Max — gradient-glass 30 Palcloset Fashion
sankoumax-gradient-glass-30-palcloset-fashion
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — gradient-glass 30 Palcloset Fashion
- 概要: SANKOU100 sample setから展開したgradient-glass向けeditorial構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 5550px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-30-palcloset-fashion"} /-->
CSS:
.section-sankoumax-gradient-glass-30-palcloset-fashion { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-30-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');
47
SANKOU Max — gradient-glass 31 Michikusa Art
sankoumax-gradient-glass-31-michikusa-art
Collection Selector
Michikusa Art の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — gradient-glass 31 Michikusa Art
- 概要: SANKOU100 sample setから展開したgradient-glass向けproduct構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 5631px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-31-michikusa-art"} /-->
CSS:
.section-sankoumax-gradient-glass-31-michikusa-art { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-31-michikusa-art').forEach((el) => el.dataset.ready = 'true');
48
SANKOU Max — gradient-glass 32 Tenten
sankoumax-gradient-glass-32-tenten
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — gradient-glass 32 Tenten
- 概要: SANKOU100 sample setから展開したgradient-glass向けtimeline構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5572px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-32-tenten"} /-->
CSS:
.section-sankoumax-gradient-glass-32-tenten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-32-tenten').forEach((el) => el.dataset.ready = 'true');
49
SANKOU Max — gradient-glass 33 Unipos
sankoumax-gradient-glass-33-unipos
数字で納得させる
73%
改善率
9分
短縮
31831
導入数
- パターン名: SANKOU Max — gradient-glass 33 Unipos
- 概要: SANKOU100 sample setから展開したgradient-glass向けstats構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5493px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-33-unipos"} /-->
CSS:
.section-sankoumax-gradient-glass-33-unipos { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-33-unipos').forEach((el) => el.dataset.ready = 'true');
50
SANKOU Max — gradient-glass 34 Trail Inc
sankoumax-gradient-glass-34-trail-inc
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — gradient-glass 34 Trail Inc
- 概要: SANKOU100 sample setから展開したgradient-glass向けcontact構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 52% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 5614px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-34-trail-inc"} /-->
CSS:
.section-sankoumax-gradient-glass-34-trail-inc { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-34-trail-inc').forEach((el) => el.dataset.ready = 'true');
51
SANKOU Max — gradient-glass 35 Applebase
sankoumax-gradient-glass-35-applebase
Applebase
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 4535
- パターン名: SANKOU Max — gradient-glass 35 Applebase
- 概要: SANKOU100 sample setから展開したgradient-glass向けfooter構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 5655px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-35-applebase"} /-->
CSS:
.section-sankoumax-gradient-glass-35-applebase { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-35-applebase').forEach((el) => el.dataset.ready = 'true');
52
SANKOU Max — gradient-glass 36 Meisei Es
sankoumax-gradient-glass-36-meisei-es
NEWS
Meisei Es から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — gradient-glass 36 Meisei Es
- 概要: SANKOU100 sample setから展開したgradient-glass向けalert構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 5616px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-36-meisei-es"} /-->
CSS:
.section-sankoumax-gradient-glass-36-meisei-es { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-36-meisei-es').forEach((el) => el.dataset.ready = 'true');
53
SANKOU Max — gradient-glass 37 Unicell
sankoumax-gradient-glass-37-unicell
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — gradient-glass 37 Unicell
- 概要: SANKOU100 sample setから展開したgradient-glass向けmap構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5577px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-37-unicell"} /-->
CSS:
.section-sankoumax-gradient-glass-37-unicell { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-37-unicell').forEach((el) => el.dataset.ready = 'true');
54
SANKOU Max — gradient-glass 38 Uki Editions
sankoumax-gradient-glass-38-uki-editions
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — gradient-glass 38 Uki Editions
- 概要: SANKOU100 sample setから展開したgradient-glass向けform構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 5598px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-38-uki-editions"} /-->
CSS:
.section-sankoumax-gradient-glass-38-uki-editions { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-38-uki-editions').forEach((el) => el.dataset.ready = 'true');
55
SANKOU Max — gradient-glass 39 Kikyougaoka
sankoumax-gradient-glass-39-kikyougaoka
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — gradient-glass 39 Kikyougaoka
- 概要: SANKOU100 sample setから展開したgradient-glass向けtabs構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 5519px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-39-kikyougaoka"} /-->
CSS:
.section-sankoumax-gradient-glass-39-kikyougaoka { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-39-kikyougaoka').forEach((el) => el.dataset.ready = 'true');
56
SANKOU Max — gradient-glass 40 J Security
sankoumax-gradient-glass-40-j-security
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — gradient-glass 40 J Security
- 概要: SANKOU100 sample setから展開したgradient-glass向けdashboard構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 5620px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-40-j-security"} /-->
CSS:
.section-sankoumax-gradient-glass-40-j-security { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-40-j-security').forEach((el) => el.dataset.ready = 'true');
57
SANKOU Max — gradient-glass 41 Serious Ceramic
sankoumax-gradient-glass-41-serious-ceramic
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — gradient-glass 41 Serious Ceramic
- 概要: SANKOU100 sample setから展開したgradient-glass向けfaq構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5461px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-41-serious-ceramic"} /-->
CSS:
.section-sankoumax-gradient-glass-41-serious-ceramic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-41-serious-ceramic').forEach((el) => el.dataset.ready = 'true');
58
SANKOU Max — gradient-glass 42 Tsumari Chamame
sankoumax-gradient-glass-42-tsumari-chamame
Detail
- パターン名: SANKOU Max — gradient-glass 42 Tsumari Chamame
- 概要: SANKOU100 sample setから展開したgradient-glass向けgallery構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 5662px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-42-tsumari-chamame"} /-->
CSS:
.section-sankoumax-gradient-glass-42-tsumari-chamame { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-42-tsumari-chamame').forEach((el) => el.dataset.ready = 'true');
59
SANKOU Max — gradient-glass 43 Notahotel Architects
sankoumax-gradient-glass-43-notahotel-architects
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — gradient-glass 43 Notahotel Architects
- 概要: SANKOU100 sample setから展開したgradient-glass向けroster構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 5663px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-43-notahotel-architects"} /-->
CSS:
.section-sankoumax-gradient-glass-43-notahotel-architects { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-43-notahotel-architects').forEach((el) => el.dataset.ready = 'true');
60
SANKOU Max — gradient-glass 44 Montblanc Pictures
sankoumax-gradient-glass-44-montblanc-pictures
4544
Montblanc Pictures
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — gradient-glass 44 Montblanc Pictures
- 概要: SANKOU100 sample setから展開したgradient-glass向けmanifesto構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 5444px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-44-montblanc-pictures"} /-->
CSS:
.section-sankoumax-gradient-glass-44-montblanc-pictures { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-44-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');
61
SANKOU Max — gradient-glass 45 Tattoo Rays
sankoumax-gradient-glass-45-tattoo-rays
Sampled Site
4545 / Tattoo Rays
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — gradient-glass 45 Tattoo Rays
- 概要: SANKOU100 sample setから展開したgradient-glass向けcover構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 24% / 76%、推奨コンテンツ幅 14615px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-45-tattoo-rays"} /-->
CSS:
.section-sankoumax-gradient-glass-45-tattoo-rays { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-45-tattoo-rays').forEach((el) => el.dataset.ready = 'true');
62
SANKOU Max — gradient-glass 46 Rim Jins
sankoumax-gradient-glass-46-rim-jins
Split Story
写真と要点で信頼を作る
Rim Jins の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — gradient-glass 46 Rim Jins
- 概要: SANKOU100 sample setから展開したgradient-glass向けsplit構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 5586px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-46-rim-jins"} /-->
CSS:
.section-sankoumax-gradient-glass-46-rim-jins { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-46-rim-jins').forEach((el) => el.dataset.ready = 'true');
63
SANKOU Max — gradient-glass 47 Obunko
sankoumax-gradient-glass-47-obunko
Card Flow
迷わない比較カード
Obunko から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — gradient-glass 47 Obunko
- 概要: SANKOU100 sample setから展開したgradient-glass向けcards構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5627px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-47-obunko"} /-->
CSS:
.section-sankoumax-gradient-glass-47-obunko { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-47-obunko').forEach((el) => el.dataset.ready = 'true');
64
SANKOU Max — gradient-glass 48 Pronets Recruit
sankoumax-gradient-glass-48-pronets-recruit
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
4548
- パターン名: SANKOU Max — gradient-glass 48 Pronets Recruit
- 概要: SANKOU100 sample setから展開したgradient-glass向けcollage構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 34% / 36% / 1px、推奨コンテンツ幅 5668px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-48-pronets-recruit"} /-->
CSS:
.section-sankoumax-gradient-glass-48-pronets-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-48-pronets-recruit').forEach((el) => el.dataset.ready = 'true');
65
SANKOU Max — gradient-glass 49 Glanta
sankoumax-gradient-glass-49-glanta
Glanta
About
Works
Journal
Contact
- パターン名: SANKOU Max — gradient-glass 49 Glanta
- 概要: SANKOU100 sample setから展開したgradient-glass向けrail構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 5729px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-49-glanta"} /-->
CSS:
.section-sankoumax-gradient-glass-49-glanta { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-49-glanta').forEach((el) => el.dataset.ready = 'true');
66
SANKOU Max — gradient-glass 50 Tashi Portfolio
sankoumax-gradient-glass-50-tashi-portfolio
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — gradient-glass 50 Tashi Portfolio
- 概要: SANKOU100 sample setから展開したgradient-glass向けeditorial構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 5570px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-50-tashi-portfolio"} /-->
CSS:
.section-sankoumax-gradient-glass-50-tashi-portfolio { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-50-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');
67
SANKOU Max — gradient-glass 51 Kitanohashi
sankoumax-gradient-glass-51-kitanohashi
Collection Selector
Kitanohashi の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — gradient-glass 51 Kitanohashi
- 概要: SANKOU100 sample setから展開したgradient-glass向けproduct構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 5651px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-51-kitanohashi"} /-->
CSS:
.section-sankoumax-gradient-glass-51-kitanohashi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-51-kitanohashi').forEach((el) => el.dataset.ready = 'true');
68
SANKOU Max — gradient-glass 52 Morinosato Clinic
sankoumax-gradient-glass-52-morinosato-clinic
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — gradient-glass 52 Morinosato Clinic
- 概要: SANKOU100 sample setから展開したgradient-glass向けtimeline構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5592px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-52-morinosato-clinic"} /-->
CSS:
.section-sankoumax-gradient-glass-52-morinosato-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-52-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');
69
SANKOU Max — gradient-glass 53 Asuzac Highschool
sankoumax-gradient-glass-53-asuzac-highschool
数字で納得させる
23%
改善率
11分
短縮
31971
導入数
- パターン名: SANKOU Max — gradient-glass 53 Asuzac Highschool
- 概要: SANKOU100 sample setから展開したgradient-glass向けstats構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5513px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版 / Gradient / Glassをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-53-asuzac-highschool"} /-->
CSS:
.section-sankoumax-gradient-glass-53-asuzac-highschool { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-53-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');
70
SANKOU Max — gradient-glass 54 Junni Newyear
sankoumax-gradient-glass-54-junni-newyear
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — gradient-glass 54 Junni Newyear
- 概要: SANKOU100 sample setから展開したgradient-glass向けcontact構成。
- 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 56% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 5634px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-gradient-glass-54-junni-newyear"} /-->
CSS:
.section-sankoumax-gradient-glass-54-junni-newyear { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-gradient-glass-54-junni-newyear').forEach((el) => el.dataset.ready = 'true');
← Previous
Hover Interaction
ホバー演出
Next →
Loading / Skeleton
ローディング
◈ Blanc Nail
Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。
Foundations
- ヒーロー
- ヘッダー
- フッター
- ナビゲーション
- タイポグラフィ
Content
- フィーチャー
- スタッツ
- コール トゥ アクション
- レビュー / 推薦
- チーム
Business
- 料金プラン
- 商品 / EC
- アクセス / 営業時間
- メニュー (飲食)
- コンタクト
UI Components
- カードレイアウト
- モーダル / アコーディオン
- タブ / セグメント
- バナー / アラート
- SNS
© 2026 Blanc Nail · Built with WordPress + Block Editor v1.0 · isValid=0