ISSEY MIYAKE（イッセイ ミヤケ） DESIGN.md

ISSEY MIYAKE（https://www.isseymiyake.com/ja）公式サイトのデザイン仕様書。 三宅一生が立ち上げた、世界的に評価される日本発のファッションブランド。「PLEATS PLEASE」「BAO BAO」「A-POC ABLE」等、複数のサブブランドを展開。 実サイトの computed style 実測（2026-05-07 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白 #ffffff の余白を最大化し、HelveticaLTPro（カスタム欧文）と ヒラギノ角ゴ W4 JIS2004 の混植で組む、美術館カタログ的な編集デザイン。色面はほぼ存在せず、写真・余白・タイポグラフィの三要素だけで構築する
• 密度: ヒーローはほぼ全画面写真、テキストは最小限。情報密度は低く、「呼吸する余白」と「素材の写真」が主役。コンテンツページに入ると本文は 14px / line-height 1.5 のタイトな編集組
• キーワード: 純白基調、HelveticaLTPro、ヒラギノ角ゴ W4、JIS2004、letter-spacing normal、角丸ゼロ、フラット黒バー CTA、palt なし、編集デザイン
• 特徴:
  • font-family は HelveticaLTPro, HelveticaNeueLTPro, "Hiragino Kaku Gothic W4 JIS2004", sans-serif — Apple や三菱地所と同じく Hiragino W4（W3 より若干太い）を採用。さらに JIS2004 字形を明示する徹底ぶり
  • CSS Custom Properties は Shopify 系拡張（swym-, swiper-）のみでブランド独自トークンは未定義 — Shopify Plus 構築の典型
  • 全要素角丸 0px。CTA も入力欄もすべて直角の矩形バー
  • CTA は黒帯（#333333 または #000000）に白文字 または #ff4500（My Wishlist のオレンジ） の 2 系統のみ
  • letter-spacing は全要素 normal。詰めも開きもしない素朴な組
  • 本文・見出し・キャプションすべて font-weight 400（regular）が基本。強調にだけ 700 を使う
  • line-height は 1.2〜1.5 の編集組系（雑誌・カタログに近い）。日本語標準の 1.7〜2.0 とは異なる 欧文寄りのタイト組
  • 補助色（情報バッジ）は #464d59（slate） や #eceeef（pale gray） で控えめに
  • ダークモード非対応。常時ライト

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。 ISSEY MIYAKE の UI は装飾色を持たず、無彩色 + 一点のオレンジだけで構築されている。

Brand

