UNDERCOVER（アンダーカバー） DESIGN.md

UNDERCOVER 公式サイト（https://undercoverism.com/）のデザイン仕様書。 高橋盾（Jun Takahashi）が 1990 年に設立した日本のアヴァンギャルドファッションブランド。 パンク、ストリート、実験的なアートを融合し「We Make Noise, Not Clothes」を掲げる。 実サイトの computed style 実測（2026-06 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純黒と純白だけの厳格なモノクロームに、極端に小さいタイポグラフィ（10px ベース）を載せる反装飾のウルトラミニマル。画像が全面を支配し、UI は限界まで消える
• 密度: 情報密度は低い。フルワイドのヒーロー画像とコレクション写真が主役で、テキストはキャプション的存在
• キーワード: ウルトラミニマル、モノクローム、反装飾、10px ベース、palt グローバル、HelveticaNeueLTPro、editorial、brutalist typography
• 特徴:
  • 完全二値のカラーパレット — #000000 と #ffffff のみ。アクセント色は一切存在しない
  • HelveticaNeueLTPro-Md / Bd — Helvetica Neue LT Pro の Medium / Bold をライセンス使用
  • 和文は FP-ヒラギノ角ゴ ProN — FontPlus（SB テクノロジー）の Webフォントサービス経由でヒラギノ角ゴ ProN W4 / W6 を配信
  • 本文 10px ベース — 意図的に極小。ファッション業界のエディトリアル文法
  • font-feature-settings: "palt" をグローバル適用 — body レベルで全要素にプロポーショナル字詰め
  • letter-spacing は実質 0 — -0.01px（≈ 0）で、字間調整をしない設計
  • CTA は角丸なし〜最大 2px — ピル型は使わない。直線的で硬質
  • 装飾要素ゼロ — アイコン、イラスト、グラデーション、影は一切使わない

2. Color Palette & Roles

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

Brand / Foreground

