CLAS（クラス） DESIGN.md

CLAS（https://clas.style/）のデザイン仕様書。 家具・家電のレンタル／サブスクサービス。「暮らしに、サブスクという選択を」をコンセプトにした、ナチュラルでサステナブルな生活提案型 EC。 実サイトの computed style 実測（2026-06-23 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白とウォームベージュを基調に、落ち着いたミュートグリーン #669988 をブランド色として置き、完全ピル（radius 24px）の CTA でやわらかく親しみやすい暮らしのトーンを表現
• 密度: 全体を通して line-height が 約 1.8 と非常にゆったり。見出しから本文・キャプションまで一貫して広い行間でエアリーなリズムをつくる
• キーワード: ナチュラル、ウォーム、幾何学サンセリフ、ピルボタン、暮らし／サステナブル
• 特徴:
  • 欧文に futura-pt（Adobe Fonts の幾何学サンセリフ） を全面採用。"GREEN ITEM"・"SERVICE"・"SALE"・"NEW" 等の英字ラベルは大文字（uppercase）で使い、Futura らしい幾何学的な印象を前面に出す
  • 和文用の Web フォントは読み込まれず、システムゴシック（ヒラギノ角ゴ ProN → Hiragino Sans）にフォールバックする
  • ブランドカラーはミュートグリーン #669988（主要 CTA "新規会員登録"・"すべてを見る"・ブランド要素）
  • サーフェスに ウォームベージュ #f5f3f0（ステップ／ガイド帯）と クールグレー #f2f3f2 / #e3e5e5（カテゴリタグ・記事帯）を使い分け、白地との対比でセクションを自然に区切る
  • アクセントは オレンジ #d96c45（セール／ハイライト）、ブルーグレー #608494（NEW・人気バッジ）、ゴールド #998866 の3系統
  • 純黒は避け、テキストは温かみのあるダークグリーングレー（#2d312f / #4b5049）で組む
  • 大型の選択ボタンは border: 3px solid の太いアウトラインピル（radius 20〜24px）で軽やかな立体感を演出
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

