amadana DESIGN.md

amadana 公式サイト（https://amadana.com/）のデザイン仕様書。 日本発のデザイン家電・ライフスタイルブランド。「美しい道具」をコンセプトに、家電をインテリアとして再定義するプロダクトデザインで知られる。 Shopify ベースの EC サイト。実サイトの computed style および CSS Custom Properties に基づいて記述。

1. Visual Theme & Atmosphere

• デザイン方針: プロダクトを「展示」するギャラリーのような暗色基調のサイト。白い本体背景にダークセクションを重ね、製品写真を引き立てる
• 密度: 中程度。Shopify のグリッドレイアウトで製品カードを並べつつ、セクション間は 16rem（256px）の大きな余白で区切る展示型
• キーワード: インダストリアル・ミニマル、ギャラリーキュレーション、ダークモード展示、赤アクセント、単一フォント
• 特徴: フォントは Noto Sans Japanese 一本、ウェイトも 400 のみというストイックな構成。サイズの差だけで階層をつくる。CTA は #E60012（amadana レッド）の角張ったボタン（border-radius: 0）で、pill や丸みのあるボタンは使わない。ダークセクション（#131313 / #272727）で製品をまとめ、美術館の壁面のように製品写真を並べる

2. Color Palette & Roles

Primary（ブランドカラー）

