THREE DESIGN.md

THREE（https://www.threecosmetics.com/）のデザイン仕様書。 ACRO Inc.（ポーラ・オルビスグループ）が展開するナチュラルコスメブランド。 実サイトの computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 植物由来の自然な美しさを体現する、引き算のデザイン。プロダクトフォトグラフィが主役で、UIクロームは極限まで削ぎ落とされている
• 密度: 非常にゆったり。余白を贅沢に使い、コスメブランドらしいエディトリアルな空気感を演出
• キーワード: ボタニカル、ミニマル、エディトリアル、フラット、ストイック
• 特徴:
  • 全テキスト weight 400 — ボールドを一切使わない、均一なテキストウェイトが静謐な印象を生む
  • 全ボタン border-radius: 0 — 角丸なし。矩形のゴーストボタンのみで構成
  • Akzidenz-Grotesk — Helvetica の前身であるネオグロテスク書体を全面採用。ラグジュアリーかつクラフト感のある欧文表現
  • イエローグリーン #dfda64 — THREE のシグネチャーアクセントカラー。ティッカーバナーに使用
  • 影なし — box-shadow を一切使わない完全フラットデザイン

2. Color Palette & Roles

Brand（ブランドカラー）

• Brand Accent (#dfda64): THREE のシグネチャーカラー。イエローグリーン。ティッカーバナー、アクセント装飾に使用。テキストには使わない

Neutral（ニュートラル）

• Text Primary (#333333): 本文テキスト。純粋な黒ではなく、柔らかいダークグレー
• Text Secondary (#595757): フッターナビ、補足テキスト
• Border Primary (#595757): CTAボタンの枠線（ダーク背景以外）
• Border Secondary (#bfbfbf): セカンダリボタン、ジャーナルリンクの枠線
• Border Light (#b9b9b9): ジャーナルリンク等の薄い枠線
• Background (#ffffff): ページ背景
• Surface Tag (#f2f2f2): キーワードタグの背景
• Surface Tag Hover (#ededed): タグホバー、NAVアクティブ状態の背景
• Banner Muted (#999999): グレーティッカーバナー背景

On Dark（暗い背景上）

• Text on Dark (#ffffff): ダーク背景上のテキスト
• Border on Dark (#ffffff): ダーク背景上のボタン枠線

3. Typography Rules

3.1 和文フォント

ゴシック体（デフォルト）:

• ヒラギノ角ゴ ProN（macOS）
• 游ゴシック（macOS / Windows）
• メイリオ（Windows フォールバック）

明朝体: 該当なし。THREE は全面ゴシック体（日本のビューティーブランドとしては珍しい選択）

3.2 欧文フォント

• プライマリ: Akzidenz-Grotesk（Berthold 社のライセンスフォント）
  • 代替フォント: Inter（Google Fonts）— ジオメトリックサンセリフとして最も近い印象。Akzidenz-Grotesk の均一なストロークと中立的な字形を再現
  • 他の候補: IBM Plex Sans（やや人間味が強い）、Work Sans（やや幅広）
• フォーム / 検索: Arial（単体指定）

3.3 font-family 指定

css/* メイン — 欧文 Akzidenz-Grotesk 優先 */
font-family: akzidenz-grotesk, "Hiragino Kaku Gothic ProN",
  "ヒラギノ角ゴ ProN W3", arial, YuGothic, 游ゴシック,
  Meiryo, メイリオ, sans-serif;

/* フォーム / 検索入力 */
font-family: Arial, sans-serif;

/* preview.html 用（ライセンスフォント代替） */
font-family: "Inter", "Hiragino Kaku Gothic ProN",
  "ヒラギノ角ゴ ProN W3", arial, YuGothic, 游ゴシック,
  Meiryo, メイリオ, sans-serif;

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

• 欧文 Akzidenz-Grotesk を最優先。ブランドの欧文表現が核心
• 和文はヒラギノ角ゴ ProN → 游ゴシック → メイリオの順
• 明朝体スタックは不要（サイト全体がゴシック統一）
• フォーム入力は Arial 単体でシステムフォント的に扱う

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

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

特徴的な点:

• 全テキストが weight 400 — ボールドは一切使用されていない
• 全テキストに letter-spacing: 0.5px が均一に適用されている
• コンパクトなサイズ — 本文 14px、キャプション 12px と、日本語サイトとしては小さめ
• 見出しの line-height: 1.0 — 見出しに呼吸の余白を持たせない、タイトな組版

3.5 行間・字間

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

• 本文 / ナビ: 1.86 (14px × 1.86 = 26px) — 日本語としては標準的
• 商品名: 1.57 (14px × 1.57 = 22px) — やや詰め気味
• 見出し (h2, h3): 1.0 — 非常にタイト。装飾的な見出し表現
• 価格: 1.0 — データ表示はタイトに
• フッター: 1.83 (12px × 1.83 = 22px) — 小さい文字は行間を広めに

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

• 全テキストに 0.5px が均一適用 — サイズに関わらず固定値
• 14px テキストでは約 0.036em、12px テキストでは約 0.042em に相当
• palt は確認されていない

ガイドライン:

• letter-spacing: 0.5px をすべてのテキストに均一適用する
• font-weight: 400 のみを使用する。ボールドは禁止
• 見出しの line-height: 1.0 は意図的なデザイン判断（装飾的・欧文的な見出し表現）
• 本文の line-height: 1.86 は日本語の可読性を確保している

3.6 禁則処理・改行ルール

css/* 標準的な日本語改行設定 */
word-break: break-all;
overflow-wrap: break-word;

• 特殊な禁則処理の設定は確認されていない
• サイト全体がコンパクトなテキスト量のため、長文の折り返しは最小限

3.7 OpenType 機能

css/* palt / kern の明示的な適用は確認されていない */
font-feature-settings: normal;

• Akzidenz-Grotesk はもともとプロポーショナルフォントのため、palt は不要
• 和文部分にも palt は適用されていない（ヒラギノ角ゴ ProN のデフォルト字詰めで運用）

3.8 縦書き

• 該当なし。THREE は横書きのみ

4. Component Stylings

Buttons

THREE のボタンはすべてゴーストボタン（アウトライン）。塗りつぶしボタンは存在しない。

Primary CTA（ダークグレー枠）

• Background: transparent
• Text: #333333
• Border: 1px solid #595757
• Padding: 14px 0（幅は親要素に依存）
• Border Radius: 0px
• Font Size: 14px
• Font Weight: 400
• Letter Spacing: 0.5px

Secondary CTA（ライトグレー枠）

• Background: transparent
• Text: #333333
• Border: 1px solid #bfbfbf
• Padding: 8px 0
• Border Radius: 0px
• Font Size: 12px
• Font Weight: 400

CTA on Dark（白枠）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Padding: 15px 0
• Border Radius: 0px
• Font Size: 14px
• Font Weight: 400

Keyword Tag

• Background: #f2f2f2
• Text: #333333
• Border: none
• Padding: 3px 10px
• Border Radius: 0px
• Font Size: 14px
• Hover Background: #ededed

Inputs

• Background: #ffffff
• Border: 1px solid #bfbfbf
• Border Radius: 0px
• Padding: 8px 12px
• Font Size: 14px（Arial）
• Font Weight: 400

Cards

• Background: #ffffff
• Border: none（ボーダーレス、写真主導のカード）
• Border Radius: 0px
• Shadow: none（完全フラット）
• 商品画像が全面を占め、テキストは最小限

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px（推定）
• Padding (horizontal): 20px

Grid

• 商品一覧: 3〜4カラムグリッド
• Gutter: 16px〜24px

6. Depth & Elevation

• THREE は完全フラットデザイン。box-shadow を一切使用しない
• 要素の区別はスペーシングとタイポグラフィの階層のみで表現
• ホバー時も影の追加はなし（ボーダー色の変化やテキストのアンダーラインで状態を示す）
• この徹底したフラットさが、プロダクト写真の美しさを際立たせている

7. Do's and Don'ts

Do（推奨）

• テキストは常に font-weight: 400 を使う。ボールドで強調しない、ストイックな表現を貫く
• letter-spacing: 0.5px をすべてのテキストに均一適用する
• ボタンは border-radius: 0 のゴーストボタン（アウトライン）のみ使う
• 商品写真を大きく扱い、UIクロームは最小限にする
• アクセントカラー #dfda64 は装飾要素（ティッカーバナー等）にのみ使い、抑制的に使う
• テキスト色は #333333 を使い、純粋な #000000 は避ける
• 見出しの line-height: 1.0 を維持し、欧文的なタイトな組版を表現する

Don't（禁止）

• font-weight: 700 や bold を使わない（THREE のデザインで最も重要なルール）
• border-radius を付けない。角丸ボタンは THREE の世界観を壊す
• 塗りつぶしボタンを使わない。すべてのCTAはゴーストボタン
• #dfda64 アクセントカラーをテキストに使わない（白背景でコントラスト不足）
• box-shadow を追加しない。フラットデザインを崩さない
• 明朝体を使わない（THREE はゴシック体のみ）
• テキストサイズを大きくしすぎない（14px 本文、12px キャプションのコンパクトさを維持）

8. Responsive Behavior

Breakpoints

タッチターゲット

• ゴーストボタンは十分なパディング（14px〜15px 垂直）でタップ可能領域を確保

フォントサイズの調整

• モバイルでは本文 14px を維持（もともとコンパクト）
• グリッドカラム数を 3〜4 → 2 → 1 に段階的に縮小
• 商品画像の比率は維持

9. Agent Prompt Guide

クイックリファレンス

Brand Accent: #dfda64（ティッカーバナー・装飾用）
Text Primary: #333333
Text Secondary: #595757
Background: #ffffff
Surface Tag: #f2f2f2
Border CTA: #595757
Border Secondary: #bfbfbf

Font: akzidenz-grotesk, "Hiragino Kaku Gothic ProN",
  "ヒラギノ角ゴ ProN W3", arial, YuGothic, 游ゴシック,
  Meiryo, メイリオ, sans-serif
Font (preview substitute): "Inter", "Hiragino Kaku Gothic ProN",
  "ヒラギノ角ゴ ProN W3", arial, YuGothic, 游ゴシック,
  Meiryo, メイリオ, sans-serif

Body Size: 14px / weight: 400 / line-height: 1.86 / letter-spacing: 0.5px
Heading: weight: 400 / line-height: 1.0 / letter-spacing: 0.5px
All Buttons: border-radius: 0 / ghost (outline) only / weight: 400
Elevation: none (完全フラット)

プロンプト例

THREE のデザインに従って、商品一覧ページを作成してください。
- フォント: "Inter", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
    arial, YuGothic, 游ゴシック, Meiryo, メイリオ, sans-serif
- font-weight は全テキスト 400 のみ（bold 禁止）
- letter-spacing: 0.5px を全テキストに均一適用
- テキスト色: #333333
- 背景: #ffffff
- ボタン: border-radius: 0, ghost style, border 1px solid #595757
- 影なし（box-shadow 禁止）
- 商品写真を大きく扱い、UIは最小限に
- アクセント #dfda64 はティッカーバナー等の装飾のみ