JILL STUART Beauty DESIGN.md

JILL STUART Beauty（https://www.jillstuart-beauty.com/）のデザイン仕様書。 "sweets cosmetics" を掲げるフェミニン・ラグジュアリーコスメブランド。プリンセスのような甘く華やかな世界観を、ウォームピンクベージュの配色と明朝体・セリフ体の繊細なタイポグラフィで表現している。 実サイトの computed style 実測（2026-05-21 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: フェミニン・ラグジュアリー。ウォームピンクベージュ #f5f0ef を基調面に敷き、和文見出しに明朝体（Shippori Mincho）、欧文にクラシカルなセリフ（EB Garamond）を組み合わせて、華やかさの中に上品さを保つ。テキスト色はウォームブラウン #4c4948 で、純黒を徹底的に避ける
• 密度: ゆったり。大きなビジュアルと余白を活かした構成。本文 12px というファッション・コスメブランド特有の小さめサイズで、情報よりも世界観を優先する
• キーワード: フェミニン、エレガント、プリンセス、ウォームピンク、甘美
• 特徴:
  • 3つのフォントファミリーの使い分け: 和文見出しに Shippori Mincho（明朝体）、欧文ラベルに EB Garamond（セリフ）、和文本文に Inter Tight（サンセリフ）。用途別にフォントの性格を変える贅沢な設計
  • テキスト色 #4c4948 はウォームブラウン。冷たいグレーや黒を一切使わない
  • ウォームピンクベージュ #f5f0ef が最も広い面積を占めるブランドサーフェス。白 #ffffff とのツートーンで構成
  • CTA はテキストリンク＋矢印が基本。塗りつぶしボタンをほとんど使わない、控えめで上品なインタラクション
  • font-feature-settings: normal — palt も kern も使わない。フォント本来のメトリクスを尊重する設計
  • フッターは #3b4043 のクールダーク。ここだけ温度が下がり、情報的な印象に切り替わる

2. Color Palette & Roles

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

Brand — Warm Pink-Beige Palette

