Button Ripple Arrow Lift

はじめに

自分用メモ。

この CTA は大きく見せるより、反応の層を小さく重ねた方が扱いやすい。最初は静かに置いて、ホバーした瞬間だけ少し持ち上がるくらいがちょうどよさそう。

見ておきたいのは、ボタン本体、矢印、リップルを別役割で動かしている点。全部を同じテンションで動かさない方が、UI として崩れにくい。

組み合わせのポイント

• ボタン本体は数ピクセルだけ持ち上げて、反応したことを最初に伝える
• 矢印は本体と同時に動かさず、少し前に出すことで視線のきっかけをつくる
• リップルは面積を広げすぎず、ボタンの輪郭の中で収まるようにして品よく見せる
• 入る動きより戻る動きを少し静かにすると、ホバー解除時のバタつきが減る
• 影や背景色は演出の土台なので、アニメーションだけで目立たせようとしない

実装のポイント

• buttonRef、arrowRef、rippleRef を分けて、それぞれ別プロパティで動かす
• ホバー開始と解除を別 timeline にして、戻りのテンポを個別に調整できるようにする
• リップルは scale と opacity を中心に組み、レイアウトを動かさない
• ボタン本体と矢印は同時刻から動かしても、移動量には差をつけて役割を分ける

まとめ

覚えておくのは、大きい一発の動きより小さい反応の積み重ねの方が CTA では使いやすいということ。読みやすさと押しやすさを崩さない範囲で足す。