graniph (グラニフ) DESIGN.md

graniph（https://www.graniph.com/）のデザイン仕様書。 実サイトの computed style に基づく。CSS Custom Properties は最小限の使用。

1. Visual Theme & Atmosphere

• デザイン方針: アート・イラスト・キャラクターとのコラボレーションを前面に出した、遊び心のある EC サイト。商品ビジュアルが主役のギャラリー型レイアウト
• 密度: 商品画像が密に並ぶグリッドレイアウト。ヘッダーはナビゲーション情報量が多い
• キーワード: カラフル、ポップ、アートフル、カジュアル、親しみやすい
• 特徴: ブランドカラーの赤 #dc0816 をアクセントに、#282828 ダークグレーをベースとした配色。システムフォント（ヒラギノ角ゴ）のみで構成

2. Color Palette & Roles

Primary（ブランドカラー）

• Brand Red (#dc0816): CTA、プロモーションバナー、アプリ訴求。rgba(220, 8, 22)
• Brand Red Overlay (rgba(220, 8, 22, 0.8)): 半透明オーバーレイ（バッジ等）

Neutral（ニュートラル）

• Text Primary (#282828): 本文テキスト、ロゴ
• Text Secondary (#505050): 補足テキスト、カテゴリラベル
• Text Tertiary (#b4b4b4): メタ情報、ラベル
• Text Disabled (#c8c8c8): 無効状態
• Background (#ffffff): ページ背景
• Surface (#f8f8f8): セクション背景
• Border (#e8e8e8): 区切り線
• Dark Surface (#282828): ログインボタン、フッター
• Mid Surface (#505050): アクティブタブ（性別切替等）
• Light Border (#a0a0a0): 細い区切り

3. Typography Rules

3.1 和文フォント

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

• ヒラギノ角ゴシック（macOS / iOS）
• ヒラギノ角ゴ Pro W3（macOS レガシー）

システムフォントのみ使用。Web フォントは未使用。

3.2 欧文フォント

• font-family にはヒラギノ系のみ指定。欧文専用フォントの明示的指定なし
• ヒラギノ角ゴシック内蔵の欧文グリフを使用

3.3 font-family 指定

css/* 全要素共通 */
font-family: "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

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

• macOS / iOS のシステムフォントのみに依存するシンプルな構成
• Windows ではブラウザの sans-serif デフォルト（メイリオ等）にフォールバック

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

3.5 行間・字間

• 本文の行間 (line-height): 1.15（16px → 18.4px）。EC サイトとして密な行間
• 見出しの行間: normal
• 全要素の字間 (letter-spacing): 0.01em（0.16px / 16px）。グローバルに統一

ガイドライン:

• 行間が 1.15 と非常に狭いのは、EC のコンパクトな UI に最適化した設計
• letter-spacing: 0.01em はほぼゼロに近いがわずかに開けている
• 商品説明等の長文では別途行間を広げる可能性あり

3.6 禁則処理・改行ルール

明示的な指定なし（ブラウザデフォルトに依存）

3.7 OpenType 機能

• font-feature-settings は全要素 normal
• palt / kern は未使用

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（ログイン）

• Background: #282828
• Text: #ffffff
• Border: 1px solid #282828
• Padding: 推定 8px 16px
• Border Radius: 18px
• Font Size: 11px
• Font Weight: 700

Secondary（会員登録）

• Background: #ffffff
• Text: #282828
• Border: 1px solid #282828
• Padding: 推定 8px 16px
• Border Radius: 18px
• Font Size: 11px
• Font Weight: 700

Promo Banner CTA

• Background: #dc0816
• Text: #ffffff
• Border: none
• Border Radius: 0px
• Font Size: 12px
• Font Weight: 600

Tab（性別切替）

• Active Background: #505050
• Active Text: #ffffff
• Inactive Background: transparent
• Inactive Text: #282828
• Border Radius: 4px
• Font Size: 推定 14px

Cards

Product Card

• Background: transparent
• Border: none
• Border Radius: 0px（商品画像はシャープエッジ）
• Padding: 0
• Shadow: none

Inputs

明示的な input 要素の実測データなし（検索バーはヘッダー内に存在）

5. Layout Principles

Spacing Scale

Container

• Max Width: 推定 1200px
• ヘッダー: 全幅固定

Grid

• 商品一覧: 4カラムグリッド（デスクトップ）
• カテゴリ: 横スクロール

6. Depth & Elevation

7. Do's and Don'ts

Do（推奨）

• ブランドレッド #dc0816 はプロモーションと CTA アクセントに限定して使用する
• 商品画像を主役にし、UI はモノトーン（#282828 / #505050 / #ffffff）で控えめに
• ボタンは角丸 18px のコンパクトなサイズで統一する
• システムフォント（ヒラギノ角ゴ）のみで構成する
• 行間は EC コンテンツでは 1.15 のコンパクトさを維持する

Don't（禁止）

• ブランドレッドを広い面積に使わない（バナー・バッジのアクセントのみ）
• Web フォントを追加しない（システムフォント統一の設計）
• 商品カードにシャドウや太いボーダーを加えない（フラットでクリーン）
• 本文テキストに #000000 純黒を使わない（#282828 ダークグレーを使用）
• 複数のアクセントカラーを混在させない（赤 + モノトーンで統一）

8. Responsive Behavior

Breakpoints

タッチターゲット

• ボタン: 高さ 35px（line-height 35px）
• タブ: 推定 44px 以上

フォントサイズの調整

• モバイルでも本文 16px を維持（可読性確保）
• ナビゲーションはハンバーガーメニューに切替

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #dc0816 (red)
Text Color: #282828
Background: #ffffff
Font: "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif
Body Size: 16px
Line Height: 1.15
Letter Spacing: 0.01em
Button Radius: 18px

プロンプト例

graniph のデザインシステムに従って、商品一覧ページを作成してください。
- 背景色: #ffffff
- テキスト: #282828
- フォント: "Hiragino Sans" 系システムフォント
- 商品カード: フラット、シャドウなし、4カラムグリッド
- CTA: #dc0816 の赤、ログイン系は #282828 + 角丸 18px
- 行間: line-height 1.15（コンパクト EC スタイル）