kolor（カラー） DESIGN.md

kolor 公式オンラインストア（https://kolor.jp/）のデザイン仕様書。 デザイナー・阿部潤一による前衛的日本メンズウェア／レディースウェアブランド。 素材の意外な組み合わせと構築的なテーラリングで国内外から高く評価される。 実サイトの computed style 実測（2026-07-21 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ディープネイビー（#283249）を基調に、白と無彩色グレーで組み上げる建築的・スイス的なモノトーン。角丸を排した直線的な矩形（radius 0）と、写真グリッドの余白でブランドの前衛性を静かに主張する。差し色は「Limited」バッジのイエロー（#fbc02d）ただ一点
• 密度: 情報密度は低〜中。商品写真（グレー面 #e5e5e5 のプレースホルダ）を主役に、テキストは小さめ・簡潔。EC としての機能情報（価格・ラベル）はネイビーで端正にまとめる
• キーワード: ネイビーモノクローム、スイス・グロテスク、建築的、前衛、直線（radius 0）、イエローの一点差し、余白グリッド、palt 字詰め
• 特徴:
  • 単色ブランド — ネイビー #283249 が「ヒーロー背景・見出し・リンク・CTA の枠線・塗り CTA」のすべてを兼ねる。白地にネイビー、ネイビー地に白の 2 パターンで画面を構成
  • イエローは唯一の差し色 — Limited バッジ（#fbc02d 地 + ネイビー文字）だけに使われる鋭いハイライト。出現回数はサイト全体でごく僅か
  • radius 0 の直線設計 — 主要ボタン・ラベル・バッジは角丸なし。小さな UI（言語切替チップ・カート系）のみ radius 3〜4px を例外的に使用
  • 欧文は LTUnivers（Linotype Univers） — クラシックなスイス・グロテスク。和文は Hiragino / メイリオ系にフォールバック
  • palt が全体適用 — LTUnivers スタックには font-feature-settings: "palt" が本文・見出しともにかかる（後述 3.7）
  • 本文はグレー #666666・見出しはネイビー #283249 と色で階層を分離。純黒は本文に使わない
  • 本文 line-height は 1.4 と、和文サイトとしてはやや詰まった端正な組み。ゆったりさより「構築感」を優先

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記（rgb → hex 変換済み）。

Brand（ブランドカラー）

