Skip to main content

時の絵（TOKINOE）日本画ECサービス概要

Next.jsヘッドレス版・日本画特化ECブランド
高度なUI表現力と画像合成機能を活用した本格的日本画販売プラットフォーム

サービス基本情報​

概要​

時の絵（TOKINOE）は、Next.jsヘッドレスアーキテクチャを採用した日本画特化ECサービスです。額縁色・マット色の組み合わせをリアルタイムで画像合成・表示し、ユーザーが完成イメージを即座に確認できる革新的な購入体験を提供します。

写真プリント事業（89mm標準品質）の知見を活かしつつ、画像自動合成・一括登録システムによりカタログ拡充を高速化します。

アーキテクチャの位置づけ​

  • フロントエンド: Next.js（Vercel Commerceベース）
  • 配置: Cloudflare Workers（OpenNext + Cloudflare adapter）
  • バックエンド: Cloudflare Workers BFF + Shopify Headless
  • データ戦略: PIIはShopifyのみ、非PIIはCloudflare D1/R2で管理
  • ブランド運用: サブドメイン別UI（tokinoe.*）+ brand列でデータ分離

ビジョン​

日本の美術文化を現代のライフスタイルに取り入れやすい形で提供し、優れた芸術作品を身近に楽しめる環境を創造します。

主要特徴​

1. 革新的なバリエーション事前生成システム​

  • 全バリエーション画像を予め生成・登録（瞬時切替表示）
  • プレミアムフレーム16種、木製3種、ペーパースタンド3種、ポストカード1種の完全対応
  • 1作品あたり最大23バリエーションの事前生成で即座表示

2. 高度な検索・絞り込み機能​

  • 作家・流派・技法での高速絞り込み
  • モバイル最適化UI
  • Shopifyメタフィールドを活用した詳細カテゴライズ

3. パフォーマンス重視の設計​

  • 注文完了表示 < 2秒（同期処理）
  • Queue処理 < 30秒（非同期処理）
  • Edge最適化によるグローバル高速配信

4. 運用効率化とUX最適化​

  • 事前バリエーション生成による瞬時バリアント切替（処理待ちゼロ）
  • バッチ処理システムによる計画的リソース使用
  • Shopify標準バリアント機能をフル活用した在庫・価格管理
  • 非同期処理によるShopify 429エラー 0%達成

提供価値（ユーザー体験）​

革新的なUX体験​

  • バリアント選択（額縁/マット）が即時に画像へ反映、完成イメージをその場で確認
  • 作家・流派・技法での高速な絞り込み、モバイル最適UI
  • 決済はShopify基盤の信頼性を活用、注文完了は2秒以内表示、後段処理は非同期

ターゲット市場​

  • プライマリ: 30-60代の文化的関心の高い個人・家庭
  • セカンダリ: 企業・オフィスの空間演出、教育機関、ギフト市場
  • グローバル: Cloudflare Edgeインフラ活用で海外展開対応

主要要件​

機能要件​

顧客向け機能​

  • 作品ブラウジング・検索システム
  • 詳細な作品情報表示（歴史的背景、技法解説）
  • サイズ・額縁カスタマイズ機能
  • リアルタイム価格計算
  • オンライン注文・決済システム

管理者向け機能​

  • 作品カタログ管理システム
  • 注文・製作進行管理
  • 品質管理・出荷追跡
  • 顧客サポートツール

非機能要件​

性能要件​

  • ページロード時間: 3秒以内
  • 高解像度画像の最適化表示
  • モバイル対応レスポンシブデザイン

セキュリティ要件​

  • PCI DSS準拠の決済処理
  • 個人情報保護対応
  • SSL/TLS暗号化通信

可用性要件​

  • 99.9%以上のシステム稼働率
  • 障害時の迅速な復旧体制

Next.jsヘッドレスアーキテクチャ（確定）​

フロントエンド技術スタック​

  • フレームワーク: Next.js（Vercel Next.js Commerceベース）
  • 配置: OpenNext + Cloudflare adapterでCloudflare Workersに配置
  • UIライブラリ: RSC (React Server Components) + Server Actions
  • 画像最適化: Next.js Image + WebP/AVIF + R2 CDN統合

BFF/Edgeアーキテクチャ​

  • BFF: Cloudflare Workers（App→BFFのBFFパターン）
  • 非同期処理: Cloudflare Queues + Workers（実装済み）
  • データベース: Cloudflare D1（非PIIのみ）
  • ストレージ: Cloudflare R2（オリジナル/合成画像・非PII）

コマース・認証統合​

  • 認証: Firebase Auth（IDトークン検証）
  • コマース: Shopify Headless（PIIはShopifyのみに集約）
  • CDN/DNS: Cloudflare
  • ブランド運用: サブドメイン別UI（tokinoe.*）＋brand列でデータ分離

