ヒントナッジ — 動きの伝え方辞典

hint nudge / affordance nudge

ヒントナッジ

「まだ続きがある」「ここは動かせる」を、矢印やカードを数pxだけ小刻みに揺らして伝える無言の案内。動かしすぎず、鳴らしっぱなしにしないのが要。

01 — Demo video

Play live →

02 — Prompt template

スクロールできる横並びリストに hint nudge(操作を促すヒントアニメーション)を実装してください。

- リスト右端に矢印のヒント要素を置き、translateX で {{distance}}px だけ往復させる
- 1周は「0 → distance → 0 → distance → 0」の2回ゆらしで、{{duration}}s の ease-in-out
- 1周が終わったら {{rest}}s 休んでから次の周に入る(無限ループで鳴らし続けない)
- ユーザーがスクロールまたはスワイプしたらヒントは役目を終えるので停止する
- left や margin ではなく transform で動かす(リフローさせない)
- prefers-reduced-motion 時は揺らさず、矢印を静止したまま表示して意味だけ残す

スクロールできる横並びリストに hint nudge(操作を促すヒントアニメーション)を実装してください。

- リスト右端に矢印のヒント要素を置き、translateX で {{distance}}px だけ往復させる
- 1周は「0 → distance → 0 → distance → 0」の2回ゆらしで、{{duration}}s の ease-in-out
- 1周が終わったら {{rest}}s 休んでから次の周に入る(無限ループで鳴らし続けない)
- ユーザーがスクロールまたはスワイプしたらヒントは役目を終えるので停止する
- left や margin ではなく transform で動かす(リフローさせない)
- prefers-reduced-motion 時は揺らさず、矢印を静止したまま表示して意味だけ残す

スクロールできる横並びリストに hint nudge(操作を促すヒントアニメーション)を実装してください。

- リスト右端に矢印のヒント要素を置き、translateX で {{distance}}px だけ往復させる
- 1周は「0 → distance → 0 → distance → 0」の2回ゆらしで、{{duration}}s の ease-in-out
- 1周が終わったら {{rest}}s 休んでから次の周に入る(無限ループで鳴らし続けない)
- ユーザーがスクロールまたはスワイプしたらヒントは役目を終えるので停止する
- left や margin ではなく transform で動かす(リフローさせない)
- prefers-reduced-motion 時は揺らさず、矢印を静止したまま表示して意味だけ残す

03 — Params

distance(揺れ幅 px) — 範囲 2〜20 / 初期 7
6〜10pxが目安。20pxも動くと案内ではなく主役になり、本文の邪魔をする。
duration(1周の時間 s) — 範囲 0.6〜2.5 / 初期 1.5
2回ゆらして1周。1.2〜1.8sが自然。速いと急かされている印象になる。
rest(休止 s) — 範囲 0〜4 / 初期 1.2
周と周の間の沈黙。0にすると永久ループになり、視界の端でちらつき続ける。

04 — Vocab

アフォーダンス — 「これは動かせる」と形や動きで示す性質。ナッジはそれを動きで補う手段。
ナッジ(nudge) — 軽くつつく程度の小さな動き。指示ではなく合図なので、振幅は一桁pxに収める。
休止(rest) — 周と周の間の沈黙。ループアニメーションを「うるさくない」ものに変える最重要パラメータ。
一度きりの合図 — ユーザーが操作した時点でヒントの役目は終わる。実運用では停止状態を保存し、次回以降は出さない。

05 — NG → OK examples

言い方: 「「横スクロールできることが分かるようにアニメーションを付けて」」

なぜNG: 揺れ幅も周期も休止も決まらない。矢印が延々と往復し続ける実装や、幅30pxで大きく踊る実装が返ってきて、案内のはずが視線泥棒になる。

言い方: 「「右端の矢印に hint nudge を。translateXで7px、1.5s ease-in-outで2回ゆらして1.2s休止。ユーザーがスクロールしたら停止。reduced-motionでは静止表示」」

なぜOK: 揺れ幅・周期・休止・停止条件の4点が揃っている。特に「触ったら止める」の指定が、案内を一度きりの合図として成立させる。