ui
Hold to confirm / Press and hold button / Long-press to confirm / Hold-to-delete
01Demo触って、数値を決める
空から満ちきるまでの時間。観察元は1.1s。0.8〜1.5sで「わざと押している」と感じられ、0.5sを切るとただのクリックと区別がつかず、2sを超えると壊れたかと思われる。
途中で離したときに満ちた分が引いていく速さ(満タンからなら0.35sで空)。観察元は0.35sで、満ちる速さの約3倍。満ちるのと同じ速さで戻すと、離したのに確定しそうに見えて不安になる。
押している間だけ0.11s周期で左右に揺らす回転角(位置も±0.7px動く)。観察元は1.2°。0.8〜1.5°で「力がこもっている」感じになり、3°を超えると壊れかけに見える。0で震えなし。
満ちきった瞬間にボタンの後ろの光が scale(0.6) から広がって消える最終倍率。観察元は1.7倍・1.2s。1.4〜1.8倍で「切れた」と分かる。
02Prompt数値はスライダーと連動
03 Vocab この動きを構成する語彙
長押し確定(hold to confirm) — 一定時間押し続けて初めて実行されるボタン。確認ダイアログを出さずに誤操作を防ぐ。press and hold・hold-to-delete とも呼ばれる。
進捗リング(progress ring) — 円の輪郭を stroke-dashoffset で少しずつ描いて進み具合を示すもの。pathLength="1" にすると円周を計算せず 0〜1 で書ける。
非対称な戻り(asymmetric decay) — 満ちる速さと引く速さを変えること。戻りを速くすると「離せば取り消せる」が直感的に伝わる。
ポインタキャプチャ(pointer capture) — setPointerCapture で、押したまま指がボタンの外へずれても同じ要素がイベントを受け続けるようにする仕組み。長押し・ドラッグ系の部品で必須。
誤操作防止(friction) — 取り消しにくい操作にわざと手間を足す設計。長押しは確認ダイアログより手数が少なく、意図の強さをそのまま入力にできる。
04 NG → OK 伝え方の差分
NG
言い方: 「削除ボタンを長押しで確定にして」
なぜNG: setTimeout で1秒後に確定するだけの実装が返ってきやすく、押している間に何も変わらないので、ユーザーは押し続けていいのか分からず途中で離す。離したら戻るのか、どれくらい押せば良いのかも決まらず、満ちる速さと戻る速さが同じだと離したのに確定しそうに見える。
OK
言い方: 「押している間だけ周りのリングを1.1sで満たし、離したら0.35sで引いて戻す。押している間は0.11s周期で±1.2°震わせ、満ちたら後ろの光を1.7倍に広げて確定。350ms未満で離したら『もう少し長く』と出す。reduced-motionでは押した瞬間に確定」
なぜOK: 満ちる・戻るの速さを分けて書いているので「離せば戻る」がはっきり伝わり、押している間の震えとリングで力がかかっていることが見える。短押しへの案内まで指定しているので、普通のボタンだと思って叩いた人も迷わない。