Skip to main content

🎨 TOKINOE 日本画ストア — デザインガイドライン

静謐・格調・余白・本物感
日本画を引き立てる上品でモダンミニマルなデザイン戦略

🎯 1. ブランドトーン・アイデンティティ​

核となるキーワード​

ブランド価値:
  静謐: 静かで落ち着いた美しさ
  格調: 品格と高尚さを表現
  余白: 日本画の美しさを際立たせる
  本物感: 伝統的価値と現代的アクセスの融合

デザイン方針:
  - 上品・モダンミニマル
  - 過剰な装飾は徹底的に排除
  - 日本画が主役のレイアウト

📐 2. レイアウト・グリッドシステム​

基本ルール​

/* グリッドシステム */
基準: 8px グリッド
コンテナ最大幅: 1280px
セクション余白: 64〜96px

/* 余白戦略 */
padding: 8px単位（8px, 16px, 24px, 32px...）
margin: 16px単位（16px, 32px, 48px, 64px...）
gap: 12px単位（12px, 24px, 36px, 48px...）

レスポンシブブレークポイント​

Mobile: 320px - 767px
Tablet: 768px - 1023px  
Desktop: 1024px - 1279px
Large: 1280px+

🎨 3. カラーパレット​

プライマリーカラー​

/* メインカラー */
--bg-primary: #FFFFFF;     /* 白 - メイン背景 */
--bg-secondary: #F5F3E7;   /* 生成り - サブ背景 */
--text-primary: #111111;   /* 黒 - メインテキスト */
--text-secondary: #6B7280; /* グレー - サブテキスト */
--border: #E5E7EB;         /* 薄グレー - 枠線 */
--accent: #264653;         /* 藍 - アクセント */

セマンティックカラー​

/* 状態表示 */
--success: #059669;    /* 成功 */
--warning: #D97706;    /* 警告 */
--error: #DC2626;      /* エラー */
--info: #264653;       /* 情報（藍と同じ） */

/* インタラクティブ */
--hover: rgba(38, 70, 83, 0.1);   /* ホバー */
--focus: rgba(38, 70, 83, 0.2);   /* フォーカス */
--selected: #264653;               /* 選択中 */

📝 4. タイポグラフィ・フォント体系​

フォントファミリー​

/* 日本語フォント */
--font-sans: 'Noto Sans JP', -apple-system, sans-serif;
--font-serif: 'Noto Serif JP', serif;

/* 英文フォント */
--font-inter: 'Inter', -apple-system, sans-serif;

/* 用途別適用 */
見出し: Noto Serif JP （格調高い印象）
本文: Noto Sans JP （可読性重視）
英文: Inter （モダンで洗練）

タイポグラフィスケール​

/* フォントサイズ */
--text-h1: 32px;    /* 作品名・ページタイトル */
--text-h2: 24px;    /* セクション見出し */
--text-h3: 20px;    /* サブ見出し */
--text-body: 16px;  /* 本文 */
--text-small: 14px; /* 補助テキスト */
--text-caption: 12px; /* キャプション */

/* 行間 */
--leading-tight: 1.25;   /* 見出し用 */
--leading-normal: 1.5;   /* 本文用 */
--leading-loose: 1.75;   /* 解説文用 */

🖼️ 5. 商品ページ構成・レイアウト​

ページ構造（優先順位順）​

1. 作品ヘッダー:
   - 作品名（H1, Noto Serif JP）
   - 作家名（リンク, text-secondary）
   - 技法表示（badge形式）

2. ビューア領域:
   - メイン画像（クロスフェード切替）
   - サムネイル（選択中は藍枠線）
   - ズーム機能

3. 商品選択:
   - ベース商品タブ（プレミアム/木製/スタンド/ポストカード）
   - バリアント選択UI
   - 価格表示（大きく、目立つ）
   - カートボタン（藍背景、白文字）

4. 作品詳細:
   - 作品解説
   - 作家プロフィール
   - 仕様・注意事項

レスポンシブレイアウト​

Desktop (1024px+):
  - 左: 画像 60%, 右: 選択UI 40%
  - 2カラムレイアウト

Mobile (~767px):
  - 縦積みレイアウト  
  - 画像 → 選択UI → 詳細の順

🎛️ 6. バリアント選択UI設計​

プレミアムフレーム（16パターン）​

表示方式:
  - 4×4グリッド表示
  - 各選択肢: カラーチップ + テキスト
  - 選択中: 藍色アウトライン (2px) + 8px余白

額縁色: ブラック、ブラウン、ホワイト、ナチュラル
マット色: ホワイト、クリーム、グレー、ネイビー

命名規約: {額縁色}×{マット色}
例: ブラック×ホワイト、ブラウン×クリーム

木製フレーム・スタンド（3パターン）​

表示方式:
  - インライン表示
  - カラーチップ + 商品名

色展開: ナチュラル、ブラウン、ホワイト

ポストカード​

固定仕様:
  - バリアント選択不要
  - 表面・裏面画像の2枚表示
  - 切替: タブまたはスライド