• amadana Red (#E60012): ブランドの署名色。CTA ボタン、「ONLINESTORE」リンク、「Log in」ボタンに使用。出現回数 15 件で、サイト内で最も印象的なアクセント

Text

• Text Primary (#3F3F3F): 本文・説明テキスト。純黒ではなくダークグレー
• Text on Dark (#ffffff): ダークセクション上のテキスト。製品名、価格、ナビゲーション

Surface（面色 — ダークグレーの階調が特徴）

• Background (#ffffff): ページ本体の背景（body）
• Header Overlay (rgba(63, 63, 63, 0.4)): ヒーロー上部の半透明オーバーレイ。ナビゲーションの視認性を確保
• Dark Section (#131313): 製品セクションの主要背景。ほぼ黒だが純黒ではない
• Product Card (#272727): 製品カードの背景。#131313 より一段明るいダークグレー
• Muted Accent (#B5B5B0): ミュートされたニュートラルアクセント。補助テキストやラベルに使用

CTA / Button

• CTA Red (#E60012): プライマリ CTA の背景。白テキストとの組み合わせ
• CTA Text (#ffffff): CTA ボタン上のテキスト

Semantic（意味的な色）

• サイト上で明示的な Success / Danger / Warning のカラートークンは定義されていない。Shopify のデフォルトに準拠

3. Typography Rules

3.1 和文フォント

ゴシック体（唯一のフォント）:

• Noto Sans Japanese（Google Fonts 提供、ウェイト 400 のみ使用）

明朝体は使用しない。

3.2 欧文フォント

• Noto Sans Japanese 内の欧文グリフをそのまま使用
• 別途の欧文フォントスタックは指定されていない

3.3 font-family 指定

css/* 本文・見出し共通（CSS Custom Property 実測値） */
--font-body-family: "Noto Sans Japanese", sans-serif;
--font-heading-family: "Noto Sans Japanese", sans-serif;

/* 適用 */
font-family: "Noto Sans Japanese", sans-serif;

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

• sans-serif のみをフォールバックに指定するミニマル構成
• Noto Sans Japanese は Google Fonts で配信されるため、環境依存が少ない
• 和文・欧文ともに同一フォントで統一し、混植の不整合を排除

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

以下は computed style による実測値

特筆点: ウェイトがすべて 400（Regular）。Bold / Semibold は一切使わず、サイズの差だけで視覚階層をつくるストイックな設計。

3.5 行間・字間

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

• 本文 / 説明 / リンク: 1.7（Shopify テーマ変数 --font-body-line-height: 1.7）
• セクション見出し (H2): 1.0 — タイトで力強い
• プロモ / 製品見出し (H3): 1.0 — 同上
• --font-body-scale: 1.5 がテーマ変数として定義（Shopify のスケーリング基準）

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

• 全要素: normal（明示的な letter-spacing 指定なし）
• 和文プロポーショナル字詰めも未使用

ガイドライン:

• amadana は letter-spacing を一切指定しない。フォント本来の字間に委ねる設計
• 見出しの line-height: 1.0 は日本語としてはタイト。短いフレーズや製品名を想定

3.6 禁則処理・改行ルール

css/* Shopify デフォルト設定 */
word-break: break-word;
overflow-wrap: break-word;

• Shopify テーマのデフォルト禁則処理に準拠
• 特別なカスタマイズは確認されていない

3.7 OpenType 機能

css/* palt・kern ともに未設定 */
font-feature-settings: normal;

• palt（プロポーショナル字詰め）は使用しない
• フォントのデフォルトメトリクスをそのまま使う方針

3.8 縦書き

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

4. Component Stylings

Buttons

Primary CTA（Log in / ONLINESTORE）

• Background: #E60012（amadana Red）
• Text: #ffffff
• Padding: 9.6px 33.6px
• Border Radius: 0px（角張ったシャープなボタン）
• Font Size: 13.2px
• Font Weight: 400
• Border: なし

Secondary（想定）

• Background: transparent
• Text: #3F3F3F
• Border: 1px solid #3F3F3F
• Border Radius: 0px
• Padding: 9.6px 33.6px

Navigation Arrows（スライダー）

• Background: transparent
• Size: 48px × 48px
• Shape: 円形
• 最小タッチターゲット 44px を満たす

Cards（製品カード）

• Background: #272727
• Text: #ffffff
• Border: なし（暗色面でボーダーレス）
• Border Radius: 0px（角張ったカード）
• カード全体がクリッカブルリンク

Inputs

• Shopify デフォルトのフォームスタイルに準拠
• Font Family: "Noto Sans Japanese", sans-serif
• Font Size: 15px

5. Layout Principles

Header

• Height: 68px（CSS Custom Property --header-height: 68px）

Section Spacing

• --spaced-section: 16rem（256px）— セクション間の大きな余白

Grid

• Shopify のリキッドグリッドレイアウト
• 製品カードグリッド: ダークセクション上に配置

Content Structure

6. Depth & Elevation

• amadana はシャドウをほとんど使わない。面色の階調（#131313 → #272727 → #ffffff）で奥行きを表現する
• 半透明オーバーレイ（ヘッダー）が唯一の「浮き」表現

7. Do's and Don'ts

Do（推奨）

• フォントは Noto Sans Japanese 一本に統一する（ウェイト 400 のみ）
• サイズの差だけで視覚階層をつくる（Bold / Semibold は使わない）
• CTA は #E60012 の角張ったボタン（border-radius: 0）にする
• 製品セクションは #131313 のダーク背景を使い、ギャラリーのような雰囲気にする
• テキスト色は #3F3F3F（ダークグレー）を使い、純黒は避ける
• 本文の行間は line-height: 1.7 を維持する
• セクション間の余白は大きく（256px）取り、展示のような間を持たせる

Don't（禁止）

• font-weight: 700 や 600 を使わない（amadana は 400 のみ）
• CTA に border-radius をつけない（pill ボタンや丸みのあるボタンは使わない）
• ダークセクションに純黒 #000000 を使わない（#131313 を使う）
• letter-spacing や font-feature-settings: "palt" を追加しない（フォント本来の字間に委ねる）
• 製品カードにシャドウやボーダーを付けない（面色の差で区別する）
• 明朝体や装飾フォントを混ぜない

8. Responsive Behavior

Breakpoints

• Shopify テーマのデフォルトブレークポイントに準拠

タッチターゲット

• ナビゲーションアロー: 48px × 48px（WCAG 基準 44px を満たす）

フォントサイズの調整

• モバイルでは見出しがデスクトップの 70–80% 程度に縮小
• 本文 15px はモバイルでも維持

9. Agent Prompt Guide

クイックリファレンス

Brand Color (CTA): #E60012
Text Primary: #3F3F3F
Text on Dark: #ffffff
Background: #ffffff
Dark Section: #131313
Product Card: #272727
Header Overlay: rgba(63, 63, 63, 0.4)
Muted Accent: #B5B5B0

Font: "Noto Sans Japanese", sans-serif
Weight: 400（すべて）
Body Size: 15px / line-height: 1.7 / letter-spacing: normal
Heading: line-height: 1.0 / letter-spacing: normal
palt: なし
Button Radius: 0px

プロンプト例

amadana のデザインに従って、製品一覧ページを作成してください。
- フォント: "Noto Sans Japanese", sans-serif（ウェイトは 400 のみ）
- テキスト色: #3F3F3F（純黒は使わない）
- ダーク背景上のテキスト: #ffffff
- ページ背景: #ffffff
- 製品セクション背景: #131313
- 製品カード背景: #272727（ボーダーなし、シャドウなし、角張り）
- CTA ボタン: #E60012、白テキスト、border-radius: 0
- 本文: 15px, line-height: 1.7
- 見出し: line-height: 1.0、サイズで階層をつくる
- Bold は使わない（全要素 font-weight: 400）
- セクション間余白: 256px