UI Guidelines: RoomCraft

バージョン: 1.0.0 作成日: 2026-03-19 ソース: docs/requirements/design-requirements.md

1. Aesthetic Direction

1.1 基本方向性

Tone: organic-natural Mood: elegant

家具・インテリアプラットフォームとして、温かみと信頼感を核とするデザイン。冷たいテック感を排し、実際の暮らしに寄り添うナチュラルモダンを体現する。

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

1.2 差別化コンセプト

「部屋の中にいるような没入感」と「ショッピングの楽しさ」の融合。 3Dシミュレーション画面は暗い技術デモではなく、自然光が差し込む部屋のように温かく、家具を選ぶワクワク感を演出するデザイン。

3Dビューポートは技術的な印象を与えず、生活空間のリアルな延長として演出する
メーカーごとの個性を尊重しつつ、プラットフォーム全体の統一感を保つ
没入感とショッピング体験を両立させる UI レイアウトを追求する

2. Typography Guidelines

2.1 フォントスタック

役割	フォントファミリー	フォールバック
見出し（H1, H2）	Playfair Display	Georgia, serif
サブ見出し・UI（H3, H4）	Montserrat	Helvetica Neue, sans-serif
本文・日本語	Noto Sans JP	sans-serif
数値・価格	Montserrat	Helvetica Neue, sans-serif

フォント選定理由:

Playfair Display: 高級感・エレガンスを演出。家具ブランドの品格に合い、自然素材のあたたかみと調和する
Montserrat: 明瞭で現代的。UIラベル・ナビゲーション・価格表示に適合
Noto Sans JP: 日本語の可読性最高水準。本文・説明文に最適

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

要素	フォント	ウェイト	サイズ	行間	用途
Hero Title	Playfair Display	700	3.5rem (56px)	1.15	ランディングページヒーロー
H1	Playfair Display	700	2.5rem (40px)	1.2	ページタイトル
H2	Playfair Display	600	2rem (32px)	1.25	セクションタイトル
H3	Montserrat	600	1.5rem (24px)	1.3	カードタイトル・サブセクション
H4	Montserrat	600	1.25rem (20px)	1.4	グループラベル
本文（大）	Noto Sans JP	400	1.125rem (18px)	1.7	リード文・重要説明
本文	Noto Sans JP	400	1rem (16px)	1.7	一般本文
キャプション	Noto Sans JP	400	0.875rem (14px)	1.5	補足テキスト・ラベル
ボタンラベル	Montserrat	500	0.875rem (14px)	1	ボタン内テキスト
価格（大）	Montserrat	700	1.5rem (24px)	1	商品カードメイン価格
価格（通常）	Montserrat	700	1.125rem (18px)	1	一覧価格表示
ナビゲーション	Montserrat	500	0.875rem (14px)	1	グローバルナビ

2.3 原則

text-balance を見出し要素に適用し、行末の孤立語を防ぐ
価格・数値は tabular-nums を適用し、数値の揃いを保証する
日本語と英数字が混在する箇所では Noto Sans JP を優先し、英数字は自然にフォールバックさせる
禁止: Inter, Roboto, Arial, Space Grotesk（AIスロップの典型フォント）

3. Color Guidelines

3.1 カラーパレット

役割	カラーコード	名称	用途
プライマリ	`#2C3E2D`	ディープフォレスト	ブランドカラー、主要ボタン、強調テキスト
セカンダリ	`#F5F0E8`	ウォームアイボリー	背景ハイライト、カードベース
アクセント	`#C8956C`	テラコッタ	CTA ボタン、重要な行動喚起
アクセント2	`#5B8A72`	セージグリーン	セカンダリアクション、成功状態
背景（ライト）	`#FAFAF7`	オフホワイト	メインページ背景
背景（ダーク）	`#1A1D1A`	ダークモス	ダークモード背景
テキスト（メイン）	`#1C1C1C`	チャコール	本文・見出し
テキスト（サブ）	`#8A8A80`	ウォームグレー	キャプション・補助テキスト
ミュート	`#D4D0C8`	サンドベージュ	ボーダー・区切り線
サクセス	`#5B8A72`	グリーン	成功メッセージ
エラー	`#C45C4A`	テラコッタレッド	エラー・警告
ワーニング	`#D4A843`	アンバー	注意表示

3.2 原則

