docs: 動き・危険色コントラスト・無効表示の規則を追加

docs/COMPETITOR_SGM_2026-10.md

@@ -77,6 +77,55 @@ Auralyn では、システム全体のループバックとアプリ単位のル
 
 実装が終わり実機確認だけが残っていた #28、#73〜#77、#94〜#97、#99、#100 は閉じ、確認を #72 へ移管した。各 Issue に理由と移管先をコメントしている。クローズは実機での合格を意味しない。
 
+## 用途別の表示とウィンドウを設計する（2026-10-28追加）
+
+配信・通話と音楽鑑賞では必要な表示が異なるため、用途ごとに最小サイズ・初期サイズ・最大化時の配置を設計する。配信側は900×600に収めることを必須とせず、必要な操作を置くための拡大を許容する。音楽鑑賞では現行サイズを候補に、小さい構成で成立するか確認する。寸法は未確定である。
+
+### 今回の観察と現在の実装を区別する
+
+SGM 1.0.0の実画面で、配信用と自分用の列、BGM・SEの送信量とモニター量、声用と配信用の別FX段、目的で探せるヘルプメニューを確認した。ASIO入力候補の一覧も確認したが、デバイス選択や音声送出は行っていない。SGMを際限なく縮小できる点と、Auralynの最大化時にVSTが途中までしか見えず余白が目立つ点は利用者の観察であり、こちらでは再現・原因特定していない。
+
+Auralynの確認基準はローカルmain `78d9d70`。#108は実装済み・closed、#109はPR #117で状態帯・固定5段・1行ラックを部分実装、#110はPR #118で設定シートと1440px以上の2列配置を実装してclosed。#111はPR #120で用途追加と取り込み方式の調査まで進んでいる。実機合格とは区別する。上記の説明書調査と過去の比較表は当時の記録として残す。
+
+現在のラック一覧には一定の高さに制限する指定を見つけていない。最大化時の問題は、使用ビルド・表示モード・VST数を固定して再現確認する。プラグイン独自GUIのサイズ制約と、Auralyn側のラック表示は分けて扱う。
+
+### 表示内容を先に決め、寸法を検証する
+
+| 用途 | 優先して見せるもの | サイズの判断 |
+| --- | --- | --- |
+| 配信・通話 | 入出力、送出状態、緊急ミュート、配信用／自分用の経路、メーター、VST | 必要な操作が無理なく成立するなら現行より大きな最小サイズも許容。通話に不要なOBS情報は常設しない |
+| 音楽鑑賞 | 再生音の入力、出力先、音量、VST構成とGUIへの入口 | 配信向け情報を常設せず、900×600を含む小さい構成で操作を確認 |
+
+- 表示用途は初回セットアップの目的から初期値を決めても、その後切り替えられるようにする。かんたん／詳細の情報量とは別に扱い、組み合わせを確認する。表示切替だけでNR・VST・機器・音量・送出・ミュートを変更しない。
+- 用途ごとにサイズ・位置・最大化状態を記憶する。初回や既存の保存値がない場合の初期値を定義し、既存ユーザーの設定を無条件に上書きしない。
+- 用途変更で最小サイズを下回る場合だけ必要な範囲を広げ、小さい用途に戻っても自動で縮めない。小さいモニターや高DPIで表示領域を超える場合は、配置変更・補助情報の折りたたみ・スクロールを併用する。主要操作を画面外へ閉じ込めない。
+- 別モニターへの移動、DPI・解像度変更、最大化解除、再起動後にも、保存位置とサイズを現在の表示領域へ補正する。
+
+### ラックと経路表示の受入条件を追加する
+
+- [ ] 高さを増やすと一度に見えるVSTが増える。空き領域があるのに一覧だけを小さなスクロール領域に制限しない。横幅も用途に応じて活用する。
+- [ ] 空／少数／多数VST、長い名前、通常／詳細表示で、末尾のVST・追加ボタン・GUI・並べ替えへ到達できる。サイズ変更で選択・フォーカス・スクロール位置を不必要に失わない。
+- [ ] モニター分離中は、配信用と自分用の分岐・送り先・処理対象が分かり、各調整がどちらへ作用するかを操作前に確認できる。既存の調整画面へ移動できる。
+- #109で同日に確定した「5段は状態確認と設定への入口」という仕様を維持する。分岐は既存情報の要約と調整先への入口で示し、全調整操作の移設や新規の経路図・ルーティング機能は追加しない。
+- [ ] 停止・未設定・取得不能と正常な経路を区別する。内部の設定状態を、OBS・通話相手への音声到達確認にしない。
+- [ ] 用途別に確定した最小サイズ・初期サイズと、1280×720・1920×1080・2560×1440で確認する。900×600は現行比較と音楽鑑賞側の候補として残し、全用途の固定下限にはしない。表示領域が不足する条件、日英、キーボード、実DPIも含める。
+
+### 既存Issueへ分担し、機能追加を広げない
+
+| 追跡先 | 追加する責任 |
+| --- | --- |
+| #92 | 用途別表示とサイズ方針、以下の分担をロードマップへ反映 |
+| #109（P2・open） | 用途別表示、最小／初期サイズ、保存・復元・切替時のウィンドウ制御、最大化時のラック、分岐経路と調整先。#110の後続をここで追跡 |
+| #110（closedを維持） | 既存実装の履歴を保ち、今回の後続先#109と実機確認#72を明記。過去の合格範囲を広げない |
+| #111（P2・open） | 音楽鑑賞の表示内容と安全な用途切替を#109に合わせる。取り込みエンジンの残件とUIを分ける |
+| #72（open） | Windows実ウィンドウの用途別下限、最大化・復元、モニター移動・DPI、主要操作と多数VSTの確認。実装後に結果を記録 |
+
+表示設計で必要な操作を決めてから寸法を確定し、ウィンドウ制御とラック配置を実装する。#111の音声取り込みエンジンや、音質比較の完了をこのUI設計の前提にしない。
+
+メーター統一は#108の実装と#72の検証を継続し、重複実装しない。BGM・SEプレイヤー、配信ミックス全体へのFX、専用Stream Deckは必須にしない。OBS直接送信は#92のD-03として需要確認後に判断する。SGMのOBSプラグインは公開コードの接続再試行・リング読み取り・読み遅れ対処を確認したが、バイナリ一致・再起動復帰・同期・実音声品質は未検証。コードをそのまま採用できるという判断にはしない。
+
+この追記は計画とIssueの更新であり、製品コード・設定・音声経路は変更していない。上記の受入条件は未完了である。
+
 ## 注意事項
 
 - SGM 本体は再配布・改変不可のため、コードや画像を Auralyn に取り込まない。参考にするのは設計・操作の考え方に限る。OBS プラグインを参考・利用する場合は、GPL-2.0-or-later の条件と出典表示を確認してから行う。

