デザイン要件: RoomCraft

プロジェクト名: RoomCraft 作成日: 2026-03-19 ステータス: Phase 1 完了

1. 美的方向性（Aesthetic Direction）

1.1 トーン

organic-natural - 有機的・自然、柔らかい曲線、アースカラー

家具・インテリアのプラットフォームとして、温かみと信頼感を与えるデザイン。冷たいテック感ではなく、実際の暮らしに寄り添うナチュラルモダンな方向性。

1.2 ムード

elegant（エレガント）

高品質な家具を扱うプラットフォームとして、メーカーのブランド価値を損なわない上品さ。消費者には「この空間で家具を選びたい」と思わせる洗練さ。

1.3 参照サイト

サイト名	URL	参考ポイント
LOWYA	https://www.low-ya.com	家具EC、商品見せ方、カテゴリ構成
RoomClip	https://roomclip.jp	コミュニティUI、投稿レイアウト
Houzz	https://www.houzz.com	3Dビューア、メーカーストア構成
Pinterest	https://www.pinterest.com	ビジュアル検索UI、グリッドレイアウト
IKEA Place	-	AR家具配置、3D操作UX

1.4 禁止パターン（AI Slop回避）

以下は使用禁止:

Inter, Roboto, Arial等のジェネリックフォント
紫グラデーション on 白背景
予測可能なレイアウトパターン
過剰なドロップシャドウ
Space Grotesk（AI生成の典型）
cookie-cutter design
過度なネオン・グロー効果
ダークモード一辺倒（インテリアアプリには不適）

1.5 差別化ポイント

「部屋の中にいるような没入感」と「ショッピングの楽しさ」の融合。
3Dシミュレーション画面は暗い技術デモではなく、
自然光が差し込む部屋のように温かく、
家具を選ぶワクワク感を演出するデザイン。
メーカーごとの個性を尊重しつつ、
プラットフォーム全体の統一感を保つデザインシステム。

2. ブランドガイドライン

2.1 カラーパレット

用途	カラーコード	説明
プライマリ	#2C3E2D	ディープフォレスト - 自然・信頼
セカンダリ	#F5F0E8	ウォームアイボリー - 温かみ
アクセント	#C8956C	テラコッタ - 温かいCTA
アクセント2	#5B8A72	セージグリーン - サブアクション
背景（ライト）	#FAFAF7	オフホワイト - 目に優しい
背景（ダーク）	#1A1D1A	ダークモス - ダークモード
テキスト（メイン）	#1C1C1C	チャコール
テキスト（サブ）	#8A8A80	ウォームグレー
ミュート	#D4D0C8	サンドベージュ
サクセス	#5B8A72	グリーン
エラー	#C45C4A	テラコッタレッド
ワーニング	#D4A843	アンバー

2.2 タイポグラフィ

要素	フォント	ウェイト	サイズ
H1	Playfair Display	700	2.5rem
H2	Playfair Display	600	2rem
H3	Montserrat	600	1.5rem
H4	Montserrat	600	1.25rem
本文	Noto Sans JP	400	1rem
本文（大）	Noto Sans JP	400	1.125rem
キャプション	Noto Sans JP	400	0.875rem
ボタン	Montserrat	500	0.875rem
価格	Montserrat	700	-

フォント選定理由:

Playfair Display: 高級感・エレガンスを演出。家具ブランドの品格に合う
Montserrat: 明瞭で現代的。UIラベル・ナビに適合
Noto Sans JP: 日本語の可読性最高。本文に最適

2.3 スペーシング

名前	値	用途
unit	8px	基本単位
xs	4px	極小間隔
sm	8px	小間隔
md	16px	中間隔
lg	24px	大間隔
xl	32px	特大間隔
2xl	48px	セクション間
3xl	64px	大セクション間
4xl	96px	ヒーロー・大セクション

2.4 角丸・シャドウ

要素	角丸	シャドウ
ボタン	8px	0 1px 2px rgba(44,62,45,0.06)
カード	12px	0 2px 8px rgba(44,62,45,0.08)
商品カード	12px	0 4px 12px rgba(44,62,45,0.06)
モーダル	16px	0 16px 48px rgba(0,0,0,0.12)
入力フィールド	8px	none（border: 1px solid #D4D0C8）
3Dビューポート	0px	none（全画面表示）

3. UIコンポーネント方針

3.1 コンポーネントライブラリ

shadcn/ui (推奨) - Radix UI + Tailwind

