スワイプで消せる通知スタック
ロック画面風に積まれた通知を、横スワイプで 1 枚ずつ払って消す。しきい値を越えると流れて消え、下の通知が詰め上がる。「すべて消去」で一括、空になると案内文が残る。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- ロック画面・通知センター風に積んだ通知
- 1 枚ずつ払って消す操作が主役の一覧
- 一括消去も添えたい通知の山
- 避ける場面
- 消すと取り戻せない重要な通知
- 横スクロールする画面内
- スワイプ以外の消し方を用意しない画面
- 構成要素
- 時刻と日付
- 通知カード
- アプリアイコン
- 本文（2 行で省略）
- すべて消去ボタン
- 空の案内文
- 持っている状態
- 通常
- フォーカス
- 押下中
- 空
- キーボード
Tab で各カードへ、Delete／Backspace で 1 枚消去して次のカード（無ければ前のカード→「すべて消去」）へ。「すべて消去」は Enter／Space で一括消去。スワイプはマウス・タッチ
- 支援技術
カードは tabindex=0 で Delete が効く。空になると role=status に「通知はありません」が入り読まれる。アプリアイコンは aria-hidden。reduced-motion で停止
- 動き
払い 240ms ease-out（120% まで流して透明化）・下の通知の詰め上がり 260ms。一括は上から 60ms ずつずらす
デザインの要点
- 通知は新しいものを上に。消したあとの詰め上がりは高さのアニメで見せ、どれが残ったかを見失わせない
- しきい値の手前で離したら戻す。戻る動きがあるから、ユーザーは安心して途中まで引ける
- 一括の「すべて消去」は目立たせない文字ボタンにする。1 枚ずつ払う操作が主役
- 空になったら「通知はありません」を残す。何も無い画面は壊れたように見える
実装メモ
各通知は <li> の高さアニメで詰め上がり、カード本体は transform で払われます。実装では払った通知を復元できる「取り消し」トーストを添えるか、既読化に留めるかを決めてください。スワイプ以外の経路として、各カードは tabindex=0 で Delete／Backspace でも消せます。
コード（コピーして使えます）
<div class="nsd-phone">
<div class="nsd-top">
<span class="nsd-time">9:41</span>
<span class="nsd-date">9月11日 金曜日</span>
</div>
<div class="nsd-bar">
<span class="nsd-label">通知センター</span>
<button class="nsd-clear" type="button" id="nsd-clear">すべて消去</button>
</div>
<ul class="nsd-stack" id="nsd-stack">
<li class="nsd-item"><div class="nsd-card" tabindex="0"><span class="nsd-app nsd-app-a" aria-hidden="true"></span><div class="nsd-text"><span class="nsd-head"><span class="nsd-name">メッセージ</span><span class="nsd-ago">いま</span></span><span class="nsd-body">山田 花: 14 時からで大丈夫です。場所は前回と同じで。</span></div></div></li>
<li class="nsd-item"><div class="nsd-card" tabindex="0"><span class="nsd-app nsd-app-b" aria-hidden="true"></span><div class="nsd-text"><span class="nsd-head"><span class="nsd-name">カレンダー</span><span class="nsd-ago">10 分前</span></span><span class="nsd-body">15:00 デザインレビュー（会議室 B）</span></div></div></li>
<li class="nsd-item"><div class="nsd-card" tabindex="0"><span class="nsd-app nsd-app-c" aria-hidden="true"></span><div class="nsd-text"><span class="nsd-head"><span class="nsd-name">配送</span><span class="nsd-ago">32 分前</span></span><span class="nsd-body">お荷物は本日 16〜18 時にお届け予定です。</span></div></div></li>
<li class="nsd-item"><div class="nsd-card" tabindex="0"><span class="nsd-app nsd-app-d" aria-hidden="true"></span><div class="nsd-text"><span class="nsd-head"><span class="nsd-name">Aoi Analytics</span><span class="nsd-ago">1 時間前</span></span><span class="nsd-body">週次レポートが届きました。訪問 12,480 件（+8%）</span></div></div></li>
</ul>
<p class="nsd-empty" id="nsd-empty" role="status" aria-live="polite"></p>
<p class="nsd-hint">左右にスワイプで消去（キーボードは Delete）</p>
</div>