Onitsuka Tiger（オニツカタイガー） DESIGN.md

Onitsuka Tiger（https://www.onitsukatiger.com/jp/ja-jp/）のデザイン仕様書。 ASICS のヘリテージファッションブランド。ラグジュアリーストリートウェアとハイファッションスニーカーで知られる。 実サイトの computed style 実測（2026-05-21 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ハイファッション × ヘリテージの二面性を、モノクロームの余白とヨーロピアンジオメトリックサンス (matter) で表現する。プロダクトが主役のエディトリアルレイアウト
• 密度: 余白を大きくとり、情報密度を極めて低く保つ。ラグジュアリーブランドのルックブック的な疎の美学
• キーワード: ラグジュアリー・ストリートウェア、モノクローム、エディトリアル、ヨーロピアンタイプフェイス、プロダクトセンター
• 特徴:
  • 欧文フォントに matter（Displaay 製のジオメトリックサンス） を採用。ファッションブランド特有の「欧文が先」のフォントスタック。日本語は Noto Sans JP にフォールバック
  • ディスプレイ・エディトリアル用に Reckless（Displaay 製のコントラストセリフ） を持つ。ルックブック風の見出しや商品名に使用
  • ブランドカラーは #212322（暗い緑みの黒）。純黒ではなく、わずかに緑を含む。CTA ボタン・テキスト・アイコンのすべてにこの色を使用
  • CTA は ピル形状（radius 50〜60px） が基本。ラグジュアリーブランドらしい柔らかさ
  • アクセントカラーは #be0026（セール・限定のレッド） と #ecc7cd（ソフトピンク、CSS変数 --gle_color_accent）
  • サーフェスに #f5f5f5 のライトグレーを使い、白との微妙な階層で奥行きを作る
  • 装飾を極限まで排除したミニマルデザイン。影・グラデーション・ボーダーは最小限
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

