FELISSIMO DESIGN.md

FELISSIMO フェリシモ（https://www.felissimo.co.jp/）のデザイン仕様書。 実サイトの CSS computed style に基づく。ファッション・雑貨・手づくりキットの定期便通販サイト。

1. Visual Theme & Atmosphere

• デザイン方針: 白を基調としたクリーンで親しみやすい EC サイト。シアンブルーのアクセントカラーで「楽しさ」「発見」を表現。商品写真を主役にしたビジュアル重視のレイアウト
• 密度: 商品カタログとしての情報密度は高いが、白背景と十分な余白で圧迫感を軽減
• キーワード: 親しみやすい、クリーン、シアンブルー、カタログ型、ハンドメイド
• 特徴: CSS Custom Properties で --skin-* 系のテーマトークンと --color-* 系のベーストークンを二層で管理。游ゴシック 500（Medium）をベースに palt を適用。ブランドカラーのシアンブルー #00a1e0 がヘッダーや見出しのアクセントに使われる

2. Color Palette & Roles

Primary（ブランドカラー）

• Felissimo Cyan (#00a1e0): プライマリカラー（--skin-primary-color-1）。見出しアクセント、CTA
• Light Cyan (#7ed0ee): サブアクセント（--color-light-blue）

Secondary

• Link Blue (#0070d2): リンクテキスト（--color-blue, --skin-link-color-2）

Neutral（ニュートラル）

• Text Primary (#202020): 本文テキスト
• Text Menu (#444444): メニューリンク（--skin-menu-color-1）
• Text Dark (#222222): 強調テキスト（--skin-menu-color-2）
• Text Muted (#999999): 補助テキスト（--color-slightly-darker-gray）
• Text Light (#bbbbbb): タグライン等の薄いテキスト
• Background (#ffffff): ページ背景
• Background Section (#edece2): セクション背景（温かみのあるグレージュ）
• Background Light (#f9f9f9): 明るいセクション背景（--color-light-gray）
• Border (#cccccc): 区切り線（--color-horizontal-rule-grey）
• Search Button (#777576): 検索ボタン背景

Semantic（意味的な色）

• Success (#008827): 成功（--color-success）
• Danger (#cc0000): エラー・削除（--color-danger）
• Warning (#ffc107): 警告（--warning）

3. Typography Rules

3.1 和文フォント

ゴシック体（デフォルト）:

• 游ゴシック / Yu Gothic / YuGothic
• ヒラギノ角ゴ Pro W3（macOS フォールバック）
• メイリオ（Windows フォールバック）
• Noto Sans / Noto Sans CJK JP（Linux / Android フォールバック）

3.2 欧文フォント

• ヘッダーフォント: Dosis（--skin-header-font）— Google Fonts のラウンデッドサンセリフ
• ボディフォント: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial（--skin-body-font）

3.3 font-family 指定

css/* 本文（和文） */
font-family: 游ゴシック, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3",
             "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic", メイリオ, Meiryo,
             "Noto Sans", "Noto Sans CJK JP", "system-ui", sans-serif;

/* ヘッダー・ブランド（欧文） */
font-family: 'Dosis', sans-serif;

/* ボディ（欧文フォールバック） */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;

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

• 和文は游ゴシックを先頭に、macOS → Windows → Linux/Android のフォールバック
• 游ゴシックのウェイトは body で 500（Medium 相当）を指定して太さを確保
• ヘッダーのブランドロゴ周辺に Dosis を使い、ラウンデッドな欧文で親しみやすさを演出
• Noto Sans CJK JP までフォールバックに含めた包括的な指定

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

以下は computed style による実測値

3.5 行間・字間

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

• 本文 (body): 24px (16px x 1.5)
• 見出し (h2): 28.8px (24px x 1.2)
• カテゴリ名: 15.6px (13px x 1.2)
• 価格: 18px (15px x 1.2)

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

• 全要素: normal（letter-spacing の明示的な指定なし）

ガイドライン:

• 本文は line-height: 1.5 で標準的な可読性
• 見出しは line-height: 1.2 でコンパクト
• 字間は全て normal。字詰めの代わりに palt で調整

3.6 禁則処理・改行ルール

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

3.7 OpenType 機能

css/* body レベルで palt を適用 */
font-feature-settings: "palt";

• palt: body で適用。本文・見出し共にプロポーショナル字詰め
• 一部のインタラクティブ要素（検索ボタン等）では font-feature-settings: normal にリセット

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Search Button

• Background: #777576
• Text: #ffffff
• Padding: 1px 6px
• Border Radius: 0px
• Font Size: 14px
• Font Weight: 400

Keyword Tag

• Background: #ffffff
• Text: #202020
• Border: 1px solid #ffffff
• Padding: 8px 10px
• Border Radius: 4px
• Font Size: 14px
• Font Weight: 500

Inputs

• 検索入力はヘッダーに統合（独立したフォーム要素の詳細は未確認）

Cards

• Background: #ffffff
• Border: なし（写真ベースのカードレイアウト）
• Border Radius: なし
• 商品サムネイル + テキスト情報のシンプルな構成

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px（推定）
• Padding (horizontal): 20px

Breakpoints（CSS Custom Properties）

• --breakpoint-sm: 544px
• --breakpoint-md: 769px
• --breakpoint-lg: 992px
• --breakpoint-xl: 1200px

Grid

• Columns: 4–5（商品グリッド）
• Gutter: 16px（推定）

6. Depth & Elevation

• サイト全体がフラットデザイン。シャドウはほとんど使用しない
• セクション区切りは背景色の切り替え（#ffffff ↔ #edece2 ↔ #f9f9f9）で表現
• 検索オーバーレイは rgba(255,255,255,0.7) の半透明白

7. Do's and Don'ts

Do（推奨）

• ブランドカラーのシアンブルー #00a1e0 を見出しアクセントや CTA に使う
• リンクには #0070d2 のブルーを使う（--skin-link-color-2）
• 和文テキストは游ゴシック 500（Medium）を使う。Windows での表示品質を確保
• body レベルで font-feature-settings: "palt" を適用する
• ページ背景は白 #ffffff、セクション背景に #edece2 のグレージュを使い分ける
• 商品写真を大きく表示し、テキスト情報は最小限に
• キーワードタグは白背景 + 角丸 4px の控えめなスタイル
• ヘッダーのブランド要素に Dosis を使う

Don't（禁止）

• シアンブルー #00a1e0 をテキスト色として多用しない（見出しアクセント・CTA 限定）
• 游ゴシックのウェイトを 400 にしない（500 で Medium 相当を維持）
• 派手なシャドウや強い角丸を使わない（フラットでクリーンな美学を維持）
• テキストの色に純粋な #000000 を使わない（#202020 を使う）
• letter-spacing を明示的に設定しない（palt に任せる）
• セクション背景に鮮やかな色を使わない（白 / グレージュ / ライトグレーに限定）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）

フォントサイズの調整

• モバイルでは本文 16px を維持、見出しはデスクトップの 70–80% に縮小
• 商品グリッドは 2カラムに変更

9. Agent Prompt Guide

クイックリファレンス

Felissimo Cyan: #00a1e0（プライマリ・CTA・見出しアクセント）
Light Cyan: #7ed0ee（サブアクセント）
Link Blue: #0070d2（リンク）
Success: #008827
Danger: #cc0000

Text Primary: #202020
Text Menu: #444444
Text Dark: #222222
Text Muted: #999999
Background: #ffffff
Background Section: #edece2（グレージュ）
Background Light: #f9f9f9
Border: #cccccc
Search Button: #777576

JP Font: 游ゴシック, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", ..., sans-serif
Header Font: 'Dosis', sans-serif

Body Size: 16px / 500 / line-height: 1.5 / letter-spacing: normal
Section Title: 24px / 700 / line-height: 1.2
palt: あり（body 全体適用）

Keyword Tag: bg white / border white / radius 4px / 14px / 500
Search Button: bg #777576 / white / radius 0px

プロンプト例

FELISSIMO のデザインに従って、商品一覧ページを作成してください。
- 和文フォント: 游ゴシック, "Yu Gothic", YuGothic, ..., sans-serif（weight: 500）
- ヘッダー欧文: 'Dosis', sans-serif
- テキスト色: #202020
- ページ背景: #ffffff
- セクション背景: #edece2（グレージュ）
- プライマリ: #00a1e0（CTA・見出しアクセント）
- リンク: #0070d2
- 見出し: 24px, 700, line-height: 1.2
- 本文: 16px, 500, line-height: 1.5
- 全体に font-feature-settings: "palt" を適用
- カード: フラット（シャドウなし）、写真主体
- キーワードタグ: 白背景、radius 4px