AURALEE（オーラリー） DESIGN.md

AURALEE 公式サイト（https://auralee.jp/）のデザイン仕様書。 デザイナー・岩井良太による 2015 年設立の日本のコンテンポラリーファッションブランド。 上質な素材と独自の風合いで国内外から高く評価される。 実サイトの computed style 実測（2026-05-08 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 極端に小さい本文（10〜12px）+ 広い余白 + 限りなく無彩色のグレー（#6c6c6c）+ ほぼ白の背景（#fbfbfb）。「素材の質感を邪魔しないために、UI を可能な限り消す」 ミニマルな設計
• 密度: 情報密度は極めて低く、画像中心のレイアウト。テキスト要素は控えめで、商品写真・ルックブックを主役に
• キーワード: ペールグレー、極小タイポグラフィ、Marcellus セリフ、gill-sans-nova、ブラウンがかった黒、letter-spacing 0.7px、breathy、minimal、無彩色、breathy（息遣いのある余白）
• 特徴:
  • 3 系統フォント運用 — 本体 UI に「gill-sans-nova」（Adobe Fonts）、見出し・ナビに「Marcellus」（Google Fonts のセリフ）、英文のお知らせに「Times New Roman」
  • 本文 10px / line-height 15px という極端に小さいタイポ — UI を画像の引き立て役に徹底させる
  • テキスト色は #6c6c6c（ソフトグレー）が支配的 — 純黒は使わず、見出しでも #222222（漆黒に近いが純黒ではない）
  • 背景色 #fbfbfb — 純白ではなく、わずかに暖かみのある薄白（251, 251, 251）
  • letter-spacing 0.7px がほぼ全要素に均一適用（10〜18px サイズで 0.04〜0.07em に相当）— これがブランド独特の「呼吸感」を生む
  • ナビゲーションは Marcellus — MEN / WOMEN / "View all" 等は Google Fonts の Marcellus（細いセリフ体）で、上品なファッション誌の雰囲気
  • CTA は控えめ — border-radius: 14〜16px の小さなピル（カート数表示など）、塗り CTA は灰色 #6c6c6c
  • font-weight 300（Light） が本文の標準。weight 400 は補助的に使用
  • Webフォント中心 — Adobe Fonts (gill-sans-nova) と Google Fonts (Marcellus) を組み合わせ。和文は OS フォントフォールバック

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand / Foreground