• Brand Dark (#212322): ブランドのプライマリカラー。CTA 背景、テキスト、アイコンすべてに使用。純黒ではなく、わずかに緑を含む暗色（rgb(33, 35, 34)）
• Accent Pink (#ecc7cd): CSS変数 --gle_color_accent。ブランドのソフトアクセント。コレクション特集やホバー演出で使用
• Sale Red (#be0026): セール・限定商品・価格強調に使用（rgb(190, 0, 38)）

CTA / Buttons

• Primary CTA: 背景 #212322 / 文字 #ffffff / radius 60px（pill）/ padding 18px 17px
• Secondary CTA: 背景 transparent / 文字 #212322 / border 1px solid #212322 / radius 50px（pill）
• Newsletter CTA: 背景 #212322 / 文字 #ffffff / radius 0px（角型）/ padding 10px 20px — フッターのニュースレター登録のみ角型
• CSS変数: --colorBtnPrimary: #000000（CSS定義上は純黒だが、実レンダリングは #212322）

Neutral

Semantic（推奨値）

• Danger / Sale: #be0026（実測。セール価格・限定表示に使用）
• Success: #2d8a4e 程度の落ち着いたグリーン（推奨）
• Warning: #c67a00 程度のゴールドオレンジ（推奨）

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP をフォールバックに使用。matter の日本語グリフがない部分を補完
• 明朝体: 使用しない（サイト全体でゴシック / サンセリフ統一）

3.2 欧文フォント

• サンセリフ（メイン）: matter（Displaay 製ジオメトリックサンス）。ブランドの中核書体。ナビ・本文・ボタンラベルすべてに使用
• セリフ（ディスプレイ）: Reckless（Displaay 製コントラストセリフ）。エディトリアル・ルックブック風の商品名・コレクション見出しに使用
• フォールバック: "Helvetica Neue", Helvetica, Arial, sans-serif

3.3 font-family 指定

css/* メイン（body, nav, button, p, span 等） */
font-family: matter, Reckless, "Noto Sans JP", sans-serif,
  "Helvetica Neue", Helvetica, Arial, sans-serif;

/* CSS変数定義（本文） */
--gle_font_family--p: 'matter', sans-serif;

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

• 欧文優先: matter（欧文ジオメトリックサンス）を最優先。ファッションブランドとして欧文の表示品質を最重視
• Reckless はセリフ体だが font-family チェーンに含まれている（CSS 上の指定であり、実際の使い分けはクラスや要素ごとに切り替え）
• Noto Sans JP が日本語の受け皿。matter に日本語グリフがないため、和文は実質 Noto Sans JP で描画される
• 最終フォールバックに Helvetica Neue → Helvetica → Arial → sans-serif

代替フォント注記: matter は Displaay のライセンスフォントのため、プレビューや社外資料では表示できない場合がある。代替として Inter（ジオメトリックサンス）が字面のクリーンさで近い。Reckless の代替は Playfair Display がコントラストセリフとして近い印象になる（いずれも Google Fonts で利用可）。

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

実測値（トップ / 商品一覧 / 商品詳細ページ、2026-05-21 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (14px): 1.43（20px / 14px）— ファッション EC として標準的
• 本文・商品説明 (14px): 1.79（25px / 14px）— 商品説明はやや広め
• Display (40px): 1.2（48px / 40px）— 大きな見出しはタイト
• H1 (24px): 1.0（24px / 24px）— ページタイトルは密着
• H2 (16px): 1.1（17.6px / 16px）— セクション見出しもタイト

字間 (letter-spacing) — 実測:

• 本文 (14px): 0.03em（0.42px / 14px）— わずかに広げてクリーンさを保つ
• 商品説明 (14px): 0.05em（0.7px / 14px）— やや広め
• ブランドラベル (14px): 0.1em（1.4px / 14px）— ラグジュアリーブランドの定石。広い字間で高級感を演出
• Display (40px): 0.03em（1.2px / 40px）
• H1 (24px): 0.03em（0.72px / 24px）
• H2 (16px): 0.026em（0.42px / 16px）

ガイドライン:

• Onitsuka Tiger はすべてのテキスト階層で正の letter-spacing を使用する。見出しの負トラッキングは使わない
• ブランドラベル（商品名横のブランド名等）は 0.1em と大きめの letter-spacing で格調を演出。ラグジュアリーファッション特有の手法
• 日本語本文（Noto Sans JP 描画）は line-height 1.43〜1.79 で、一般的な日本語 Web（1.7〜2.0）よりやや詰め気味。ファッション EC のビジュアル重視な組版
• weight は 400（通常）/ 500（説明文）/ 600（H1）/ 700（H2・ラベル）の4段

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

• 商品名は <br> で手動改行の箇所あり
• ナビ・ボタンラベルは white-space: nowrap

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• matter のデフォルトメトリクスに任せる方針
• 日本語テキスト（Noto Sans JP）にも palt は適用しない

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（ダークピル） — "もっと見る"・"カートに入れる"

• Background: #212322
• Text: #ffffff
• Padding: 18px 17px
• Border Radius: 60px（ピル）
• Font: matter, 14px, weight 500
• Border: none
• Hover: 背景の明度を上げる（#3a3c3b 程度）

Secondary CTA（アウトラインピル） — "会員登録"

• Background: transparent
• Text: #212322
• Border: 1px solid #212322
• Padding: 18px 17px
• Border Radius: 50px（ピル）
• Font: matter, 14px, weight 500

Login CTA — "ログイン"

• Background: #212322
• Text: #ffffff
• Padding: 18px 17px
• Border Radius: 50px（ピル）
• Font: matter, 14px, weight 500

Newsletter CTA — "登録する"

• Background: #212322
• Text: #ffffff
• Padding: 10px 20px
• Border Radius: 0px（角型 — フッター専用の例外）
• Font: matter, 14px, weight 500

Nav Tab — カテゴリ切り替え

• Background: transparent
• Text: #212322
• Border: 1px solid #babec2
• Padding: 13px 10px
• Border Radius: 0px
• Font: matter, 14px, weight 400

Inputs

• Background: #ffffff
• Border: 1px solid #e7e8ea
• Border (focus): 1px solid #212322
• Border Radius: 0px（角型 — ラグジュアリーブランド特有のシャープさ）
• Padding: 12px 16px
• Font: matter / Noto Sans JP, 14px, weight 400
• Height: 44px

Cards（商品カード）

• Background: #ffffff
• Border: none（ボーダーレス）
• Border Radius: 0px（角型）
• Shadow: none（完全フラット）
• 商品画像 + テキスト情報の縦積み構成
• 画像部分は背景 #f5f5f5 のライトグレー

Header

• Background: #ffffff（白、スクロール時も白を維持）
• Border Bottom: 1px solid #e7e8ea
• Position: fixed top: 0
• z-index: 高め（ナビゲーションの上に重なる）
• ロゴは中央配置

Footer

• Background: #212322（ダーク）
• Text: #ffffff
• Padding: 48px 24px
• ニュースレター登録フォームを含む

5. Layout Principles

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

Container

• Max Width: 1440px（ファッションブランドとして広めのビューポートを活用）
• Padding (horizontal): mobile 16px / desktop 24〜48px

Grid

• 商品一覧: 4カラム（デスクトップ）/ 2カラム（モバイル）
• Gutter: 16〜24px
• ルックブック: 1〜2カラムの大判レイアウト

Border Radius Scale

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 立体感は #f5f5f5 のライトグレーサーフェスと白背景のコントラストで表現
• ラグジュアリーブランドとしてフラットデザインを徹底。影に頼らない階層表現
• 影を使う場合も rgba(0, 0, 0, 0.06〜0.12) の極めて控えめな値にとどめる

7. Do's and Don'ts

Do（推奨）

• 欧文フォントは matter を最優先。日本語は Noto Sans JP にフォールバック
• エディトリアル・コレクション見出しには Reckless（コントラストセリフ） を使い、matter との対比で緊張感を出す
• テキストカラーは #212322（緑みの黒） を使う。純黒 #000000 ではない
• CTA は ピル形状（radius 50〜60px） を基本にする
• 商品カードは ボーダーレス・シャドウレス のフラット構成にする
• 商品画像の背景は #f5f5f5 のライトグレーで統一する
• ブランドラベルの letter-spacing は 0.1em で格調を演出する
• 余白を大きくとり、情報密度を低く保つ（ラグジュアリーブランドの疎の美学）
• フッターはダーク（#212322）にし、ヘッダー・本文エリアの白との対比を作る

Don't（禁止）

• テキストに純黒 #000000 を使わない — ブランドダークは #212322（緑みの暗色）
• CTA に角型（radius 0） を使わない — ニュースレターフッターのみ例外
• カラフルなアクセントを多用しない — モノクロームが基本。色を使うのはセール #be0026 とアクセントピンク #ecc7cd のみ
• 商品カードに影やボーダーをつけない — 完全フラットが Onitsuka Tiger のスタイル
• 日本語本文に line-height 1.3 以下 を使わない（最低 1.43）
• 装飾的なグラデーション・パターン背景を使わない — 白とライトグレーの最小限の面で構成する
• matter の代わりにゴシック体（游ゴシック・ヒラギノ角ゴ等）を直接使わない — 和文と欧文の書体バランスが崩れる。matter 不在時は Inter + Noto Sans JP を組み合わせる
• ブランドラベルの letter-spacing を 0.03em 以下 にしない — 0.1em の広い字間がラグジュアリー感の鍵

8. Responsive Behavior

Breakpoints

モバイル時の調整

• Display (40px) → 24〜28px
• H1 (24px) → 18〜20px
• 本文サイズは 14px を維持
• ナビはハンバーガーメニュー化、展開時にフルスクリーンドロワー
• 商品グリッド: 4カラム → 2カラム
• ヒーロービジュアル: フルブリード（左右余白なし）

タッチターゲット

• CTA ボタン: 高さ 44px 以上（padding 18px + font 14px で十分な高さ）
• ナビリンク: 44px のタップ領域を確保
• 商品カード: カード全体がタップ可能領域

ダークモード

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

9. Agent Prompt Guide

クイックリファレンス

Brand Dark (Text/CTA): #212322
White (BG): #ffffff
Surface (Light Gray): #f5f5f5
Border: #e7e8ea
Sale Red: #be0026
Accent Pink: #ecc7cd
Gray Text: #626262

Font (Main): matter, Reckless, "Noto Sans JP", sans-serif,
  "Helvetica Neue", Helvetica, Arial, sans-serif
Font CSS var: --gle_font_family--p: 'matter', sans-serif
（matter 不在時の代替: Inter + Noto Sans JP / Reckless 代替: Playfair Display）

Body: 14px / weight 400 / line-height 1.43 / letter-spacing 0.03em
Description: 14px / weight 500 / line-height 1.79 / letter-spacing 0.05em
Brand Label: 14px / weight 700 / letter-spacing 0.1em
Display: 40px / weight 400 / line-height 1.2 / letter-spacing 0.03em
H1: 24px / weight 600 / line-height 1.0 / letter-spacing 0.03em
H2: 16px / weight 700 / line-height 1.1 / letter-spacing 0.026em

CTA Primary: bg #212322 / text white / radius 60px (pill)
CTA Secondary: bg transparent / text #212322 / border 1px solid #212322 / radius 50px (pill)
Card: border none / shadow none / radius 0 (flat)
Input: border 1px solid #e7e8ea / radius 0

プロンプト例

Onitsuka Tiger のデザインに従って、スニーカーの商品一覧ページを作成してください。
- フォント: matter, Reckless, "Noto Sans JP", sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif
- 商品名（Display）: 40px / weight 400 / line-height 1.2 / letter-spacing 0.03em / color #212322
- セクション見出し: 16px / weight 700 / line-height 1.1 / letter-spacing 0.026em / color #212322
- 本文: 14px / weight 400 / line-height 1.43 / letter-spacing 0.03em / color #212322
- ブランドラベル: 14px / weight 700 / letter-spacing 0.1em / color #212322 — 広い字間でラグジュアリー感を出す
- 商品説明: 14px / weight 500 / line-height 1.79 / letter-spacing 0.05em
- Primary CTA: 背景 #212322 / 白文字 / border-radius 60px（ピル）/ padding 18px 17px
- Secondary CTA: 背景 transparent / 文字 #212322 / border 1px solid #212322 / radius 50px（ピル）
- 商品カード: ボーダーなし、シャドウなし、角型（radius 0）。画像背景は #f5f5f5
- ページ背景: #ffffff、セクション面: #f5f5f5
- セール価格: #be0026（赤）
- テキストは純黒 #000000 ではなく、必ず #212322（緑みの暗色）を使う
- 4カラムグリッド、余白を大きくとり情報密度を低く保つ
- 装飾を排除し、プロダクトが主役のエディトリアルレイアウトにする