コンテンツにスキップ

ECデザインワークショップ

📋 デザイン策定プロセス

スケジュール

  • 草案募集期間: 2025年9月22日(月)〜 10月6日(日)
  • 骨子作成期間: 2025年10月7日(月)〜 10月13日(日)
  • 最終確定: 2025年10月14日(月)

対象システム

リツビ BtoB EC Storefront(Next.js + Vendure構成)

  • 現行サイト: https://order.ritsubi.co.jp/
  • 15種類の顧客ステータス別UI
  • 33カテゴリの商品階層表示
  • 顧客別価格・掛率表示
  • 購入単位制御UI
  • キャンペーン・割戻金表示

🎨 デザイン草案作成エリア

デザインアイデア・草案は以下の共有キャンバスで収集・整理します:

直接アクセス: ECデザイン草案ワークスペース

📝 デザイン要件・考慮事項

B2B ECの特殊要件

  1. 顧客ステータス別UI
  2. 15種類の顧客権限に応じた情報表示・非表示
  3. 権限レベル別のメニュー・機能制限

  4. 価格表示の複雑さ

  5. 顧客別掛率適用後の価格表示
  6. 定価・掛率・最終価格の明示
  7. キャンペーン価格・割戻金の表示

  8. 購入単位制御

  9. 商品別の購入単位(個・箱・ケース)表示
  10. 混載ルール・数量制限の視覚的表現
  11. エラー状態・警告の分かりやすい表示

  12. 直送モード

  13. 通常配送と直送モードの切り替えUI
  14. 10%サーチャージの明確な表示
  15. 配送先選択・入力フォーム

UI/UXガイドライン

  • レスポンシブデザイン: モバイル・タブレット・デスクトップ対応
  • アクセシビリティ: WCAG 2.1 AA準拠
  • パフォーマンス: Core Web Vitals準拠
  • SEO対応: 検索エンジン最適化を考慮した構造

🎯 デザイン成果物

Phase 1: 草案収集(9/22-10/06)

  • ワイヤーフレーム・ラフスケッチ
  • UI コンポーネントアイデア
  • カラーパレット・タイポグラフィ提案
  • ユーザーフローの提案

Phase 2: 骨子策定(10/07-10/13)

  • 統合デザインシステム策定
  • 主要画面のワイヤーフレーム確定
  • コンポーネント設計指針
  • Next.js実装ガイドライン

📞 連絡・質問

デザイン関連の質問・相談は以下で受け付けます:


最終更新: 2025-09-24 管理責任者: デザイン・フロントエンド開発チーム