HYKE DESIGN.md

HYKE（https://hyke.jp/）のデザイン仕様書。 Shopify ベースのオンラインストア。実サイトの CSS Custom Properties および computed style に基づく。 A-OTF Gothic BBB Pro N（Morisawa / Adobe Fonts）はドメインライセンスのため、preview.html では Google Fonts の Zen Kaku Gothic New で代替。

1. Visual Theme & Atmosphere

• デザイン方針: 極限までそぎ落とされた、ギャラリーのようなモノクロームの空間。商品写真が唯一の主役であり、UIは存在を消す方向に設計されている。ファッションブランドとして「見せない」ことで高級感と緊張感を演出
• 密度: 非常に疎。大きな余白、最小限のテキスト、タイトな行間で静謐な空気をつくる
• キーワード: ミニマル、モノクローム、ギャラリー、建築的、抑制
• 特徴: 純粋な #000000 ではなく #3a3a3a をテキストに使用し、白背景とのコントラストを柔らげている。色彩はほぼ存在せず、唯一のアクセントカラーはセール用の #ea0606 のみ

2. Color Palette & Roles

Primary（ブランドカラー）

• Text / Primary (#3a3a3a): ブランドのベーステキスト色。ボタン背景にも使用。純黒を避けた柔らかい黒
• Primary Darker (#212121): ホバー・プレス時のボタン背景

Semantic（意味的な色）

• Sale (#ea0606): セール価格。サイト唯一のビビッドカラー

Neutral（ニュートラル）

• Text Primary (#3a3a3a): 本文テキスト（--color-text）
• Text Body (#333232): 本文テキスト（--color-body-text）
• Text Overlay (#ffffff): 画像上テキスト
• Text Blankstate (rgba(51,50,50,0.35)): 空状態テキスト
• Background (#ffffff): ページ背景（--color-body / --color-bg）
• Background Alt (rgba(51,50,50,0.05)): 微かなグレー背景（--color-bg-alt）
• Video Background (#f2f2f2): 動画プレースホルダー背景
• Border (#ebebeb): 区切り線・カードボーダー（--color-border）
• Border Form (#cccccc): フォーム入力欄の枠（--color-border-form）
• Border Form Darker (#b3b3b3): フォーカス時のフォーム枠（--color-border-form-darker）
• Image Overlay (#685858): 画像オーバーレイ（暖かみのあるブラウン）
• Image Loader Primary (rgba(58,58,58,0.06)): 画像ローディングプレースホルダー
• Image Loader Secondary (rgba(58,58,58,0.12)): 画像ローディングアニメーション
• Currency Selector (rgba(51,50,50,0.2)): 通貨セレクタ
• Blankstate Border (rgba(51,50,50,0.2)): 空状態ボーダー
• Blankstate Background (rgba(51,50,50,0.1)): 空状態背景

Surface & Buttons

• Button Primary (#3a3a3a): プライマリボタン背景（--color-btn-primary）
• Button Primary Darker (#212121): ホバー時ボタン背景（--color-btn-primary-darker）
• Button Primary Text (#ffffff): プライマリボタンテキスト（--color-btn-primary-text）
• Small Button (#3a3a3a テキスト / ボーダー): 小型ボタン
• Text Field Background (#ffffff): 入力欄背景
• Text Field Text (#000000): 入力欄テキスト

3. Typography Rules

3.1 和文フォント

ゴシック体（デフォルト）:

• A-OTF Gothic BBB Pro N（Morisawa / Adobe Fonts）— 細身で上品なゴシック体。ブランドの抑制された美学に合致
• sans-serif（generic fallback）

注意: A-OTF Gothic BBB Pro N は Adobe Fonts（ドメインライセンス）のため、ローカル環境では表示されない。Google Fonts で代替する場合は Zen Kaku Gothic New（同じく Morisawa 系で字形が近い）を推奨

3.2 欧文フォント

• サンセリフ: Helvetica, Arial — 見出し・本文共に使用
• 等幅: 特に指定なし

3.3 font-family 指定

css/* body（実測値） */
font-family: Arial, Helvetica, a-otf-gothic-bbb-pr6n, "sans-serif";

/* ヘッダー（CSS Custom Property） */
font-family: Helvetica, Arial, sans-serif;  /* --font-stack-header */

/* ボディ（CSS Custom Property） */
font-family: Helvetica, Arial, sans-serif;  /* --font-stack-body */

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

• 欧文フォント（Helvetica / Arial）を先に指定し、欧文グリフの表示品質を優先
• 和文は Adobe Fonts の a-otf-gothic-bbb-pr6n で表示。読み込み前は generic sans-serif にフォールバック
• ヘッダーとボディで CSS Custom Property は同じスタックだが、body の実測値では Arial が先頭に来ている

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

以下は CSS Custom Properties（--font-size-*）および DevTools の computed style による実測値

CSS Custom Properties（デザイントークン）

Computed Style（実測値）

3.5 行間・字間

行間 (line-height) — 実測値:

• body グローバル: 16px (16px x 1.0) — 極端にタイト。ギャラリー的な緊張感を生む
• 見出し (h2): 20px (20px x 1.0) — テキストサイズと同値
• 新着見出し (h2 NEW IN): 28px (28px x 1.0) — 同上
• サブヘッダー (h3): 15.6px (12px x 1.3) — やや余裕あり
• 価格 (p): 16.8px (12px x 1.4)
• フッター (p): 16px (10px x 1.6)

字間 (letter-spacing) — 実測値:

• 本文: normal
• コレクション見出し (h2): 0.6px (= 0.03em)
• サブヘッダー (h3): 0.36px (= 0.03em)
• ナビリンク: 0.39px (= 0.03em)
• ヘッダーリンク: 0.39px (= 0.03em)

ガイドライン:

• line-height: 1.0（テキストサイズと同値）がデフォルト。これは一般的なWebサイトと大きく異なり、HYKE の視覚的アイデンティティの核心
• letter-spacing: 0.03em がナビゲーション・見出しの標準。本文には適用しない
• ウェイトは 400 がほぼ全てのテキストに使用される。700 はコレクション見出しのみ

3.6 禁則処理・改行ルール

css/* 特別な禁則設定は確認されず */
/* Shopify デフォルトに準拠 */

• 最小限のテキスト量のため、禁則処理が問題になるケースは少ない

3.7 OpenType 機能

css/* 実測値 */
font-feature-settings: normal;

• palt は適用されていない。A-OTF Gothic BBB Pro N は字面が小さく字間が自然に開くため、プロポーショナル字詰めなしでも上品に見える
• kern も明示的な指定なし

3.8 縦書き

• 該当なし。HYKE は横書きのみ

4. Component Stylings

Buttons

Primary（ADD TO CART 等）

• Background: #3a3a3a（--color-btn-primary）
• Text: #ffffff（--color-btn-primary-text）
• Hover Background: #212121（--color-btn-primary-darker）
• Font Weight: 400
• Font Size: 15px（--font-size-base）

Small（フィルター、サイズ選択等）

• Background: transparent
• Text: #3a3a3a
• Border: 1px solid #3a3a3a
• Font Size: 12-13px
• Letter Spacing: 0.03em

特徴: HYKE のサイトには目立つ CTA ボタンがほとんど存在しない。ブラウジング体験を優先し、購入への誘導は控えめ

Inputs

• Background: #ffffff
• Text: #000000
• Border: 1px solid #cccccc（--color-border-form）
• Border (focus): 1px solid #b3b3b3（--color-border-form-darker）
• Font Size: 15px

Cards（商品カード）

• Background: #ffffff
• Border: なし（画像が直接配置される）
• Shadow: なし
• テキストは画像の下に極小サイズ（12px）で配置

Navigation

• Background: #ffffff
• Font Size: 13px
• Letter Spacing: 0.03em
• Font Weight: 400
• テキストカラー: #3a3a3a

5. Layout Principles

Spacing

• HYKE は定義されたスペーシングスケールを持たない。余白は大きく、不規則で、建築的な間（ま）を意識している
• 商品グリッドの gutter は狭く、画像同士の間隔は最小限

Container

• 全幅レイアウトが基本。固定幅のコンテナは使用しない
• 商品画像は画面幅いっぱいに配置されるケースが多い

Grid

• 商品一覧: 2カラム（デスクトップ）/ 2カラム（モバイル）
• トップページ: フルブリードの画像ブロックが基本

6. Depth & Elevation

• シャドウは使用されていない。ボーダーも最小限（#ebebeb）。深度の表現は余白と配置のみで行う
• 唯一のレイヤー表現は画像オーバーレイ（#685858）と半透明背景（rgba(51,50,50,0.05)）

7. Do's and Don'ts

Do（推奨）

• テキスト色は #3a3a3a を使い、純粋な #000000 を避ける（柔らかいコントラスト）
• line-height は 1.0（テキストサイズと同値）をデフォルトとする。HYKE の緊張感はここから生まれる
• ウェイトは 400 を基本とし、700 はコレクション見出しなどごく限られた場面にのみ使う
• letter-spacing: 0.03em をナビゲーション・見出しに適用する
• 余白を惜しまない。要素間の距離は広く取り、ギャラリーのような空間をつくる
• 商品画像を最大限に大きく見せる。テキストは添え物
• 色彩を使わない。モノクローム（黒・白・グレー）のみで構成する

Don't（禁止）

• 純粋な #000000 をテキストに使わない（HYKE は #3a3a3a を使用）
• 装飾的なシャドウやグラデーションを使わない（完全にフラット）
• ボタンを目立たせない。CTA は控えめに
• セール赤 #ea0606 以外のアクセントカラーを追加しない
• 本文に line-height: 1.5 以上を使わない（HYKE のタイトな行間が崩れる）
• font-weight: 700 を多用しない（400 が HYKE の標準）
• palt や過度な letter-spacing を適用しない（フォント本来の字間を活かす）

8. Responsive Behavior

Breakpoints

CSS Custom Properties 実測値

フォントサイズの調整

• H1: 35px → 32px
• H2: 20px → 18px
• H4: 17px → 15px
• H5: 15px → 13px
• H6: 14px → 12px

タッチターゲット

• ナビゲーションリンク: タッチ領域はテキストより大きく取る（パディングで確保）

9. Agent Prompt Guide

クイックリファレンス

Text Color: #3a3a3a
Body Text: #333232
Background: #ffffff
Background Alt: rgba(51,50,50,0.05)
Border: #ebebeb
Border Form: #cccccc
Button Primary: #3a3a3a (bg) / #ffffff (text)
Button Hover: #212121
Sale: #ea0606

Font (body actual): Arial, Helvetica, a-otf-gothic-bbb-pr6n, sans-serif
Font (header token): Helvetica, Arial, sans-serif
Font (Google Fonts substitute): "Zen Kaku Gothic New", Helvetica, Arial, sans-serif

Body Size: 15px (token) / 16px (computed)
Line Height: 1.0 (default — intentionally tight)
Letter Spacing: 0.03em (nav/headings) / normal (body)
Font Weight: 400 (default) / 700 (collection headings only)
palt: off

プロンプト例

HYKE のデザインに従って、商品一覧ページを作成してください。
- フォント: "Zen Kaku Gothic New", Helvetica, Arial, sans-serif
- テキスト色: #3a3a3a（純粋な黒は使わない）
- 背景: #ffffff
- ボーダー: #ebebeb（極薄）
- ボタン: 背景 #3a3a3a、テキスト #ffffff、ホバー #212121
- line-height: 1.0（タイトな行間がブランドの核心）
- font-weight: 400 をデフォルト、700 は見出しのみ
- letter-spacing: 0.03em をナビ・見出しに
- シャドウなし。フラットデザインを徹底
- 余白を大きく取り、ギャラリーのような空間をつくる
- セール赤 #ea0606 以外の色は使わない