DECORTE DESIGN.md

DECORTE（https://www.decorte.com/）のデザイン仕様書。 KOSE の最高峰ラグジュアリーコスメティクスブランド。実サイトの computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ラグジュアリーコスメの世界観を、ミニマルな構成とモノクロームの色使いで表現。余白を贅沢に使い、製品の美しさを際立たせる
• 密度: ゆったりとした余白。ビジュアル主導で情報密度は低く、高級感を演出
• キーワード: ラグジュアリー、ミニマル、モノクローム、建築的、静謐
• 特徴: 本文ウェイトが 300（Light）と非常に細く、ラグジュアリーブランド特有の繊細な印象。ボタンは角丸なしの直線的デザインで建築的な雰囲気。ナビゲーションにセリフ体（Noto Serif JP）を使用し、ゴシック体（Noto Sans JP）の本文と対比させている

2. Color Palette & Roles

Primary（ブランドカラー）

• Black (#000000): ブランドの基調色。ロゴ、ナビゲーションのアクティブインジケーターに使用
• Dark Gray (#333333): CTA ボタン、カート・検索アイコンの背景色

Accent

• Soft Pink (#ffebea): プロモーションセクションの背景。柔らかいフェミニンなアクセント

Neutral（ニュートラル）

• Text Primary (#000000): 本文テキスト
• Text Secondary (#999999): 補足テキスト、無効状態の矢印
• Border (#999999): 検索入力欄の枠線
• Border Light (#d3d3d3): 薄いボーダー、入力欄
• Border Subtle (#d4d4d4): チェックボックス等の枠線
• Background (#ffffff): ページ背景
• Surface (#f0f0f0): ランキングナビ等のセクション背景
• Dot Inactive (#dbdbdb): カルーセルの非アクティブドット

3. Typography Rules

3.1 和文フォント

ゴシック体（本文・見出し）:

• Noto Sans JP（Google Fonts、ウェイト 300 / 400 / 700）

明朝体（ナビゲーション）:

• Noto Serif JP（Google Fonts、ウェイト 400）

3.2 欧文フォント

• サンセリフ: Arial, Helvetica Neue
• セリフ: Times New Roman（明朝体フォールバック内）

3.3 font-family 指定

css/* 本文・見出し（ゴシック体） */
font-family: "Noto Sans JP", Arial, "Helvetica Neue",
  "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro",
  "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体,
  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* ナビゲーション（明朝体） */
font-family: "Noto Serif JP", "Times New Roman",
  "Hiragino Mincho Pro", "ヒラギノ明朝 Pro",
  "Yu Mincho", 游明朝, YuMincho, 游明朝体,
  "MS PMincho", "ＭＳ Ｐ明朝", serif;

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

• Noto Sans JP を先頭に指定（Google Fonts で統一的な表示を保証）
• 欧文は Arial → Helvetica Neue の順で、ニュートラルなサンセリフ
• ナビゲーションのみ Noto Serif JP を使用し、ゴシック本文との対比を生む
• 和文フォールバックはヒラギノ → 游ゴシック → MS PGothic の標準的な順序

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

以下は DevTools の computed style による実測値

3.5 行間・字間

行間 (line-height) — 実測値:

• 本文 (body): 1.5（14px x 1.5 = 21px）
• 見出し (h2-h4): 1.7（ゆったりした見出し行間）
• ナビゲーション: 1.0（セリフ体のナビは詰め気味）

字間 (letter-spacing) — 実測値:

• 全要素共通: 0.05em（各サイズに対して一律の比率）
• 本文 14px: 0.7px（= 0.05em）
• h2 20px: 1px（= 0.05em）
• h3 18px: 0.9px（= 0.05em）
• h4 16px: 0.8px（= 0.05em）
• ナビ 13px: 0.65px（= 0.05em）
• カテゴリ 9px: 0.45px（= 0.05em）

ガイドライン:

• letter-spacing: 0.05em は全要素にグローバル適用。ラグジュアリーブランドらしい均一な字間で上品な印象を生む
• 本文の font-weight: 300 は日本語サイトとしては珍しく細い。高級感を演出するための意図的な選択
• 見出しの行間 1.7 は本文の 1.5 より広く、余裕のある組版

3.6 禁則処理・改行ルール

css/* 推奨設定 */
word-break: break-all;
overflow-wrap: break-word;

• 標準的な禁則処理。ラグジュアリーサイトのため、改行位置への配慮が重要

3.7 OpenType 機能

css/* グローバル適用 — 全要素に適用 */
font-feature-settings: "palt";

• palt: 全要素にグローバル適用。本文・見出し・ナビゲーションすべてでプロポーショナル字詰めが有効
• letter-spacing: 0.05em と palt の組み合わせにより、均一で洗練された字間を実現
• note（見出しのみ palt）とは異なり、DECORTE は全面的に palt を使用している点に注意

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary（CTA）

• Background: #333333
• Text: #ffffff
• Padding: 7px 程度
• Border Radius: 0px（角丸なし）
• Font Size: 14px
• Font Weight: 300
• Border: none

Secondary（アウトライン）

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Padding: 10px 24px
• Border Radius: 0px（角丸なし）

特徴: ボタンは一切角丸を使わない。直線的・建築的なデザインで、ラグジュアリーブランドの厳格さを表現

Inputs

• Background: #ffffff
• Border: 1px solid #999999
• Border (focus): 1px solid #333333
• Border Radius: 0px（角丸なし）
• Padding: 8px 12px
• Font Size: 14px
• Font Weight: 300

Cards

• Background: #ffffff
• Border: 1px solid #d3d3d3
• Border Radius: 0px
• Padding: 24px
• Shadow: なし（フラット）

Navigation

メインナビゲーション:

• Background: #ffffff
• Font Family: Noto Serif JP（明朝体）
• Font Size: 13px
• Font Weight: 400
• Letter Spacing: 0.65px (0.05em)
• 下線なし、ホバー時にアンダーラインまたは opacity 変化

アクティブインジケーター（ドット）:

• Active: #000000（黒丸）、Border Radius: 50%
• Inactive: #dbdbdb（淡いグレー丸）、Border Radius: 50%

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px
• Padding (horizontal): 32px

Grid

• 製品グリッド: 4カラム（デスクトップ）、2カラム（タブレット）、1カラム（モバイル）
• Gutter: 16px

6. Depth & Elevation

• DECORTE は全体的にフラットなデザイン。影はほとんど使わず、ボーダーと余白で構造を表現する
• ラグジュアリーサイトとして、重厚な影よりも軽やかさ・空気感を重視

7. Do's and Don'ts

Do（推奨）

• テキストは font-weight: 300 で細くし、ラグジュアリーな繊細さを表現する
• letter-spacing: 0.05em を全要素に均一に適用する
• font-feature-settings: "palt" を全要素にグローバル適用する
• ボタン・入力欄はすべて border-radius: 0 で直線的に仕上げる
• ナビゲーションには Noto Serif JP（明朝体）を使い、本文ゴシックとの対比を生む
• 製品写真には十分な余白を取り、コンテンツを引き立てる
• モノクロームパレット（黒・白・グレー）を基調とし、色は控えめに使う

Don't（禁止）

• ボタンやカードに角丸を使わない（ブランドの建築的なデザイン言語に反する）
• 本文に font-weight: 400 以上を使わない（300 のライトウェイトがブランドの特徴）
• 原色や彩度の高い色を多用しない（モノクロームが基調）
• letter-spacing を要素ごとにバラバラに設定しない（0.05em の統一感が重要）
• 影（box-shadow）を強くかけない（フラットで軽やかな印象を保つ）
• palt を外さない（全要素で有効にする設計意図がある）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）

フォントサイズの調整

• モバイルでは本文 13-14px を維持
• 見出しはデスクトップの 80% 程度に縮小
• 製品グリッドは 2 カラム → 1 カラムに変更

9. Agent Prompt Guide

クイックリファレンス

CTA Background: #333333
Text Primary: #000000
Text Secondary: #999999
Background: #ffffff
Surface: #f0f0f0
Border: #d3d3d3
Accent Pink: #ffebea
Dot Active: #000000
Dot Inactive: #dbdbdb

Sans-Serif Font: "Noto Sans JP", Arial, "Helvetica Neue",
  "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro",
  "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体,
  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif

Serif Font: "Noto Serif JP", "Times New Roman",
  "Hiragino Mincho Pro", "ヒラギノ明朝 Pro",
  "Yu Mincho", 游明朝, YuMincho, 游明朝体,
  "MS PMincho", "ＭＳ Ｐ明朝", serif

Body: 14px / weight 300 / line-height: 1.5 / letter-spacing: 0.05em
Heading: weight 700 / line-height: 1.7 / letter-spacing: 0.05em
Nav: Serif / 13px / weight 400 / letter-spacing: 0.05em
OpenType: font-feature-settings: "palt" (global)
Border Radius: 0px (all components)

プロンプト例

DECORTE のデザインに従って、製品一覧ページを作成してください。
- フォント: "Noto Sans JP", Arial, "Helvetica Neue",
    "Hiragino Kaku Gothic Pro", sans-serif
- ナビゲーション: "Noto Serif JP" 明朝体
- テキスト色: #000000、補足: #999999
- 背景: #ffffff、セクション背景: #f0f0f0
- ボーダー: #d3d3d3
- CTA ボタン: bg #333333、text #ffffff、角丸なし
- 本文: 14px, weight 300, line-height: 1.5, letter-spacing: 0.05em
- 見出し: weight 700, line-height: 1.7, letter-spacing: 0.05em
- 全要素: font-feature-settings: "palt"
- すべてのコンポーネントで border-radius: 0