CFCL DESIGN.md

CFCL（https://www.cfcl.jp/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: コンピュータプログラミングによる3Dホールガーメントニットを軸とするファッションブランド。セリフ体（Garamond）とゴシック体（Inter / Hiragino Sans）の二層タイポグラフィが最大の特徴。ブランド要素・英文見出しにはクラシカルなセリフ体、日本語本文にはモダンなゴシック体を使い分け、テクノロジーとクラフツマンシップの融合を視覚的に表現する。角丸なし（border-radius: 0px）の直線的なデザインで、構築的なニットウェアの美学と呼応
• 密度: ゆったりとしたファッションEC型。大きなビジュアルと広い余白で、プロダクトの素材感・シルエットを引き立てる。コレクションページはグリッドレイアウトで効率的に一覧
• キーワード: セリフ×ゴシック二層構造、角丸ゼロ、超軽量ウェイト、コレクション EC、テクノロジー×クラフト
• 特徴: font-weight 250〜400 の超軽量ウェイトを全面的に使用。通常のデザインシステムで見る 500〜700 のウェイトがほぼ存在せず、ロゴの 700 以外はすべて 400 以下。この極細のタイポグラフィがブランドの繊細さと現代性を表現。プライマリボタンは黒背景（#000）、セカンダリは黄緑（#f3ff34）という意外な組み合わせ

2. Color Palette & Roles

Primary（ブランドカラー）

CFCL のカラーパレットはモノトーンを基調としつつ、コレクションごとのパステルカラーで季節感を演出する。

