i-Power Engine ／ Wireframes v2.0

トンマナv1.0で
緻密に作り直したワイヤーフレーム

House Palette 4ロール × Pattern D デュアルトーン × 詩的・感謝調のCCO仕様で、オンボ7 + メイン13 + モーダル3 = 計23画面のフルスコープを作り直しました。情緒〜機能〜実務〜設定の役割色グラデーションを5タブで構造化、朝/夜2モードで時間帯演出も実装。本ドキュメントが本実装フェーズ（β=2027/3 / Beyonds着手）への正本となります。

Screens
23画面
Tabs
5タブ
Roles
4色
タブ・ホーム Coral
タブ・レポート Twilight
タブ・くらし Mint
タブ・機器 Mustard
タブ・メニュー Ink
▶ Demo Mode

アプリをそのまま体験

オンボーディングからホーム画面、ご家庭のエネルギー管理まで、
実際の i-Power Engine がどう動くかを23画面のライブデモで歩いてみてください。

▶ デモを開始する オンボーディングから歩く（推奨） ⌂ ホームから始める 既存ユーザー視点
▦ 各画面の右上に「デモナビゲーター」があります。23画面いつでも自由に切り替えできます。
01 ／ Screens

14画面 ・ フルサイズワイヤー

オンボ 7 + メイン 7 ／ 横スクロールで全画面比較・ライブ描画
SC-001 ようこそ STEP 1/7
主役 家画像 + 詩的タイトル「あなたの家のエネルギーを、賢く動かす。」+ 暖色グラデ背景
単独で開く →
SC-002 QR読込 STEP 2/7
演出 ダーク背景でカメラUI ／ 4隅Coral コーナーマーカー ／ scan線アニメ ／ 手動入力代替リンク
単独で開く →
SC-003 新規登録/ログイン STEP 3/7
構成 新規/ログイン pillタブ切替 ／ メール+パスワード入力 ／ 同意チェック ／ Apple/Google SNS代替
単独で開く →
SC-004 SMS/メール認証 STEP 4/7
構成 6桁OTP（filledデモ） ／ 残り時間タイマー pulse ／ ヒントカード ／ 再送信リンク
単独で開く →
SC-005 機器ペアリング STEP 5/7
演出 radarPing ／ 4機器リスト（3接続済✓ / 1探索中scan線） ／ ECHONET Lite + Wi-SUN 表記
単独で開く →
SC-005B Bルート連携 STEP 6/7
構成 3分岐選択カード（直接入力=おすすめ Coral ／ 代理申請 Mustard ／ あとで Ink）+ 「おすすめ」バッジ
単独で開く →
SC-006 初めての到達 STEP 7/7
演出 祝福radial光 + 紙吹雪 + ✓バッジpopアニメ + 家画像 + 4機器接続済chip
単独で開く →
SC-101 ホーム ／ 朝 07:24 ／ Coral active
主役 Mustard 帯「太陽が今月働いてくれた金額」 ¥4,820 ／ Coral pillで「¥4,180 家計に残った」
ピン階層 家=親レイヤー（白ソリッド+coral border+halo）／ 太陽光・蓄電池・系統=子レイヤー（半透明ガラス）
整合 家全体 2.0 kW ＝ 太陽光 1.4 + 蓄電池 0.6 + 系統 0.0（合計整合）
単独で開く →
SC-105 ホーム ／ 夜 22:14 ／ 夜モード
主役 Mint 帯（夜は蓄電池が主役）「蓄電池が今日、家を支えてくれた金額」¥620 ／ pill で月累計¥4,820
演出 9段階空グラデで 境界曖昧化 ／ 家画像CSSフィルタ夜化（brightness 0.5 / hue-rotate 200deg）／ 星7つtwinkle
明日 明日のスケジュール帯はMustardに切替（夜→翌朝の太陽への期待）
単独で開く →
SC-103err ホーム ／ 異常検知 14:08 ／ Alert
主役 Alert帯「いまは太陽光と系統で家を動かしています」／ 通信断で蓄電池ピンが点滅 / 自動復旧 3/5回目
演出 最上部に Coral警告バナー（pulse）／ 雲多めグレー寄り背景 / 家画像 saturate(0.65) で覇気を抑える
配慮 「ハチドリが遠隔監視中」で不安を煽らない。生活への影響なしを明示
単独で開く →
SC-801 アラート詳細 14:08 ／ Alert
主役 Alert帯「3分間 通信断」+ 自動復旧プログレスバー（3/5回目）/ 推定復旧 2分以内
構成 タイムライン（5イベント）/ ハチドリの3アクション / ユーザー任意3ステップ / サポートCTA
配慮 「無理に触らなくて大丈夫」の安心メッセージ / Mint帯で「ハチドリがやっていること」を可視化
単独で開く →
SC-301 くらし ／ 物語 5月 ／ Mint active
主役 Mint帯「あなたが今月、まちに分けた電気」28.4 kWh ／ 「1%は微力かもしれないけど、無力じゃない」
物語 4コマ生活シーン（朝コーヒー→昼太陽光→夕蓄電バトン→夜守り）／ 季節ヒント3つ ／ SNSシェアCTA
役割 情緒側の極。レポートの「数字」と対比する「物語」の場所
単独で開く →
SC-201 レポート ／ 数字 5月 ／ Twilight active
主役 Mustard帯「太陽が今月働いてくれた金額」¥4,820 ／ Before/Afterバー（通常¥18,000 vs 今月¥4,820）
グラフ 12ヶ月折れ線（mustard→coral グラデarea）／ 30日電源構成絶対量スタック ／ 過去月アーカイブ
役割 機能美の極。ApexChartsで4種類のチャート、データ密度MAX
単独で開く →
SC-401 機器 ／ 一覧 入口 ／ Mustard active
構成 4機器を縦リスト ／ 太陽光(Mustard)・蓄電池(Mint)・エコキュート(Coral)・EV(Twilight)
遷移 蓄電池タップで詳細へ（device-battery-v1.html）／ EV未接続は opacity 0.62
サマリ 上部に横スクロールチップで4機器の状態を瞬時把握
単独で開く →
SC-402 機器 ／ 蓄電池詳細 詳細 ／ Mustard active
主役 Mint帯「蓄電池の状態」／ SoCラジアルゲージ 68% ／ 充電速度+1.2kW・満充電まで2時間半
グラフ 24時間充放電（線→0方向グラデ）／ 充電 mint上向き／ 放電 coral下向き
情報 スペック表（i-Power 9.8 / 9.8 kWh / サイクル 312/6,000）／ 通信ステータス pulse
単独で開く →
SC-403 機器 ／ 太陽光詳細 12:30 ／ 発電中
主役 Mustard帯「いまの発電量 4.5 kW」+ 24h 実績/予測グラフ + 累計（今日18.4kWh / 今月552kWh）
パネル Twilight帯 / 12枚のソーラーパネル grid 表示 / 「12/12 正常」緑pulse
単独で開く →
SC-404 機器 ／ エコキュート詳細 14:30 ／ 待機中
主役 Coral帯「タンクのお湯 90%（333ℓ）」+ ラジアルゲージ + 残時間 6〜8時間
スケジュール 24時間タイムラインバー / 深夜沸き上げ + 夕方追加 / 「今」位置インジケータ
単独で開く →
SC-103 明日のスケジュール詳細 22:14 ／ AI予測
主役 Mint帯「予測自給率 94%」+ 24h 電力フロー積み上げ予測 + 発電22/消費15/売電7 kWh
提案 Coral帯 / 3つのAI提案リスト（食洗機/洗濯機/蓄電放電）+ 合計節約 ¥350
天気 Mustard帯 / 4時間帯（6/12/18/24時）の気温・天気アイコン
単独で開く →
SC-501 自動制御設定 9:18 ／ AIモード
主役 Mustard帯 / 3モード切替（自動 active / 提案 / 手動）+ 説明カード
優先度 Coral帯 / 節約60% / 快適30% / 環境10% を3色グラデバーで配分表示
ルール Mint帯 / 4ルール（太陽光連動/蓄電池自動/エコキュート最適/売電制御）+ トグル / Twilight帯通知設定
単独で開く →
SC-601 モーダル ／ 提案承認 22:14 ／ Coral帯
主役 ホームの「承認する」CTAの先 / Coral帯「i-Power AI からの提案」+ 食洗機×太陽光ピーク提案
構成 対象/時刻/運転 詳細 + Mustard期待効果（¥120/100%）+ Mint根拠カード
単独で開く →
SC-602 モーダル ／ 自動実行切替 7:24 ／ Mint帯
主役 10日連続承認の学習結果 / Mint帯「今後はAIに任せませんか？」+ 連続バッジ + 統計
配慮 「3日連続見送れば自動で提案モードに戻る」逃げ道を明示して安心感
単独で開く →
SC-603 モーダル ／ 機器手動制御 14:30 ／ Mustard+Alert
主役 蓄電池 強制放電などの破壊的操作確認 / Mustard帯（実機械）+ 操作対象カード
警告 Alert帯「この操作で起きること」4項目 + Mint「通常はAIに任せることを推奨」推奨バー
単独で開く →
SC-MENU メニュー ／ 管理 設定 ／ Ink active
構成 プロフィールカード+5セクション（契約Coral/AI Mustard/機器Mint/通知Twilight/アカウントInk）
バッジ 未読「2件」coral pill ／ 「更新」mustard pill ／ 状態 透明pill
役割 実務側の極。Ink active で感情から距離を置く中立色
単独で開く →
02 ／ Specification

