Ambientec DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

対象サイト: https://ambientec.co.jp/ Ambientec は「灯りを、道具から作品へ」を掲げるポータブル照明ブランド。 コードレスの高級テーブルランプ（TURN / xtal / Bottled 等）を扱う。実測は EC トップおよび製品ページに基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 静謐でギャラリー的。余白を主役にし、製品写真と灯りの陰影が引き立つよう UI は極限まで引き算されている
• 密度: ゆったりとした低密度レイアウト。ファーストビューは大判ビジュアル＋わずかなラベルのみ
• キーワード: ミニマル / 上質 / 硬質 / 静か / エディトリアル
• 形状言語: 角丸を一切使わない（border-radius: 0）。ボタンは塗りではなく細い罫線のアウトライン。直線と直角で構成する
• 書体の性格: 欧文グロテスク（Neue Haas Grotesk）を主役に据え、見出し・ナビ・ボタンは英字を 大文字（uppercase） で組む。和文は DNP 秀英角ゴシック銀で欧文に馴染ませる

2. Color Palette & Roles

Base（下地）

• Background (#fdfdfc): ページ全体の下地。純白ではなくごくわずかに暖色を含んだオフホワイト
• Surface (#f0f0ed): セクションパネル・切替領域の面色。下地よりわずかに沈んだウォームグレー
• Surface Alt (#efefeb): サブパネル・区切り領域

Text（文字色）

• Text Primary (#161615): 見出し・本文。純黒ではないニアブラック（rgb(22,22,21)）
• Text Secondary (#303030): リード文・段落補足（rgb(48,48,48)）
• Text on Dark (#ffffff / #fdfdfc): 暗色ビジュアル上に重ねるナビ・ボタン文字
• Text Muted (rgba(28,28,28,0.6)): フォームラベル等の弱い文字

Accent（アクセント）

• Taupe Gray (#999487): 大見出し（h2）の文字色、アウトラインボタンの罫線色に使う中間色（rgb(153,148,135)）。ブランドの"作品然とした静けさ"を担う中核色
• Plum (#975f71): ごく限定的に使う差し色（"Page top" アンカー等）。灯りの温もりを想起させるくすんだ小豆色（rgb(151,95,113)）

Line（罫）

• Border (#dadad9): 区切り線・入力欄の枠（rgb(218,218,217)）

Semantic（意味的な色 / EC 機能）

• Success (#307a07): 在庫あり・完了
• Warning (#ed8a00): 注意喚起
• Danger / Sale (#cb2b2b): エラー・セール価格

色に関する設計思想

• 純白（#ffffff）・純黒（#000000）を避け、#fdfdfc / #161615 のニュアンスカラーで柔らかさと上質さを両立させる
• 彩度の高い色は使わず、taupe（#999487）と plum（#975f71）の低彩度アクセントのみに絞る
• 塗り面は最小限。色はほぼ「文字色」と「罫線色」として現れる

3. Typography Rules

3.1 和文フォント

• ゴシック体: DNP 秀英角ゴシック銀（dnp-shuei-gothic-gin-std, Adobe Fonts）。欧文グロテスクに合わせた、ふところの締まった端正な角ゴシック
• 明朝体: 使用しない

3.2 欧文フォント

• サンセリフ（主役）: Neue Haas Grotesk（"Neue Haas Grotesk Text Pro" / neue-haas-grotesk-display, Adobe Fonts）。本文は Text Pro、大見出しは Display を使い分ける
• セリフ / 等幅: 使用しない

代替フォントの注記: Neue Haas Grotesk・秀英角ゴシック銀はいずれも Adobe Fonts のためローカル環境・preview.html では表示できない。

• Neue Haas Grotesk → Helvetica Neue（ネイティブ）／ Web では Inter（ニュートラルなネオグロテスク）で代替
• 秀英角ゴシック銀 → Zen Kaku Gothic New（字面・ふところが近い角ゴシック）または Noto Sans JP

3.3 font-family 指定

css/* 本文（Neue Haas Grotesk Text Pro） */
font-family: "Neue Haas Grotesk Text Pro", neue-haas-grotesk-display,
             dnp-shuei-gothic-gin-std, sans-serif;

/* 大見出し（Neue Haas Grotesk Display） */
font-family: neue-haas-grotesk-display, dnp-shuei-gothic-gin-std, sans-serif;

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

• 欧文優先の並び。Neue Haas Grotesk を先頭に置き、欧文グリフの品質を最優先する
• 和文グリフは後段の秀英角ゴシック銀が拾う（欧文フォントに無い字を補完）
• 欧文と和文で書体の重心・線幅が揃うよう選定されている

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

3.5 行間・字間

• 本文の行間 (line-height): 1.65（16–18px 本文）。欧文主体のため和文サイトより締まっている
• 大見出しの行間: 1.14（56px display）
• 本文の字間 (letter-spacing): 基本 normal。ただし 17px の説明文は 0.06em、ラベル・入力は 0.04〜0.12em と広めに取り、静けさを演出する
• 見出しの字間: 大見出しは 0.016em 程度

ガイドライン:

• 英字の見出し・ボタン・ナビは text-transform: uppercase で組む
• 字間はサイズが小さいラベル系ほど広く取り、密度を下げる

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: "kern" 1;  /* 欧文カーニング */

• 実測では和文の palt は使用していない（font-feature-settings: normal）
• 欧文主体のため kern（カーニング） を効かせ、大文字組みの字面を整える

3.8 縦書き

該当なし（横書きのみ）。

4. Component Stylings

Buttons

角丸ゼロ・アウトライン主体。塗りボタンは使わず、細い罫線と大文字テキストで構成する。

Primary（アウトライン）

• Background: transparent
• Text: #ffffff（暗色ビジュアル上）／ #161615（明色下地）
• Border: 1px solid #999487（taupe）
• Padding: 14px 28px（大）／ 8px 21px（小）
• Border Radius: 0
• Font: 18px / weight 500 / letter-spacing: 0.04em / text-transform: uppercase

Accent（塗り・限定用途）

• Background: #975f71（plum）
• Text: #ffffff
• Border Radius: 0
• 用途: "Page top" などごく限定的なアンカーのみ

Inputs

• Background: #fdfdfc
• Border: 1px solid #dadad9（下線 1 本のみのスタイルも可）
• Border (focus): 1px solid #161615
• Border Radius: 0
• Padding: 8px 0
• Font Size: 14px / letter-spacing: 0.12em
• Label: 12px / rgba(28,28,28,0.6) / uppercase

Cards

• Background: #fdfdfc または #f0f0ed
• Border: なし（余白と写真で区切る）／必要時 1px solid #dadad9
• Border Radius: 0
• Shadow: なし（フラット。Depth セクション参照）
• 製品カードは画像＋英字ラベル（uppercase）＋価格のみの最小構成

5. Layout Principles

Spacing Philosophy

余白そのものをデザインの主要素として扱う。要素間は詰めず、大きく空ける。

Spacing Scale（推定）

Container

• Max Width: 1440px（フルブリード画像はビューポート幅）
• Padding (horizontal): 24–40px

Grid

• Columns: 12（製品一覧は 2〜3 カラム）
• Gutter: 24–40px
• 画像はフルブリードで見せ、テキストブロックは幅を絞って配置する

6. Depth & Elevation

• 影は極力使わない。奥行きは「余白」と「写真の陰影」で表現する

7. Do's and Don'ts

Do（推奨）

• 下地は #fdfdfc、文字は #161615 のニュアンスカラーを使う
• 英字の見出し・ボタン・ナビは text-transform: uppercase で組む
• ボタンは角丸ゼロのアウトライン（1px solid #999487）を基本にする
• 余白を大きく取り、要素を詰め込まない
• 和文は秀英角ゴシック銀（代替: Zen Kaku Gothic New）で欧文に馴染ませる

Don't（禁止）

• border-radius を付けない（角丸は世界観に反する）
• 純白 #ffffff・純黒 #000000 をベタで使わない
• 彩度の高い色・塗りボタンを多用しない（plum はごく限定用途）
• ドロップシャドウで奥行きを作らない
• 和文フォント1つだけを指定しない（必ずフォールバックチェーンを書く）

8. Responsive Behavior

Breakpoints（推定）

タッチターゲット

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

フォントサイズの調整

• モバイルでは大見出し（56px）を 32–40px 程度に縮小、本文は 15–16px を維持
• 字間・余白の"静けさ"はモバイルでも保つ

9. Agent Prompt Guide

クイックリファレンス

Background:    #fdfdfc
Text Primary:  #161615
Text Secondary:#303030
Accent (taupe):#999487
Accent (plum): #975f71
Border:        #dadad9
Font:          "Neue Haas Grotesk Text Pro", neue-haas-grotesk-display, dnp-shuei-gothic-gin-std, sans-serif
Body Size:     16px
Line Height:   1.65
Button:        transparent bg / 1px solid #999487 / radius 0 / uppercase

プロンプト例

Ambientec のデザインシステムに従って、製品紹介セクションを作成してください。
- 下地: #fdfdfc、文字: #161615
- 見出し・ボタン・ナビの英字は uppercase
- ボタンは角丸ゼロのアウトライン（1px solid #999487、透明背景）
- フォント: "Neue Haas Grotesk Text Pro", neue-haas-grotesk-display, dnp-shuei-gothic-gin-std, sans-serif
- 本文 line-height: 1.65、余白は大きく取る
- 影は使わず、フラットに組む

Adobe Fonts が使えない環境での代替指針

• 欧文 Neue Haas Grotesk → Helvetica Neue（ネイティブ）／ Web は Inter
• 和文 秀英角ゴシック銀 → Zen Kaku Gothic New ／ Noto Sans JP
• どの代替でも「uppercase・角丸ゼロ・広めの字間・大きな余白」を守れば世界観は再現できる