タッチリップル付きリスト
Android 型のリスト。押した位置から波紋が広がって「どこを押したか」を返す。スクロール中は指が動いた量で判定してリップルを出さず、タップだけに反応する。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- Android 風の連絡先・設定リスト
- 押した位置を返したい長い一覧
- スクロール中は反応させたくないリスト
- 避ける場面
- 中央から広がる波紋（押した点が分からない）
- 強い色の波紋
- 角丸からはみ出す描画
- 構成要素
- スクロールする一覧
- 行（アバター＋名前＋所属）
- 波紋
- 選択チェック
- 件数表示
- 状態の案内文
- 持っている状態
- 通常
- フォーカス
- 押下中
- キーボード
Tab で一覧領域と各行へ、Enter／Space で選択の切替。波紋はタッチ／クリックのときだけ出る
- 支援技術
行は button＋aria-pressed で選択を伝え、チェック記号と背景色で二重に示す。結果は role=status で読み上げ。reduced-motion では波紋の代わりに :active の背景色
- 動き
指を置いて 80ms 待ってから波紋 420ms ease-out、離すと 200ms で消える。8px 動いたら出さない
原則フィッツの法則
デザインの要点
- 波紋は押した点から始める。中央から出す波紋は「押した」ではなく「何か起きた」に見えてしまう
- 指を置いてから 80ms 待ち、その間に 8px 以上動いたら出さない。スクロールのたびに光るリストは目障り
- 波紋の色は文字色を 12〜16% の透明度で。強い色にすると背景ごと塗り替えたように見える
- リップルは overflow:hidden の行の中で描く。行の角丸からはみ出すと安っぽくなる
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="trl-phone">
<header class="trl-head"><h2 class="trl-title">連絡先</h2><span class="trl-meta" id="trl-meta">12 人</span></header>
<div class="trl-scroll" id="trl-scroll" tabindex="0" aria-label="連絡先一覧（スクロール）">
<ul class="trl-list" id="trl-list"></ul>
</div>
<p class="trl-status" id="trl-status" role="status" aria-live="polite">タップすると選択、スクロール中は波紋が出ません</p>
</div>