KEYUCA（ケユカ） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 日本発のライフスタイル・インテリアブランド。カーテン、家具、キッチン用品、生活雑貨を展開し、「シンプルで、永く使える」を掲げる。Gothic Medium BBB（森澤ゴシック）+ Gill Sans Nova のバイリンガルフォントシステムが特徴 — 日本語に繊細なゴシック体、英文に人文主義サンセリフを組み合わせ、上質だが控えめな世界観を表現する。色彩はウォームグレーとコッパーのニュートラルトーンに徹し、派手な色を排除している
• 密度: ゆったりとした余白を持つ EC サイト。本文 13px に対して line-height 2.0 の非常に広い行間が特徴的で、空間の呼吸を大切にする。フォントウェイトは全体を通して 500（Medium）で統一
• キーワード: ナチュラル、静謐、ウォームグレー、line-height 2.0、Medium 500 統一、バイリンガル階層
• 特徴: 13px / weight 500 / line-height 2.0 / letter-spacing 0.05em が全体を貫く基本トーン。本コレクション中で最も広い行間（2.0）を持ち、見出しから本文まで同じ余裕のあるリズムを維持する。ボタンは #878787 グレー（ブランドカラーでも黒でもない中間的なグレー）を主体に、pill（20px）と角丸（6px）を併用する。font-feature-settings は normal（palt 未適用）で、等幅の整った印象を保つ

2. Color Palette & Roles

Primary（ブランドカラー）

KEYUCA のカラーはウォームグレーとアースカラーが中心。鮮やかなプライマリカラーを持たず、控えめなグレーと温かみのあるゴールド / コッパーで構成される。

