HA Dashboard Design

HA ダッシュボードのデザイン

Home Assistant 用の、コピー＆ペーストですぐに使えるダッシュボードデザインです。スタイルを選び、必要なブロックをコピーしてください。

前提条件（HACS 経由でインストール）

• card-mod - 任意のカードに CSS スタイルを適用
• button-card - 自由にカスタマイズできるボタンカード
• mini-graph-card - 見やすいグラフ（任意）
• mushroom - モダンなカード一式（任意。一部のスタイルで使用）

利用可能なスタイル

スタイル	雰囲気	おすすめの用途
glassmorphism	すりガラス、奥行き、ぼかし	暗い壁紙の背景
dark-minimal	純粋な黒、すっきりしたタイポグラフィ	集中、生産性
material-you	Google Material 3、ダイナミックカラー	モダンで親しみやすいデザイン
nordic	明るく、軽やかな北欧風	明るい部屋、日中の使用
neon-cyberpunk	発光効果、鮮やかなネオン	ナイトモード、インパクト重視
warm-home	琥珀色／オレンジ、居心地のよさ	リビング、夕方
soft-pastel	柔らかなピンク、ライラック、ミント	親しみやすい、家族向けの住まい
luxury-gold	深いネイビーにゴールドのアクセント	高級感、洗練された雰囲気
retro-terminal	緑色の蛍光表示、等幅フォント	ギークな美学

使い方

1. 選んだスタイルのリファレンスファイルを読みます
2. テーマ YAML をコピーし、config/themes/your-style.yaml に貼り付けます
3. card-mod のグローバルスタイル をコピーし、ダッシュボードのリソースに貼り付けます
4. 個々の カードブロック をコピーし、ダッシュボードの YAML に直接貼り付けます
5. エンティティ ID を、ご利用の環境に合わせて調整します

クイックスタート - すべてのスタイル

# configuration.yaml - enable themes folder
frontend:
  themes: !include_dir_merge_named themes/

# Activate theme in dashboard
theme: your-theme-name

画像生成

各スタイルに合わせた背景画像やダッシュボードのモックアップ画像を生成するには、 references/image-prompts.md を参照してください。すべてのスタイル向けに、Midjourney、 DALL-E 3、Stable Diffusion、Flux ですぐに使えるプロンプトが記載されています。

リファレンスファイル

リクエストされたスタイルのファイルだけを読みます。

• references/glassmorphism.md
• references/dark-minimal.md
• references/material-you.md
• references/nordic.md
• references/neon-cyberpunk.md
• references/warm-home.md
• references/soft-pastel.md
• references/luxury-gold.md
• references/retro-terminal.md
• references/image-prompts.md - 背景やモックアップ用の画像生成プロンプト

すべてのスタイルで扱うカードの種類

各リファレンスファイルには、コピー＆ペーストできる以下のブロックが含まれています。

• センサー表示 - 温度、湿度、電力の測定値
• メディアプレーヤー - Spotify、テレビ、スピーカーの操作
• 空調／サーモスタット - 視覚的なフィードバック付きの温度調整
• セキュリティ／アラーム - 警戒設定／解除、ドア／窓センサー
• カメラ - オーバーレイ付きのライブ映像
• ボタングリッド - シーン／照明／デバイスのショートカット
• 天気 - 現在の天気と予報の表示
• エネルギー - 電力消費、太陽光発電、電力網
• 照明操作 - オン／オフ、明るさ、色温度のスライダー
• 在室状況 - 人物／デバイスのトラッカーカード
• カレンダー／予定 - 今後のイベント
• 統計／グラフ - センサー履歴、ミニグラフ
• ヘッダー／ナビゲーション - ページタイトル、部屋のナビゲーション
• アラートバナー - 通知、警告、ステータス

ダッシュボードの種類

常に masonry を既定にしてください。すべての HA バージョンで動作し、設定も不要です。

# Safe default - works everywhere
views:
  - title: Home
    type: masonry   # ← default, always works
    cards:
      - ...

type: sections（HA 2024.6 以降のグリッドレイアウト）は、ユーザーの HA バージョンが対応していない場合や、ビューの構造が正しくない場合に、ページが空白になることがあります。ユーザーから明示的に希望された場合、または HA 2024.6 以降を使用していると確認できた場合に限り、提案してください。

出力前のチェックリスト

• ユーザーが Sections を明示的に希望していない限り、ダッシュボードで type: masonry を使用している
• 正しいファイル名のテーマ YAML が含まれている
• card-mod のスタイルが正しい YAML 構造で記述されている
• すべてのエンティティ ID がプレースホルダーとして示されている（例：sensor.YOUR_TEMPERATURE）
• 出力の冒頭に HACS の依存関係が記載されている
• 認証情報やシークレットがハードコードされていない

連携

組み合わせて使えるもの：

• ha-yaml スキル - ダッシュボードの操作に応答するオートメーション用
• api-catalog スキル - ダッシュボードに表示するセンサーデータ用