• Brand Green (#669988): メインのブランドカラー。主要 CTA "新規会員登録"、"すべてを見る"・"もっと見る" 等のアクション、ブランド要素（rgb 102,153,136）

CTA / Buttons

• Primary CTA (Pill): 背景 #669988 / 文字 #ffffff / border 1px solid #669988 / radius 24px / padding 4px 16px / 14px / weight 700
• Ghost CTA "ログイン": 背景 transparent / 文字 #646b61 / border 1px solid #646b61 / radius 24px / padding 4px 16px
• Filter Chip: 背景 #ffffff / 文字 #646b61 / border 1px solid #646b61 / radius 24px / padding 5px 12px / 12px / weight 700
• Large Outline Button: 背景 transparent / border 3px solid（グリーン or ダーク）/ radius 20〜24px（ガイド選択ボタン）
• Badge "NEW" / "人気": 背景 #608494 / 文字 #ffffff（ブルーグレー）

Neutral / Text

Accent

• Accent Orange (#d96c45): セール・ハイライトのアクセント（rgb 217,108,69）
• Accent Blue-grey (#608494): NEW・人気バッジ（rgb 96,132,148）
• Accent Gold (#998866): ナンバリング・装飾アクセント（rgb 153,136,102）

Semantic（推奨値）

実サイトには明確なエラー／成功色の表面化は確認されなかった。生活 EC として推奨する補完値:

• Danger: #d96c45（ブランドのアクセントオレンジを流用）
• Success: #669988（ブランドグリーンを流用）

Page Background

• Page BG: #ffffff（白）。上部 viewport の支配色は白で、セクション単位で #f2f3f2（クールグレー）・#f5f3f0（ウォームベージュ）に切り替わる

3. Typography Rules

3.1 和文フォント

• ゴシック体（メイン）: ヒラギノ角ゴ ProN（Hiragino Kaku Gothic ProN）→ ヒラギノ Sans（Hiragino Sans）→ sans-serif
• Web フォント: 和文の Web フォントは読み込まれない（OS のシステムゴシックにフォールバック）
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• サンセリフ（メイン）: futura-pt（Adobe Fonts の幾何学サンセリフ）— ラテン文字すべてに適用。英字ラベル／見出しは大文字（uppercase）で使う
• アイコン: 絵文字フォント（Apple Color Emoji / Segoe UI Emoji / Segoe UI Symbol）をフォールバックチェーンに内包

代替フォント注記: futura-pt は Adobe Fonts（Typekit）のライセンスフォントのため、プレビューや社外環境では読み込めない。代替として Jost（Google Fonts / weight 300・400・500・600・700）を使用すると、Futura 系の幾何学的なプロポーションを近似できる（preview.html はこの代替を使用）。和文は Noto Sans JP で代替する。

3.3 font-family 指定

css/* 全体共通（メイン） */
font-family: futura-pt, arial, "Apple Color Emoji", "Segoe UI Emoji",
  "Segoe UI Symbol", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

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

• futura-pt（欧文）を最優先。和文は futura-pt の欧文グリフではカバーできないため、ヒラギノ角ゴ ProN 以下の和文フォントが担う
• futura-pt は Adobe Fonts のライセンスフォントであり、非契約環境では arial → 絵文字フォント → OS 和文フォントへフォールバックする
• 和文専用の Web フォントは指定しない（システムフォントで統一）

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

実測値（トップページ、2026-06-23 取得）。letter-spacing は em 換算。line-height は比率換算。

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (14px): 1.8
• 小サイズ (12px): 1.8
• キャプション (10px): 1.8
• 見出し (16〜18px): 1.8
• → 全階層で約 1.8 に統一。サイズに関わらずゆったりとしたエアリーなリズムが CLAS の特徴

字間 (letter-spacing) — 実測:

• 本文: 0（futura-pt の自然なメトリクスを活かす）
• H2 セクション見出し: 0.05em（0.9px / 18px）
• H3 サブ見出し: 0.075em（1.2px / 16px）
• → letter-spacing は主に 大文字英字見出しに適用（0.05〜0.075em）

ガイドライン:

• futura-pt は欧文フォントのため、和文・欧文どちらも line-height は 1.8 を基準にする（詰めない）
• 英字ラベル（"GREEN ITEM"・"SERVICE" 等）は uppercase + letter-spacing 0.05〜0.075em で Futura らしい幾何学的なリズムを出す
• 本文の letter-spacing は 0 のまま futura-pt のメトリクスに委ねる

3.6 禁則処理・改行ルール

css/* 推奨設定 */
word-break: normal;
overflow-wrap: break-word;

• 英字ラベル（"NEW"・"SALE" 等）・ピル・バッジ・チップは white-space: nowrap
• カテゴリチップは折り返さず横スクロール／flex-wrap で配置

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった（font-feature-settings: normal）
• futura-pt のメトリクスと letter-spacing で見た目を調整する方針

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（グリーンピル） — "新規会員登録"

• Background: #669988
• Text: #ffffff
• Border: 1px solid #669988
• Padding: 4px 16px
• Border Radius: 24px（完全ピル）
• Font: futura-pt stack, 14px, weight 700

Ghost CTA（グレー枠） — "ログイン"

• Background: transparent
• Text: #646b61
• Border: 1px solid #646b61
• Padding: 4px 16px
• Border Radius: 24px
• Font: futura-pt stack, 14px, weight 700

Filter Chip — "ドラム式洗濯乾燥機" 等のキーワードタグ

• Background: #ffffff
• Text: #646b61
• Border: 1px solid #646b61
• Padding: 5px 12px
• Border Radius: 24px
• Font: futura-pt stack, 12px, weight 700

Large Outline Button — ガイド選択ボタン "家電から選ぶ" 等

• Background: transparent
• Border: 3px solid（選択時グリーン／非選択時ダーク or transparent）
• Border Radius: 20〜24px
• 太い枠線で軽やかな選択 UI を表現

Badge "NEW" / "人気"

• Background: #608494（ブルーグレー）
• Text: #ffffff
• Border Radius: 4px 程度
• Font: futura-pt stack, 10px, weight 700

Inputs

Search / Text Input（推奨値）

• Background: #ffffff
• Border: 1px solid #e3e5e5
• Border Radius: 24px（ピル）or 8px
• Padding: 8px 16px
• Font: futura-pt stack, 14px, weight 400
• Focus: box-shadow: 0 0 0 3px rgba(102,153,136,0.25)（ブランドグリーンのリング）

Cards / Surfaces

Product Card

• Background: #ffffff
• Border: なし（または 1px solid #e3e5e5 のヘアライン）
• Border Radius: 画像 8px 程度
• Shadow: ごく薄い 0 2px 8px rgba(45,49,47,0.06) 程度
• NEW バッジ: #608494 / 白文字を左上に配置

Category Tag Surface

• Background: #e3e5e5（クールグレー）
• Text: #2d312f
• "# 全自動洗濯機" 等のカテゴリ表示に使用

Warm Beige Banner（ステップ／ガイド帯）

• Background: #f5f3f0
• Padding: 40px 24px
• "迷わず選べる" 等のガイド導線に使用

Article Section（記事帯）

• Background: #f2f3f2（クールグレー）

Header

• Background: #ffffff（白）
• Border-bottom: 1px solid #e3e5e5（推奨）
• Position: sticky / top: 0（推奨）
• 右側に Ghost "ログイン" + Primary "新規会員登録" を並べる

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1200px（推奨）
• Padding (horizontal): mobile 16px / desktop 24〜32px
• サイドバーナビ + メインの2カラム構成（desktop）

Border Radius Scale

Grid

• Columns: 推奨 12 カラム（実装は Flexbox / CSS Grid）
• Gutter: 16〜24px
• 商品カード: 4列（desktop）→ 2列（tablet）→ 1列（mobile）
• カテゴリチップ: flex-wrap で横並び

6. Depth & Elevation

• 実測ではほぼフラット／極薄シャドウ
• 立体感は ウォームベージュ #f5f3f0 と クールグレー #f2f3f2 / #e3e5e5 のサーフェス＋ヘアラインボーダーで表現する
• 影は黒ではなくダークグリーングレー（rgba(45,49,47,*)）ベースでウォームに保つ

7. Do's and Don'ts

Do（推奨）

• 欧文は futura-pt を最優先、プレビュー・社外環境では Jost で代替する
• 和文は ヒラギノ角ゴ ProN → Hiragino Sans のフォールバックチェーンを維持する（和文 Web フォントは追加しない）
• 英字ラベル（"GREEN ITEM"・"SERVICE"・"SALE"・"NEW"）は uppercase + letter-spacing 0.05〜0.075em で Futura らしさを出す
• 本文から見出しまで line-height は 約 1.8 を基準にし、エアリーなリズムを保つ
• 主要 CTA は #669988 のグリーンピル（radius 24px）、ゴーストは #646b61 の枠線ピルで統一する
• ボタン・チップは すべてピル（radius 24px） に揃える（CLAS のアイデンティティ）
• サーフェスは ウォームベージュ #f5f3f0 と クールグレー #f2f3f2 / #e3e5e5 を使い分ける
• テキストは #2d312f / #4b5049 のウォームダークグリーングレーで組む
• font-feature-settings は normal のまま（palt 非使用）

Don't（禁止）

• 純黒 #000000 を本文・見出しに使わない（Text は #2d312f / #4b5049）
• ボタンやチップを 角丸（8px 以下）の四角にしない（CLAS は完全ピル radius 24px が基本）
• CTA に オレンジ #d96c45 を使わない（オレンジはセール／アクセント専用、メインアクションはグリーン）
• 和文に 冷たい純グレー（#9ca3af 等）を使わない（ウォームグリーングレーのトーンと合わない）
• 本文に line-height: 1.5 以下を使わない（CLAS は全体 1.8 のゆったり設計）
• 和文専用の Web フォント（Noto Sans JP 等）を 本番に追加しない（実サイトはシステムゴシック。preview のみ代替使用）
• font-feature-settings: "palt" 1 を 全体適用しない（実サイト非採用）

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• サイドバーナビ → ハンバーガー（HamburgerCategoryAccordion）に折りたたみ
• H2 セクション見出し: 18px は維持（weight 700 / letter-spacing 0.05em）
• 本文 14px・line-height 1.8 は維持
• 商品カード: 4列 → 2列 → 1列
• カテゴリチップ: 横スクロール

タッチターゲット

• 主要 CTA ピル: 高さ 36px 以上（padding 4px 16px + 14px font）
• フィルターチップ: 高さ 32px 以上（padding 5px 12px + 12px font）
• 大型選択ボタン（3px 枠ピル）: 高さ 48px 以上

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Brand Green (CTA): #669988
Text Heading: #4b5049
Text Primary: #2d312f
Text Secondary (ghost text/border): #646b61
Accent Orange (sale): #d96c45
Accent Blue-grey (NEW/人気 badge): #608494
Accent Gold: #998866
Cool Grey 1 (tag bg): #e3e5e5
Cool Grey 2 (article surface): #f2f3f2
Warm Beige Surface (step/guide): #f5f3f0
White (page bg / card / header): #ffffff

Main Font: futura-pt, arial, "Apple Color Emoji", "Segoe UI Emoji",
  "Segoe UI Symbol", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
Preview Fallback: "Jost", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif

Body: 14px / line-height 1.8 / weight 400 / letter-spacing 0 / color #4b5049
Small: 12px / line-height 1.8 / weight 400〜700 / color #646b61
Caption: 10px / line-height 1.8 / color #4b5049
H2 Section (EN uppercase): 18px / weight 700 / line-height 1.8 / letter-spacing 0.05em / color #4b5049
H3: 16px / weight 500 / line-height 1.8 / letter-spacing 0.075em / color #4b5049
H3 Alt: 18px / weight 700 / line-height 1.8 / color #2d312f

CTA Pill Radius: 24px（全ボタン・チップ統一）/ Badge Radius: 4px
Primary CTA: bg #669988 / 白文字 / border 1px solid #669988 / radius 24px / padding 4px 16px / 700
Ghost CTA: transparent / 文字・枠 #646b61 / radius 24px / padding 4px 16px
Filter Chip: bg #fff / 文字・枠 #646b61 / radius 24px / padding 5px 12px / 12px / 700
Shadow (card): 0 2px 8px rgba(45,49,47,0.06)
font-feature-settings: normal（palt 非使用）

プロンプト例

CLAS のデザインシステムに従って、家具・家電サブスクの商品一覧セクションを作成してください。
- フォント: futura-pt, arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
- セクション英字見出し: 18px / weight 700 / line-height 1.8 / letter-spacing 0.05em / uppercase / color #4b5049（例: "GREEN ITEM"）
- 本文: 14px / weight 400 / line-height 1.8 / letter-spacing 0 / color #4b5049
- 補足テキスト: 12px / line-height 1.8 / color #646b61
- 主要 CTA "新規会員登録": 背景 #669988（ミュートグリーン）/ 白文字 / border 1px solid #669988 / border-radius 24px（完全ピル）/ padding 4px 16px / 14px / weight 700
- ゴースト CTA "ログイン": transparent / 文字・枠 #646b61 / border-radius 24px
- フィルターチップ: 白背景 / 文字・枠 #646b61 / border-radius 24px / padding 5px 12px / 12px / weight 700
- NEW・人気バッジ: 背景 #608494（ブルーグレー）/ 白文字 / radius 4px / 10px / weight 700
- カード背景: #ffffff、カテゴリタグ帯は #e3e5e5、ステップ／ガイド帯は #f5f3f0（ウォームベージュ）、記事帯は #f2f3f2
- box-shadow は基本フラット（カードのみ 0 2px 8px rgba(45,49,47,0.06)）
- ボタン・チップはすべてピル（radius 24px）に揃える
- 純黒は使わず、テキストは #2d312f / #4b5049 のウォームダークグリーングレーで組む
- オレンジ #d96c45 はセール／アクセント専用（メイン CTA には使わない）
- 行間は全階層で 1.8 を基準にする
- font-feature-settings は normal（palt 非使用）