• Brand Black (#000000): プライマリボタン背景・ローディングバー。CSS 変数 --primary-button-background: 0, 0, 0
• Brand Dark (#282828): 見出し・本文テキスト・ボーダー（rgb 40, 40, 40）。CSS 変数 --text-color・--heading-color

Accent（アクセント — コレクション依存）

• Neon Yellow-Green (#f3ff34): セカンダリボタン背景。CSS 変数 --secondary-button-background: 243, 255, 52
• Seasonal Pastels: トップページではコレクションに応じたパステル背景（#e2c1e8 ラベンダー、#f8dfef ピンク、#d4e4ec ライトブルー、#cff2ec ミント、#f8c9c5 コーラル）が使用される

Text & Neutral

• Text Primary (#282828): 本文・見出しテキスト（rgb 40, 40, 40）
• Text on Dark (#ffffff): ヒーロー・ダークセクション上のテキスト
• Text Secondary (#565656): 補足テキスト（rgb 86, 86, 86）
• Border (#dfdfdf): 区切り線・入力欄の枠（rgb 223, 223, 223）
• Border Darker (#a9a9a9): 強調ボーダー（rgb 169, 169, 169）

Surface

• Surface White (#ffffff): 標準背景。CSS 変数 --background: 255, 255, 255
• Surface Light (#f5f5f5): セカンダリ背景・コレクションカード。CSS 変数 --secondary-background: 245, 245, 245
• Surface Dark (#2e3438): ウィッシュリストボタン背景（rgb 46, 52, 56）

Semantic

• Success (#2e9e7b): 在庫あり表示。Background: #d5ece5
• Error (#de2a2a): 在庫僅少・エラー。Background: #fdf0f0

3. Typography Rules

3.1 和文フォント

CFCL は和文と欧文で異なるフォントスタックを使い分ける二層構造。

• ゴシック体（日本語本文）: Hiragino Sans, ヒラギノ角ゴシック, Hiragino Kaku Gothic ProN, YuGothic, Yu Gothic
• 日本語テキスト（商品説明、UI要素）に使用
• Inter を和文フォントの前に配置し、欧文グリフは Inter で表示

3.2 欧文フォント

• セリフ（ブランド・見出し）: Garamond, Baskerville, Caslon, serif — クラシカルなオールドスタイルセリフ。ブランドロゴ・コレクション名・カテゴリ見出しに使用
• サンセリフ（UI・本文）: Inter — 日本語テキスト要素の欧文部分に使用

3.3 font-family 指定

css/* ブランド・見出し・英文（Garamond 系セリフ） */
font-family: Garamond, Baskerville, Caslon, serif;

/* 日本語本文・UI（Inter + ヒラギノ） */
font-family: Inter, "Hiragino Sans", ヒラギノ角ゴシック, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", YuGothic, "Yu Gothic", sans-serif;

/* ブランド要素の和欧混植（Garamond + ヒラギノ） */
font-family: Garamond, Baskerville, Caslon, ヒラギノ角ゴシック, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", YuGothic, "Yu Gothic", sans-serif;

/* 和文のみ（ヒラギノ優先） */
font-family: "Hiragino Sans", ヒラギノ角ゴシック, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", YuGothic, "Yu Gothic", sans-serif;

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

• 英文ブランド要素には Garamond 系セリフを単独で使用（和文フォールバック不要）
• 日本語テキストには Inter を先頭に置き、欧文グリフを Inter で統一
• 和欧混植が必要な要素では Garamond + ヒラギノの組み合わせ

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

3.5 行間・字間

• 本文の行間 (line-height): 1.6〜1.8（日本語 13px / line-height 20.8px = 1.6）
• 見出しの行間: 1.1（セリフ見出しは密に詰める）
• 本文の字間 (letter-spacing): 0.02〜0.03em
• 見出しの字間: 0.01em（Garamond 見出しは控えめ）

ガイドライン:

• 超軽量ウェイト（250〜300）と広めの letter-spacing の組み合わせで「軽やかな空気感」を演出
• セリフ見出しは line-height を 1.1 まで詰めて、密度のあるタイトルブロックを形成

3.6 禁則処理・改行ルール

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

3.7 OpenType 機能

• font-feature-settings: normal — palt・kern は未使用。letter-spacing で字間を制御

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary（黒背景）

• Background: #000000 (CSS 変数 --primary-button-background)
• Text: #ffffff
• Padding: 内部要素で調整
• Border Radius: 0px (CSS 変数 --button-border-radius: 0px)
• Height: 52px (CSS 変数 --button-height)
• Small Height: 44px (CSS 変数 --button-small-height)

Secondary（黄緑背景）

• Background: #f3ff34 (CSS 変数 --secondary-button-background)
• Text: #282828
• Border Radius: 0px

Outline（ヒーロー上のゴーストボタン）

• Background: transparent
• Text: #ffffff
• Border: box-shadow: #fff 0px 0px 0px 0.9px（border の代わりに box-shadow で 0.9px のアウトライン）
• Padding: 0px 20px
• Font: Garamond + Hiragino, 13px, weight 400

Inputs

• Background: transparent
• Border: フラット
• Border Radius: 0px
• Font Size: 12〜15px
• Font Weight: 400

Cards（コレクション）

• Background: #f5f5f5
• Border Radius: 0px
• Hover: image-zoom エフェクト
• Shadow: なし

Product Labels

• Custom Label 1: Background #000000, Text #ffffff
• Custom Label 2: Background #f3ff34, Text #000000
• Low Stock: Text #de2a2a
• In Stock: Text #2e9e7b

5. Layout Principles

Spacing Scale

Container

• Max Width: 約 1400px
• Padding (horizontal): 20〜40px

Grid

• Columns: 2〜4（コレクション一覧）
• Gutter: 16〜24px

6. Depth & Elevation

CFCL はフラットデザインを徹底しており、通常の UI 要素に影は使用しない。

7. Do's and Don'ts

Do（推奨）

• 英文ブランド要素には必ず Garamond 系セリフを使用する
• 日本語本文には Inter + Hiragino Sans を使用する
• font-weight は 400 以下を基本とする（250〜400 の範囲）
• border-radius は 0px を維持する（角丸を使わない）
• コレクションごとのパステルアクセントカラーを背景に活用する
• ボタンのアウトラインには border ではなく box-shadow を使用する

Don't（禁止）

• font-weight 500 以上を本文・見出しに使用しない（ロゴの 700 は例外）
• border-radius を追加しない（ブランドの構築的な美学に反する）
• Garamond の代わりにサンセリフを見出しに使用しない
• パステルカラーをテキストカラーに使用しない（背景のみ）
• 日本語テキストにセリフ体を使用しない

8. Responsive Behavior

Breakpoints

タッチターゲット

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

フォントサイズの調整

• モバイルではディスプレイサイズを縮小（45px → 28px 程度）
• 本文サイズは 13px を維持

9. Agent Prompt Guide

クイックリファレンス

Brand Color: #000000 (black)
Accent: #f3ff34 (neon yellow-green)
Text Color: #282828
Background: #ffffff
Secondary Background: #f5f5f5
Heading Font: Garamond, Baskerville, Caslon, serif
Body Font (JP): Inter, "Hiragino Sans", ヒラギノ角ゴシック, "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", sans-serif
Body Size: 13px / Weight 250-300
Line Height: 1.6
Border Radius: 0px (everywhere)
Button Height: 52px

プロンプト例

CFCL のデザインシステムに従って、商品一覧ページを作成してください。
- 英文見出し（カテゴリ名）: Garamond, 28px, weight 400
- 日本語本文: Inter + Hiragino Sans, 13px, weight 250
- カードは角丸なし、背景 #f5f5f5
- プライマリボタン: 黒背景 #000、白テキスト、角丸なし、高さ 52px
- テキストカラー: #282828
- 全体的に超軽量ウェイト（250〜400）を使用