3.2 スタイリングシステム

Tailwind CSS (推奨) - ユーティリティファースト

3.3 アニメーションライブラリ

motion/react (推奨) - 旧 framer-motion

3.4 アイコンライブラリ

Lucide React (推奨)

3.5 3Dレンダリング

Three.js + React Three Fiber + @react-three/drei
WebGL 2.0準拠
glTF/GLB形式標準

3.6 特殊コンポーネント

コンポーネント	用途	技術
3Dビューポート	家具配置メイン画面	React Three Fiber
間取りエディタ	2D間取り編集	Canvas API / Konva.js
商品カルーセル	家具一覧スクロール	motion/react
カラーピッカー	壁紙・家具色選択	Radix Color Picker
レンジスライダー	価格・サイズフィルタ	shadcn/ui Slider

4. レスポンシブ方針

4.1 ブレークポイント

名前	幅	対象デバイス
base	-	Mobile (375px+)
sm	640px	Large phone
md	768px	Tablet
lg	1024px	Desktop
xl	1280px	Large Desktop
2xl	1536px	Extra Large

4.2 アプローチ

モバイルファースト (推奨) - min-width 方式

4.3 Safe Area対応

必須 - iPhone notch/home bar 対応

4.4 タッチターゲット

最小タッチターゲットサイズ: 44px

4.5 3Dビューポートのレスポンシブ

デバイス	レイアウト
モバイル	3Dビュー全画面＋下部家具パネル（ボトムシート）
タブレット	3Dビュー左70%＋右サイドパネル30%
デスクトップ	3Dビュー中央＋左ツールバー＋右家具パネル

4.6 メーカー管理画面

デバイス	対応
モバイル	基本閲覧のみ（通知・売上確認）
タブレット	主要操作可能
デスクトップ	フル機能

5. 品質基準

5.1 パフォーマンス

指標	目標値	備考
Lighthouse Performance	90+	3Dビュー画面は80+許容
Lighthouse Accessibility	100
Lighthouse Best Practices	100
Lighthouse SEO	100
First Contentful Paint	< 1.8s
Largest Contentful Paint	< 2.5s
Cumulative Layout Shift	< 0.1
3Dモデルロード	< 2s/個	Progressive Loading

5.2 アクセシビリティ

項目	基準
WCAG準拠レベル	AA
コントラスト比	4.5:1以上（通常テキスト）
コントラスト比	3:1以上（大テキスト・UI要素）
キーボード操作	完全対応（3Dビュー含む）
スクリーンリーダー	対応（3D要素の代替テキスト）
フォーカスインジケーター	常時表示

5.3 ブラウザ対応

ブラウザ	最小バージョン
Chrome	最新2バージョン
Firefox	最新2バージョン
Safari	最新2バージョン
Edge	最新2バージョン
iOS Safari	iOS 16+
Android Chrome	最新

WebGL 2.0対応必須（3Dレンダリング）

5.4 ダークモード

必須 - 完全対応

3Dビューポートの照明シミュレーションとは独立。 UI全体のダークモード対応。

6. 追加要件

6.1 3D特有のデザイン要件

- 3Dビューポートの背景は実際の部屋の雰囲気を再現（壁紙・照明反映）
- UIオーバーレイは半透明で3D空間を邪魔しない
- 家具選択時のハイライトはアウトライン方式（塗りつぶしでない）
- グリッドヘルパーはオプション表示（デフォルトOFF）
- 寸法表示は必要時のみ表示

6.2 メーカー管理画面のデザイン要件

- データ密度の高い管理画面でも余白を確保
- グラフ・チャートはEarth tone系カラーで統一
- テーブルは行ごとの微妙な背景色差で可読性向上
- 商品サムネイルは正方形で統一

6.3 ローディング・空状態

- 3Dモデルロード中: プログレスバー＋シルエットプレースホルダー
- 空の部屋: 「家具を配置しましょう」のイラスト付きガイド
- 検索結果ゼロ: 条件変更サジェスト
- エラー状態: フレンドリーなイラスト＋リトライボタン

チェックリスト

Phase 1完了前に以下を確認:

トーン/ムードが明確に定義されている
参照サイトが1つ以上登録されている
禁止パターンが明確である
カラーパレットが完成している
フォントが選定されている
コンポーネントライブラリが決定している
スタイリングシステムが決定している
レスポンシブ方針が明確である
品質基準が設定されている

Generated by CCAGI SDK v3.14.4 - Phase 1: Requirements