左右両側のスワイプアクション
メール一覧の行を右へスワイプすると「既読」、左へスワイプすると「アーカイブ／削除」が現れる。しきい値を越えると色が濃くなり、離した瞬間に実行される。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
デザインの要点
- 右＝前向きな操作（既読）、左＝片付ける操作（アーカイブ・削除）に固定し、どのアプリでも指が覚えている向きに合わせる
- しきい値の手前では戻り、越えると色が変わってラベルが太る。「離すと実行される」ことを指を離す前に伝える
- 削除は最も遠い位置に置く。取り消しにくい操作ほど、届くまでの距離を長くして誤操作を減らす
- 横スワイプの行には touch-action: pan-y を指定し、縦スクロールをブラウザに残したまま横だけ自分で処理する
実装メモ
行の左右に置いた .sab-left / .sab-right は装飾（aria-hidden）です。実装では各行に「既読にする」「アーカイブ」「削除」のボタンをメニュー等でも提供し、スワイプを唯一の経路にしないでください（支援技術・PC のユーザーが到達できなくなります）。
コード（コピーして使えます）
<div class="sab-phone">
<header class="sab-head">
<span class="sab-title">受信トレイ</span>
<span class="sab-count" id="sab-count">未読 3</span>
</header>
<ul class="sab-list" id="sab-list">
<li class="sab-row is-unread">
<div class="sab-left" aria-hidden="true"><span class="sab-act">既読にする</span></div>
<div class="sab-right" aria-hidden="true"><span class="sab-act sab-act-archive">アーカイブ</span><span class="sab-act sab-act-delete">削除</span></div>
<div class="sab-body">
<span class="sab-dot"></span>
<div class="sab-text"><span class="sab-from">ミナト工房 <time class="sab-time">10:24</time></span><span class="sab-subject">お見積りの件（返信）</span><span class="sab-preview">先日ご相談いただいた棚のサイズで再計算しました。合計は…</span></div>
</div>
</li>
<li class="sab-row is-unread">
<div class="sab-left" aria-hidden="true"><span class="sab-act">既読にする</span></div>
<div class="sab-right" aria-hidden="true"><span class="sab-act sab-act-archive">アーカイブ</span><span class="sab-act sab-act-delete">削除</span></div>
<div class="sab-body">
<span class="sab-dot"></span>
<div class="sab-text"><span class="sab-from">Aoi Analytics <time class="sab-time">9:02</time></span><span class="sab-subject">週次レポートが届きました</span><span class="sab-preview">今週の訪問は 12,480 件（前週比 +8%）。上位ページは…</span></div>
</div>
</li>
<li class="sab-row is-unread">
<div class="sab-left" aria-hidden="true"><span class="sab-act">既読にする</span></div>
<div class="sab-right" aria-hidden="true"><span class="sab-act sab-act-archive">アーカイブ</span><span class="sab-act sab-act-delete">削除</span></div>
<div class="sab-body">
<span class="sab-dot"></span>
<div class="sab-text"><span class="sab-from">経理チーム <time class="sab-time">昨日</time></span><span class="sab-subject">9月分の請求書を確認してください</span><span class="sab-preview">3件の請求書が承認待ちです。期限は 9/20 です。</span></div>
</div>
</li>
<li class="sab-row">
<div class="sab-left" aria-hidden="true"><span class="sab-act">既読にする</span></div>
<div class="sab-right" aria-hidden="true"><span class="sab-act sab-act-archive">アーカイブ</span><span class="sab-act sab-act-delete">削除</span></div>
<div class="sab-body">
<span class="sab-dot"></span>
<div class="sab-text"><span class="sab-from">山田 花 <time class="sab-time">火曜日</time></span><span class="sab-subject">来週の打ち合わせ</span><span class="sab-preview">14時からで大丈夫でしょうか。場所は前回と同じで…</span></div>
</div>
</li>
</ul>
<p class="sab-empty" id="sab-empty" hidden>受信トレイは空です</p>
<p class="sab-hint">右へ: 既読 左へ: アーカイブ ／ さらに左へ: 削除</p>
</div>