• Pure Black (#000000): CTA ボタン背景、ナビゲーションメニュー背景、テキスト主色。ブランドの唯一の色
• Near Black (#222222): 一部の見出し・リンクテキスト（rgb(34, 34, 34)）

Surface（背景）

• Pure White (#ffffff): ページ背景。例外なし
• Black Surface (#000000): ナビゲーションメニュー面、CTA ボタン面

Overlay

• Search Overlay (rgba(0, 0, 0, 0.5)): 検索オーバーレイの半透明黒

Text

• Text Primary (#000000): 本文テキスト
• Text Secondary (#222222): 見出し・一部リンク
• Text on Dark (#ffffff): 黒面上のテキスト（ナビ、CTA ボタン内）

Border

• Border (#000000): ボタン罫線（1px solid）

Note: UNDERCOVER のパレットは純粋な二値。#000000 と #ffffff 以外は #222222 のみで、これも限定的。visvim のようなチャコール（#222）主体ではなく、純黒 #000000 が支配色。有彩色は一切存在しない。

3. Typography Rules

3.1 和文フォント

ゴシック体:

• FP-ヒラギノ角ゴ ProN W4（FontPlus Webフォント、レギュラー）
• FP-ヒラギノ角ゴ ProN W6（FontPlus Webフォント、ボールド）

Note: FontPlus はソフトバンクグループの SB テクノロジーが運営する日本語 Webフォント配信サービス。FP- 接頭辞はそのサービス用のフォント名。ヒラギノ角ゴ ProN（大日本スクリーン＝SCREENグラフィックス）の W4 / W6 ウェイトを使用。

3.2 欧文フォント

• HelveticaNeueLTPro-Md（Helvetica Neue LT Pro Medium、ライセンスフォント）
• HelveticaNeueLTPro-Bd（Helvetica Neue LT Pro Bold、ライセンスフォント）

Note: Linotype の Helvetica Neue LT Pro（Pro はOpenType版を示す）。Medium (Md) が本文、Bold (Bd) が見出し・CTA。一般的な Helvetica Neue とは異なるメトリクスを持つ。

3.3 font-family 指定

css/* 本文（Medium） */
font-family: HelveticaNeueLTPro-Md, "FP-ヒラギノ角ゴ ProN W4", sans-serif;

/* 見出し・CTA（Bold） */
font-family: HelveticaNeueLTPro-Bd, "FP-ヒラギノ角ゴ ProN W6", sans-serif;

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

• 欧文先頭スタック — HelveticaNeueLTPro を先頭に置き、和文は FP-ヒラギノ角ゴにフォールバック
• Webフォント前提 — FontPlus の読み込みが必要。読み込み失敗時は OS の sans-serif
• OS フォールバックは最小限 — 游ゴシック等への詳細チェーンは指定しない潔い設計

preview.html での代替フォント:

• HelveticaNeueLTPro-Md / Bd → "Helvetica Neue", Helvetica, Arial, sans-serif
• FP-ヒラギノ角ゴ ProN → "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif（macOS ローカルフォント）

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

3.5 行間・字間

• 本文 line-height: normal（ブラウザデフォルト ≈ 1.2）。10px ベースに対して明示的な行間指定は控えめ
• 見出し line-height: H2 で 1.03（36px/37px）と極端にタイト。文字が行送りいっぱいに詰まる
• ショップアイテム line-height: 1.19（16px/19px）。やや詰め
• ロゴ line-height: 1.4（16px/22.4px）。サイト内で最もゆとりがある
• letter-spacing: 全要素で -0.01px（≈ 0）。字間調整をしない設計
• 意図: Helvetica Neue LT Pro のメトリクスをそのまま活かし、余計な加工を排除する

3.6 禁則処理・改行ルール

• デフォルト挙動を尊重 — 特別な禁則処理指定なし
• 欧文中心（ブランド名・商品名）のサイトであり、長文テキストがほぼ存在しない
• 日本語テキストはフッターの最小限のみで、ブラウザ標準の禁則に委ねる

3.7 OpenType 機能

css/* body レベルでグローバル適用 */
font-feature-settings: "palt";

• palt（プロポーショナル字詰め）: body に宣言し、全要素に継承。UNDERCOVER は見出し・本文・ナビ・フッターのすべてで palt を適用する
• visvim（palt 不使用）や note（見出し限定）とは異なり、グローバル適用が特徴
• ヒラギノ角ゴ ProN は palt グリフを備えており、約物・かな混じりテキストの詰め組みに効果がある

3.8 縦書き

• 未使用

4. Component Stylings

Buttons

Subscribe CTA

• 背景: #000000
• 文字色: #ffffff
• font-family: HelveticaNeueLTPro-Bd
• font-size: 12px / weight 600
• border: 1px solid #000000
• border-radius: 2px（ほぼ直角。サイト内で唯一角丸がある要素）
• padding: 10px 0px 7px（上下非対称 — 活版印刷的なベースライン調整）

Navigation Item (Menu)

• 背景: #000000
• 文字色: #ffffff
• font-family: HelveticaNeueLTPro-Md
• font-size: 20px / weight 400
• border: none
• border-radius: 0px
• padding: 5px 38px

"TOP PAGE" Link

• 背景: #000000
• 文字色: #ffffff
• font-size: 12px / weight 600
• border: 1px solid #000000
• border-radius: 0px
• padding: 17px 0px

Note: ボタンは例外なく黒地に白文字。色のバリエーション・ホバーの色変化は存在しない。角丸は Subscribe CTA の 2px が最大で、他はすべて 0px。ピル型（radius 18px+）は一切使わない。

Navigation

• ヘッダー: 白背景、テキストリンク。11–12px / weight 500–600
• メニュー展開時: 黒背景フルスクリーン、白文字 20px / weight 400
• ロゴ "UNDERCOVER": 16px / weight 400、黒文字

Inputs

• 背景: 透過
• 罫線: 下線のみ（推定）
• 文字色: #000000
• font-size: 10–12px
• font-weight: 400
• border-radius: 0px
• スタイルは最小限 — フォーム要素の装飾を排除

Cards

• 背景: 透過
• 罫線: なし
• 影: なし
• 角丸: 0px
• 商品画像が主役。下にプロダクト名（12–16px / weight 600）

5. Layout Principles

Spacing

• ベースユニット: 明示的なトークンシステムではなく、画像とテキストの関係性で余白を決定
• 画像間の余白: 最小限。グリッドの gutter で制御
• テキストの余白: コンパクト。ボタン padding も上下非対称（10px 0px 7px 等）

Container

• 幅: フルワイド基調。ヒーロー画像はブラウザ幅いっぱい
• コンテンツ: コレクション写真・プロダクト画像がエッジ to エッジで配置

Grid

• コレクション: 2–3 列のグリッド。画像比率は統一
• ショップ: カテゴリ別のグリッド表示
• 余白の考え方: テキストではなく画像のスケールとグリッドのリズムで構成する

6. Depth & Elevation

• 影: 一切使わない。box-shadow: none が全要素のデフォルト
• 罫線: ボタンの 1px solid #000000 のみ。区切り線やカード罫線は存在しない
• 奥行き表現: 影・罫線・グラデーションではなく、黒面と白面のコントラストで表現
• オーバーレイ: 検索時の rgba(0, 0, 0, 0.5) のみ

Note: visvim（1px solid #707070）や COMME des GARCONS と同様にフラットデザインを徹底するが、UNDERCOVER は罫線すらほぼ使わない。純黒ベタ面と純白の対比だけで UI を構成する点がより極端。

7. Do's and Don'ts

Do's

• HelveticaNeueLTPro-Md / Bd + FP-ヒラギノ角ゴ ProN のスタックを使う
• テキストカラーは #000000（純黒） を基本とする（#222222 ではない）
• 背景は #ffffff（純白） のみ
• font-feature-settings: "palt" を body でグローバル適用する
• letter-spacing は -0.01px（≈ 0） で字間調整しない
• 本文 10px ベースを維持する。ファッションブランドの editorial 文法
• CTA は黒ベタ + 白文字 + radius 0〜2px。直線的で硬質
• ボタンは黒一色。色のバリエーションを作らない
• 影なし・罫線なし・装飾なし を徹底する

Don'ts

• アクセント色を追加しない — 赤、青、グレーを含め、黒白以外の色は一切使わない
• ピル型ボタン（radius 18px+）にしない — 最大 2px。UNDERCOVER に丸みは不要
• テキストを大きくしすぎない — H2 の 36px が最大。本文を 14px 以上にしない
• 影やグラデーションをつけない — フラットかつ硬質
• アイコンやイラストを入れない — テキストと写真のみ
• letter-spacing を広げない — 0.04em 等の字送りは使わない
• line-height を広げすぎない — 見出しは 1.03 と極端にタイト
• テキスト色に #333333 や #666666 等のグレーを使わない — 純黒 #000000 か、最も濃い #222222 のみ
• palt を外さない — グローバル適用がブランドの設計意図

8. Responsive Behavior

• デスクトップ: フルワイド画像 + 黒ナビゲーション。テキストは極小のまま
• モバイル: 画像は 1 列フルワイド。ハンバーガーメニューからフルスクリーン黒メニュー展開
• フォントサイズ: モバイルでも拡大しない。10px ベースを維持
• ボタン: 幅 100% に拡張されるが、スタイル（黒ベタ + 0px radius）は変わらない
• タッチターゲット: ボタン padding で確保（17px 上下等）。サイズ自体は小さいが、タップ領域は確保

9. Agent Prompt Guide

UNDERCOVER らしい UI を生成するときは以下を伝えるとよい：

- 本文 font-family: HelveticaNeueLTPro-Md, "FP-ヒラギノ角ゴ ProN W4", sans-serif
- 見出し font-family: HelveticaNeueLTPro-Bd, "FP-ヒラギノ角ゴ ProN W6", sans-serif
- preview 代替: "Helvetica Neue", Helvetica, Arial, sans-serif / "Hiragino Kaku Gothic ProN"
- テキストカラー: #000000（純黒が支配色）
- セカンダリ: #222222（一部の見出し・リンク）
- 背景: #ffffff（純白のみ）
- アクセント色: なし（完全モノクローム）
- 文字サイズ: 本文 10px ベース、見出し最大 36px
- font-weight: 400（Medium 本文）/ 600（Bold 見出し・CTA）
- line-height: 見出し 1.03（極タイト）、本文 normal（≈ 1.2）
- letter-spacing: -0.01px（≈ 0、字間調整なし）
- font-feature-settings: "palt"（body でグローバル適用）
- CTA: bg #000000 + color #ffffff + border-radius 0〜2px
- 影なし・罫線最小限・装飾ゼロ
- フルワイド画像主導のレイアウト