実装ロードマップ（Next.js化）​

Phase 1: ベース導入​

  • Vercel Commerceをapps/webに配置
  • OpenNext + Cloudflare adapterでWorkers配備
  • モノレポ構成でアプリとして育てやすくする

Phase 2: ブランドシステム​

  • brand middleware: host → brand解決
  • brand-configでテーマ・文言切替
  • サブドメインでのブランド体験分離

Phase 3: バリエーション事前生成システム​

  • バッチ処理システム: 1作品あたり最大23バリエーションを一括生成
  • Queue統合処理: 順次処理でWorkers負荷分散、エラーハンドリング完備
  • R2ストレージ戦略: /artworks/{id}/premium_frame/, /wooden_frame/, /paper_stand/, /postcard/で組織化

Phase 4: 日本画特化UX + 瞬時バリアント切替​

  • 瞬時バリアント切替: 事前生成済み画像の即座表示（処理待ちゼロ）
  • Shopify標準バリアント機能: 在庫管理・価格設定・絞り込み機能をフル活用
  • 余白/拡大/高精細プレビュー: 事前生成画像の高品質表示

Phase 5: 非同期処理統合​

  • Queues連携: 出荷・タグ更新・通知を非同期化
  • 冗等・DLQ・計測システム
  • Shopify 429エラー 0%達成

非同期化とSLO​

パフォーマンス目標​

  • 同期（ユーザー応答）: 注文完了表示 < 2秒
  • 非同期（バックエンド実行）: Queue処理 < 30秒
  • Shopify 429: 0%（Queues＋トークンバケット）
  • 稼働: 99.9%

バリエーション事前生成戦略詳細​

商品タイプとバリエーション数​

  • プレミアムフレーム: 4色額縁 × 4色マット = 16バリエーション
  • 木製フレーム: 3色額縁 = 3バリエーション
  • ペーパースタンド: 3色 = 3バリエーション
  • ポストカード: 表面+裏面 = 1バリエーション
  • 合計: 1作品あたり最大23バリエーション

R2ストレージ構造​

/artworks/{artwork_id}/
├── original.jpg                    # 原画
├── premium_frame/
│   ├── natural_white.jpg          # 16パターン
│   └── ... (全16種)
├── wooden_frame/
│   └── natural.jpg, brown.jpg, black.jpg
├── paper_stand/
│   └── navy.jpg, black.jpg, white.jpg
└── postcard/
    ├── front.jpg                  # 表面
    └── back.jpg                   # 裏面（作家名入り）

データ管理ルール​

  • Shopify商品登録: 事前生成済み画像をバリアントごとに登録
  • R2ストレージ: オリジナル+全バリエーション画像（PIIなし）
  • D1データベース: R2キー + Shopify商品IDのマッピング情報のみ
  • バッチ処理: 再生成/部分更新も柔軟に対応

なぜDawnテーマではなくNext.jsヘッドレスを使うのか​

観点Dawn（テーマ）Next.js Headless（Vercel Commerce）
表現力/拡張性テーマ構造に依存自由度大（RSC/Server Actions/カスタムUI）
パフォーマンス良だが制御限定Edge最適化＋SSR/静的最適化の細粒度制御
画像合成・演出JS/DOM制約の影響大完全制御（新規コンポーネントで描画戦略を統一）
複雑なバリアントUIテーマ改造が重い設計を自前化（確実なフィルタリング/切替）
マルチブランドテーマ分岐が煩雑Middlewareでサブドメイン→brandを一元制御
将来性テーマ更新に追従モノレポ運用でアプリとして育てやすい

結論: UI/表示ロジックを完全に握りたい・複雑なバリアント画像切替・マルチブランド展開が主目的のため、Next.jsヘッドレスが最適。

リスクと対策​

主要リスク​

  • 複雑性増: UI/状態管理が肥大 → コンポーネント分割/Storybook導入検討
  • Shopify仕様差分: API変更/制限 → Queueのレート制御は変数化して即時調整
  • SEO対策: SSR/メタ情報の整備、画像alt/構造化データをNext側で管理

セキュリティ/コンプライアンス​

  • PIIはShopifyのみ。D1/R2/ログは非PII徹底
  • Firebase JWT→Workersで検証→firebase_uidで権限判定
  • 工場(Electron): 一時取得・保存ゼロ、キャッシュ禁止

今日の決定事項（まとめ）​

  1. 標準テーマからNext.jsヘッドレスへ正式移行
  2. ベースは Vercel Next.js Commerce、Cloudflare Workersに配備
  3. R2に生成系/原板を保存、Shopifyには商品マスター画像を登録
  4. 複雑なバリアント画像切替はNext.jsコンポーネントで新規作成アプローチを採用

文書作成日: 2025-08-23
最終更新: 2025-08-23
バージョン: 2.0 - Next.jsヘッドレス版