下矢印 ふんわりバウンス
下矢印 ふんわりバウンスは、ヒーロー下部に置いて「下にスクロールできる」と促す矢印が、上下にゆっくり動き続ける小さなアニメーションです。仕組みは @keyframes で transform:translateY を 0 と 8px の間で往復させ、同時に opacity を変化させて「ふわっ」と浮き沈みする質感を…
解説
下矢印 ふんわりバウンスは、ヒーロー下部に置いて「下にスクロールできる」と促す矢印が、上下にゆっくり動き続ける小さなアニメーションです。仕組みは @keyframes で transform:translateY を 0 と 8px の間で往復させ、同時に opacity を変化させて「ふわっ」と浮き沈みする質感を出しています。ease-in-out のイージングで動きの両端が滑らかになり、機械的にならないのが特徴です。矢印は文字記号で、JavaScript や画像は不要です。
使いどころ
- ファーストビューの最下部に置くスクロール誘導
- 1 画面で完結するランディングの「続きがある」サイン
- 縦長サイトで次のセクションへ視線を導きたいとき
動く幅は translateY の値、速さは animation の秒数で調整できます。上の小さなラベル文言（SCROLL など）は差し替え自由です。矢印記号はインライン SVG に置き換えると環境差がなく安定します。常時動く演出なので、動きに敏感な利用者向けに prefers-reduced-motion で停止する指定を足すと親切です。濃い背景では文字色を明るくしてコントラストを確保してください。
使用例・適したシーン
- 購入完了・サブスク成約画面
- ゲーム要素のあるサイト
- イベント告知
よくある質問
矢印の動く幅や速さを変えられますか？
キーフレーム内の translateY の値（サンプルでは8px）で上下の動く幅、アニメーションの秒数で速さを調整できます。控えめにしたいときは幅を小さく、秒数を長めにします。
SCROLL という文字を消したり変えたりできますか？
はい。矢印の上のラベルは自由に差し替えられますし、不要なら削除しても矢印だけで成立します。日本語で「スクロール」などに変えても問題ありません。