JINS（ジンズ） DESIGN.md

JINS（https://www.jins.com/jp/）のデザイン仕様書。 「Magnify Life. メガネをかけるすべての人の人生を拡張する」アイウェア D2C。 実サイトの computed style 実測（2026-05-06 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: Tazugane Gothic（Morisawa） で日本語のラテンライク な現代ゴシックを基調に、自社設計の "JINS Next" を英語見出しに当てる二本立て。CSS 変数で完全にトークン化された D2C プラットフォーム
• 密度: 本文 16.5px / line-height 1.66 / letter-spacing 0.01em。読みやすさと商品グリッドの密度を両立。--text-letter-spacing: 0.01em を変数で固定
• キーワード: Tazugane Gothic、JINS Next、ブランドレッド #ca2029、CSS 変数完備、商品 EC、ニュートラル多階調グレー
• 特徴:
  • CSS Custom Properties が完備（実測 31 個）。--main-color-red: #da0024、--text-body-l-jp: 16.5px、--text-letter-spacing: 0.01em などフルトークン化
  • 和文に Tazugane Gothic StdN（Morisawa） を採用。Noto Sans JP より字面が引き締まり、JINS の機能寄りな印象に合う
  • 欧文・英見出しに自社書体 "JINS Next"（"Products" "MEN" "WOMEN" 等のラベル）。weight 500 のミディアム
  • ブランドカラーは #ca2029（鮮紅）/ CSS 変数では #da0024。CTA・通知・閉じるボタンの主要アクション色
  • アクセントネイビー #27455c が出現（フィルタアイコン・サブ要素）
  • リンク色は #eb667c（コーラルピンク） — レッドからやわらかく派生
  • Border Radius は階層的に 2px / 10px / 17px / 50px。商品カードは 10px、フィルタピルは 50px、CTA は 2px
  • グレースケールは gray3 → gray5 → gray10 → gray25 → gray50 → gray60 → gray90 の 7 段階

2. Color Palette & Roles

実サイトの computed style 実測値・CSS 変数に基づく。すべて hex 表記。

Brand

