RoomCraft — v1.0.0 — 2026-03-19
version: "1.0.0"
generated_at: "2026-03-19T00:00:00Z"
source: "docs/requirements/design-requirements.md"
project: "RoomCraft"
aesthetic:
direction: organic-natural
mood: elegant
differentiation: "「部屋の中にいるような没入感」と「ショッピングの楽しさ」の融合。自然光が差し込む温かみある空間演出。"
references:
- name: "LOWYA"
url: "https://www.low-ya.com"
point: "家具EC、商品見せ方、カテゴリ構成"
- name: "RoomClip"
url: "https://roomclip.jp"
point: "コミュニティUI、投稿レイアウト"
- name: "Houzz"
url: "https://www.houzz.com"
point: "3Dビューア、メーカーストア構成"
- name: "Pinterest"
url: "https://www.pinterest.com"
point: "ビジュアル検索UI、グリッドレイアウト"
- name: "IKEA Place"
point: "AR家具配置、3D操作UX"
colors:
primary: "#2C3E2D" # ディープフォレスト - 自然・信頼
secondary: "#F5F0E8" # ウォームアイボリー - 温かみ
accent: "#C8956C" # テラコッタ - 温かいCTA
accent_secondary: "#5B8A72" # セージグリーン - サブアクション
muted: "#D4D0C8" # サンドベージュ
background:
light: "#FAFAF7" # オフホワイト - 目に優しい
dark: "#1A1D1A" # ダークモス - ダークモード
text:
primary: "#1C1C1C" # チャコール
secondary: "#8A8A80" # ウォームグレー
semantic:
success: "#5B8A72" # グリーン
error: "#C45C4A" # テラコッタレッド
warning: "#D4A843" # アンバー
overlay:
3d_ui: "rgba(26, 29, 26, 0.7)" # 3Dビューポート上のUIオーバーレイ
typography:
heading:
family: "Playfair Display"
fallback: "Georgia, serif"
weights: [600, 700]
sizes:
h1: "2.5rem"
h2: "2rem"
subheading:
family: "Montserrat"
fallback: "Trebuchet MS, sans-serif"
weights: [500, 600]
sizes:
h3: "1.5rem"
h4: "1.25rem"
button: "0.875rem"
price: "inherit"
body:
family: "Noto Sans JP"
fallback: "Hiragino Kaku Gothic ProN, Meiryo, sans-serif"
weights: [400, 500]
sizes:
regular: "1rem"
large: "1.125rem"
caption: "0.875rem"
forbidden:
- "Inter"
- "Roboto"
- "Arial"
- "Space Grotesk"
spacing:
unit: "8px"
scale:
xs: "4px"
sm: "8px"
md: "16px"
lg: "24px"
xl: "32px"
2xl: "48px"
3xl: "64px"
4xl: "96px"
borders:
radius:
none: "0px"
sm: "4px"
md: "8px"
lg: "12px"
xl: "16px"
full: "9999px"
width:
thin: "1px"
medium: "2px"
thick: "4px"
color:
default: "#D4D0C8" # サンドベージュ
shadows:
button: "0 1px 2px rgba(44, 62, 45, 0.06)"
card: "0 2px 8px rgba(44, 62, 45, 0.08)"
product_card: "0 4px 12px rgba(44, 62, 45, 0.06)"
modal: "0 16px 48px rgba(0, 0, 0, 0.12)"
input: "none"
viewport_3d: "none"
components:
library: "shadcn/ui"
styling: "tailwind"
animation: "motion/react"
icons: "lucide-react"
rendering_3d:
core: "three.js"
framework: "react-three-fiber"
helpers: "@react-three/drei"
webgl_version: "2.0"
model_format: "glTF/GLB"
special:
floor_plan_editor:
library: "konva.js"
fallback: "Canvas API"
color_picker: "Radix Color Picker"
slider: "shadcn/ui Slider"
animation:
duration_max: "200ms"
easing_default: "ease-out"
allowed_properties:
- "transform"
- "opacity"
forbidden_properties:
- "width"
- "height"
- "top"
- "left"
- "margin"
- "padding"
responsive:
mobile_first: true
breakpoints:
base: "375px"
sm: "640px"
md: "768px"
lg: "1024px"
xl: "1280px"
2xl: "1536px"
safe_area: true
touch_target_min: "44px"
viewport_3d:
mobile: "full-screen + bottom-sheet"
tablet: "70% 3D view + 30% side panel"
desktop: "center 3D view + left toolbar + right furniture panel"
admin:
mobile: "read-only (notifications and sales only)"
tablet: "major operations"
desktop: "full features"
quality:
lighthouse:
performance: 90
performance_3d_view: 80
accessibility: 100
best_practices: 100
seo: 100
core_web_vitals:
fcp: "< 1.8s"
lcp: "< 2.5s"
cls: "< 0.1"
model_load: "< 2s per model (Progressive Loading)"
wcag_level: "AA"
contrast_ratio:
body_text: "4.5:1"
large_text_ui: "3:1"
dark_mode: true
browsers:
chrome: "latest 2 versions"
firefox: "latest 2 versions"
safari: "latest 2 versions"
edge: "latest 2 versions"
ios_safari: "iOS 16+"
android_chrome: "latest"
webgl: "2.0 required"