Earth tone を基調とし、テラコッタアクセントで温かみと行動喚起を両立させる
CTA（購入・配置・選択）は必ずテラコッタ（#C8956C）を使用する
コントラスト比: 通常テキスト 4.5:1 以上、大テキスト・UI要素 3:1 以上（WCAG AA 準拠）
ダークモードではダークモス（#1A1D1A）を基調とし、テキスト色を適切に反転させる

3.3 禁止パターン

紫グラデーション on 白背景（AI slop の象徴）
蛍光色・ネオン系アクセント（インテリアの雰囲気を壊す）
青系モノトーン配色（テック感が強く、暮らしの温かみと相反する）
3Dビューポート内の UI 要素を不透明な塗りつぶしで表示（没入感を損なう）

4. Motion Guidelines

4.1 基本原則

すべてのアニメーション・トランジションは 200ms 以下 とする
Compositor プロパティのみ 使用: transform（translate, scale, rotate）と opacity
motion/react（旧 framer-motion）を使用する
will-change は必要な箇所のみ限定的に適用する（過剰使用禁止）

4.2 用途別タイミング

用途	時間	イージング	説明
ボタン・インタラクティブ要素 hover	150ms	ease-out	即応性を重視
ボタン press（active）	80ms	ease-in	素早い押下反応
カード hover	200ms	ease-out	軽い浮遊感
モーダル開閉	200ms	ease-in-out	スムーズな出現
ページトランジション	300ms	ease-in-out	画面全体の切り替え
ドロワー・サイドパネル開閉	250ms	ease-in-out	スムーズなスライド
スケルトンローディング	1500ms	linear (loop)	継続的なパルス
3D カメラ移動	500ms	ease-in-out	自然なカメラワーク

4.3 禁止事項

width, height, margin, padding, top, left 等の レイアウトプロパティのアニメーション（リフロー発生）
box-shadow のアニメーション（GPU 非対応）
blur を頻繁にアニメーションすること（パフォーマンス劣化）
長時間アニメーション（200ms 超、ただしページトランジションを除く）
prefers-reduced-motion を無視したアニメーション（アクセシビリティ違反）

4.4 アクセシビリティ対応