画面別仕様一覧

タブ色／カード帯色／コピー調／用途を1行で対比
SC ID 画面 タブ Active 主役カード帯 主要数字 コピー調 主用途
SC-001 ようこそ —（オンボ） — 「賢く動かす」 詩的・宣言 アプリ初回起動・世界観建立
SC-002 QR読込 —（オンボ） — — 機能ガイド 本体識別・カメラスキャン
SC-003 新規登録/ログイン —（オンボ） — — 機能ガイド アカウント作成 / 60秒登録
SC-004 SMS/メール認証 —（オンボ） — 6桁コード 機能ガイド メール検証・本人確認
SC-005 機器ペアリング —（オンボ） — 3 / 4 機器 機能ガイド ECHONET Lite機器発見
SC-005B Bルート連携 —（オンボ） — 3 分岐 機能ガイド スマートメーター連携
SC-006 初めての到達 —（オンボ） — 4 機器接続済 詩的・祝福 オンボ完了・ホーム到達
SC-101 ホーム（朝） Coral Mustard ¥4,820 / 太陽が働いた 詩的・感謝 リアルタイム家状態
SC-105 ホーム（夜） Coral Mint ¥620 / 蓄電池が支えた 詩的・感謝（夜） 夜の家状態
SC-103err ホーム（異常検知） Coral Alert 71% 自給率（蓄電池断） 配慮・安心 機器通信断・自動復旧
SC-801 アラート詳細 Coral Alert 3分間 / 3-5回試行 配慮・安心 タイムライン・ハチドリのアクション・任意ヒント
SC-301 くらし Mint Mint 28.4 kWh まちに分けた 物語・俳句 月の歩み・物語
SC-201 レポート Twilight Mustard ¥4,820 月累計節約 簡潔・データ 数字とグラフで分析
SC-401 機器（一覧） Mustard — 4 機器 機能ラベル 機器の状態ナビ
SC-402 機器（蓄電池） Mustard Mint SoC 68% 機能ラベル 蓄電池の技術詳細
SC-601 提案承認モーダル — Coral ¥120 お得 / 100% 提案・誘導 明日のAI提案承認
SC-602 自動実行モーダル — Mint 10日連続 / 42回 学習・進化 AIへの権限委譲
SC-603 手動制御モーダル — Alert 強制放電 / 影響4項目 警告・確認 破壊的操作の確認
SC-MENU メニュー Ink — 5 セクション 機能ラベル 設定・契約・サポート
03 ／ Design System

