設計の土台を固めるカレンダーと取引モデル
視覚設計で伝わる年の流れ
色と符号のルールづけ
入金 は 穏やかな 緑系 出金 は 目立つ 赤系 とし 色覚多様性 へ 配慮 した コントラスト を 確保。ゼロ 予算超過 警告 は アクセント で 表現し 伝えたい 優先度 を 可視化。凡例 ツールチップ 説明テキスト を 一貫させ 新規ユーザー でも 学習 コスト を 抑えられる 体験 を 提供します。
ヒートマップとミニカレンダー
日別 セル に 強弱 を つけ 高額 の 流入 流出 が 起きた 日を 一目で 把握。四半期 の 各月 を タイル化 し 祝日明け 月末 月初 の パターン を 並置 比較 します。クリック で 詳細 に ドリルし 背景要因 を 紐解く 物語的 な 導線 を 用意します。
ドリルスルーとツールチップ設計
ホバー で 前年同日 値 予算 値 メモ を 迅速 に 確認。クリック で 仕訳 明細 まで ドリルスルー し 取引先 案件 科目 を 立体的 に 理解。過度な 装飾 を 排し 情報 の 密度 と 可読性 を 両立させ 現場 の 質問 に その場で 答えられる 構造 を 実現します。
計算ロジックで信頼を積み上げる
期首残高と累積の扱い
期首残高 は 前年 期末 の 承認済み 値 を ソース とし 変更 履歴 を 保存。日次 の 累積 は 積み上げ 計算 か 窓関数 で 実装し 欠損日 も カレンダー と 左結合 して 欠番 を なくします。通貨 換算 と 税区分 の 影響 も 早期 に 反映します。
年間比較と前年同月比
同一 週番号 同一 営業日 同一 曜日 など 比較軸 を 明確化 し ノイズ を 排除。前年同月比 前年同週比 予算比 を 併記 し 異常 の 検出力 を 向上。スライサー は 年 会計期 四半期 を 用意し 切替 の 文脈 を 失わない よう ガイド します。
