スワイプで消せる通知スタック
ロック画面風に積まれた通知を、横スワイプで 1 枚ずつ払って消す。しきい値を越えると流れて消え、下の通知が詰め上がる。「すべて消去」で一括、空になると案内文が残る。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
デザインの要点
- 通知は新しいものを上に。消したあとの詰め上がりは高さのアニメで見せ、どれが残ったかを見失わせない
- しきい値の手前で離したら戻す。戻る動きがあるから、ユーザーは安心して途中まで引ける
- 一括の「すべて消去」は目立たせない文字ボタンにする。1 枚ずつ払う操作が主役
- 空になったら「通知はありません」を残す。何も無い画面は壊れたように見える
実装メモ
各通知は <li> の高さアニメで詰め上がり、カード本体は transform で払われます。実装では払った通知を復元できる「取り消し」トーストを添えるか、既読化に留めるかを決めてください。スワイプ以外の経路として、各カードにフォーカスして Delete キーで消せる操作を足すと支援技術でも扱えます。
コード（コピーして使えます）
<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"><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"><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"><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"><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" hidden>通知はありません</p>
</div>