🖼️ 7. 画像管理・切替システム​

alt属性命名規約​

パターン: {作品名}_{商品タイプ}_{バリアント詳細}

例:
  - "紅葉_プレミアムフレーム_ブラック×ホワイト"
  - "山水_木製フレーム_ナチュラル"
  - "花鳥_ポストカード_表面"

画像切替ロジック​

// 画像表示制御
function displayVariantImages(selectedVariant: string) {
  // alt属性でフィルタリング
  const targetImages = images.filter(img => 
    img.alt.includes(selectedVariant)
  )
  
  // クロスフェード切替
  fadeImages(currentImages, targetImages, 300)
}

画像規格​

商品画像:
  解像度: 3555×2528px (合成後)
  フォーマット: WebP (最適化), JPG (フォールバック)
  圧縮: 品質85-90%
  
サムネイル:
  解像度: 400×280px
  フォーマット: WebP

⚙️ 8. 管理画面・合成システム​

ブラウザ合成フロー​

graph TD
    A[作品アップロード] --> B[Canvas Worker起動]
    B --> C[3555×2528px Canvas作成]
    C --> D[16パターン順次合成]
    D --> E[Cloudflare R2直接PUT]
    E --> F[D1メタデータ保存]
    F --> G[合成完了通知]

技術スペック​

合成環境:
  - ブラウザCanvasAPI + Web Worker
  - 解像度: 3555×2528px
  - 処理順序: 16パターン直列処理

アップロード先:
  - Cloudflare R2 Storage
  - バケット: contents-print-images
  - パス: /tokinoe/{作品ID}/{variant}.webp

🔍 9. SEO・メタデータ最適化​

JSON-LD構造化データ​

{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "作品名",
  "description": "作品解説",
  "image": "https://cdn.contents-print.jp/tokinoe/artwork-001/premium-black-white.webp",
  "brand": {
    "@type": "Brand", 
    "name": "TOKINOE"
  },
  "creator": {
    "@type": "Person",
    "name": "作家名"
  },
  "offers": {
    "@type": "Offer",
    "price": "25000",
    "priceCurrency": "JPY"
  }
}

OGPメタタグ​

<meta property="og:title" content="作品名 — 作家名 | TOKINOE" />
<meta property="og:description" content="作品解説（120文字以内）" />
<meta property="og:image" content="作品メイン画像URL" />
<meta property="og:type" content="product" />

♿ 10. アクセシビリティ・ユーザビリティ​

WCAG準拠​

コントラスト比:
  - メインテキスト: 4.5:1以上 (AA準拠)
  - サブテキスト: 3:1以上
  - アクセント色: 4.5:1以上

キーボード操作:
  - Tab順序: 論理的なフォーカス順
  - Enter/Space: 選択・実行
  - Escape: モーダル・オーバーレイ閉じる

色覚多様性対応​

バリアント選択:
  - カラーチップに加え、文字ラベル必須
  - パターン・テクスチャで区別
  - 選択状態: 色だけでなくアウトラインで表示

フォーカスリング:
  - ring-2 ring-accent (藍色 2px)
  - 十分な視認性確保

✅ 11. 品質チェックリスト​

デザイン統一性​

  • カラーパレット: 藍×生成りのトーン統一
  • フォント: Noto Serif JP (見出し) + Noto Sans JP (本文)
  • 余白: 8pxグリッド準拠
  • レスポンシブ: Mobile/Tablet/Desktop対応

商品表示​

  • 作家・技法表示: 全商品ページで統一
  • 画像切替: クロスフェード、スムーズな切替
  • バリアント選択: 直感的なUI、選択状態明確
  • 価格表示: 見やすく、税込表示

技術実装​

  • 管理画面: 合成→R2アップロード成功
  • メタデータ: JSON-LD、OGP出力
  • パフォーマンス: 画像最適化、キャッシュ活用
  • アクセシビリティ: WCAG AA準拠

SEO最適化​

  • ページタイトル: 作品名 — 作家名 | TOKINOE
  • メタディスクリプション: 作品特徴を120文字以内
  • 構造化データ: Product + Person情報
  • 画像alt: 作品・バリアント情報含む

🎨 デザイン実装リファレンス​

CSS変数定義​

:root {
  /* カラーパレット */
  --tokinoe-white: #FFFFFF;
  --tokinoe-cream: #F5F3E7;  
  --tokinoe-black: #111111;
  --tokinoe-gray: #6B7280;
  --tokinoe-border: #E5E7EB;
  --tokinoe-accent: #264653;
  
  /* タイポグラフィ */
  --font-serif: 'Noto Serif JP', serif;
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-inter: 'Inter', sans-serif;
  
  /* スペーシング */
  --space-xs: 8px;
  --space-sm: 16px; 
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
}

📍 関連ドキュメント: 商品仕様 | 技術要件 | バリアント管理

🎨 Designed by 天才デザイナー（あなた専用ガイドライン）

文書作成日: 2025-08-23
最終更新: 2025-08-23
バージョン: 1.0 - 完全版