• kolor Navy (#283249): ブランドの支配色（rgb(40, 50, 73)）。ヒーロー背景・見出し・リンク・価格・CTA の塗り／枠線すべてに使う濃紺。白文字との組み合わせが基本
• Limited Yellow (#fbc02d): 唯一の差し色（rgb(251, 192, 45)）。「Limited」バッジ専用。ネイビー文字を乗せる。多用しないことでブランドの鋭さを保つ

Neutral（ニュートラル）

• Text Body (#666666): 本文テキスト（rgb(102, 102, 102)）。body の既定色
• Text Input (#222222): 検索入力欄の入力文字（rgb(34, 34, 34)）
• Product Gray (#e5e5e5): 商品タイル／画像プレースホルダの面色（rgb(229, 229, 229)）。トップページで最頻出。※コレクション一覧では #e7e7e7（rgb(231, 231, 231)）とごく僅かに異なる
• Chip Gray (#f3f3f6): 言語・通貨切替チップの面色（rgb(243, 243, 246)。「JA」「JPY」）
• Field Gray (#f1f1f1): 一部入力欄の面色（rgb(241, 241, 241)）
• Border (#e0e0e0): 入力欄の細罫線（rgb(224, 224, 224)）

Surface（背景）

• Page White (#ffffff): ページ本体の背景（白）。コレクション一覧・商品グリッドの地
• Hero Navy (#283249): ヒーロー／お知らせバー／サイトマップ等、ネイビー面の背景

Text on Dark（暗色面上の文字）

• Inverse Text (#ffffff): ネイビー面上の見出し・ナビ・お知らせ文字
• Overlay (rgba(18, 17, 39, 0.72)): 翻訳切替オーバーレイの半透過ネイビー（#121127 @ 72%）。補助的

Note: kolor のパレットは 「ネイビー単色 + イエロー一点」。#283249 の濃紺で構造を作り、白と数種のグレーで面を分け、#fbc02d は Limited バッジにのみ許す。多色を持ち込まず、直線と余白で前衛性を語る引き算のパレット。

3. Typography Rules

3.1 和文フォント

ゴシック体（フォールバックスタック）:

• ヒラギノ角ゴ系（実サイトでは MyHiragino として指定 → ヒラギノ角ゴ ProN 相当）
• メイリオ（Windows 向け）
• 明朝体は未使用（ゴシック一本）

3.2 欧文フォント

• LTUnivers（Linotype Univers） — 本文・見出し・UI すべてのメイン欧文。クラシックなスイス・グロテスク（サンセリフ）
• AppleSystem / MySansSerif を中間フォールバックに挟む独自スタック
• ボタン・一部入力欄のみ sans-serif（システム依存、palt なし）

3.3 font-family 指定

実サイトの宣言（MySansSerif MyHiragino は kolor の内部エイリアス）:

css/* 本文・見出し・UI（最も多用） */
font-family: LTUnivers, AppleSystem, MySansSerif, MyHiragino, メイリオ, sans-serif;

/* 一部のボタン・翻訳 UI（palt なし・システム依存） */
font-family: sans-serif;

再現用に展開したチェーン（推奨）:

cssfont-family: "LTUnivers", "Helvetica Neue", Arial,
             "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
             メイリオ, Meiryo, sans-serif;

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

• 欧文先頭（LTUnivers → システム sans）で欧文グリフの質感を優先
• 和文は ヒラギノ → メイリオ の順で OS にフォールバック
• LTUnivers は商用ライセンス（Linotype） — Web では自社配信。ローカル代替が必要（後述 preview 注記）

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

_context の使い分け: 同じ h2 でも、header hero の 24px/700 は白・ネイビー地、main.p-top の 24px/700 はネイビー・白地、section.content の 22px/400 はネイビー・白地と役割が違う。h4/h5 も nav 内では白（ネイビー地）とネイビー（白地）の 2 バリエーションが併存する。

3.5 行間・字間

• 本文 line-height: 1.4（22.4px / 16px）。和文サイトとしては詰め気味で、端正・構築的な印象を作る
• 見出し line-height: 1.0（ロゴ・ヒーロー）〜 1.4（セクション見出し）
• letter-spacing: 基本 normal。例外は「すべての検索結果を見る」リンクの 1.04px（13px で約 0.08em） のみ。ブランド全体として字間を広げず、palt に字詰めを委ねる
• 意図: 字間で「呼吸」させる AURALEE 系とは逆に、kolor は line-height を締め、palt で詰めることで直線的・建築的なリズムを作る

3.6 禁則処理・改行ルール

css/* 推奨（EC の商品名・品番の折り返し対策） */
overflow-wrap: break-word;
line-break: strict;

• 品番（例: 26SBM-T14237S-08）など長い英数字トークンがあるため overflow-wrap: break-word を推奨
• 和文の禁則はブラウザ既定に委ねる（特殊指定なし）

3.7 OpenType 機能

cssfont-feature-settings: "palt";   /* LTUnivers スタック全体に適用 */

• palt は全体適用 — body・h1〜h5・p・a・span・nav・header・footer と、LTUnivers を使う要素すべてで font-feature-settings: "palt" が有効（実測で ff-set="palt" を確認）。見出しだけでなく本文にもかかる点が kolor の特徴
• 例外: sans-serif 指定のボタン・翻訳 UI と、アイコンフォント（icomoon, "liga"）は palt 対象外（ff-set=normal / "liga"）
• palt により和欧混植でも字間が自動で詰まり、詰まった line-height と相まって構築的な密度が出る

3.8 縦書き

• 通常コンテンツでは未使用

4. Component Stylings

radius は原則 0px（直線）。小さな補助 UI のみ 3〜4px。

Buttons

Primary — Filled Navy（塗り CTA）

• 背景: #283249
• 文字色: #ffffff
• padding: 16px 30px（小型は 8px 15px）
• border-radius: 0px
• font-size: 14px / font-weight: 400
• border: なし

Secondary — Outlined Navy（枠線 CTA）

• 背景: #ffffff
• 文字色: #283249
• border: 1px solid #283249
• padding: 10px 18px
• border-radius: 0px
• font-size: 13px / font-weight: 400

Text Button — Bold Link（全幅リンク型）

• 背景: #ffffff または #283249
• 文字色: #283249（白地）／#ffffff（ネイビー地）
• padding: 14px 0 12.25px
• border-radius: 0px
• font-size: 16px / font-weight: 700

Badges / Labels

Limited Badge（差し色）

• 背景: #fbc02d
• 文字色: #283249
• padding: 6px 12px 3px
• border-radius: 0px
• font-size: 8px / font-weight: 700

Navy Badge

• 背景: #283249
• 文字色: #ffffff
• padding: 6px 12px 3px
• border-radius: 0px
• font-size: 8px / font-weight: 700

Chip（言語・通貨切替）

• 背景: #f3f3f6
• 文字色: #283249（または #000000）
• padding: 5px 7.5px
• border-radius: 3px（例外的に角丸）
• font-size: 10px / font-weight: 400

Inputs

• 背景: 透過 または #f1f1f1
• border: 1px solid #e0e0e0
• border-radius: 4px（検索チップは 3px）
• padding: 8px 10px
• font-size: 14〜16px / font-weight: 400
• 文字色: #222222
• ※検索入力（ls-input）は透過背景・radius 0

Cards（商品カード）

• 背景: 透過（画像が主役）
• 画像プレースホルダ面: #e5e5e5（一覧では #e7e7e7）
• border: なし
• border-radius: 0px
• 影: なし（フラット）
• 下部にネイビーのブランド名 12px / 品番 12px/700 / 価格 12px の 3 段組

5. Layout Principles

Spacing Scale（実測から推定）

Container

• 商品グリッドは白地にフルブリード気味。ヒーローはネイビーの全幅帯
• CTA padding は横 18〜30px を基準

Grid

• 商品グリッド: 複数カラム（PC 3〜4 列）。グレー面のタイルを均等配置
• ヒーロー: ネイビー全幅 + 白見出し

6. Depth & Elevation

• 影は原則なし — box-shadow: none のフラット設計。radius 0 の矩形と面色で構造を作る
• 段差は影ではなく「ネイビー面 / 白面」のコントラストで表現する
• 罫線も控えめ（入力欄の #e0e0e0 程度）

7. Do's and Don'ts

Do's

• ネイビー #283249 を主役にする（見出し・リンク・価格・CTA すべて）
• 白地ネイビー文字 / ネイビー地白文字 の 2 パターンで画面を構成する
• イエロー #fbc02d は「Limited」バッジだけに使う（一点差し）
• radius 0 の直線的な矩形でボタン・ラベル・カードを作る
• LTUnivers（またはグロテスク系代替）+ ヒラギノ/メイリオ のチェーンを使う
• palt を本文・見出しの両方に適用する（font-feature-settings: "palt"）
• 本文グレー #666666・見出しネイビー #283249 と色で階層を分ける
• 本文 line-height 1.4 の端正な組みを保つ
• 影なし・フラットを徹底する

Don'ts

• イエローを差し色以外に多用しない — Limited バッジ専用の鋭さを守る
• 角丸を多用しない — radius は原則 0。小チップの 3〜4px までが例外
• 本文に純黒 #000000 を使わない — グレー #666666 が基本
• line-height を広げすぎない — 2.0 のようなゆったり組みは kolor の建築感を損なう
• letter-spacing で無闇に広げない — 字詰めは palt に委ね、基本 normal
• 多色を持ち込まない — ネイビー + 白 + 数種のグレー + イエロー一点で完結させる
• 影で立体感を作らない — 面のコントラストと直線で奥行きを出す

8. Responsive Behavior

Breakpoints

タッチターゲット

• CTA は padding 込みで最小 44px 高さを確保（塗り CTA の 16px 30px で満たす）

フォントサイズの調整

• 本文は PC/SP とも 16px 前後。見出しはモバイルでヒーロー 24px → 20px 程度に縮小
• palt はブレイクポイントに関わらず維持

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #283249   (kolor Navy — 見出し・リンク・CTA)
Accent Color:  #fbc02d   (Limited Yellow — バッジ専用の一点差し)
Text Color:    #666666   (本文グレー)
Background:    #ffffff   (白) / #283249 (ネイビー面)
Font: "LTUnivers", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", メイリオ, sans-serif
Body Size: 16px
Line Height: 1.4
font-feature-settings: "palt"   (本文・見出しとも適用)
Border Radius: 0px（直線が基本）

プロンプト例

kolor のデザインシステムに従って、商品一覧グリッドを作成してください。
- ブランドカラー: #283249（ネイビー）を見出し・価格・CTA に使う
- 差し色: #fbc02d（イエロー）は「Limited」バッジのみ
- 本文色: #666666、本文サイズ 16px / line-height 1.4
- フォント: LTUnivers 系グロテスク + ヒラギノ/メイリオ、font-feature-settings: "palt"
- ボタン: 塗りは #283249 地・白文字・padding 16px 30px・radius 0
          枠線は白地・ネイビー文字・1px solid #283249・padding 10px 18px・radius 0
- 商品タイルのプレースホルダ面: #e5e5e5、カードは影なし・radius 0
- 全体をネイビー + 白 + グレーのモノトーンでまとめ、角丸を使わない