設計の核

後続デザイナー・実装者がブレないための原則
01
House Palette ／ 4ロール
4色固定運用で全画面の意味的整合を担保。
Coral=家・消費・家計／Mustard=太陽光・発電・感謝／Mint=蓄電池・蓄え・物語／Twilight=外部・分析・知的UI。
系統電力は Twilight ではなくグレー（#ACA29A）に変更（v1.0確定）。
#E8806B
#C99840
#6FB5A0
#3D6A8C
02
Pattern D ／ デュアルトーン
全カードを上下2段構造で統一。
上段=役割色tintのリード帯（アイコン+短文）／下段=白本体（ink黒の大数字）。
border-radius: 24px ／ 大数字 Wt900 / 56px。
☀ 太陽が今月働いてくれた金額
¥ 4,820
03
タイポ ／ Noto Sans JP
Noto Sans JP 単一統一。Wt 400/500/700/800/900 全読込み。
ヒーロー: Wt900 / 56px
見出し: Wt800 / 22px
本文: Wt500 / 12-14px
サブ: Wt500 / 10-11px
04
ピン階層 ／ 親子レイヤー
家=親レイヤー:
白ソリッド+coral 1.5px ボーダー+halo／アイコン28px／値16px

3内訳=子レイヤー:
半透明ガラス／アイコン20px／値12px

