DEAN & DELUCA（ディーン・アンド・デルーカ） DESIGN.md

DEAN & DELUCA Japan 公式オンラインストア（https://www.deandeluca.co.jp/）のデザイン仕様書。 ニューヨーク発のプレミアムフード＆ライフスタイルブランド。厳選された食材、美しいギフトパッケージ、アイコニックなトートバッグで知られる。 実サイトの computed style 実測（2026-05-08 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白背景に黒 #000000 を基調色に据え、見出しに游明朝 serif、本文に游ゴシック sans を使う二書体構成。食の美しさを全幅写真で見せ、テキストは最小限に抑えるプレミアムフード EC
• 密度: ヒーローカルーセルと大判食材写真が支配する低密度・ビジュアルファースト。商品情報は写真の下に控えめに配置
• キーワード: 純白背景、黒基調、游明朝見出し、游ゴシック本文、全幅ヒーロー、円形CTA、ウォームブラウン、バイリンガルラベル、フードフォトグラフィー
• 特徴:
  • 見出しは游明朝（Mincho）serif: h1 ロゴ・h2 セクションタイトル・h3 カテゴリ名・CTA テキストすべてに游明朝を使用 — プレミアム感と端正さを表現
  • 本文・ナビは游ゴシック（Gothic）sans: body / nav / ユーティリティに欧文先行（Helvetica Neue, Arial）+ 游ゴシックのフォールバックチェーン
  • font-weight 500 がデフォルト: 通常の 400 より一段重い。游ゴシックの "Medium" に相当し、可読性と存在感を両立
  • letter-spacing 0.04em（0.56px at 14px）を body に一律適用: 日本語本文の字間をわずかに開けて上品な空気感を演出
  • font-feature-settings: normal（palt は無効）
  • 円形黒 CTA（"一覧を見る"）: border-radius 100% の完全な円形。黒塗り + 白文字の游明朝 14px / weight 600 — DEAN & DELUCA を象徴する独自のインタラクション
  • バイリンガルラベル: "今月のおすすめ MONTHLY SPECIAL" のように日本語タイトル + 英語サブタイトルを組み合わせる
  • ウォームブラウン #b78051: コーヒーやチョコレートを連想させる季節・テーマのアクセントカラー
  • 検索入力は pill 形状（border-radius 900px）
  • 角丸は基本 0px（pill 検索とサークル CTA のみ例外）
  • ライトモード前提（ダーク切替なし）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。 DEAN & DELUCA は黒と白の二極構成にグレースケールとウォームブラウンを添えるミニマルなパレット。

Brand

