検索…
カタログ 統計
CATALOG › Business › Product / EC
商品 / EC
商品カード、特徴、購入フォーム。EC 必須コンポーネント。
70
Patterns
Business
Group
isValid=0
Verified
CSS
Animation
01
Product — 4-Up Card Grid
product-card-grid
新着アイテム
👜
NEW
レザートートバッグ
¥24,800
⌚
人気
クラシックウォッチ
¥38,000
🪴
SALE -20%
陶器プランター
¥3,200 ¥4,000
🎧
在庫わずか
ワイヤレスヘッドホン
¥18,800
- パターン名: Product — 4-Up Card Grid
- 概要: Four-product e-commerce grid with NEW / SALE / ストック badges and prices.
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 auto、推奨コンテンツ幅 1180px、主要ブロック group, heading, columns, column, cover, paragraph, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/product-card-grid"} /-->
CSS:
.section-product-card-grid { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-product-card-grid').forEach((el) => el.dataset.ready = 'true');
02
Product — Featured Product Hero
product-featured-hero
限定販売
シグネチャー ・ レザーバッグ
職人が一つひとつ手縫いで仕上げた、本革製のトートバッグ。A4 書類もすっぽり。
¥38,000¥48,000
- パターン名: Product — Featured Product Hero
- 概要: Two-column product detail hero with image, price, discount, and CTA.
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, columns, column, image, column, paragraph, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/product-featured-hero"} /-->
CSS:
.section-product-featured-hero { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-product-featured-hero').forEach((el) => el.dataset.ready = 'true');
03
Product — Hero Detail Split
product-hero-split
☕
SINGLE ORIGIN ・ ETHIOPIA
イルガチェフェ ナチュラル 200g
¥1,840 税込 ・ 送料込
標高 1,950m の農園で完熟まで待って収穫。ナチュラル製法ならではのフルーティな香りと、ジャスミンを思わせる余韻。
- パターン名: Product — Hero Detail Split
- 概要: Single-product hero with image left, title/price/description/CTA right.
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 55% / 45%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, cover, paragraph, column, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/product-hero-split"} /-->
CSS:
.section-product-hero-split { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-product-hero-split').forEach((el) => el.dataset.ready = 'true');
04
Product — Order History List
product-listing-row
最近の購入履歴
👜
レザートートバッグ ・ ブラック
注文番号 #A2401 ・ 配送中
¥24,800
⌚
クラシックウォッチ ・ シルバー
注文番号 #A2398 ・ ✓ 配送完了
¥38,000
🪴
陶器プランター ・ M サイズ
注文番号 #A2389 ・ ✓ 配送完了
¥3,200
- パターン名: Product — Order History List
- 概要: Inline order/product list with thumbnail, name, status and price.
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: ビジュアル面を中心にしたカバー構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, heading, group, group, cover, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/product-listing-row"} /-->
CSS:
.section-product-listing-row { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-product-listing-row').forEach((el) => el.dataset.ready = 'true');
05
Product — Mini Cart Summary
product-mini-cart
🛒 カート (3 点)
レザーバッグ × 1
¥38,000
キーケース × 2
¥12,000
合計
¥50,000
- パターン名: Product — Mini Cart Summary
- 概要: Cart summary card with line items, total, and checkout CTA.
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 480px、主要ブロック group, group, heading, group, group, paragraph, paragraph, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/product-mini-cart"} /-->
CSS:
.section-product-mini-cart { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-product-mini-cart').forEach((el) => el.dataset.ready = 'true');
06
Reference Complete — product-ec 01 Sticky Entry
reference-complete-product-ec-01-sticky-entry-greenpark-santo
Sampled Site
16601 / Greenpark Santo
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: Reference Complete — product-ec 01 Sticky Entry
- 概要: 参照サンプル再確認から追加したproduct-ec向け部品。固定導線つきの大判ファーストビュー。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 29% / 71%、推奨コンテンツ幅 50783px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-product-ec-01-sticky-entry-greenpark-santo"} /-->
CSS:
.section-reference-complete-product-ec-01-sticky-entry-greenpark-santo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-product-ec-01-sticky-entry-greenpark-santo').forEach((el) => el.dataset.ready = 'true');
07
Reference Complete — product-ec 02 Editorial Issue
reference-complete-product-ec-02-editorial-issue-tokachi-fruits
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: Reference Complete — product-ec 02 Editorial Issue
- 概要: 参照サンプル再確認から追加したproduct-ec向け部品。雑誌的な見出しと導入文の編集レイアウト。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 17622px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-product-ec-02-editorial-issue-tokachi-fruits"} /-->
CSS:
.section-reference-complete-product-ec-02-editorial-issue-tokachi-fruits { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-product-ec-02-editorial-issue-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');
08
Reference Complete — product-ec 03 Brand Index
reference-complete-product-ec-03-brand-index-megamis
Card Flow
迷わない比較カード
Megamis から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: Reference Complete — product-ec 03 Brand Index
- 概要: 参照サンプル再確認から追加したproduct-ec向け部品。複数ブランドやサービスを迷わせず並べる索引。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 17683px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-product-ec-03-brand-index-megamis"} /-->
CSS:
.section-reference-complete-product-ec-03-brand-index-megamis { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-product-ec-03-brand-index-megamis').forEach((el) => el.dataset.ready = 'true');
09
Reference Complete — product-ec 04 Recruit Story
reference-complete-product-ec-04-recruit-story-meisei-es
Split Story
写真と要点で信頼を作る
Meisei Es の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: Reference Complete — product-ec 04 Recruit Story
- 概要: 参照サンプル再確認から追加したproduct-ec向け部品。採用・企業紹介に使える人物/思想の分割構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 17644px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-product-ec-04-recruit-story-meisei-es"} /-->
CSS:
.section-reference-complete-product-ec-04-recruit-story-meisei-es { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-product-ec-04-recruit-story-meisei-es').forEach((el) => el.dataset.ready = 'true');
10
Reference Complete — product-ec 05 Commerce Compare
reference-complete-product-ec-05-commerce-compare-nothing-tech
Collection Selector
Nothing Tech の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: Reference Complete — product-ec 05 Commerce Compare
- 概要: 参照サンプル再確認から追加したproduct-ec向け部品。料金・商品・プランを比較しやすい構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 17705px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-product-ec-05-commerce-compare-nothing-tech"} /-->
CSS:
.section-reference-complete-product-ec-05-commerce-compare-nothing-tech { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-product-ec-05-commerce-compare-nothing-tech').forEach((el) => el.dataset.ready = 'true');
11
Reference Complete — product-ec 06 Timeline Proof
reference-complete-product-ec-06-timeline-proof-sanu-weekday
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: Reference Complete — product-ec 06 Timeline Proof
- 概要: 参照サンプル再確認から追加したproduct-ec向け部品。沿革・導入手順・制作工程の時系列。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 17646px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-product-ec-06-timeline-proof-sanu-weekday"} /-->
CSS:
.section-reference-complete-product-ec-06-timeline-proof-sanu-weekday { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-product-ec-06-timeline-proof-sanu-weekday').forEach((el) => el.dataset.ready = 'true');
12
Reference Complete — product-ec 07 Gallery Led
reference-complete-product-ec-07-gallery-led-yokohama-timberwharf
Detail
- パターン名: Reference Complete — product-ec 07 Gallery Led
- 概要: 参照サンプル再確認から追加したproduct-ec向け部品。写真量の多い商材を見せるギャラリー導線。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 17727px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-product-ec-07-gallery-led-yokohama-timberwharf"} /-->
CSS:
.section-reference-complete-product-ec-07-gallery-led-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-product-ec-07-gallery-led-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');
13
Reference Complete — product-ec 08 Dashboard Proof
reference-complete-product-ec-08-dashboard-proof-saranosono
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: Reference Complete — product-ec 08 Dashboard Proof
- 概要: 参照サンプル再確認から追加したproduct-ec向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 17688px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-product-ec-08-dashboard-proof-saranosono"} /-->
CSS:
.section-reference-complete-product-ec-08-dashboard-proof-saranosono { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-product-ec-08-dashboard-proof-saranosono').forEach((el) => el.dataset.ready = 'true');
14
Reference Complete — product-ec 09 Contact Ready
reference-complete-product-ec-09-contact-ready-j-security
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: Reference Complete — product-ec 09 Contact Ready
- 概要: 参照サンプル再確認から追加したproduct-ec向け部品。問い合わせ前の入力項目を整理する導線。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 17669px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-product-ec-09-contact-ready-j-security"} /-->
CSS:
.section-reference-complete-product-ec-09-contact-ready-j-security { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-product-ec-09-contact-ready-j-security').forEach((el) => el.dataset.ready = 'true');
15
Reference Complete — product-ec 10 Mobile Rail
reference-complete-product-ec-10-mobile-rail-montblanc-pictures
Montblanc
About
Works
Journal
Contact
- パターン名: Reference Complete — product-ec 10 Mobile Rail
- 概要: 参照サンプル再確認から追加したproduct-ec向け部品。スマホ閲覧で要点を縦に追えるレール型。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 17790px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-product-ec-10-mobile-rail-montblanc-pictures"} /-->
CSS:
.section-reference-complete-product-ec-10-mobile-rail-montblanc-pictures { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-product-ec-10-mobile-rail-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');
16
SANKOU — Lookbook Object Selector
sankou-lookbook-object-selector
Lookbook
Object as hero
商品そのものを中央に置き、月別・テーマ別の切替を下に並べます。
01
02
03
04
- パターン名: SANKOU — Lookbook Object Selector
- 概要: 商品・ルックブック向けのオブジェクト主役型セレクタ。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 38% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 1160px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-lookbook-object-selector"} /-->
CSS:
.section-sankou-lookbook-object-selector { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou-lookbook-object-selector').forEach((el) => el.dataset.ready = 'true');
17
SANKOU — Product Twin Editorial Grid
sankou-product-twin-editorial-grid
Craft Pair
2枚の写真と縦の短文で、商品カテゴリを雑誌のように見せます。
- New arrival
- Repair
- Care guide
- パターン名: SANKOU — Product Twin Editorial Grid
- 概要: EC・ブランドサイト向けの2枚写真エディトリアル商品グリッド。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 38% / 31% / 31%、推奨コンテンツ幅 1200px、主要ブロック group, columns, column, heading, paragraph, list, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-product-twin-editorial-grid"} /-->
CSS:
.section-sankou-product-twin-editorial-grid { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou-product-twin-editorial-grid').forEach((el) => el.dataset.ready = 'true');
18
SANKOU100 — 011 Tattoo Rays
sankou100-011-tattoo-rays
Tattoo Rays
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 011
- パターン名: SANKOU100 — 011 Tattoo Rays
- 概要: SANKOU! sample 011から抽出したfooter型の商用サイト向け構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 1131px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-011-tattoo-rays"} /-->
CSS:
.section-sankou100-011-tattoo-rays { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-011-tattoo-rays').forEach((el) => el.dataset.ready = 'true');
19
SANKOU100 — 051 Omotesando Ortho
sankou100-051-omotesando-ortho
Omotesando Ortho
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 051
- パターン名: SANKOU100 — 051 Omotesando Ortho
- 概要: SANKOU! sample 051から抽出したfooter型の商用サイト向け構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 1171px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-051-omotesando-ortho"} /-->
CSS:
.section-sankou100-051-omotesando-ortho { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-051-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');
20
SANKOU100 — 091 Omodakaya
sankou100-091-omodakaya
Omodakaya
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 091
- パターン名: SANKOU100 — 091 Omodakaya
- 概要: SANKOU! sample 091から抽出したfooter型の商用サイト向け構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 1211px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-091-omodakaya"} /-->
CSS:
.section-sankou100-091-omodakaya { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-091-omodakaya').forEach((el) => el.dataset.ready = 'true');
21
SANKOU Max — product-ec 01 Kamata Shoyu
sankoumax-product-ec-01-kamata-shoyu
NEWS
Kamata Shoyu から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — product-ec 01 Kamata Shoyu
- 概要: SANKOU100 sample setから展開したproduct-ec向けalert構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4681px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-01-kamata-shoyu"} /-->
CSS:
.section-sankoumax-product-ec-01-kamata-shoyu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-01-kamata-shoyu').forEach((el) => el.dataset.ready = 'true');
22
SANKOU Max — product-ec 02 Fumino
sankoumax-product-ec-02-fumino
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — product-ec 02 Fumino
- 概要: SANKOU100 sample setから展開したproduct-ec向けmap構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4642px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-02-fumino"} /-->
CSS:
.section-sankoumax-product-ec-02-fumino { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-02-fumino').forEach((el) => el.dataset.ready = 'true');
23
SANKOU Max — product-ec 03 Anbe Shoten
sankoumax-product-ec-03-anbe-shoten
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — product-ec 03 Anbe Shoten
- 概要: SANKOU100 sample setから展開したproduct-ec向けform構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4663px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-03-anbe-shoten"} /-->
CSS:
.section-sankoumax-product-ec-03-anbe-shoten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-03-anbe-shoten').forEach((el) => el.dataset.ready = 'true');
24
SANKOU Max — product-ec 04 Plaid Alpha
sankoumax-product-ec-04-plaid-alpha
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — product-ec 04 Plaid Alpha
- 概要: SANKOU100 sample setから展開したproduct-ec向けtabs構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4584px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-04-plaid-alpha"} /-->
CSS:
.section-sankoumax-product-ec-04-plaid-alpha { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-04-plaid-alpha').forEach((el) => el.dataset.ready = 'true');
25
SANKOU Max — product-ec 05 Undimension
sankoumax-product-ec-05-undimension
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — product-ec 05 Undimension
- 概要: SANKOU100 sample setから展開したproduct-ec向けdashboard構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4685px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-05-undimension"} /-->
CSS:
.section-sankoumax-product-ec-05-undimension { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-05-undimension').forEach((el) => el.dataset.ready = 'true');
26
SANKOU Max — product-ec 06 Norikura Hanabi
sankoumax-product-ec-06-norikura-hanabi
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — product-ec 06 Norikura Hanabi
- 概要: SANKOU100 sample setから展開したproduct-ec向けfaq構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4526px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-06-norikura-hanabi"} /-->
CSS:
.section-sankoumax-product-ec-06-norikura-hanabi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-06-norikura-hanabi').forEach((el) => el.dataset.ready = 'true');
27
SANKOU Max — product-ec 07 Chugaitoen
sankoumax-product-ec-07-chugaitoen
Detail
- パターン名: SANKOU Max — product-ec 07 Chugaitoen
- 概要: SANKOU100 sample setから展開したproduct-ec向けgallery構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4727px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-07-chugaitoen"} /-->
CSS:
.section-sankoumax-product-ec-07-chugaitoen { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-07-chugaitoen').forEach((el) => el.dataset.ready = 'true');
28
SANKOU Max — product-ec 08 Favtown Wakayama
sankoumax-product-ec-08-favtown-wakayama
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — product-ec 08 Favtown Wakayama
- 概要: SANKOU100 sample setから展開したproduct-ec向けroster構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4728px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-08-favtown-wakayama"} /-->
CSS:
.section-sankoumax-product-ec-08-favtown-wakayama { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-08-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');
29
SANKOU Max — product-ec 09 Palcloset Fashion
sankoumax-product-ec-09-palcloset-fashion
3609
Palcloset Fashion
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — product-ec 09 Palcloset Fashion
- 概要: SANKOU100 sample setから展開したproduct-ec向けmanifesto構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4509px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-09-palcloset-fashion"} /-->
CSS:
.section-sankoumax-product-ec-09-palcloset-fashion { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-09-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');
30
SANKOU Max — product-ec 10 Michikusa Art
sankoumax-product-ec-10-michikusa-art
Sampled Site
3610 / Michikusa Art
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — product-ec 10 Michikusa Art
- 概要: SANKOU100 sample setから展開したproduct-ec向けcover構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 25% / 75%、推奨コンテンツ幅 11810px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-10-michikusa-art"} /-->
CSS:
.section-sankoumax-product-ec-10-michikusa-art { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-10-michikusa-art').forEach((el) => el.dataset.ready = 'true');
31
SANKOU Max — product-ec 11 Tenten
sankoumax-product-ec-11-tenten
Split Story
写真と要点で信頼を作る
Tenten の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — product-ec 11 Tenten
- 概要: SANKOU100 sample setから展開したproduct-ec向けsplit構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 4651px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-11-tenten"} /-->
CSS:
.section-sankoumax-product-ec-11-tenten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-11-tenten').forEach((el) => el.dataset.ready = 'true');
32
SANKOU Max — product-ec 12 Unipos
sankoumax-product-ec-12-unipos
Card Flow
迷わない比較カード
Unipos から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — product-ec 12 Unipos
- 概要: SANKOU100 sample setから展開したproduct-ec向けcards構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4692px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-12-unipos"} /-->
CSS:
.section-sankoumax-product-ec-12-unipos { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-12-unipos').forEach((el) => el.dataset.ready = 'true');
33
SANKOU Max — product-ec 13 Trail Inc
sankoumax-product-ec-13-trail-inc
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
3613
- パターン名: SANKOU Max — product-ec 13 Trail Inc
- 概要: SANKOU100 sample setから展開したproduct-ec向けcollage構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 35% / 35% / 1px、推奨コンテンツ幅 4733px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-13-trail-inc"} /-->
CSS:
.section-sankoumax-product-ec-13-trail-inc { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-13-trail-inc').forEach((el) => el.dataset.ready = 'true');
34
SANKOU Max — product-ec 14 Applebase
sankoumax-product-ec-14-applebase
Applebase
About
Works
Journal
Contact
- パターン名: SANKOU Max — product-ec 14 Applebase
- 概要: SANKOU100 sample setから展開したproduct-ec向けrail構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 4794px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-14-applebase"} /-->
CSS:
.section-sankoumax-product-ec-14-applebase { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-14-applebase').forEach((el) => el.dataset.ready = 'true');
35
SANKOU Max — product-ec 15 Meisei Es
sankoumax-product-ec-15-meisei-es
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — product-ec 15 Meisei Es
- 概要: SANKOU100 sample setから展開したproduct-ec向けeditorial構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 51% / 49% / 1px、推奨コンテンツ幅 4635px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-15-meisei-es"} /-->
CSS:
.section-sankoumax-product-ec-15-meisei-es { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-15-meisei-es').forEach((el) => el.dataset.ready = 'true');
36
SANKOU Max — product-ec 16 Unicell
sankoumax-product-ec-16-unicell
Collection Selector
Unicell の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — product-ec 16 Unicell
- 概要: SANKOU100 sample setから展開したproduct-ec向けproduct構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4716px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-16-unicell"} /-->
CSS:
.section-sankoumax-product-ec-16-unicell { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-16-unicell').forEach((el) => el.dataset.ready = 'true');
37
SANKOU Max — product-ec 17 Uki Editions
sankoumax-product-ec-17-uki-editions
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — product-ec 17 Uki Editions
- 概要: SANKOU100 sample setから展開したproduct-ec向けtimeline構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4657px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-17-uki-editions"} /-->
CSS:
.section-sankoumax-product-ec-17-uki-editions { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-17-uki-editions').forEach((el) => el.dataset.ready = 'true');
38
SANKOU Max — product-ec 18 Kikyougaoka
sankoumax-product-ec-18-kikyougaoka
数字で納得させる
68%
改善率
3分
短縮
25426
導入数
- パターン名: SANKOU Max — product-ec 18 Kikyougaoka
- 概要: SANKOU100 sample setから展開したproduct-ec向けstats構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4578px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-18-kikyougaoka"} /-->
CSS:
.section-sankoumax-product-ec-18-kikyougaoka { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-18-kikyougaoka').forEach((el) => el.dataset.ready = 'true');
39
SANKOU Max — product-ec 19 J Security
sankoumax-product-ec-19-j-security
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — product-ec 19 J Security
- 概要: SANKOU100 sample setから展開したproduct-ec向けcontact構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 55% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4699px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-19-j-security"} /-->
CSS:
.section-sankoumax-product-ec-19-j-security { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-19-j-security').forEach((el) => el.dataset.ready = 'true');
40
SANKOU Max — product-ec 20 Serious Ceramic
sankoumax-product-ec-20-serious-ceramic
Serious Ceramic
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 3620
- パターン名: SANKOU Max — product-ec 20 Serious Ceramic
- 概要: SANKOU100 sample setから展開したproduct-ec向けfooter構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4740px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-20-serious-ceramic"} /-->
CSS:
.section-sankoumax-product-ec-20-serious-ceramic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-20-serious-ceramic').forEach((el) => el.dataset.ready = 'true');
41
SANKOU Max — product-ec 21 Tsumari Chamame
sankoumax-product-ec-21-tsumari-chamame
NEWS
Tsumari Chamame から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — product-ec 21 Tsumari Chamame
- 概要: SANKOU100 sample setから展開したproduct-ec向けalert構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4701px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-21-tsumari-chamame"} /-->
CSS:
.section-sankoumax-product-ec-21-tsumari-chamame { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-21-tsumari-chamame').forEach((el) => el.dataset.ready = 'true');
42
SANKOU Max — product-ec 22 Notahotel Architects
sankoumax-product-ec-22-notahotel-architects
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — product-ec 22 Notahotel Architects
- 概要: SANKOU100 sample setから展開したproduct-ec向けmap構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4662px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-22-notahotel-architects"} /-->
CSS:
.section-sankoumax-product-ec-22-notahotel-architects { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-22-notahotel-architects').forEach((el) => el.dataset.ready = 'true');
43
SANKOU Max — product-ec 23 Montblanc Pictures
sankoumax-product-ec-23-montblanc-pictures
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — product-ec 23 Montblanc Pictures
- 概要: SANKOU100 sample setから展開したproduct-ec向けform構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4683px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-23-montblanc-pictures"} /-->
CSS:
.section-sankoumax-product-ec-23-montblanc-pictures { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-23-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');
44
SANKOU Max — product-ec 24 Tattoo Rays
sankoumax-product-ec-24-tattoo-rays
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — product-ec 24 Tattoo Rays
- 概要: SANKOU100 sample setから展開したproduct-ec向けtabs構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4604px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-24-tattoo-rays"} /-->
CSS:
.section-sankoumax-product-ec-24-tattoo-rays { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-24-tattoo-rays').forEach((el) => el.dataset.ready = 'true');
45
SANKOU Max — product-ec 25 Rim Jins
sankoumax-product-ec-25-rim-jins
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — product-ec 25 Rim Jins
- 概要: SANKOU100 sample setから展開したproduct-ec向けdashboard構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4705px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-25-rim-jins"} /-->
CSS:
.section-sankoumax-product-ec-25-rim-jins { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-25-rim-jins').forEach((el) => el.dataset.ready = 'true');
46
SANKOU Max — product-ec 26 Obunko
sankoumax-product-ec-26-obunko
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — product-ec 26 Obunko
- 概要: SANKOU100 sample setから展開したproduct-ec向けfaq構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4546px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-26-obunko"} /-->
CSS:
.section-sankoumax-product-ec-26-obunko { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-26-obunko').forEach((el) => el.dataset.ready = 'true');
47
SANKOU Max — product-ec 27 Pronets Recruit
sankoumax-product-ec-27-pronets-recruit
Detail
- パターン名: SANKOU Max — product-ec 27 Pronets Recruit
- 概要: SANKOU100 sample setから展開したproduct-ec向けgallery構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4747px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-27-pronets-recruit"} /-->
CSS:
.section-sankoumax-product-ec-27-pronets-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-27-pronets-recruit').forEach((el) => el.dataset.ready = 'true');
48
SANKOU Max — product-ec 28 Glanta
sankoumax-product-ec-28-glanta
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — product-ec 28 Glanta
- 概要: SANKOU100 sample setから展開したproduct-ec向けroster構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4748px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-28-glanta"} /-->
CSS:
.section-sankoumax-product-ec-28-glanta { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-28-glanta').forEach((el) => el.dataset.ready = 'true');
49
SANKOU Max — product-ec 29 Tashi Portfolio
sankoumax-product-ec-29-tashi-portfolio
3629
Tashi Portfolio
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — product-ec 29 Tashi Portfolio
- 概要: SANKOU100 sample setから展開したproduct-ec向けmanifesto構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4529px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-29-tashi-portfolio"} /-->
CSS:
.section-sankoumax-product-ec-29-tashi-portfolio { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-29-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');
50
SANKOU Max — product-ec 30 Kitanohashi
sankoumax-product-ec-30-kitanohashi
Sampled Site
3630 / Kitanohashi
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — product-ec 30 Kitanohashi
- 概要: SANKOU100 sample setから展開したproduct-ec向けcover構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 27% / 73%、推奨コンテンツ幅 11870px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-30-kitanohashi"} /-->
CSS:
.section-sankoumax-product-ec-30-kitanohashi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-30-kitanohashi').forEach((el) => el.dataset.ready = 'true');
51
SANKOU Max — product-ec 31 Morinosato Clinic
sankoumax-product-ec-31-morinosato-clinic
Split Story
写真と要点で信頼を作る
Morinosato Clinic の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — product-ec 31 Morinosato Clinic
- 概要: SANKOU100 sample setから展開したproduct-ec向けsplit構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 4671px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-31-morinosato-clinic"} /-->
CSS:
.section-sankoumax-product-ec-31-morinosato-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-31-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');
52
SANKOU Max — product-ec 32 Asuzac Highschool
sankoumax-product-ec-32-asuzac-highschool
Card Flow
迷わない比較カード
Asuzac Highschool から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — product-ec 32 Asuzac Highschool
- 概要: SANKOU100 sample setから展開したproduct-ec向けcards構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4712px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-32-asuzac-highschool"} /-->
CSS:
.section-sankoumax-product-ec-32-asuzac-highschool { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-32-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');
53
SANKOU Max — product-ec 33 Junni Newyear
sankoumax-product-ec-33-junni-newyear
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
3633
- パターン名: SANKOU Max — product-ec 33 Junni Newyear
- 概要: SANKOU100 sample setから展開したproduct-ec向けcollage構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 31% / 1px / 37% / 33% / 1px、推奨コンテンツ幅 4753px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-33-junni-newyear"} /-->
CSS:
.section-sankoumax-product-ec-33-junni-newyear { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-33-junni-newyear').forEach((el) => el.dataset.ready = 'true');
54
SANKOU Max — product-ec 34 Mizota Ks
sankoumax-product-ec-34-mizota-ks
Mizota
About
Works
Journal
Contact
- パターン名: SANKOU Max — product-ec 34 Mizota Ks
- 概要: SANKOU100 sample setから展開したproduct-ec向けrail構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 4814px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-34-mizota-ks"} /-->
CSS:
.section-sankoumax-product-ec-34-mizota-ks { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-34-mizota-ks').forEach((el) => el.dataset.ready = 'true');
55
SANKOU Max — product-ec 35 Nissan Career
sankoumax-product-ec-35-nissan-career
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — product-ec 35 Nissan Career
- 概要: SANKOU100 sample setから展開したproduct-ec向けeditorial構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 47% / 53% / 1px、推奨コンテンツ幅 4655px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-35-nissan-career"} /-->
CSS:
.section-sankoumax-product-ec-35-nissan-career { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-35-nissan-career').forEach((el) => el.dataset.ready = 'true');
56
SANKOU Max — product-ec 36 Shueisha Recruit
sankoumax-product-ec-36-shueisha-recruit
Collection Selector
Shueisha Recruit の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — product-ec 36 Shueisha Recruit
- 概要: SANKOU100 sample setから展開したproduct-ec向けproduct構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4736px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-36-shueisha-recruit"} /-->
CSS:
.section-sankoumax-product-ec-36-shueisha-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-36-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');
57
SANKOU Max — product-ec 37 Sanu Weekday
sankoumax-product-ec-37-sanu-weekday
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — product-ec 37 Sanu Weekday
- 概要: SANKOU100 sample setから展開したproduct-ec向けtimeline構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4677px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-37-sanu-weekday"} /-->
CSS:
.section-sankoumax-product-ec-37-sanu-weekday { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-37-sanu-weekday').forEach((el) => el.dataset.ready = 'true');
58
SANKOU Max — product-ec 38 Newspicks Business
sankoumax-product-ec-38-newspicks-business
数字で納得させる
88%
改善率
5分
短縮
25566
導入数
- パターン名: SANKOU Max — product-ec 38 Newspicks Business
- 概要: SANKOU100 sample setから展開したproduct-ec向けstats構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4598px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-38-newspicks-business"} /-->
CSS:
.section-sankoumax-product-ec-38-newspicks-business { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-38-newspicks-business').forEach((el) => el.dataset.ready = 'true');
59
SANKOU Max — product-ec 39 Miyakawa Lab
sankoumax-product-ec-39-miyakawa-lab
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — product-ec 39 Miyakawa Lab
- 概要: SANKOU100 sample setから展開したproduct-ec向けcontact構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 51% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4719px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-39-miyakawa-lab"} /-->
CSS:
.section-sankoumax-product-ec-39-miyakawa-lab { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-39-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');
60
SANKOU Max — product-ec 40 Matsuo Komuten
sankoumax-product-ec-40-matsuo-komuten
Matsuo Komuten
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 3640
- パターン名: SANKOU Max — product-ec 40 Matsuo Komuten
- 概要: SANKOU100 sample setから展開したproduct-ec向けfooter構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4760px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-40-matsuo-komuten"} /-->
CSS:
.section-sankoumax-product-ec-40-matsuo-komuten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-40-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');
61
SANKOU Max — product-ec 41 Yokohama Timberwharf
sankoumax-product-ec-41-yokohama-timberwharf
NEWS
Yokohama Timberwharf から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — product-ec 41 Yokohama Timberwharf
- 概要: SANKOU100 sample setから展開したproduct-ec向けalert構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4721px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-41-yokohama-timberwharf"} /-->
CSS:
.section-sankoumax-product-ec-41-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-41-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');
62
SANKOU Max — product-ec 42 Janu
sankoumax-product-ec-42-janu
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — product-ec 42 Janu
- 概要: SANKOU100 sample setから展開したproduct-ec向けmap構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4682px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-42-janu"} /-->
CSS:
.section-sankoumax-product-ec-42-janu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-42-janu').forEach((el) => el.dataset.ready = 'true');
63
SANKOU Max — product-ec 43 Daimatsu
sankoumax-product-ec-43-daimatsu
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — product-ec 43 Daimatsu
- 概要: SANKOU100 sample setから展開したproduct-ec向けform構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4703px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-43-daimatsu"} /-->
CSS:
.section-sankoumax-product-ec-43-daimatsu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-43-daimatsu').forEach((el) => el.dataset.ready = 'true');
64
SANKOU Max — product-ec 44 Omotesando Ortho
sankoumax-product-ec-44-omotesando-ortho
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — product-ec 44 Omotesando Ortho
- 概要: SANKOU100 sample setから展開したproduct-ec向けtabs構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4624px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-44-omotesando-ortho"} /-->
CSS:
.section-sankoumax-product-ec-44-omotesando-ortho { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-44-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');
65
SANKOU Max — product-ec 45 Dodasports
sankoumax-product-ec-45-dodasports
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — product-ec 45 Dodasports
- 概要: SANKOU100 sample setから展開したproduct-ec向けdashboard構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4725px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-45-dodasports"} /-->
CSS:
.section-sankoumax-product-ec-45-dodasports { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-45-dodasports').forEach((el) => el.dataset.ready = 'true');
66
SANKOU Max — product-ec 46 Ja Aichi Recruit
sankoumax-product-ec-46-ja-aichi-recruit
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — product-ec 46 Ja Aichi Recruit
- 概要: SANKOU100 sample setから展開したproduct-ec向けfaq構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4566px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-46-ja-aichi-recruit"} /-->
CSS:
.section-sankoumax-product-ec-46-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-46-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');
67
SANKOU Max — product-ec 47 Kiyasuku
sankoumax-product-ec-47-kiyasuku
Detail
- パターン名: SANKOU Max — product-ec 47 Kiyasuku
- 概要: SANKOU100 sample setから展開したproduct-ec向けgallery構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4767px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-47-kiyasuku"} /-->
CSS:
.section-sankoumax-product-ec-47-kiyasuku { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-47-kiyasuku').forEach((el) => el.dataset.ready = 'true');
68
SANKOU Max — product-ec 48 Hirono Recruit
sankoumax-product-ec-48-hirono-recruit
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — product-ec 48 Hirono Recruit
- 概要: SANKOU100 sample setから展開したproduct-ec向けroster構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4768px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-48-hirono-recruit"} /-->
CSS:
.section-sankoumax-product-ec-48-hirono-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-48-hirono-recruit').forEach((el) => el.dataset.ready = 'true');
69
SANKOU Max — product-ec 49 Ichizenbooks
sankoumax-product-ec-49-ichizenbooks
3649
Ichizenbooks
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — product-ec 49 Ichizenbooks
- 概要: SANKOU100 sample setから展開したproduct-ec向けmanifesto構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4549px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版 / Product / ECをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-49-ichizenbooks"} /-->
CSS:
.section-sankoumax-product-ec-49-ichizenbooks { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-49-ichizenbooks').forEach((el) => el.dataset.ready = 'true');
70
SANKOU Max — product-ec 50 Mec Residence Recruit
sankoumax-product-ec-50-mec-residence-recruit
Sampled Site
3650 / Mec Residence Recruit
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — product-ec 50 Mec Residence Recruit
- 概要: SANKOU100 sample setから展開したproduct-ec向けcover構成。
- 使用目的: Product / EC領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 29% / 71%、推奨コンテンツ幅 11930px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Product / ECをミニマルに見せる余白重視版 / Product / ECをリッチに見せるカバー/カード強調版 / Product / ECをコーポレート向けに整える情報密度高め版 / Product / ECをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-product-ec-50-mec-residence-recruit"} /-->
CSS:
.section-sankoumax-product-ec-50-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-product-ec-50-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');
← Previous
Pricing
料金プラン
Next →
Access / Hours
アクセス / 営業時間
◈ 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