docs/COMPETITOR_STRATEGY_2026-10.md

@@ -4,6 +4,8 @@
 
 同日のIssue再整理で、画面の改善と音楽鑑賞を加え、優先順位と追跡先を変更した。変更内容と、本書にない観点（画面の作り・音楽鑑賞・再生音の取り込み）は[競合比較の補遺](COMPETITOR_SGM_2026-10.md)を参照する。
 
+2026-10-28に[用途別の表示・最小サイズと追加項目](COMPETITOR_SGM_2026-10.md#用途別の表示とウィンドウを設計する2026-10-28追加)を追記した。#109を表示・ウィンドウ制御の追跡先とし、#110はclosedのまま後続を参照、#111は音楽鑑賞側との整合、#72は実機確認を担当する。用途別の寸法は未確定で、製品への実装・実機合格を示すものではない。以下の旧確認日・基準コミット・受入条件は当時の記録として読む。
+
 ## 方針：環境が変わっても準備・比較・復旧できる体験を強化する
 
 Auralynは既存機能を保持し、自宅・ゲーセンの配信と通話を対象にする。差別化の中心は、入力条件に合った確認、同じ録音でのノイズ低減比較、通常設定を守る一時利用、失敗後の復帰である。機能を削ることや、競合の機能数へ追随することを目的にしない。

docs/DESIGN.md

@@ -209,6 +209,8 @@ UI の構造・文言の置き方・用語・見た目を決めるときの正
 
 - ブランドの基調色は [BRANDING.md](./BRANDING.md) に従う。既定のダークテーマ「オーロラ（標準）」（内部 ID は `dark`）は Deep Abyss Blue を地、Aurora Cyan を主色（`primary`）、Mystic Purple を補助色（`brand-secondary`）にする。ゲーミングは発光を強めた派生テーマとする。
 - 主色は選択中の状態と主ボタンに使い、状態色と混ぜない。主ボタンの文字と主色、主色と背景は 4.5:1 以上を保つ（`src/__tests__/themeContrast.test.ts`）。
+- 危険操作の塗り（`destructive`）とその文字（`destructive-foreground`）も、全テーマで 4.5:1 以上を保つ。
+- 選択中のタブ・セグメントなど、状態を示す目印は周囲と 3:1 以上の差をつける（WCAG 1.4.11）。背景のわずかな明暗差や文字色だけに頼らず、塗り・枠線・太字のいずれかを併用する。
 
 ### 5.2 ボタンの強さ
 
@@ -219,6 +221,8 @@ UI の構造・文言の置き方・用語・見た目を決めるときの正
 | 弱 | 文字のみ | キャンセル、閉じる、詳細を開く |
 | 危険 | 危険色の枠線または塗り | 停止・削除・初期化。確認を挟む |
 
+- 押せないボタンは、どの強さでも見た目で区別する（`disabled:opacity-50` など）。押せない理由は画面に表示する。`sr-only` だけに書かない。
+
 ### 5.3 文字
 
 - 階層は「画面題名 → セクション見出し → 項目ラベル → 本文 → 補足」の5段までにする。
@@ -232,10 +236,45 @@ UI の構造・文言の置き方・用語・見た目を決めるときの正
 
 ### 5.5 レイアウトと寸法
 
-- 最小ウィンドウ 900×600、既定 1024×768 の両方で、文字の切れ・重なり・1文字ずつの折り返しが起きないことを確認する。
+- 現行実装の最小ウィンドウは900×600、既定は1024×768。今後は配信・通話と音楽鑑賞で必要な表示を整理し、用途別の最小サイズ・初期サイズ・最大化時の配置を決める。900×600を全用途の固定条件にせず、配信側は必要に応じて拡大を許容する。数値は設計・検証後に確定する（[追加計画](COMPETITOR_SGM_2026-10.md#用途別の表示とウィンドウを設計する2026-10-28追加)、Issue #109）。
+- 用途別の最小サイズで主要操作に到達でき、文字の切れ・重なり・1文字ずつの折り返しが起きないことを確認する。小さい画面では補助情報の折りたたみ・配置変更を併用し、表示領域を超える最小サイズを強制しない。
+- 最大化するとラックの表示件数が増え、空き領域があるのに一覧だけが小さな領域に制限されない。用途別にサイズ・位置・最大化状態を記憶し、表示領域とDPIに合わせて復元する。表示用途の切替だけで音声設定・送出・ミュートを変更しない。
 - ヘッダー（高さ 64px）の要素は2行までにする。
 - 統計などのタイルは、ラベルが2行を超える幅になる場合、表または縦並びに切り替える。
 
+### 5.6 動き
+
+Auralyn は作業の道具です。動きは状態の変化を伝えるときだけ使い、見せるための演出にしません。
+
+**動かすかどうか**
+
+| 対象 | 判断 |
+| :--- | :--- |
+| 本番中の操作（緊急ミュート、原音比較、出力音量） | 動かさない。押した瞬間に見た目と文言を切り替える |
+| キーボード・ホットキーで開くもの、1日に何度も使う操作 | 動かさない |
+| ホバー、選択の切り替え | 色の変化だけ。短く控えめにする |
+| モーダル、ポップオーバー、ツールチップ、トースト | 出入りを短く示してよい |
+| 初回セットアップの完了など、まれな場面 | 演出してよい |
+
+**書き方**
+
+- 時間と曲線は `src/index.css` のモーショントークンを使う。値を個別に書かない。UI の動きは 300ms 以内にする。
+- 動かすのは `transform` と `opacity` だけにする。`transition: all`（Tailwind の `transition-all`）を使わず、変化させるプロパティを指定する。
+- 出入りには ease-out 系の曲線を使い、ease-in を使わない。`scale(0)` から出さない。
+- 何度も押される要素には、途中から戻れる transition を使う。最初からやり直す keyframes を使わない。
+- メーターと波形は計測値の表示であり、この節の対象外とする。値を遅らせたり、補間で実際と違う値に見せたりしない。
+
+**動きを減らす設定（`prefers-reduced-motion: reduce`）**
+
+- 移動・拡大・回転をやめ、不透明度と色の変化だけを残す。状態が変わったことは伝わるようにする。
+- 繰り返し続く動き（脈動、点滅）を止める。読み込み中の表示は、静止した表示と文言に置き換える。
+
+**背景の装飾**
+
+- 背景のオーロラは、ブランドの雰囲気を伝える唯一の常時の動きとして残す。
+- 動きを減らす設定のときと、本番中は止めて静止表示にする。本番中は、OBS の配信状態をアプリが取得できないため、音声処理中（エンジン稼働中）で判定する。
+- ぼかしや合成の範囲を広げない。装飾のために本番中の処理負荷を増やさない。
+
 ---
 
 ## 6. 状態とフィードバック
@@ -281,3 +320,5 @@ UI・文言を変更する PR では、次を確認します。
 - [ ] 本番中の操作に文字ラベルがあるか。
 - [ ] 固定色を直接書いていないか。状態色の意味が揃っているか。
 - [ ] 停止・削除などの操作が、安全な操作と区別されているか。
+- [ ] 押せないボタンが見た目で区別され、理由が画面に出ているか。
+- [ ] 動きが 5.6 の判断表に合っているか。動きを減らす設定で、移動と繰り返しの動きが止まるか。