• Brand Black (#000000): ロゴ・見出し・本文・CTA 背景。ブランドの基調色
• Brand White (#ffffff): ページ背景・CTA テキスト（黒面上）・ヒーローテキストボックス

Accent

• Warm Brown (#b78051): 季節・テーマセクションのアクセント（rgb(183, 128, 81)）。"お店でたのしむ" セクション等。コーヒー・チョコレート・キャラメルを連想させるブランドらしい暖色

Surface（背景）

• Page Background (#ffffff): ページ全体の純白
• Section Light (#f8f8f8): セクション背景の微灰（rgb(248, 248, 248)）
• About Surface (#eeeeee): アバウトセクション・補助面（rgb(238, 238, 238)）
• Anchor Tab (#f0f0f0): アンカーナビゲーションタブの背景（rgb(240, 240, 240)）
• Footer (#000000): フッタ背景（黒）

Text / Foreground

• Text Primary (#000000): 見出し・本文・ナビ
• Text Dark Gray (#444444): 補助テキスト・フッタ内リンク（rgb(68, 68, 68)）
• Text Inverse (#ffffff): 黒背景上の白文字（CTA・フッタ）

Border / Divider

• Search Border (#707070): 検索入力の枠線（rgb(112, 112, 112)）
• Anchor Tab Border (#e6e6e6): アンカーナビの 2px 枠（rgb(230, 230, 230)）
• Divider (#8b8b8b): 区切り線・サブテキスト（rgb(139, 139, 139)）
• Carousel Dot (#cccccc): カルーセルのドットインジケーター非活性状態

Semantic（補完）

• 実 UI にエラー・成功色は表面化していない（EC カート・フォームでは内部使用）
• アラートを追加する場合は赤 #c0392b / 緑 #27ae60 / 黄 #d4a726 を落ち着いたトーンで

3. Typography Rules

3.1 和文フォント

DEAN & DELUCA は2 系統のフォントを明確に使い分ける:

見出し・CTA — 游明朝 serif

• 第1候補: 游明朝体 / "Yu Mincho" / YuMincho
• 第2候補: "ヒラギノ明朝 Pro" / "Hiragino Mincho Pro"
• 第3候補: "MS P明朝" / "MS PMincho"
• 最終フォールバック: serif
• 役割: セクション見出し・カテゴリ名・CTA テキストに使用。プレミアム EC の格式を表現

本文・ナビ・ユーティリティ — 游ゴシック sans

• 第1候補: 游ゴシック体 / "Yu Gothic" / YuGothic
• 第2候補: "ヒラギノ角ゴ Pro" / "Hiragino Kaku Gothic Pro"
• 第3候補: メイリオ / Meiryo
• 第4候補: "MS Pゴシック" / "MS PGothic"
• 最終フォールバック: sans-serif

3.2 欧文フォント

• サンセリフ: "Helvetica Neue", Arial — 和文ゴシック系チェーンの先頭に配置。欧文グリフを Helvetica で表示する欧文優先構成
• セリフ（欧文専用）: 該当なし（明朝チェーンは游明朝の欧文グリフで対応）
• 等幅: 該当なし

3.3 font-family 指定

実サイトの実測値:

css/* 本文・ナビ・ユーティリティ（欧文先行 + 游ゴシック） */
font-family: "Helvetica Neue", Arial, 游ゴシック体, "Yu Gothic", YuGothic,
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
  "MS Pゴシック", "MS PGothic", sans-serif;

/* 見出し・CTA・h1-h3（游明朝） */
font-family: 游明朝体, "Yu Mincho", YuMincho,
  "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",
  "MS P明朝", "MS PMincho", serif;

/* ボタン（カルーセルコントロール等、短縮版） */
font-family: "Helvetica Neue", Arial, 游ゴシック体, "Yu Gothic", YuGothic, sans-serif;

フォールバックの考え方:

• 本文は Helvetica Neue を先頭に置く欧文優先構成 — "DEAN & DELUCA" のブランド名や英語ラベルを Helvetica で美しく表示
• 見出しは游明朝を最優先 — プレミアム感を明朝で担保
• ゴシック系は "ヒラギノ角ゴ Pro" を使用（ProN ではなく Pro）
• AI で再現する場合:
  • 本文: "Helvetica Neue", Arial, "Yu Gothic", "Hiragino Kaku Gothic Pro", sans-serif に簡略化
  • 見出し: "Yu Mincho", "Hiragino Mincho Pro", serif に簡略化

3.4 文字サイズ・ウェイト階層

実測値（トップページ、2026-05-08 取得）

3.5 行間・字間

• 本文の行間: 1.6（22.4 / 14）— 日本語本文の標準。14px のコンパクトな本文サイズを補う十分な行間
• 大見出し（Display）の行間: 1.59（50.88 / 32）— 明朝にしてはゆったりで、写真の余韻を引き継ぐ
• セクション見出しの行間: 1.29（36 / 28）— 明朝タイトルをコンパクトに
• カテゴリ名の行間: 1.31（21 / 16）
• 本文の字間 (letter-spacing): 0.56px（0.04em at 14px） — body に一律適用。日本語に適度な空気を入れて上品な間を作る
• カテゴリ名の字間: -0.5px（-0.03em at 16px） — タイトなレタースペーシングで密度感を出す

ガイドライン:

• DEAN & DELUCA の本文は 14px と小さめ。line-height 1.6 と letter-spacing 0.04em が可読性の生命線
• 明朝見出しは weight 600 で明朝の繊細さとプレミアム EC の存在感を両立
• letter-spacing 0.56px は body からの継承値。見出しの一部では normal に戻る

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;

• 商品名（"マスカットオブアレキサンドリアの白ワインゼリーとクリームチーズのサンドウィッチ" 等）は長くなりがちなので改行位置に注意
• バイリンガルラベルは日本語行 + 英語行で改行する

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt / kern を有効化していない — 游明朝・游ゴシックともに詰めない素朴な組
• 0.56px の letter-spacing で字間を開く方向に調整（palt による詰めとは逆のアプローチ）

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

DEAN & DELUCA は3 種類のボタンを使い分ける。

Primary CTA（円形・"一覧を見る"）

• Background: #000000（黒）
• Text: #ffffff（白）
• Border Radius: 100%（完全な円形）
• Padding: 37px 0px 0px（円形の中央に text-align: center で配置）
• Font: 游明朝 / 14px / weight 600
• 用途: セクション末尾の誘導 CTA。写真の脇に浮かぶ円形が DEAN & DELUCA の特徴的な UI 要素

Secondary CTA（矩形アウトライン・"TOPページ"）

• Background: #ffffff（白）
• Text: #000000（黒）
• Border: 1px solid #000000
• Border Radius: 0px（直角）
• Padding: 12px 0px 11px
• Font: 游明朝 / 16px / weight 600
• 用途: エラーページの戻り導線等

Anchor Navigation Tab

• Background: #f0f0f0
• Text: #000000
• Border: 2px solid #e6e6e6
• Border Radius: 0px
• Padding: 3px
• Font: 游ゴシック / 14px / weight 500
• 用途: ページ内アンカーナビゲーション

Inputs

Search Input（ヘッダー検索）

• Background: #ffffff
• Border: 1px solid #707070
• Border Radius: 900px（pill 形状）
• Padding: 4.5px 10px 4.5px 40px（左に検索アイコン用余白）
• Font: 游ゴシック / 13px / weight 500
• Color: #000000

その他のフォーム入力（カート・ログイン等）:

• Background: #ffffff
• Border: 1px solid #707070
• Border (focus): 1px solid #000000（推奨）
• Border Radius: 0px
• Padding: 12px 16px
• Font: 游ゴシック / 14px / weight 500

Cards / Product Cards

商品一覧・特集カード:

• Background: #ffffff
• Border: なし（影もなし）
• Border Radius: 0px
• Padding: 16px（推奨）
• Shadow: なし（フラット）
• 構造:
  • 商品写真（正方形に近い高品質フードフォトグラフィー）
  • 商品名（游明朝 or 游ゴシック / 14–16px / weight 500–600）
  • 価格（游ゴシック / 14px / weight 500）
  • カテゴリタグ（12px / weight 500）

Header / Nav

3 層構成のスティッキーヘッダー:

1. ユーティリティバー: 游ゴシック 12px / weight 500 / ログイン・会員登録等
2. ロゴ行: 中央に "DEAN & DELUCA"（游明朝 14px / weight 600）/ 右に pill 検索 + マイページ・カートアイコン
3. ナビバー: 商品を選ぶ / ギフトを贈る / 季節の特集 / コラム（左）、ケータリング / 店舗情報（右）/ 游ゴシック 14px / weight 500

• Background: #ffffff
• Border Bottom: 1px solid #e6e6e6（推奨）

Footer

• Background: #000000（黒）
• Color: #ffffff（白テキスト）
• ロゴ・リンク: 游ゴシック 12–14px
• コピーライト: 12px

Hero Carousel

• 全幅のフードフォトグラフィー
• テキストオーバーレイ: 白ボックス上に游明朝の日本語タイトル + 英語サブタイトル
• ドットインジケーター: #cccccc（非活性）/ #000000（活性・推奨）
• 前後ボタン: 游ゴシック（短縮チェーン）

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1200px（推奨）
• Padding (horizontal): mobile 16px / desktop 24–32px

Grid

• 商品カード: 2 カラム（mobile）→ 3 カラム（tablet）→ 4 カラム（desktop）
• 特集カード: 1–2 カラム（大判写真を活かす）
• Gutter: 16–24px
• カテゴリグリッド: 3–6 カラム（desktop）

Border Radius Scale

• 原則 0px の直角。円形 CTA と pill 検索だけが例外

6. Depth & Elevation

• DEAN & DELUCA は影を使わない。フラットな純白面の上に黒テキストと高品質写真だけで構成する
• 視覚階層は写真のサイズ・游明朝見出しの大小・グレースケール面色の濃淡で表現
• ホバー演出: opacity 変化のみ（推奨）

7. Do's and Don'ts

Do（推奨）

• 背景は純白 #ffffff、テキストは純黒 #000000（グレーに逃げない強いコントラスト）
• 見出し・CTA テキストは游明朝 serif / weight 600。セクションタイトルからカテゴリ名まで一貫して明朝
• 本文・ナビは游ゴシック sans / weight 500（Medium 相当）。Helvetica Neue を先頭に置く欧文優先チェーン
• Display 見出し: 32px / 游明朝 / weight 600 / line-height 1.59
• セクション見出し: 24–28px / 游明朝 / weight 600 / line-height 1.29–1.42
• 本文: 14px / 游ゴシック / weight 500 / line-height 1.6 / letter-spacing 0.04em
• letter-spacing 0.04em を body に適用 — DEAN & DELUCA のテキストに通底する上品な空気感
• Primary CTA は黒円形（border-radius 100% / 黒塗り / 白文字 游明朝 14px weight 600）
• Secondary CTA は白矩形アウトライン（border 1px solid #000000 / border-radius 0px）
• 検索入力は pill 形状（border-radius 900px / border 1px solid #707070）
• バイリンガルラベルを使う: 日本語タイトル + 英語サブタイトル（例: "今月のおすすめ MONTHLY SPECIAL"）
• フッタは黒 #000000 面 + 白文字
• ウォームブラウン #b78051 はアクセントとして控えめに — セクション背景やテーマカラーに使用
• 食材・商品写真は大きく、高品質に。ビジュアルが主役

Don't（禁止）

• 本文の weight を 400 にしない（500 が DEAN & DELUCA のデフォルト）
• 本文に明朝を使わない（明朝は見出し・CTA 専用）
• 見出しにゴシックを使わない（ナビのセクション見出しは例外だが、メインコンテンツの見出しは明朝）
• letter-spacing を normal（0）にしない（0.04em が DEAN & DELUCA の組）
• font-feature-settings: "palt" を適用しない（normal が選択）
• CTA を角丸矩形にしない（Primary は完全な円形 100%、Secondary は直角 0px）
• 鮮やかな原色やパステルを多用しない（黒白グレーとウォームブラウンの抑制されたパレット）
• 影・elevation を使わない（フラット原則）
• 商品写真を小さく扱わない（フードフォトグラフィーが最大の訴求力）

8. Responsive Behavior

Breakpoints

モバイル時の調整

• Display 見出し: 32px → 24px（游明朝 weight 600 は維持）
• セクション見出し: 28px → 20–22px
• Body: 14px 維持（縮小しない）
• ヒーローカルーセル: 全幅維持、テキストオーバーレイのサイズを縮小
• ヘッダー: 3 層 → ロゴ + ハンバーガー + 検索アイコンに集約
• カードグリッド: 4 → 2 → 1 カラム
• 円形 CTA: サイズを縮小するが円形は維持

タッチターゲット

• 最小 44×44px。円形 CTA は直径 74px 以上を確保（padding 37px × 2 基準）
• ナビリンクの行間・パディングでタッチ領域を担保

ダークモード

• 対応なし。ライトモード固定
• フッタの黒面が「ダーク的役割」を担う

9. Agent Prompt Guide

クイックリファレンス

Background: #ffffff（純白）
Text Primary: #000000（純黒）
Text Dark Gray: #444444（補助テキスト）
Warm Brown: #b78051（アクセント）
Section Light: #f8f8f8（セクション背景）
About Surface: #eeeeee
Anchor Tab: #f0f0f0
Footer: #000000（黒）
Search Border: #707070
Anchor Border: #e6e6e6
Carousel Dot: #cccccc

Heading Font (游明朝): 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif
Heading Web Fallback: "Yu Mincho", "Hiragino Mincho Pro", serif

Body Font (游ゴシック): "Helvetica Neue", Arial, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif
Body Web Fallback (簡略): "Helvetica Neue", Arial, "Yu Gothic", "Hiragino Kaku Gothic Pro", sans-serif

Display: 32px / 游明朝 / weight 600 / line-height 1.59 / letter-spacing normal
Heading Lv1: 28px / 游明朝 / weight 600 / line-height 1.29 / letter-spacing 0.56px
Heading Lv2: 24px / 游明朝 / weight 600 / line-height 1.29
Category: 16px / 游明朝 / weight 600 / line-height 1.31 / letter-spacing -0.5px
Body: 14px / 游ゴシック / weight 500 / line-height 1.6 / letter-spacing 0.56px (0.04em)
Utility: 12px / 游ゴシック / weight 500 / line-height 1.6 / letter-spacing 0.56px

Primary CTA (Circle): black bg #000000 / white text #ffffff / border-radius 100% / 游明朝 14px / weight 600
Secondary CTA (Outline): white bg / 1px solid #000000 / border-radius 0px / 游明朝 16px / weight 600
Search Input: pill / border-radius 900px / 1px solid #707070 / 游ゴシック 13px

font-feature-settings: normal（palt 適用なし）
Border Radius: 0px（Circle CTA のみ 100%、Search のみ 900px）
Shadow: none（フラット）

プロンプト例

DEAN & DELUCA のデザインに従って、季節の特集商品ページを作成してください。
- 背景: #ffffff（純白）
- 見出しフォント: "Yu Mincho", "Hiragino Mincho Pro", serif
- 本文フォント: "Helvetica Neue", Arial, "Yu Gothic", "Hiragino Kaku Gothic Pro", sans-serif
- font-feature-settings: normal（palt は適用しない）
- letter-spacing: 0.04em を本文に適用（見出しは normal）
- ページタイトル "今月のおすすめ": 32px / 游明朝 / weight 600 / line-height 1.59 / color #000000
- 英語サブタイトル "MONTHLY SPECIAL": 游ゴシック / 12px / weight 500 / letter-spacing 0.1em / color #444444
- セクション見出し "カテゴリーから選ぶ": 24px / 游明朝 / weight 600 / line-height 1.29 / color #000000
- 商品カード: 背景 #ffffff / border-radius 0 / padding 16px / 影なし
- 商品写真: 正方形・高品質フードフォトグラフィー
- 商品名: 游ゴシック 14px / weight 500 / color #000000
- 価格: 游ゴシック 14px / weight 500
- "一覧を見る" CTA: 黒円形 / border-radius 100% / bg #000000 / 白文字 游明朝 14px weight 600
- "TOPページ" CTA: 白矩形 / border 1px solid #000000 / border-radius 0px / 黒文字 游明朝 16px weight 600
- 検索バー: pill 形状 / border-radius 900px / border 1px solid #707070 / 游ゴシック 13px
- フッタ: 背景 #000000（黒）+ 白文字
- ウォームブラウン #b78051 は季節テーマセクションのアクセントに
- 影・グラデーションは一切使わない
- 角丸はすべて 0px（円形 CTA のみ 100%、検索のみ pill）
- 本文 weight は 500（400 にしない）