位置: 太陽光左上・家全体右上・蓄電池左下・系統右下（家画像の物理位置と一致）
05
ApexCharts ／ 5種
area smooth + 縦グラデ: 12ヶ月推移・CO₂累積・SoC
area 正負2系列・線→0グラデ: 24h充放電
bar borderRadius:5 + end: Before/After
bar 絶対量スタック: 30日電源構成
radialBar: SoC ゲージ
06
朝/夜2モード切替
ホームのみ2モード実装。
朝: 白〜クリームグラデ ／ ピンが白ガラス
夜: 深紺〜夜明けグレー 9段階グラデで境界曖昧化／ 星7つtwinkle ／ 家画像CSSフィルタ夜化（brightness 0.5 / hue-rotate 200deg / saturate 0.6）／ ピンがダークガラス
04 ／ Handoff

実装ハンドオフ

CTO・Beyonds・外部実装ベンダー向け5項目
本ワイヤーフレームから本実装（β=2027/3）への展開時に確定すべき5項目
本書は「設計書」であって「実装書」ではない。Pattern D・カラートークン・ピン階層・タブ動的色・朝夜モード切替の5原則を踏襲した上で、本実装時の技術スタック判断は実装側に委ねる。
  1. レンダリングライブラリ: 全グラフは ApexCharts.js（https://cdn.jsdelivr.net/npm/apexcharts）。React実装時は react-apexcharts ラッパー、Native は別ライブラリ評価可
  2. カラートークン化: CSS変数 --coral-deep 等を tailwind.config または tokens.json に展開。SwiftUI/Flutter移植時もここを正本に
  3. 家画像アセット: 朝・昼・夕・夜の4枚を採用デザイナー or 外注で生成（β実装フェーズで発注）。現状は home-house.png 1枚をCSSフィルタで夜化（暫定）
  4. Pattern D コンポーネント化: Card = CardHead(role-tint band) + CardBody(white) を Atomic Design の organisms として実装
  5. タブ動的色: 5タブのアクティブ色は activeColor[tab] で動的切替（ホーム=Coral / レポート=Twilight / くらし=Mint / 機器=Mustard / メニュー=Ink）