• Brand Red (Tokenized) (#da0024): CSS 変数 --main-color-red。Cookie 通知・CTA の本来色
• Brand Red (Computed) (#ca2029): 実測時点でボタン背景に表示される値（彩度わずかに低めのレンダリング差）
• Link Pink (#eb667c): CSS 変数 --link-color。テキストリンクのコーラルピンク

Accent

• Accent Navy (#27455c): セカンダリアクセント（フィルタアイコン背景等）。出現頻度は中程度
• Accent Olive (#468254): タグ・状態表示用の落ち着いた緑

CTA / Buttons

• Primary CTA: 背景 #ca2029 / 文字 #ffffff / radius 2px / padding 12px 30px / 12〜14.4px / weight 700
• Secondary CTA（"もっとみる" ピル）: 背景 #f2f2f2 / 文字 #000000 / border 1px solid #f2f2f2 / radius 10px / 12.2px / weight 400 / Tazugane Gothic
• Filter Pill (Outlined): 背景 #ffffff / 文字 #000000 / border 1px solid #707070 / radius 50px / padding 6px 35px 6px 15px / 12.8px

Neutral — JINS Token Scale

JINS の CSS 変数で定義された 7 段階グレースケール:

Sub Brand（CSS 変数）

• --main-sub-blue5: #f7f8fd（極淡ブルー面）
• --main-sub-blue: #abb9ed（補助ブルー）
• --main-sub-red3: #fff5f6（極淡レッド面）

Cookie / Modal Overlay

• Cookie Banner BG: rgba(62, 58, 57, 0.8)（暖色寄りの黒オーバーレイ）

Semantic

• Danger / Primary Action: #da0024（ブランドレッド = Danger 兼用）
• Success（推奨）: #468254
• Warning（推奨）: #d97a00

3. Typography Rules

3.1 和文フォント

• ゴシック体（主要）: TazuganeGothicStdN（Morisawa） を最優先
• フォールバックは sans-serif（システムの和文ゴシック）
• 明朝体は使用しない（全体ゴシック統一）

3.2 欧文フォント

• 見出し・英ラベル: jins_next（JINS Next／自社書体） → "JINS Next"（CSS 変数経由）→ "Noto Sans Japanese" → sans-serif
• 本文・UI: TazuganeGothicStdN の欧文グリフを使用（独立した欧文書体は組まない）
• "MEN" "WOMEN" "Products" など navigation ラベルは JINS Next で組まれる

3.3 font-family 指定

実サイトの実測値:

css/* 本文・UI（Tazugane） */
font-family: TazuganeGothicStdN, sans-serif;

/* 英見出し・ナビラベル（JINS Next） */
font-family: jins_next, "JINS Next", "Noto Sans Japanese", sans-serif;

/* CSS 変数の文字サイズ・字間 */
:root {
  --text-body-l-jp: 16.5px;
  --text-body-m-jp: 14.4px;
  --text-body-s-jp: 12.2px;
  --text-caption-jp: 11px;
  --text-body-l-en: 17px;
  --text-body-m-en: 15px;
  --text-body-s-en: 13px;
  --text-caption-en: 11px;
  --text-letter-spacing: 0.01em;
  --text-letter-spacing-en: 0.02em;
}

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

• シンプルな2層構造: ブランド書体 → sans-serif の最小チェーン
• TazuganeGothicStdN は Morisawa Web フォント。未契約環境では即座にシステム sans-serif にフォールバックする想定
• JINS Next は自社配信のため、フォールバックに Noto Sans Japanese を挟む（"日本語のサンセリフ" として近い字面）

代替フォント注記:

• Tazugane Gothic StdN は Morisawa Web Service / Adobe Fonts のフォント。プレビューでの再現には Noto Sans JP（同じく日本語の現代ゴシック）が近い印象
• JINS Next は自社書体のため代替は難しい。Web プレビューでは Inter（欧文の現代サンセリフ）+ Noto Sans JP の組合せで近似する

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

実測値（トップページ、2026-05-06 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (16.5px / 12.2px): 1.66（CSS で 27.39px / 16.5px = 1.66）
• 見出し (31px Hero): 1.45
• EN ナビ (17px JINS Next): 1.3
• JP ナビ (17px Tazugane): 1.55

字間 (letter-spacing) — CSS 変数で固定:

• JP 全般: --text-letter-spacing: 0.01em（極めて控えめ）
• EN 見出し・ナビ: --text-letter-spacing-en: 0.02em（やや広め）
• 例外: Cookie バナー等の OneTrust 系は normal（ベンダー UI）

ガイドライン:

• 日本語本文は line-height 1.66 + letter-spacing 0.01em が JINS の基本リズム
• 英語ナビは letter-spacing 0.02em で和文より広く取る（JINS Next の表情を生かす）
• Tazugane Gothic は字面が広いため、過度な letter-spacing は不要
• 商品カードタイトルは 12.2px / 1.66 でコンパクトに、Caption は 11px

3.6 禁則処理・改行ルール

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

• 商品名（"JINS Combination Titanium ［中顔面短縮メガネ］" など）は折り返さない white-space: nowrap でカード幅に合わせる場合あり

3.7 OpenType 機能

cssfont-feature-settings: "liga" 0;

• 実測ですべての要素に "liga" 0（リガチャ無効） が掛かっている
• これは 欧文の合字を抑止 して、商品コードや SKU 系の英数字が崩れないようにする実装的な配慮
• palt kern の明示有効化は確認できず — Tazugane / JINS Next のメトリクスに任せる

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（ブランドレッド） — "Apply" "全てのクッキーを受け入れる"

• Background: #ca2029（実測。CSS 変数では #da0024）
• Text: #ffffff
• Border: 1px solid #ca2029
• Padding: 12px 30px
• Border Radius: 2px
• Font: Tazugane, 12〜14.4px, weight 700
• Letter Spacing: 0.01em

Secondary Pill（"もっとみる"）

• Background: #f2f2f2（gray5）
• Text: #000000
• Border: 1px solid #f2f2f2
• Padding: 商品カード相当（縦横中央寄せ）
• Border Radius: 10px
• Font: Tazugane, 12.2px, weight 400

Filter Pill (Outlined)

• Background: #ffffff
• Text: #000000
• Border: 1px solid #707070
• Padding: 6px 35px 6px 15px（右にアイコン余白）
• Border Radius: 50px
• Font: Tazugane, 12.8px, weight 400

Tertiary / Cancel — "Clear"

• Background: transparent
• Text: #696969（gray60 系）
• Border: 1px solid transparent
• Padding: 1px
• Border Radius: 2px
• Font: Tazugane, 14.4px, weight 700

Link Button — "クッキー詳細"

• Background: transparent
• Text: #3860be（OneTrust デフォルト青、JINS の主要 UI ではなくサードパーティ寄り）
• Font: Tazugane, 13px, weight 400

Inputs

Search Pill Input（モバイル系）

• Background: #ffffff
• Border: 1px solid #707070
• Border Radius: 50px（pill）
• Padding: 6px 35px 6px 15px
• Font: Tazugane, 12.8px

Standard Input（推奨）

• Background: #ffffff
• Border: 1px solid #e6e6e6
• Border (focus): 1px solid #000000
• Border Radius: 2px
• Padding: 12px 16px
• Font: Tazugane, 14.4〜16px

Product Card

• Background: #fafafa（最頻出のカード面）
• Border: なし
• Border Radius: 10px
• Padding: 内容に応じて 16〜24px
• Title: 12.2px Tazugane weight 400
• Caption: 12.2px Tazugane weight 400 color #808080
• Favorite Icon Container: white circle radius 50% border 1px #e6e6e6

Cards / Surfaces

• Surface 階層: #ffffff → #fafafa（カード）→ #f8f8f8 → #f4f4f4 → #f2f2f2（フッター）→ #e6e6e6（境界）
• Border: なしが基本、必要に応じて #e6e6e6
• Border Radius: 2px（小）/ 10px（カード）/ 50px（ピル）

Header / Nav

• Background: #ffffff
• Height: --header-height: 70px
• Border Bottom: なし、または 1px solid #e6e6e6
• Padding: 0 var(--side-spacing) (= 0 48px)
• z-index: 高め

Footer

• Background: #f2f2f2（gray5）
• Padding: 60px 0 20px（実測）
• Color: #000000 主体、英ラベルは JINS Next

Cookie Banner

• Background: rgba(62, 58, 57, 0.8)
• Color: #ffffff
• Padding: 上下 24〜32px
• Buttons: Primary Red #ca2029 / Close icon #555555

5. Layout Principles

Spacing Scale（推奨 8px ＋ JINS 変数）

Container

• Max Width: 1440px 程度
• Padding (horizontal): --side-spacing: 48px（PC）/ mobile では 16〜24px
• Header Height: --header-height: 70px

Border Radius Scale

Grid

• 商品グリッドは 3〜4 カラム（PC）/ 2 カラム（mobile）
• Gutter: 16〜24px
• Swiper（CSS 変数 --swiper-theme-color: #007aff を使用）でカルーセル

Transition

• --transition: 0.3s を変数で固定
• Hover の opacity: --link-hover-opacity: 0.7
• Hover の brightness: --link-hover-brightness: brightness(0.97)

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 立体感は 8 段階のグレースケールサーフェス で表現
• カードのホバー時は brightness(0.97) で軽くトーンを落とす（実測変数）

7. Do's and Don'ts

Do（推奨）

• 和文は TazuganeGothicStdN、英ラベル・ナビは JINS Next で書体を分ける
• 本文の line-height は 1.66、letter-spacing は 0.01em（JP） / 0.02em（EN） を CSS 変数で固定する
• ブランドカラーは #da0024（CSS 変数）/ #ca2029（描画） の鮮紅。リンクは #eb667c のコーラル
• グレースケールは gray3 → gray5 → gray10 → gray25 → gray50 → gray60 → gray90 の 7 段階トークンを使う
• 商品カードは #fafafa 背景 + border-radius: 10px が基本
• フィルタ・検索は border-radius: 50px のピル
• CTA ボタンは border-radius: 2px の角丸控えめ
• font-feature-settings: "liga" 0 を継承させる（合字を抑止して英数字を安定させる）

Don't（禁止）

• 商品 CTA に 完全ピル（border-radius: 9999px）を使わない — JINS の CTA は 2px
• 和文に Noto Sans JP / Hiragino を主要指定にしない — Tazugane を最優先
• 英ラベルに Helvetica / Inter 等を使わない — JINS Next のブランド書体を使う
• ブランドレッドを 彩度の低いマルーンや暗赤に変えない — #da0024 の鮮紅が JINS の押し
• グレーを CSS 変数の階層から外して任意の値を使わない（gray3 → gray90 の 7 段階で揃える）
• 本文の letter-spacing を 0.04em 以上に広げない — JINS は 0.01em で締める設計
• ヘッダー高さを --header-height: 70px から外さない

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• ヒーロー: 31px → 24〜26px
• 英見出し JINS Next: 21px → 18px
• 本文サイズは 16.5px を維持
• --side-spacing を 16〜24px に縮小
• 商品グリッドは 4 カラム → 2 カラム

タッチターゲット

• 主要 CTA: padding 12px 30px で約 41px の高さ（最小 44px に近づけるのが望ましい）
• フィルタピル: padding 6px 35px 6px 15px でコンパクト
• お気に入りアイコン: 円形 24〜28px（タップ最小化）

ダークモード

• --main-color-rv: #fff の変数があり反転色を意識した設計
• 完全なダークモードは未実装（実測時点）

9. Agent Prompt Guide

クイックリファレンス

Brand Red (Token): #da0024
Brand Red (Computed): #ca2029
Link Pink: #eb667c
Accent Navy: #27455c

Gray Scale (CSS 変数):
  --main-color-gray3:  #f8f8f8
  --main-color-gray5:  #f2f2f2
  --main-color-gray10: #e6e6e6
  --main-color-gray25: #bfbfbf
  --main-color-gray50: #808080
  --main-color-gray60: #5e5e5e
  --main-color-gray90: #1b1b1b

Surface (Card): #fafafa
Black: #000000
White: #ffffff

JP Font: TazuganeGothicStdN, sans-serif
EN/Heading Font: jins_next, "JINS Next", "Noto Sans Japanese", sans-serif

Sizes:
  --text-body-l-jp: 16.5px / line-height 1.66 / letter-spacing 0.01em
  --text-body-m-jp: 14.4px
  --text-body-s-jp: 12.2px / line-height 1.66
  --text-caption-jp: 11px
  --text-body-l-en: 17px / weight 500 / letter-spacing 0.02em (JINS Next)
  --text-body-m-en: 15px
  --text-body-s-en: 13px

Hero H2: 31px / weight 700 / line-height 1.45 / Tazugane
H4 EN: 21px / weight 500 / line-height 1.3 / letter-spacing 0.02em / JINS Next

Border Radius: 2px（CTA）／10px（カード・もっとみる）／50px（ピル）／50%（円）
Side Spacing: 48px (--side-spacing)
Header Height: 70px (--header-height)
Transition: 0.3s
font-feature-settings: "liga" 0

プロンプト例

JINS のデザインに従って、商品グリッドセクションを作成してください。
- 和文フォント: TazuganeGothicStdN, sans-serif
- 英見出しフォント: jins_next, "JINS Next", "Noto Sans Japanese", sans-serif
- セクション英タイトル: JINS Next 21px / weight 500 / line-height 1.3 / letter-spacing 0.02em
- セクション和タイトル: Tazugane 16.5px / weight 400 / letter-spacing 0.01em
- 商品カードタイトル: Tazugane 12.2px / weight 400 / line-height 1.66 / color #000000
- 商品カードキャプション: Tazugane 12.2px / color #808080（gray50）
- 本文: 16.5px / weight 400 / line-height 1.66 / letter-spacing 0.01em
- 主要 CTA: 背景 #ca2029（ブランドレッド）/ 白文字 / radius 2px / padding 12px 30px / Tazugane 12〜14.4px / weight 700
- セカンダリ "もっとみる": 背景 #f2f2f2 / 黒文字 / radius 10px / Tazugane 12.2px / weight 400
- フィルタピル: 白背景 / 黒文字 / border 1px solid #707070 / radius 50px / padding 6px 35px 6px 15px
- 商品カード: 背景 #fafafa / radius 10px / border なし
- リンク色: #eb667c
- font-feature-settings: "liga" 0 をルートに適用
- グレーは gray3〜gray90 の 7 段階トークンから選ぶ（任意の灰色を使わない）
- ボタンに pill (radius 9999px) を使わない（CTA は 2px、もっとみるは 10px）
- 和文に Noto Sans JP を主要指定しない（Tazugane を最優先）