概要

• Home Assistant で家族全員が使いたくなるダッシュボードの作成体験
• オリジナルの イラスト によるフロアプランの採用
• 技術的要件 やアーティストとのやりとりのポイント
• 実装方法 やTV表示の工夫
• 家族の反応と運用の実際

家族が使いたくなるHome Assistantダッシュボードの作り方

• Home Assistant による1年間のスマートホーム自動化体験
  • 家電や散水の自動制御により、手間の削減
  • 例：外出時のエアコン自動OFF、天気連動のスプリンクラー
• それでも 手動操作が必要な場面 の存在
  • 例：ガーデンライトのオン/オフやタイマー延長
  • アプリ操作が面倒で家族が使いたがらない問題
• 物理スイッチ追加 では根本解決しない課題
  • タイマーや複雑な制御はアプリのほうが便利

オリジナルイラストのフロアプラン採用まで

• インタラクティブなフロアプラン 型ダッシュボードのアイデア
  • 3D・ピクセルアートなど複数の表現を調査
  • 3Dは静的画像＋アイコンレイヤーで物足りなさ
  • ピクセルアートは可愛いが、作成や依頼のハードルが高い
• 理想のアーティスト探し の難しさ
  • スタイルや専門性、納期などの調整
  • 技術要件や用途の理解も必要
• 結果的に 理想の環境イラストレーター と出会い、ピクセルアート案から方向転換

アーティストへの依頼内容と技術要件

• アーティストへの 資料パッケージ 作成
  • 家の簡易設計図（家具配置含む）
  • 各部屋の写真
  • 参考イラストや色見本
  • 他ダッシュボード例や技術仕様（ファイル形式・レイヤー分け等）
• 技術要件のポイント
  • 透過PNG（アニメはWebP）、昼夜バージョン、各デバイスごとのレイヤー
  • すべて同じキャンバスサイズ・位置合わせのルール徹底
• ガーデンは3バージョン （昼・夜・夜ライト点灯）を用意
• アニメは最初PNGスプライトシートで依頼→後でWebPへ変換

Home Assistantでのダッシュボード実装

• picture-elementsカード をベースに実装
  • 背景にイラスト、各デバイスや状態をelementsとして重ねる
  • image, icon, state-label, conditionalなどを使い分け
• アニメ切り替えの工夫
  • state_imageでデバイスの状態ごとに静止画・アニメWebPを自動切替
• 昼夜モードの切り替え
  • ヘルパー＋自動化で日の出/日の入りに応じて切替
  • 夜イラストをconditionalで重ねる
• インタラクション
  • タップでmore-infoダイアログ呼び出し
  • 複雑な散水制御はBrowser Modで独自ポップアップを実装
• 画像ファイルの配置
  • /config/wwwに保存し、/localパスで参照

TV表示と複数ビューの工夫

• TVでのダッシュボード表示 を前提に設計
  • LG webOSのブラウザでWebPアニメが動くか事前検証
  • TVブラウザの制約（デフォルトページ設定不可等）を回避
  • HAOS Kiosk Displayアドオン＋HDMI入力で常時表示を実現
• 複数ビュー構成
  • 各階・庭ごとの個別ビュー＋全体をまとめたFullビュー
  • 共通キャンバスのおかげで各パーツの位置合わせが容易
  • Fullビューはvertical-stack＋card-modで重ねて配置
• YAMLモードでの管理
  • 各階の設定をファイル分割し、再利用性・メンテ性向上
  • ビジュアルエディタは使えなくなるが問題なし

家族の反応と運用

• TVでの初披露時の家族の反応
  • 実際の部屋とイラストを見比べて盛り上がる
  • デバイス操作への興味喚起
• 運用パターン
  • 朝夕の数時間TVで自動表示（Home AssistantからTV制御）
  • Kiosk Modeで余計なUIを非表示
• リモコン操作不可だが逆に好都合
  • 観賞用はTV、操作は各自のスマホやPCで
  • 個別ビューはスマホ向き、FullビューはPC向き
• 現状の満足点
  • TVで家全体を俯瞰、細かい操作はアプリで柔軟に対応

まとめ

• イラストによるダッシュボード化 で家族の参加度向上
• 技術要件やアーティストとの連携が成功の鍵
• Home Assistant の柔軟性を活かした運用と拡張性
• 今後の発展（3DやAI活用例増加）も視野に入れた設計