MASTER DEVELOPMENT SPECIFICATION & DESIGN SYSTEM

Dev Blueprint 2.0

Creative Engineering & Visual Technology — 公式プロフェッショナル開発標準指示書
CUEVANCEの公式Webサイトおよび全現場ツール（cuevance.app 等）に適用される、ビジョン、デザインシステム、CSSトークン定義、アクセシビリティ規約、プログラム設計標準の完全仕様です。

Version 2.0.0 適用対象: All CUEVANCE Web & Tool Projects 制定: 2026年

💎 CUEVANCE 開発標準の核心（TL;DR）

圧倒的な現場実用性（Engineering Utility）と近未来美学の融合: 現場のタイパを高めるゼロ秒計算と、洗練されたグラスモーフィズムUIを両立。
ゼロ依存（Zero Runtime Dependencies）: 余計なフレームワークに依存せず、Pure Web標準のみで構築。10年後でも軽快に動く長期的信頼性を担保。
WCAG 2.1 AAA 厳格準拠: 暗所オペ卓でも屋外でも数字を絶対に誤読させないハイコントラスト設計。

01. ビジョン & 基本理念 (Core Philosophy)

CUEVANCE が目指すアプリケーション開発は、「圧倒的な現場実用性（Engineering Utility）」 と 「洗練された近未来デザイン（Aesthetic Sophistication）」 の高次元での融合です。

1. 現場主義 (Field-Ready & Offline-First):
電波の届かない現場（展示会場・地下スタジオ・コンサートホール等）でも、単体ファイルまたはPWAで即座に動作する堅牢性。ゼロ依存（Zero Runtime Dependencies）または最小限の最新軽量アーキテクチャ。

2. 美学と可読性の両立 (Liquid UI & Universal Accessibility):
ブランドの世界観を象徴する「Cyber Neon」と「Warm Studio」のデュアル/トリプルテーマ。どんな環境下でも数値を誤読させない WCAG 2.1 AA/AAA 準拠のコントラスト。

3. 最新Web標準のマッチアップ (Modern Web Standards):
最新のブラウザ機能・CSS仕様・JavaScript APIを積極的に取り入れ、常に高速・軽快で斬新なUXを提供。

02. ブランドデザイン & テーマシステム (Design System)

利用シーンに応じた3大公式テーマ（Cyber / NEON / STUDIO）を標準搭載します。

テーマ	対象シーン	基調色 & アクセント	質感・エフェクト
🌌 NEON Dark Spatial Liquid	暗所現場・オペレーション卓	ディープネイビー (`#080c1a`) シアン / エメラルド / 紫	多層発光ガラス, ネオングロー, オーブライト
☀️ STUDIO Light Organic Glass	営業提案・オフィス・日中環境	温かみのあるオフホワイト (`#e8e2d5`) ディープティール / 緑	白光彩スプリット, 上質フロストグラス
⚡ Cyber Hyper Neon Matrix	サイバー・空間演出・高彩度	深淵のブラック (`#030308`) ネオンピンク / シアン / 黄	高光沢グラス, ボーダービーム

タイポグラフィ・スケール & 等幅数値

公式ロゴタイプ: Audiowide (Google Fonts) — letter-spacing: 0.14em;
見出しフォント: Kosugi & Noto Sans SC (簡体字)
本文・UIフォント: Inter, system-ui, sans-serif
数値・テレメトリ: JetBrains Mono — font-variant-numeric: tabular-nums;（数値の桁揺れを防止）

03. アクセシビリティ & コントラスト厳格原則 (WCAG AAA)

現場での数値誤読は、機材破損や安全事故に直結します。CUEVANCEでは以下の厳格なコントラストルールを全コンポーネントに義務付けています：

WCAG 2.1 AA/AAA 基準: 通常文字は 4.5:1 以上、重要数値・重要ラベルは 7.0:1 (AAA) 以上を維持。
STUDIO（ライトモード）での背景連動: 濃いティール/緑背景（#0d9488 等）には必ず白文字（#ffffff）を適用。薄い背景（rgba(13, 148, 136, 0.12)）には濃色文字を指定。
Cyber Neon（ダークモード）での発光体: シアンやエメラルドのベタ塗り背景には暗色文字（#020617）を適用し、眩しさによる白飛びを防止。

04. レスポンシブ設計 & モバイル最適化原則

現場スタッフは、デスクトップPC、iPad、片手持ちのスマートフォンなど多様なデバイスで作業します：

PCデスクトップ基準スタイルの保護: デスクトップのプロフェッショナル配置は直接縮小せず、@media (max-width: 768px) 内で安全にオーバーライド。
最小タッチターゲット 44px × 44px: 手袋や現場作業中でも押し間違えないボタン・チップサイズ。
iOS Safari 自動ズーム防止: 入力フォームのフォントサイズはモバイル時 16px を維持。
ドラッグ領域とスクロールの分離: スライダーやキャンバス操作時に画面が誤スクロールしないよう touch-action: pan-y を適切に制御。
iPhone セーフエリア対応: ホームバーにUIが被らない env(safe-area-inset-bottom) の余白設計。

05. アーキテクチャ & プログラム設計標準

Zero Runtime Dependencies（ゼロ依存アーキテクチャ）:

外部フレームワーク（React / Vue / Angular 等）のバージョン互換崩れや重厚なランタイムロードを排除し、モダン標準の Vanilla JavaScript（ES6+） のみで設計。単一HTMLファイル（file:///）としても、PWAとしても、エッジCDN上でも寸分違わず軽快に動作します。

機能領域	採用モダン技術	現場における設計メリット
グラフィックス	SVG / Canvas 2D	LEDスクリーン比率やセーフエリアをベクターで滑らかにプレビュー
オフライン / PWA	Service Worker / Manifest	ローカルプリキャッシュによる圏外稼働・全画面インストール
データ共有	URLSearchParams / Clipboard API	計算パラメーターをURLにエンコードし、チーム間で1秒共有
アニメーション	CSS GPU Acceleration / RAF	60fps/120fpsの滑らかなグラスモーフィズムとスムーズな操作感

06. 運用・多言語・開発プロトコル

多言語（i18n）標準搭載: 日本語（JA）、英語（EN）、中国語（CN）の3言語を標準サポート。辞書オブジェクトにより即時切り替え。
クライアントサイド完結（プライバシー保護）: 入力された現場パラメータや計算結果はすべてブラウザ内部で完結。サーバーへ送信・保存しない。
デプロイ前の明示的確認ルール: リモート環境やCloudflare/Vercel等への本番デプロイ時は、必ず開発者・ユーザーの明示的確認を経て実行するガバナンスを徹底。