AMBUSH DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 出典: https://ambushdesign.com/ (2026-06-02 取得)

1. Visual Theme & Atmosphere

• デザイン方針: モノクロームでストイックなラグジュアリーファッション。余白を大きくとり、情報密度を極限まで抑えたエディトリアルレイアウト
• 密度: 非常にゆったり。12px という小さなベースサイズで、テキストの存在感を最小限にしつつ、プロダクト写真とホワイトスペースで語るデザイン
• キーワード: avant-garde, monochrome, minimal, editorial, luxury

2. Color Palette & Roles

Primary（ブランドカラー）

• Black (#000000): ブランドの主軸色。テキスト・CTA 背景・ボーダーすべてに使用。AMBUSH はブランドカラー＝黒
• AMBUSH Red (#FF3A32, --ambushRed): アクセントカラー。セール・強調・通知に使用

Semantic（意味的な色）

• Error (#990000, --color-error): エラーメッセージ、バリデーション
• Error Area (#ECCACB, --color-error-area): エラー領域の背景

Neutral（ニュートラル）

• Text Primary (#000000): 本文テキスト。純黒をそのまま使用するのがブランドの特徴
• Text Secondary (#808080, --ambushGray): 補足テキスト、キャプション
• Text Muted (#666666, --color-medium-grey): 価格、メタ情報
• Border Default (#a5a5a5): VIEW ALL ボタン等の枠線
• Border Light (#cccccc, --color-grey): 区切り線
• Border Strong (#000000): CTA ボタンの枠線
• Background (#ffffff): ページ背景
• Surface (#f5f5f5, --ambushLightGray): カート領域、セクション背景
• Surface Faint (#f2f2f2, --color-lightest-grey): 入力フィールド背景
• Surface Light (#e2e2e2, --color-light-grey): ホバー・ディバイダー
• Off-White (#fafafa, --color-white): カード背景等。純白(#fff) とは区別
• Accent Gray (#d4d4d4, --color-accent): アクセント用グレー

3. Typography Rules

3.1 和文フォント

• ゴシック体: ヒラギノ角ゴシック ProN (hiragino-kaku-gothic-pron)
• ファッションブランドらしく、フォールバックの和文フォントは 1 種のみ

3.2 欧文フォント

• サンセリフ: Replica (Lineto)
• Replica はスイスの Lineto 社による有料書体。ジオメトリックでありながら人間味のあるプロポーション。ファッション・アート業界で広く採用されている
• preview.html 代替: Inter（Google Fonts）。ジオメトリックサンセリフとして最も近い印象

3.3 font-family 指定

css/* 全体 */
font-family: Replica, hiragino-kaku-gothic-pron, sans-serif;

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

• 欧文フォント (Replica) を先に指定。ブランドの欧文表現が最優先
• 和文フォールバックは hiragino-kaku-gothic-pron 1 種のみ。macOS ネイティブに依存するミニマルな構成
• generic family は sans-serif

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

特徴: タイポグラフィ階層がほぼフラット。ロゴ (27.5px) 以外はすべて 12px / 400。サイズやウェイトではなく、text-transform: uppercase とレイアウト上の位置で階層を表現するのが AMBUSH のデザイン言語

3.5 行間・字間

• 本文の行間 (line-height): 1.3（--lineHeightBody）。日本語としては狭いが、ファッションサイトのエディトリアルトーンを優先
• 見出しの行間: 1.3（本文と同じ）
• フッター見出しの行間: 0.8（--lineHeightRate）。極めてタイトなディスプレイ用途
• 本文の字間 (letter-spacing): 0.02em（全要素共通）
• 見出しの字間: 0.02em（同上）

ガイドライン:

• line-height 1.3 は日本語としては窮屈だが、ファッション系サイトではこのタイトさがトーンの一部。エージェントはこの値を維持すること
• letter-spacing 0.02em は全体に均一適用。バリエーションを設けない

3.6 禁則処理・改行ルール

cssword-break: break-all;
overflow-wrap: break-word;

3.7 OpenType 機能

css/* 特になし。palt / kern の明示的な指定はサイトに見られない */

• Replica は欧文専用書体のため palt は不要
• 和文フォールバック（ヒラギノ）に対しても palt は適用されていない

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary（黒ベタ）

• Background: #000000
• Text: #ffffff
• Padding: 12px 24px（推定）
• Border Radius: 5px
• Border: 1px solid #000000
• Font Size: 12px
• Font Weight: 400
• Text Transform: uppercase
• 用途: "VIEW CART"、"ADD TO BAG" 等の主要 CTA

Secondary（アウトライン）

• Background: transparent
• Text: #000000
• Padding: 12px 24px
• Border Radius: 5px
• Border: 1px solid #000000
• Font Size: 12px
• Font Weight: 400
• Text Transform: uppercase
• 用途: "CLOSE"、"買い物を続ける" 等の補助アクション

Tertiary（VIEW ALL）

• Background: #ffffff
• Text: #000000
• Padding: 12px 24px
• Border Radius: 0px
• Border: 1px solid #a5a5a5
• Font Size: 12px
• Font Weight: 400
• Text Transform: uppercase
• 用途: セクション末尾の一覧リンク

Newsletter（SIGN UP）

• Background: transparent
• Text: #000000
• Padding: 12px 24px
• Border Radius: 5px
• Border: 1px solid #000000
• Font Size: 12px
• Font Weight: 400
• Text Transform: uppercase

Inputs

• Background: #ffffff
• Border: 1px solid #cccccc
• Border (focus): 1px solid #000000
• Border Radius: 0px
• Padding: 12px 16px
• Font Size: 12px
• Font Family: Replica, hiragino-kaku-gothic-pron, sans-serif

Cards

• Background: #ffffff
• Border: none（プロダクトカードはボーダーレス。写真とテキストのみで構成）
• Border Radius: 0px
• Padding: 0（写真直下にテキストを配置）
• Shadow: none

5. Layout Principles

Spacing Scale

CSS Custom Properties に基づくスペーシングシステム:

Container

• Max Width: 制約なし（フルブリード基調）
• Padding (horizontal): 16px〜32px

Grid

• Columns: プロダクトグリッドは 2〜4 列
• Gutter: 16px〜24px
• プロダクト画像はアスペクト比固定（正方形または 3:4）

6. Depth & Elevation

フラットデザイン: エレベーションの概念を排除し、すべてをフラットに保つ。奥行きは余白と色のコントラストのみで表現する

7. Do's and Don'ts

Do（推奨）

• テキストサイズは原則 12px を維持する。サイズで階層をつけない
• text-transform: uppercase で英語セクションタイトルを表記する
• 黒(#000000)と白(#ffffff)の2色を軸にデザインする
• プロダクト写真を最大のコミュニケーション手段とし、テキストは最小限にする
• ボタンの角丸は 5px。pill（大きな角丸）は使わない
• フォントウェイトは 400 のみ。ボールド(700) は使わない

Don't（禁止）

• font-weight: 700 や bold を使わない。すべて regular (400) で統一する
• グラデーションやドロップシャドウを使わない。完全フラット
• 12px 以外の文字サイズを本文・見出しに使わない（ロゴの 27.5px は例外）
• 装飾的な色（カラフルな差し色）を多用しない。--ambushRed (#FF3A32) のみアクセントとして許容
• line-height を 1.5 以上にしない。タイトなタイポグラフィがブランドの特徴
• セリフ体を使わない

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px

フォントサイズの調整

• モバイルでもデスクトップと同じ 12px を維持。レスポンシブでサイズを変えないのが AMBUSH の特徴
• ロゴのみモバイルで若干縮小（27.5px → 20px 程度）

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #000000
Accent Color: #FF3A32
Text Color: #000000
Background: #ffffff
Surface: #f5f5f5
Font: Replica, hiragino-kaku-gothic-pron, sans-serif
Body Size: 12px
Body Weight: 400
Line Height: 1.3
Letter Spacing: 0.02em
Button Radius: 5px
Text Transform: uppercase (section titles, buttons)

プロンプト例

AMBUSH のデザインシステムに従って、商品一覧ページを作成してください。
- フォント: Replica, hiragino-kaku-gothic-pron, sans-serif（すべて 12px / 400）
- 色: 黒 #000000 と白 #ffffff の2色。アクセントに #FF3A32
- ボタン: 黒ベタ (#000 bg, #fff text, 5px radius) と アウトライン (transparent bg, #000 border, 5px radius)
- レイアウト: プロダクト写真を大きく、テキストは最小限。余白を広くとる
- 行間: line-height 1.3。英語セクションタイトルは text-transform: uppercase
- シャドウ・グラデーションは一切不要