• Wishlist Orange (#ff4500): 「My Wishlist」CTA に使われる唯一のアクセント色。EC 機能のため
• 実質的なブランドカラーは 黒・グレー・白。色は服と写真の中だけに存在

Surface

• Page Background (#ffffff): ページ全体の純白
• Section Alt (#eceeef): 検索バー・補助セクション背景（rgb(236, 238, 239)、4 回出現）
• Notice Bar (#464d59): 「【重要なお知らせ】REALITY LAB...」等のお知らせバー背景（slate gray）

Text

• Text Primary (#333333): 本文・見出し・ナビ・リンクのデフォルトテキスト色（rgb(51, 51, 51)）
• Text Date (#222222): 日付テキスト（rgb(34, 34, 34)、少し濃い）
• Text Muted (#767676): 補足・カテゴリラベル（rgb(118, 118, 118)）
• Text on Dark (#ffffff): 黒帯バー・CTA 内テキスト

CTA / Action

• Black Bar (#333333): 「すべて同意」「拒否」「コンテンツに進む」等の CTA 背景
• Black Bar Text (#ffffff): 上記 CTA 内テキスト
• Wishlist BG (#ff4500): EC ウィッシュリスト CTA

Semantic（補完）

• 実 UI に表面化したエラー・成功色は確認できない。アラート色を追加する場合は 赤（#c4292d 推奨）／ 緑（#2e9e7b）／ 黄（#c89a3c） をミュートに

3. Typography Rules

3.1 和文フォント

• メイン（ゴシック W4）: Hiragino Kaku Gothic W4 JIS2004（ヒラギノ角ゴ W4 JIS2004） — 通常の ProN（W3）より若干太い W4 を採用。Apple 系列と同じ選択だが JIS2004 字形を明示指定する
• フォールバック: システム sans-serif

JIS2004 字形指定は、漢字の細かな字形差（鴎 vs 鷗、葛 vs 葛 等）を意識した書体指定。文化財・美術系に多い徹底度。

3.2 欧文フォント

• メイン: HelveticaLTPro（カスタムライセンス / Linotype Helvetica） — Helvetica の最新リリース系
• 第2候補: HelveticaNeueLTPro — Helvetica Neue の Linotype 版
• フォールバック: システム sans-serif

3.3 font-family 指定

実サイトの実測値（全要素で同一の font-family）:

cssfont-family: HelveticaLTPro, HelveticaNeueLTPro,
  "Hiragino Kaku Gothic W4 JIS2004",
  sans-serif;

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

• 欧文 HelveticaLTPro を先頭 — ASCII 文字を Helvetica で組む
• 和文は ヒラギノ角ゴ W4 JIS2004（W3 より太い、字形指定あり）
• AI で再現する場合、HelveticaLTPro は商用ライセンスのため "Helvetica Neue" / Helvetica / "Hiragino Kaku Gothic ProN" / sans-serif に簡略化（W4 → W3 の代替）

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

実測値（トップページ・お知らせページ、2026-05-07 取得）

3.5 行間・字間

• 本文の行間: 1.5（21 / 14, 36 / 24, 27 / 18）— 欧文寄りのタイト組
• 見出し（h2）の行間: 1.2（24 / 20）— 編集デザイン特有のタイトな組
• 小文字の行間: 1.5 が標準。例外として通知バー（10px / lh 10px = 1.0）
• letter-spacing: 全要素 normal（0）

ガイドライン:

• ISSEY MIYAKE の和文は 1.5 倍行間が基本。2.0 のような広い行間は使わない（編集デザインの締まりを保つ）
• letter-spacing は触らない（HelveticaLTPro と Hiragino W4 のメトリクスをそのまま信頼）
• 日本語サイトとして 1.5 倍はやや欧文寄り — ファッション・カタログ業界の組版言語

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;

• ブラウザ既定の禁則処理に依存
• 商品名（A-POC ABLE / PLEATS PLEASE 等）は欧文中心のため改行は手動 <br> 制御

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt / kern を有効化していない — 詰めない素朴な組
• AI 再現時に詰めを足したい場合のみ、見出しのみ font-feature-settings: "palt" を限定的に追加

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

ISSEY MIYAKE の CTA は黒帯バーとオレンジ帯バーの 2 種のみ。

Primary CTA（"コンテンツに進む" / "すべて同意"）

• Background: #333333
• Text: #ffffff
• Padding: 10px 20px（または 8.1px 13.5px）
• Border Radius: 0px
• Font: 16px / weight 400 / letter-spacing normal
• Hover: opacity 0.85（推奨）

Secondary CTA（"詳細設定" / "拒否"）

• Background: transparent または #333333
• Text: #333333 / #ffffff
• Border: 1px solid #333333（透明背景の場合）
• Padding: 8.1px 13.5px
• Border Radius: 0px
• Font: 10.8〜12px / weight 400

Wishlist CTA（"My Wishlist"）

• Background: #ff4500
• Text: #ffffff
• Padding: 0 15px 0 36px（左にハートアイコン領域）
• Border Radius: 0px
• Font: 12px / weight 400 / line-height 30px

Tag Link（"オンラインストア"）

• Background: transparent
• Text: #333333
• Font: 10px / weight 700 / line-height 1.5
• Padding: 0（テキストそのもの）
• 上部に細い区切り線、または周囲にボーダー

Skip Link（"コンテンツに進む"）

• Background: #333333
• Text: #ffffff
• Font: 16px / weight 400 / line-height 24px
• 通常はフォーカス時のみ表示

Inputs

• Background: #ffffff または #eceeef
• Border: 1px solid #cccccc（推奨。実 UI ではほぼ非表示）
• Border (focus): 1px solid #333333
• Border Radius: 0px
• Padding: 8px 12px
• Font: 12px / weight 400 / Helvetica + Hiragino W4
• Color: #333333

Select

• Background: #ffffff
• Border: 1px solid #cccccc
• Border Radius: 0px
• Padding: 8px 12px
• Font: 14px / weight 400 / line-height 21px

Cards / Product Tiles

• Background: #ffffff
• Border: なし
• Border Radius: 0px（写真の四角を尊重）
• Padding: 写真直下にメタ領域 12〜16px
• Shadow: なし（フラット）
• 構造: 商品写真 → ブランド名（10px / weight 700 / "PLEATS PLEASE"） → 商品名（14px / weight 400） → 価格（11px / weight 400）

Notice Bar（"【重要なお知らせ】"）

• Background: #464d59（slate gray）
• Text: #ffffff
• Padding: 8px 16px
• Font: 10px / weight 400 / line-height 1.0
• 全幅に跨る薄いバー

Header / Nav

• Background: #ffffff
• Color: #333333
• Padding: 16px 24px
• Logo "ISSEY MIYAKE" 中央または左、ナビ右、言語切替・検索・ウィッシュリスト・カート右端
• Active 項目は下線または太字

Footer

• Background: #ffffff
• Color: #333333（メイン）/ #767676（補足）
• Padding: 48px 24px 24px
• Footer リンク: 12px / weight 400 / line-height 18px

5. Layout Principles

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

Container

• Max Width: 1440px（推奨）
• Padding (horizontal): mobile 16px / desktop 24〜32px

Grid

• 商品グリッド: 2 カラム（mobile）→ 3 カラム（tablet）→ 4 カラム（desktop）
• Gutter: 16〜24px

Border Radius Scale

• ISSEY MIYAKE は全要素で角丸ゼロ。ボタン・入力欄・カード・写真すべて直角

6. Depth & Elevation

• ISSEY MIYAKE は影を最小限。雑誌的なフラット表現
• カード・モーダルすべて基本フラット
• ホバー演出は opacity 0.85 / 写真ズーム scale(1.05) 等で

7. Do's and Don'ts

Do（推奨）

• font-family は HelveticaLTPro, HelveticaNeueLTPro, "Hiragino Kaku Gothic W4 JIS2004", sans-serif（Web 代替: Helvetica Neue, Helvetica, "Hiragino Kaku Gothic ProN", sans-serif）
• 本文 14px / line-height 1.5 / weight 400 を基準に
• 見出し（h2）は 20px / weight 700 / line-height 1.2 — 編集デザインのタイトな組
• letter-spacing は全要素 normal
• CTA は黒帯（#333333）に白文字、または橙帯（#ff4500）に白文字の 2 系統のみ
• 角丸はすべて 0px
• 影は最小限、基本フラット
• 補足テキストは #767676、本文は #333333、日付は #222222 を使い分ける
• 通知バーは #464d59（slate gray）に白文字 10px

Don't（禁止）

• 角丸（border-radius > 0）を使わない
• 本文 letter-spacing に palt / 0.04em 等の詰めを適用しない
• ボタンに background-color のグラデーションや影を付けない（フラット原則）
• 純黒 #000000 を本文に使わない（#333333 を基本に。日付のみ #222222）
• 大型の本文に line-height 1.7〜2.0 を適用しない（編集組のタイトさを保つため 1.5 を厳守）
• カラフルなブランド色を UI 装飾に追加しない（オレンジ #ff4500 は EC ウィッシュリスト専用）
• ヒラギノ ProN（W3）を指定しない — W4 JIS2004 を厳守

8. Responsive Behavior

Breakpoints

モバイル時の調整

• Section h2: 20px → 18px
• Lead p: 24px → 20px
• Sub Heading: 18px → 16px
• Body: 14px 維持
• ナビは drawer ハンバーガーへ切り替え
• 商品グリッド 4 → 2 → 1 カラム

タッチターゲット

• 最小 44×44px。CTA は padding 12px 24px 以上を確保
• リンクテキストは行間 24px 以上で十分なヒット領域を確保

ダークモード

• 常時ライトモード（白背景 + 黒テキスト）。ダーク切替は提供しない

9. Agent Prompt Guide

クイックリファレンス

Background: #ffffff
Text Primary: #333333
Text Date: #222222
Text Muted: #767676
Section Alt BG: #eceeef
Notice Bar BG: #464d59
CTA Black: #333333
Wishlist Orange: #ff4500

Font: HelveticaLTPro, HelveticaNeueLTPro, "Hiragino Kaku Gothic W4 JIS2004", sans-serif
Web Fallback: "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", sans-serif

Heading h2: 20px / weight 700 / line-height 1.2 / letter-spacing normal
Lead: 24px / weight 400 / line-height 1.5
Sub Heading: 18px / weight 400 / line-height 1.5
Body: 14px / weight 400 / line-height 1.5
Caption: 11px / weight 400 / line-height 1.5
Date: 11px / weight 400 / color #222
Tag Bold: 10px / weight 700 / line-height 1.5

Border Radius: 0px（全要素）
Shadow: none（基本フラット）
font-feature-settings: normal（palt 適用なし）
letter-spacing: normal（全要素）

プロンプト例

ISSEY MIYAKE のデザインに従って、商品一覧ページを作成してください。
- 背景: #ffffff（純白）
- フォント: "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", sans-serif
  （実サイトは "Hiragino Kaku Gothic W4 JIS2004" を使用 — W4 と W3 で印象が変わる）
- letter-spacing は全要素 normal、palt は使わない
- セクション見出し h2: 20px / weight 700 / line-height 1.2 / color #333333（編集組のタイトな行間）
- 本文 p: 14px / weight 400 / line-height 1.5 / color #333333（line-height 1.5 を厳守、1.7 以上にしない）
- リード見出し: 24px / weight 400 / line-height 1.5
- 小見出し: 18px / weight 400 / line-height 1.5
- ブランド名タグ: 10px / weight 700 / line-height 1.5（"PLEATS PLEASE ISSEY MIYAKE" 等）
- 日付: 11px / weight 400 / color #222222
- キャプション: 11px / weight 400 / color #333333
- Primary CTA「カートに追加」: 16px / weight 400 / 白文字 / #333333 背景 / border-radius 0 / padding 10px 20px
- Wishlist CTA: #ff4500 背景 / 白文字 / border-radius 0
- 商品カードは写真直置き、影・ボーダー・角丸なし
- 通知バーは #464d59（slate）背景に 10px 白文字
- カラフルなアクセントは橙 #ff4500 のウィッシュリストのみ