ECサイト デザインインスピレーション
ECサイトのデザインは「商品を売る」という明確なゴールに向かって全てが最適化される。Shopify、Nike、Apple Store -- これらの成功したECサイトに共通するのは、商品画像が主役であり、UIは黒子に徹するという設計哲学だ。美しい商品写真を邪魔せず、価格とCTAだけが視線を集める。
このページは、Shopify/Nike のデザイン言語から抽出したECサイトテーマを、インラインHTMLのビジュアル例とともに解説する。商品一覧、商品詳細、カート、チェックアウト -- EC特有のあらゆる画面設計に応用できる。
このページの使い方
商品カード、CTAボタン、サイズセレクター、価格表示など、EC特有のコンポーネントを視覚的に確認できます。自分のECプロジェクトに適用するイメージを掴んでください。
デザイン哲学 -- 商品が主役
UIは黒子。商品画像とCTAだけが視線を集める。
ECサイトで最も重要な要素は、1) 商品画像、2) 価格、3) カートに追加ボタン -- この3つだけだ。他の全ての要素はこの3つを邪魔しないように設計される。
EC デザインの3原則
- 画像ファースト: 商品カードの80%以上を画像が占める。テキストは最小限
- 価格は即座に: 価格はスクロールなしで必ず見える位置に配置
- CTAは巨大に: 「カートに追加」ボタンは画面で最も目立つ要素
コンポーネントギャラリー
サイズセレクター
Size Selector
XSSMLXL
XL: 品切れ中
CTAボタンバリエーション
CTA Buttons
Add to CartBuy Now - SaleAdd to Wishlist
Pill型（border-radius: 9999px）で高い視認性。モバイルでは幅100%で表示。
星評価 / レビュー
Star Rating
★★★★★(128件)
★★★★★(45件)
★★★★★(12件)
商品バッジ
Product Badges
-30% OFFNewSold Out送料無料残り3点
価格表示パターン
Price Display Patterns
通常価格
¥6,500セール価格
¥2,800¥4,000品切れ
¥18,000使い方ガイド
このテーマが適するプロダクト
- オンラインショップ（ファッション、雑貨、電子機器等）
- マーケットプレイス
- 商品カタログ
- 予約サイト（ホテル、レストラン等）
EC特有の設計ポイント
| ポイント | 詳細 |
|---|---|
| 画像アスペクト比 | 4:5（縦長）で統一。一覧で揃えることでリズムが生まれる |
| 価格の tnum | 桁揃えは必須。font-variant-numeric: tabular-nums |
| CTAボタンのサイズ | 48px以上。モバイルではフル幅 |
| タッチターゲット | 44px以上。サイズセレクターも含めて |
Stitch向けプロンプト例
このDESIGN.mdに従って、商品一覧ページを作成してください。
4列のグリッド、商品カードは画像（4:5比率、12px角丸）が主役。
商品名は14px #111827、価格は16px tnum weight600。
セール品は価格を #dc2626 で表示し、元価格にline-throughを適用。
CTAは #111827 背景のPill型ボタンです。