• Rose Beige Surface (#f5f0ef): ブランドを象徴するウォームピンクベージュ。カード背景・セクション背景として最も広い面積を占める
• Warm Pink (#f3e8e6): Rose Beige よりやや暖かいピンク。アクセントサーフェス、ホバー面
• Soft Rose (#eed2cd): 柔らかいローズ。強調面、プロモーション帯

Text

Surface

Border

• Border (#e7e7e7): 区切り線、カードの枠線

Interactive / Tab States

• Tab Active: #f5f0ef（Rose Beige）
• Tab Inactive: #ffffff（白）
• Reset Button: bg #ffffff, radius 6px

3. Typography Rules

3.1 和文フォント

• 明朝体: Shippori Mincho（Google Fonts）— 和文見出し・ラベルに使用。繊細で上品な印象
• ゴシック体: ヒラギノ角ゴ Pro W3（Hiragino Kaku Gothic Pro W3）— Inter Tight のフォールバック

3.2 欧文フォント

• セリフ（ラベル）: EB Garamond — カテゴリ名等の欧文ラベルに使用。クラシカルで優雅なセリフ
• サンセリフ（見出し）: Montserrat — 欧文見出しに使用。Weight 300 の細いストロークでエレガントさを出す
• サンセリフ（本文）: Inter Tight — 和文本文の欧文部分。コンパクトなプロポーション

3.3 font-family 指定

css/* 本文 */
font-family: "Inter Tight", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", メイリオ, Meiryo, 游ゴシック体, YuGothic, "Yu Gothic M", "游ゴシック Medium", sans-serif;

/* 和文見出し・ラベル */
font-family: "Shippori Mincho", serif;

/* 欧文カテゴリラベル */
font-family: "EB Garamond", serif;

/* 欧文見出し */
font-family: "Montserrat", sans-serif;

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

• 本文は Inter Tight（Google Fonts サンセリフ）を先頭に置き、欧文の表示品質を確保。続いて和文はヒラギノ → メイリオ → 游ゴシックのシステムフォント
• 見出しの Shippori Mincho はフォールバックを serif のみにし、明朝体の性格を保つ
• EB Garamond / Montserrat も同様に generic family のみ
• 3つのフォントファミリーを用途別に切り替えるのが JILL STUART Beauty の設計の核心

preview.html での注記: Shippori Mincho、EB Garamond、Montserrat、Inter Tight はすべて Google Fonts で配信されており、プレビューでもそのまま使用可能

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

3.5 行間・字間

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

• 本文: 18px (12px x 1.5) — 小さい本文サイズに対して標準的な比率
• 和文見出し（30px）: 45px (30px x 1.5) — ゆったりとした見出し行間
• 欧文見出し（28px）: 28px (28px x 1.0) — タイトな欧文見出し。Montserrat weight 300 の細い字形に合わせた密な組み

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

• 和文見出し: 0.04em (1.2px / 30px) — Shippori Mincho で控えめに字間を開ける
• 欧文見出し: 0.1em (2.8px / 28px) — Montserrat weight 300 に広い字間。ラグジュアリーブランドの定番
• 欧文カテゴリラベル: 0.08em (1.6px / 20px) — EB Garamond に上品な字間
• 本文: normal — 字間調整なし

ガイドライン:

• 明朝体・セリフ体の見出しには 0.04em〜0.1em の字間を設定し、優雅さを出す
• 細いウェイト（Montserrat 300）ほど字間を広く取る（0.1em）。字間がエレガンスの演出装置
• 本文（12px）は字間を開けない。小さいサイズで字間を広げると可読性が落ちる

3.6 禁則処理・改行ルール

• ブラウザデフォルトの禁則処理に依存
• 明朝体見出しは短いフレーズが多く、改行が発生しにくい設計

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt 不使用: プロポーショナル字詰めをしない。明朝体（Shippori Mincho）の原型を保つ
• kern 不使用: EB Garamond / Montserrat のカーニングもブラウザデフォルトに委ねる
• フォント本来のメトリクスをそのまま活かす設計。字間の調整は letter-spacing で明示的に行う

3.8 縦書き

• 該当なし

4. Component Stylings

Buttons

JILL STUART Beauty は塗りつぶしボタンをほとんど使わない。CTA は「テキストリンク＋矢印」が基本で、UI全体が控えめで上品。

Reset / Utility Button

• Background: #ffffff
• Text: #4c4948
• Border: なし
• Border Radius: 6px
• Font Size: 12px

Tab Navigation

• Active: bg #f5f0ef（Rose Beige）
• Inactive: bg #ffffff
• Border: なし（背景色の切り替えで状態を表現）

Text Link CTA

• Text: #4c4948
• Decoration: なし（矢印アイコン > や → で遷移を示唆）
• Hover: 下線表示

Inputs

• Background: #ffffff
• Border: 1px solid #e7e7e7
• Border (focus): 1px solid #4c4948
• Border Radius: 0px（角ばった入力欄。ブランドのシャープさを保つ）
• Font Size: 12px
• Font Family: "Inter Tight", sans-serif

Cards

商品カード

• Background: #ffffff
• Border: なし（影もなし。フラットで余白によるグルーピング）
• 画像 + テキストのシンプルな構成

セクションカード

• Background: #f5f0ef（Rose Beige）
• Border: なし
• Border Radius: 0px
• Padding: 24px–40px

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px（推定）
• Padding (horizontal): 16px–40px

Grid

• 商品一覧: 4カラム（デスクトップ）
• ランキング: 横スクロール（Swiper / Vue Carousel）
• コンテンツ: 1カラム中央寄せ

6. Depth & Elevation

• 基本方針はフラット。影をほぼ使わない。要素の区別はサーフェスカラーの切り替え（#ffffff ↔ #f5f0ef）で行う
• 影を使う場合も rgba(0,0,0,...) ではなく ウォームブラウン rgba(76,73,72,...) ベースにする。冷たい黒影を避ける

7. Do's and Don'ts

Do（推奨）

• テキスト色は #4c4948（ウォームブラウン）を使う。純黒 #000 ではない
• サーフェスに #f5f0ef（Rose Beige）を広く使い、ウォームピンクベージュのトーンを保つ
• 和文見出しには Shippori Mincho（明朝体）を使い、繊細さ・優雅さを出す
• 欧文ラベルには EB Garamond、欧文見出しには Montserrat weight 300 を使う
• Montserrat には letter-spacing: 0.1em を必ず設定する（ラグジュアリーの定番）
• CTA はテキストリンク＋矢印を基本とし、塗りつぶしボタンは最小限にする
• ボーダーは #e7e7e7 のニュートラルグレーを使う
• font-feature-settings: normal を指定する（palt / kern を使わない）
• ページ全体の温度をウォーム（暖色系）に統一する

Don't（禁止）

• 純黒 #000000 をテキストに使わない。#4c4948 を使う
• 冷たいグレー（青みがかったグレー）をサーフェスに使わない。#f5f0ef / #f3e8e6 / #eed2cd のウォームピンク系を使う
• ピル型ボタン（border-radius: 9999px）を使わない。角ばった形状〜6px radius まで
• 太い欧文ウェイト（700 等）を見出しに使わない。Montserrat は weight 300、EB Garamond は weight 500
• ゴシック体（サンセリフ）で見出しを組まない。見出しは必ず明朝体（Shippori Mincho）またはセリフ（EB Garamond / Montserrat）
• palt を使わない。明朝体のプロポーショナル字詰めはこのブランドにはそぐわない
• 派手な影や強いコントラストを使わない。フラット＋サーフェスカラーの切り替えで表現する
• フッター以外に #3b4043 を使わない。フッターのみの色

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）
• テキストリンク CTA はタッチ領域を 44px 以上確保する

フォントサイズの調整

• モバイルでは和文見出し（30px）を 22–24px 程度に縮小
• 欧文見出し（28px）を 20–22px 程度に縮小
• 本文 12px はモバイルで 14px に拡大を推奨（可読性確保）
• カテゴリラベル（20px）は 16px 程度に縮小

9. Agent Prompt Guide

クイックリファレンス

Text Primary: #4c4948 (warm brown)
Text Secondary: #3b4043
Background: #ffffff
Rose Beige Surface: #f5f0ef
Warm Pink Surface: #f3e8e6
Soft Rose: #eed2cd
Footer Dark: #3b4043
Border: #e7e7e7

Heading Font (JP): "Shippori Mincho", serif
Label Font (EN): "EB Garamond", serif
Heading Font (EN): "Montserrat", sans-serif
Body Font: "Inter Tight", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", メイリオ, Meiryo, 游ゴシック体, YuGothic, "Yu Gothic M", "游ゴシック Medium", sans-serif

Body Size: 12px
Line Height: 1.5
Letter Spacing (JP heading): 0.04em
Letter Spacing (EN heading): 0.1em
font-feature-settings: normal

プロンプト例

JILL STUART Beauty のデザインシステムに従って、商品一覧ページを作成してください。
- テキスト色: #4c4948（ウォームブラウン。純黒を使わない）
- 和文見出し: "Shippori Mincho", serif — 30px, weight 500, letter-spacing 0.04em
- 欧文見出し: "Montserrat", sans-serif — 28px, weight 300, letter-spacing 0.1em
- 欧文ラベル: "EB Garamond", serif — 20px, weight 500, letter-spacing 0.08em
- 本文: "Inter Tight", sans-serif — 12px, weight 400, line-height 1.5
- 背景: #ffffff、セクション面は #f5f0ef（Rose Beige）
- ボーダー: #e7e7e7
- CTA: テキストリンク + 矢印（塗りつぶしボタンではない）
- フラットデザイン。影は使わず、サーフェスカラーの切り替えで構成
- font-feature-settings: normal（palt / kern 不使用）