商品 / EC · Product / EC · Blanc Nail
検索…
カタログ 統計
CATALOG › Business › Product / EC
商品 / EC
商品カード、特徴、購入フォーム。EC 必須コンポーネント。
5
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');