通知センター
ベルアイコン（未読バッジ付き）をタップすると通知リストのパネルが開く。各通知をタップして既読化すると未読数が減る。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- アプリ内通知をヘッダーからまとめて見せる SaaS
- 未読数を常に見せたいダッシュボード
- 個別既読と一括既読の両方が要る場面
- 避ける場面
- 即応が要る警告（トースト・バナーが向く）
- 通知が数百件たまる履歴（専用ページが向く）
- 構成要素
- ベルボタン
- 未読バッジ
- パネル
- すべて既読
- 通知項目
- 未読ドット
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab でベルへ、Enter／Space で開閉。開くと「すべて既読」へフォーカス、Tab で各通知（button）へ、Enter／Space で既読化。Esc で閉じてベルへ戻る
- 支援技術
ベルは未読数入りの aria-label＋aria-expanded＋aria-haspopup。パネルは role=dialog で閉じている間は inert。通知は button で未読は隠しテキスト「未読」。未読数の変化は aria-live=polite。reduced-motion で遷移停止
- 動き
パネルが 0.92 倍から 180ms で拡大・フェード（ベル起点）。項目背景 120ms
目的知らせる
デザインの要点
- パネルはベルの角を起点に 0.92 倍から 180ms で開く。中央から出すと「どこから出たか」が切れる
- 未読は点＋通常の濃さ、既読は点を消して 0.55 の透明度。色だけでなく濃淡で差を付けると一覧で拾える
- 「すべて既読」は 1 つずつ押す手間を省くために置く。バッジの数字は既読のたびに減らし、0 で消す
- 通知は 1 件ずつ button にして Enter で既読化できるようにし、Esc で閉じてベルへフォーカスを戻す
コード（コピーして使えます）
<div class="nc-stage" id="nc-stage">
<span class="nc-sr" id="nc-status" aria-live="polite"></span>
<div class="nc-topbar">
<span class="nc-app-name">ダッシュボード</span>
<button class="nc-bell-btn" id="nc-bell-btn" aria-label="通知（未読3件）" aria-expanded="false" aria-haspopup="dialog">
<svg class="nc-bell-icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10 2a6 6 0 0 0-6 6v2.5l-1.5 2.5h15L16 10.5V8a6 6 0 0 0-6-6z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M8 16a2 2 0 0 0 4 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="nc-badge" id="nc-badge" aria-hidden="true">3</span>
</button>
</div>
<div class="nc-panel hidden" id="nc-panel" role="dialog" aria-label="通知" inert>
<div class="nc-panel-header">
<span class="nc-panel-title">通知</span>
<button class="nc-read-all-btn" id="nc-read-all-btn">すべて既読</button>
</div>
<ul class="nc-list" id="nc-list"></ul>
</div>
</div>