Wireframes / 24 Screens + 10 Patterns / v2.9.1 視覚正本

i-Power Engine ワイヤーフレーム

canvas.md(プロダクト設計キャンバス)の決定事項に基づくβ版(2027/3ローンチ)スマホアプリの全画面ワイヤー。 Energy Yellow + Battery Green アクセント / iPhone 15 Pro 想定 / 5タブ構成。 v2.9.1 では SC-104 夕モードのエネルギーフロー破綻を修正。height:110px の 1 段横フローでは 4 ノードが圧縮されて読めず、aspect-ratio との競合で hero-mock 自体が変形していたため、朝(SC-101)/昼(SC-102) と同じ 3 段構成 + height:160px に統一。さらに「✎ 仮置き」バッジが値表示にかぶる問題に対し、全画面共通で 右下配置・薄色(半透明白背景)化へトーン調整(夜モードでは半透明黒背景)。SC-105 夜モードはテキストプレースホルダーのため構造変更不要・バッジ薄色化のみ適用。

v2.9 では 池田レビュー 2 件を反映F1: メニューバー全画面下部固定統一 — タブバーは position: absolute; bottom: 0 で全 17 画面(オンボ系を除く)下部に固定。モーダル/ダイアログは z-index: 10 の半透明オーバーレイが上に重なり、下層タブバーが透けて見える正しい構造を維持(モーダル自体にタブバーを描かない)。F2: 対比カードの文字量削減・数値主役化 — SC-201 月次レポート Before/After / SC-103 明日のスケジュール / SC-404 AI判断3STEP + 反実仮想キャプション / SC-602 自動実行切替対比 / SC-603 操作内容詳細 の計 6 件で説明テキスト・装飾見出しを撤去し、3 秒で価値が伝わる「数値主役・テキスト最小」へトーン変換。Before/After の左右対比 + 矢印 + 強調表示の構造は維持。v2.8 までの Batch 1-3 内容(Before/After対比 + 反実仮想 + セーフティネットの 3 層構造)と直感的UX原則・6主要数値文法はすべて継続。
最終更新:2026-05-07 / Sprint 1 Day 7 / v2.9.1 SC-104 レイアウト修正(夕モード エネルギーフローを朝/昼と同じ3段構成に統一 + 仮置きバッジ右下・薄色化)
確定 17 画面:SC-101 / 102 / 104 / 105 / 103 / 201 / 301 / 401 / 402 / 403 / 404 / 501 / 601 / 602 / 603 / 701 (8 step化) / 801