• AURALEE Gray (#6c6c6c): UI の支配色（rgb(108, 108, 108)）。本文・ナビ・キャプションのほぼすべてで使われるソフトグレー
• AURALEE Charcoal (#222222): h1 の濃いグレー（rgb(34, 34, 34)）。ロゴ・最重要見出しに限定
• Soft Black (#000000): リンクのデフォルト色（控えめに使用）
• Footer Caption (#5c5c5c): フッター内の極小注釈（rgb(92, 92, 92)）

Surface（背景）

• Off-White (#fbfbfb): ページ背景（rgb(251, 251, 251)）。純白ではない
• Pure White (#ffffff): モーダルやフッター内の面色
• Cookie Veil (rgba(255, 255, 255, 0.95)): クッキーバナーの半透過白
• CTA Gray (#6c6c6c): カート数バッジの塗り色（白文字 + ソフトグレー背景）

Text on Dark

• Inverse Text (#ffffff): カート数バッジ等、暗色面上の文字色

Border

• Soft Border (rgba(0, 0, 0, 0.1)): セクション区切り、入力欄
• Cookie Border (rgba(0, 0, 0, 0)): cc-btn の透過罫線

Note: AURALEE のパレットは 「ほぼ無彩色」。#6c6c6c の単一グレーで本文と UI を構成し、画像（商品の質感）が誌面を彩る。コンテンツに干渉しない、引き算のデザイン。

3. Typography Rules

3.1 和文フォント

ゴシック体（フォールバックスタック）:

• Yu Gothic Std（macOS の游ゴシック標準）
• Yu Gothic Medium（macOS / Windows 10+）
• 游ゴシック Medium（カナ表記）
• YuGothic（旧表記）
• 游ゴシック体（カナ表記、Windows 向け代替）
• フッター注釈は Yu Gothic Pr6 が先頭

3.2 欧文フォント

• gill-sans-nova（Adobe Fonts、本文・UI のメイン）
• Marcellus（Google Fonts、セリフ。ナビゲーション・h2/h3 見出し）
• Times New Roman / Times（英文の国際送料案内など、ニュートラルな英文）
• ボタン要素のみ Helvetica Neue, Helvetica, Roboto, Arial, sans-serif

3.3 font-family 指定

css/* 本文・UI（最も多用） */
font-family: gill-sans-nova, "Yu Gothic Std", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, sans-serif;

/* ナビゲーション・h2/h3 見出し（Marcellus セリフ） */
font-family: Marcellus, "Yu Gothic Std", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, serif;

/* 英文の国際お知らせ */
font-family: "Times New Roman", Times, "Yu Gothic Std", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, serif;

/* フッター極小注釈 */
font-family: "Yu Gothic Pr6", "Yu Gothic Std", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, sans-serif;

/* ボタン */
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;

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

• 欧文先頭スタック（gill-sans-nova / Marcellus / Times New Roman / Yu Gothic Pr6 のいずれかで始まる）
• 和文は Yu Gothic 系のチェーンで OS にフォールバック
• Webフォント前提 — gill-sans-nova と Marcellus は Adobe Fonts / Google Fonts の読み込みが必要
• Pr6 を一部で使う — フッターの極小英字に Yu Gothic Pr6（拡張字形）を指定する徹底ぶり

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

3.5 行間・字間

• 本文 line-height: 1.5（15px / 10px、18px / 12px）
• 見出し line-height: 1.0 〜 1.4（h2 1.28、h3/h1 セリフ系は 1.0）
• letter-spacing 0.7px: 全要素ほぼ均一に 0.7px の物理字間。10px 本文では 0.07em、20px 見出しでは 0.035em に相当
• 入力欄の letter-spacing: 1.2px（プレースホルダーのみ広め）
• 意図: テキストを「画像の余白の一部」として扱うため、line-height を詰めすぎず、字間で「呼吸」させる

3.6 禁則処理・改行ルール

• デフォルト挙動を尊重 — word-break: keep-all 等は指定しない
• 英文中心のレイアウトなので、和文の禁則は記事本文ページで暗黙のブラウザ挙動に任せる

3.7 OpenType機能

• font-feature-settings: normal — palt や kern を強制しない
• letter-spacing 0.7px による物理的字間調整 で代替

3.8 縦書き

• 通常コンテンツでは未使用

4. Component Stylings

Buttons

Cart Count Badge (Pill)

• 背景: #6c6c6c
• 文字色: #ffffff
• font-size: 16.5px (sp) / 15px (pc)
• font-weight: 300 (sp) / 400 (pc)
• line-height: 31px / 28px
• letter-spacing: 0.7px
• border-radius: 16px (sp) / 14px (pc)（円〜小ピル）
• padding: 0 / 0 0 0 1px

Cookie Accept Button

• 背景: 透過 rgba(0, 0, 0, 0)
• 罫線: 2px solid 透過（実質テキストリンク）
• 文字色: #6c6c6c
• font-size: 14px / weight 300
• letter-spacing: 0.7px
• padding: 5.6px 11.2px
• border-radius: 0px

Navigation

• font-family: Marcellus（セリフ体）
• font-size: 14〜20px
• font-weight: 400
• color: #6c6c6c
• letter-spacing: 0.7px
• 装飾なし（罫線・背景なしのテキストリンク）

Inputs

• 背景: 透過
• 罫線: 1px solid rgba(0, 0, 0, 0.1)（細罫線）
• 文字色: #6c6c6c
• font-size: 10〜12px
• font-weight: 300
• letter-spacing: 1.2px（プレースホルダー）/ 0.7px（入力時）
• padding: 控えめ
• border-radius: 0px〜2px

Cards

• 背景: #ffffff または透過
• 罫線: なし
• 影: なし（フラット）
• 角丸: 0px
• 商品画像が主役。下にキャプション（10〜12px / 0.7px ls）

Modal / Cookie Banner

• 背景: rgba(255, 255, 255, 0.95)（半透過白）
• ボーダー: なし
• 文字色: #6c6c6c

5. Layout Principles

• コンテンツ幅: 制約は緩く、画像をフルブリードで配置することも多い
• ヒーロー: 大判のルックブック画像 + 極小タイポ（h2 18px / weight 400 / Marcellus）
• 余白: 画像と画像の間に大きな余白を取り、テキスト要素は最小限
• 2 列または 1 列: 商品グリッドはシンプルに 2 列が基本
• テキスト要素の極小化: 本文 10〜12px、補助 8〜9px と極めて小さく、画像の引き立て役に徹底
• フッター: Yu Gothic Pr6 の 8px 極小注釈（letter-spacing 0.7px）

6. Depth & Elevation

• 影: box-shadow: none がデフォルト。フラットデザインを徹底
• 段階表現: 影や罫線ではなく余白の量で奥行きを作る
• 罫線も極めて控えめ — rgba(0, 0, 0, 0.1) の薄い細罫線をフォーム周りに使う程度

7. Do's and Don'ts

Do's

• gill-sans-nova（Adobe Fonts）+ Yu Gothic Std/Medium のチェーン を本文・UI で使う
• Marcellus（Google Fonts セリフ） をナビゲーション・h2/h3 で使い、上品さを演出
• テキストカラーは #6c6c6c（純黒・濃グレーは使わない）
• 背景は #fbfbfb（純白ではない、わずかに暖かい白）
• letter-spacing 0.7px を全要素に適用（呼吸感）
• 本文 10〜12px の極小タイポ（画像を主役にする）
• font-weight 300 / 400 のみ使用（太字は避ける）
• 影なし・フラットデザイン

Don'ts

• 濃い影や強いコントラストを使わない
• letter-spacing を 0 にしない — 0.7px の呼吸感が AURALEE らしさ
• 本文を 14〜16px に大きくしない — 画像を引き立てる極小タイポを保つ
• 純黒 #000000 を本文に多用しない — #6c6c6c のソフトグレーが基本
• 彩度の高い色を UI に持ち込まない — 商品画像のみが彩りを担う
• 太字（weight 700）を使わない — 400 までで構成
• CTA を pill 型の派手な塗りボタンにしない — テキストリンクが基本

8. Responsive Behavior

• デスクトップ: マルチカラム（2 列の商品グリッド + 余白多め）
• モバイル (sp_only): h1 27.5px / weight 400、ヘッダーは縦積み
• ブレイクポイントは「sp_only」「pc_only」のクラスで切り替え
• ナビゲーションは Marcellus 14〜20px
• フォントサイズはモバイルでも 10px / 12px 中心（拡大しない）

9. Agent Prompt Guide

AURALEE らしい UI を生成するときは以下を伝えるとよい：

- 本文 font-family: gill-sans-nova, "Yu Gothic Std", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, sans-serif
- ナビ/見出し font-family: Marcellus, "Yu Gothic Std", "Yu Gothic Medium", ..., serif
- 本文 line-height: 1.5（15px / 10px、18px / 12px）
- letter-spacing: 0.7px を全要素に適用（10px 本文では 0.07em）
- ブランドカラー: #6c6c6c（AURALEE Gray）が支配色
- ヘッダー文字色: #222222（純黒は使わない）
- 背景: #fbfbfb（純白ではないオフホワイト）
- 文字サイズ: 本文 10px、見出し 18〜20px、ロゴ 27.5px と極小気味
- 影なし・罫線も極薄（フラット + ミニマル）
- font-weight: 300 (Light) と 400 (Regular) のみ。太字は使わない
- CTA は控えめなテキストリンク or 小ピル（border-radius 14〜16px）
- 商品画像を主役に、UI は背景に徹する「引き算のデザイン」
- Adobe Fonts (gill-sans-nova) と Google Fonts (Marcellus) の読み込みが前提
- Yu Gothic Pr6 をフッター極小英字に使う徹底ぶり