@media (prefers-reduced-motion: reduce) {
  /* duration を最小化し、position-based animation のみ残す */
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

5. 3D ビューポート UI Guidelines

5.1 概要

3D ビューポートはプロダクトの中核機能であり、「本物の部屋の中にいるような没入感」を提供する。UI オーバーレイは 3D 空間の邪魔をしない設計を徹底する。

5.2 オーバーレイデザイン原則

半透明オーバーレイ: UI パネル・コントロールは backdrop-blur + 半透明背景（rgba(250,250,247,0.85) or ダークモードで rgba(26,29,26,0.85)）を使用する
最小化の原則: 操作に必要な UI のみを表示し、使用頻度が低い機能はメニューやドロワーに格納する
エッジへの配置: コントロール UI は画面端に配置し、3D 空間の中心部を遮らない

5.3 家具ハイライト仕様

状態	表現方法	詳細
非選択	デフォルト表示	ハイライトなし
ホバー	アウトライン（細）	1px アウトライン、カラー: `#C8956C`（テラコッタ）、透明度 70%
選択中	アウトライン（太）	2px アウトライン、カラー: `#C8956C`（テラコッタ）、透明度 100%
複数選択	アウトライン（点線）	2px 点線アウトライン、カラー: `#5B8A72`（セージグリーン）

禁止: 選択状態を塗りつぶし・色変更で表現すること（家具の見た目が変わり商品確認ができなくなる）

5.4 グリッドヘルパー

デフォルト: 非表示（OFF）
表示時: 薄いグレー（#D4D0C8、opacity 30%）で 50cm グリッド
壁紙・床材と視覚的に干渉しない色で表示する

5.5 寸法表示

デフォルト: 非表示
家具選択時 + 寸法表示トグル ON のみ表示
フォント: Montserrat 500、12px、テラコッタ（#C8956C）
背景: 半透明白（rgba(255,255,255,0.9)）、角丸 4px

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

デバイス	レイアウト
モバイル（< 768px）	3D ビュー全画面 + 下部家具パネル（ボトムシート、高さ 40vh）
タブレット（768px - 1023px）	3D ビュー左 70% + 右サイドパネル 30%
デスクトップ（1024px+）	左ツールバー 56px + 3D ビュー中央 + 右家具パネル 320px

5.7 ローディング状態

3D モデルロード中: プログレスバー（テラコッタ）+ 家具シルエットプレースホルダー
空の部屋: 「家具を配置しましょう」イラスト付きガイド + CTA ボタン
目標: 2 秒以内 / モデル（Progressive Loading）

6. Anti-Patterns（禁止事項）

以下は RoomCraft で絶対に使用しないデザインパターン。

6.1 フォント

禁止フォント	理由
Inter	AI スロップの典型、個性がない
Roboto	AI スロップの典型、個性がない
Arial	ジェネリックすぎる
Space Grotesk	AI 生成 UI の典型

6.2 カラー・視覚効果

禁止パターン	理由
紫グラデーション on 白背景	AI slop の象徴
ネオン・グロー効果	インテリアの雰囲気と相反する
過剰なドロップシャドウ	安っぽい印象
高彩度の青系モノトーン配色	テック感が強く、暮らしの温かみと不一致
`backdrop-blur` の多用	パフォーマンス劣化の原因

6.3 レイアウト

禁止パターン	理由
予測可能な cookie-cutter レイアウト	差別化不足
ダークモード一辺倒のデザイン	インテリアアプリに不適（暮らしの温かみが失われる）
3D ビュー内の不透明 UI パネル	没入感を損なう
家具の塗りつぶしハイライト	商品の実際の色・質感が確認できなくなる

6.4 アニメーション

禁止パターン	理由
レイアウトプロパティのアニメーション	リフロー発生、パフォーマンス劣化
200ms 超のインタラクションアニメーション	操作の即応性が失われる
`prefers-reduced-motion` 無視	WCAG AA 違反

7. Layout Patterns

7.1 消費者向け画面

グローバルナビゲーション

[ロゴ: Playfair Display]  [カテゴリ] [ブランド] [インスピレーション]  [検索] [お気に入り] [カート] [マイページ]

背景: #FAFAF7（オフホワイト）
ボーダーボトム: 1px solid #D4D0C8
スクロール時: 背景白 + box-shadow: 0 2px 8px rgba(44,62,45,0.06) に変化

ヒーローセクション

フルブラウザ幅（100vw）、高さ 100svh 以下
3D シミュレーターへの導線を前面に配置
テキストはプライマリカラー（#2C3E2D）、背景はオフホワイト（#FAFAF7）

商品一覧グリッド

デバイス	カラム数	ギャップ
モバイル	2	12px
タブレット	3	16px
デスクトップ	4	24px
ワイドスクリーン	5	24px

フィルター + 一覧レイアウト（デスクトップ）

[左フィルターパネル 240px] | [商品グリッド メイン]

商品詳細ページ

[画像ギャラリー / 3D ビュー 60%] | [商品情報・購入パネル 40%]

7.2 メーカー管理画面向け

ダッシュボードレイアウト

[左サイドナビ 240px（折りたたみ可）] | [メインコンテンツエリア]

サイドナビ: プライマリカラー（#2C3E2D）背景、白テキスト
メインエリア: オフホワイト（#FAFAF7）背景

データ密度の管理

テーブルセルパディング: 12px 16px（余白を確保しつつ情報密度を維持）
テーブル行の交互背景: #FAFAF7（奇数）/ #F5F0E8（偶数）で可読性向上
グラフ・チャートは Earth tone カラー（プライマリ・セージグリーン・テラコッタ・アンバー）で統一

商品サムネイル

正方形固定（aspect-ratio: 1/1）
サイズ: 56px（テーブル内）/ 120px（カード内）
object-fit: cover

モバイル対応

機能	モバイル対応
売上・通知確認	対応（読み取り専用）
商品ステータス確認	対応（読み取り専用）
商品登録・編集	非対応（デスクトップ推奨ダイアログを表示）
グラフ・分析	タブレット以上

8. アクセシビリティ

フォーカスインジケーター: 常時表示、2px solid #C8956C（テラコッタ）、offset 2px
すべてのインタラクティブ要素に aria-label または意味のある可視テキストを付与する
3D ビューポート内の家具には role="button" と aria-label="[商品名]を選択" を付与する
3D 操作はキーボード（矢印キー + Enter）でも可能にする
最小タッチターゲット: 44px × 44px

9. 参照ドキュメント

design-requirements.md - Phase 1 デザイン要件
design-system.yml - デザイントークン定義
component-specs/ - コンポーネント詳細仕様

Generated by CCAGI SDK v3.14.4 - Phase 2: Design