• Brand Gold (#aa9977): ウォームゴールド / タンカラー。ブランドのシンボリックな暖色
• Brand Copper (#c28358): コッパー / テラコッタ。カルーセルのアクティブインジケーター等のアクセントに使用

Interactive（インタラクティブ要素）

• Button Grey (#878787): ログイン、CTA、ユーティリティボタンの背景色。ブランドの「主張しすぎない」哲学を反映した中間グレー
• Button Grey on White (#ffffff): ボタン上のテキスト

Semantic（意味的な色）

• Error / Danger (#ee2200): エラー、必須マーク、警告

Text & Neutral

• Text Primary (#323333): メインテキスト（rgb 50, 51, 51）— 純黒を避けた暖みのあるチャコール
• Text Secondary (#878787): 補足テキスト、英文セクションラベル
• Text Muted (#707070): ダークグレーの補助テキスト
• Text Disabled (#c6c6c6): 無効状態、ライトグレーテキスト

Surface & Border

• Background Primary (#f3f3f3): ページ背景（最多出現、65件）
• Background Secondary (#f9f9f9): セカンダリ背景面（40件）
• Surface White (#ffffff): カード、ボタン背景
• Border Light (#e2e2e2): 区切り線、入力欄の枠
• Overlay Dark (rgba(0, 0, 0, 0.5)): モーダルオーバーレイ

3. Typography Rules

3.1 和文フォント

• Gothic Medium BBB: 森澤（Morisawa）のゴシック体。Adobe Fonts 経由で配信。ウェイト 500（Medium）のみ使用。繊細だが安定感のある字形が KEYUCA の「静かな上質さ」を体現する

3.2 欧文フォント

• Gill Sans Nova: Adobe Fonts 経由のヒューマニストサンセリフ。英文セクションラベル（"Information" "New Arrival" 等）に使用。古典的な人文主義の骨格が、KEYUCA のクラフト感を補強する

Google Fonts 代替（preview.html 用）:

• Gothic Medium BBB → Zen Kaku Gothic New（同じ森澤系で字形が近い）
• Gill Sans Nova → Lato（ヒューマニストサンセリフとして字幅・骨格が近似）

3.3 font-family 指定

css/* 本文（和文メイン） */
font-family: "Gothic Medium BBB", sans-serif;

/* 英文ラベル・見出し */
font-family: gill-sans-nova, sans-serif;

/* 検索入力欄 */
font-family: "Hiragino Sans", "Yu Gothic", sans-serif;

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

• 和文は Gothic Medium BBB を単独指定（Adobe Fonts で確実に読み込まれる前提）。フォールバックは sans-serif のみ
• 英文ラベルは gill-sans-nova（Adobe Fonts の CSS 名）を使用
• 検索入力欄のみヒラギノ角ゴ + 游ゴシックを使用（システムフォント）

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

3.5 行間・字間

• 本文の行間 (line-height): 2.0（26px / 13px）— 本コレクション中で最も広い。日本語テキストに「余白の呼吸」を持たせる
• 見出し（JP）の行間: 2.0（56px / 28px）— 見出しも本文と同じ 2.0 を維持
• 見出し（EN label）の行間: 1.375（22px / 16px）— 英文ラベルのみ詰める
• 商品名の行間: 1.7（22.1px / 13px）— 商品カード内は少し詰める
• 本文の字間 (letter-spacing): 0.05em（0.65px @ 13px）— グローバルに適用
• 検索フォームの字間: 0.1em（1.2px @ 12px）— 入力欄は広め

ガイドライン:

• KEYUCA は line-height 2.0 を本文・見出し両方に適用する。英文ラベルと商品名のみ例外
• letter-spacing 0.05em は控えめだが、13px の小さなフォントサイズでの可読性を確保する重要な設定
• font-weight は 全要素 500（Medium）で統一。太字も細字も使わない均質なトーン

3.6 禁則処理・改行ルール

• 特別な禁則設定なし（ブラウザデフォルト）

3.7 OpenType 機能

cssfont-feature-settings: normal; /* palt 未適用 */

• palt 未適用: KEYUCA は font-feature-settings: normal。プロポーショナル字詰めを行わず、等幅のまま整った印象を保つ
• Gothic Medium BBB のデフォルトメトリクスをそのまま活かすアプローチ

3.8 縦書き

該当なし

4. Component Stylings

Buttons

KEYUCA のボタンは #878787 グレー背景が基本。ブランドカラーでも黒でもない「主張しない」グレーが特徴的。pill（20px）と角丸（6px）を用途で使い分ける。

Primary Pill（ログイン・新規登録）

• Background: #878787
• Text: #ffffff
• Border Radius: 20px（pill）
• Padding: 15px 10px 15px 62px
• Font Size: 14px
• Font Weight: 500

Utility（ご利用ガイド、ショップリスト）

• Background: #878787
• Text: #ffffff
• Border Radius: 6px
• Font Size: 13px
• Font Weight: 500

CTA（トップページへ）

• Background: #878787
• Text: #ffffff
• Border Radius: 6px
• Font Size: 16px
• Font Weight: 500

Secondary / Outline（戻るボタン）

• Background: #ffffff
• Text: #323333
• Border Radius: 6px
• Font Size: 16px
• Font Weight: 500

ボタンの考え方:

• 塗りつぶしボタンは すべて #878787 グレー。ブランドゴールド #aa9977 やコッパー #c28358 はボタンに使わない
• ログイン等の認証系は pill（20px）、ユーティリティ・CTA は 角丸（6px） で区別
• outline ボタンは白背景 + テキスト色（#323333）

Carousel Indicators

• Active: #c28358（コッパー）
• Inactive: #f3f3f3（背景色と同化）

Inputs（検索フォーム）

• Font: "Hiragino Sans", "Yu Gothic", sans-serif
• Font Size: 12px
• Font Weight: 400
• Letter Spacing: 0.1em (1.2px)

Cards（商品カード）

• Background: #ffffff
• Border: なし（推定）
• Border Radius: なし（推定）
• 商品名（13px / 500 / line-height 1.7）+ 価格表示の構成

5. Layout Principles

Container

• ページ全体の背景: #f3f3f3
• コンテンツエリアは白背景のカード / セクション単位

Spacing Scale（実測ベース）

Grid

• 商品カードグリッドレイアウト
• カルーセル形式の商品表示が主体

6. Depth & Elevation

KEYUCA はシャドウをほぼ使わない。#f3f3f3 の面と #ffffff の面の切り替え、および微細なシャドウで空間を構成する。

7. Do's and Don'ts

Do（推奨）

• 和文は Gothic Medium BBB を使用し、欧文ラベルは gill-sans-nova を使う
• font-weight は 全要素 500（Medium） で統一する
• 本文・日本語見出しの line-height は 2.0 を維持する
• letter-spacing は 0.05em をグローバルに適用する
• ボタンの背景色は #878787 グレー を使う
• テキスト色は #323333 を使う（純黒を避ける）
• ページ背景は #f3f3f3、コンテンツ面は #ffffff の2面構成にする
• pill ボタン（20px）は認証系、角丸（6px）はユーティリティ・CTA に使い分ける
• カルーセルのアクティブインジケーターには #c28358 コッパーを使う

Don't（禁止）

• 純黒 #000000 をテキストに使わない（#323333 が標準）
• font-weight を 500 以外に変えない（太字 700 も細字 300 も使わない）
• line-height を 2.0 以下にしない（本文・日本語見出し）
• ボタンにブランドゴールド #aa9977 やコッパー #c28358 を使わない（ボタンは #878787）
• font-feature-settings: "palt" を適用しない（KEYUCA は等幅）
• 鮮やかなアクセントカラーを使わない（ウォームグレー・アースカラーの範囲内に抑える）
• フォントサイズを大きくしすぎない（13px ベースの静謐なスケール感を保つ）
• ボタンに角丸 9999px を使わない（pill は 20px まで）

8. Responsive Behavior

Breakpoints（想定）

モバイル時の調整

• 見出し（28px）→ 縮小
• 商品グリッドは 1〜2 カラムに折り返し
• ナビゲーションはハンバーガー化
• line-height 2.0 と letter-spacing 0.05em は維持（KEYUCA のアイデンティティ）

タッチターゲット

• pill ボタンは padding 15px で十分なタップ領域を確保
• 最小タッチターゲット: 44px x 44px（WCAG 基準）

9. Agent Prompt Guide

クイックリファレンス

Brand: KEYUCA（ケユカ）
Origin: 日本発ライフスタイル・インテリアブランド
Brand Gold: #aa9977
Brand Copper: #c28358
Button Grey: #878787
Text Primary: #323333
Background: #f3f3f3
Surface White: #ffffff
Error: #ee2200

JP Font: "Gothic Medium BBB", sans-serif
EN Font: gill-sans-nova, sans-serif
Search Font: "Hiragino Sans", "Yu Gothic", sans-serif

Google Fonts 代替: Zen Kaku Gothic New (JP) / Lato (EN)

palt: 未適用（font-feature-settings: normal）
Body: 13px / 500 / line-height 2.0 / letter-spacing 0.05em
Heading (JP): 28px / 500 / line-height 2.0 / letter-spacing 0.05em
Heading (EN label): 16px / 500 / line-height 1.375 / color #878787
Button Style: filled (bg #878787, text #fff, radius 6px or 20px pill)
Shadow: rgb(0 0 0 / 10%) — ほぼ使わない

プロンプト例

KEYUCA のデザインシステムに従って、商品一覧ページを作成してください。
- 和文フォントは "Gothic Medium BBB", sans-serif（Google Fonts 代替: Zen Kaku Gothic New）
- 英文ラベルは gill-sans-nova, sans-serif（Google Fonts 代替: Lato）
- font-feature-settings: normal（palt 未適用）
- letter-spacing は全要素に 0.05em
- 本文は 13px / 500 / line-height 2.0 / color #323333
- 日本語見出しは 28px / 500 / line-height 2.0
- 英文セクションラベルは 16px / 500 / line-height 1.375 / color #878787
- ボタンは bg #878787, text #fff, radius 6px（認証系は pill 20px）
- ページ背景は #f3f3f3、コンテンツ面は #ffffff
- シャドウは最小限（rgb(0 0 0 / 10%)）
- font-weight は全要素 500 で統一

デザインの重要ポイント

1. Gothic Medium BBB + Gill Sans Nova: 森澤ゴシック（Adobe Fonts）と Gill Sans Nova のバイリンガルシステム。日本語は繊細なゴシック体、英語はヒューマニストサンセリフで、「クラフト感のある上質さ」を二言語で表現
2. line-height 2.0 の広い行間: 本コレクション中で最大の行間。日本語本文も見出しも 2.0 で統一し、ゆったりとした「空間の呼吸」を生む。KEYUCA の実店舗が持つ余白感をデジタルに翻訳した設定
3. font-weight 500 統一: 太字も細字も使わず、すべて Medium で通す。強調には色やサイズの変化を使い、ウェイトの変化を排除することで均質なトーンを維持
4. #878787 グレーのボタン: ブランドカラーでも黒でもない中間グレーをボタンに使うのは珍しい。「主張しすぎない」KEYUCA の姿勢がインタラクティブ要素にまで徹底されている
5. 13px の小さなベースサイズ: 本文 13px は一般的な 14-16px よりも小さい。line-height 2.0 と letter-spacing 0.05em で可読性を補い、静謐で品のある印象を作る
6. palt 未適用: font-feature-settings: normal。プロポーショナル字詰めをせず、等幅のまま整った印象を保つ。Gothic Medium BBB のデフォルトメトリクスへの信頼
7. アースカラーのアクセント: 鮮やかな色を一切使わず、ゴールド #aa9977 とコッパー #c28358 だけが暖色。カルーセルインジケーターのコッパーが唯一の色彩的アクセント

取得日: 2026-05-09 出典: https://www.keyuca.com/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出