はじめに
CTA ボタンは、大きく動かせば目立つというものでもありません。最初に見たときは落ち着いていて、カーソルを乗せた瞬間だけやわらかく反応するくらいの方が、UI ではなじみやすいことがあります。
このサンプルでは、ボタン全体の持ち上がり、矢印の移動、内側に広がるリップルをそれぞれ小さく組み合わせています。ひとつひとつは控えめでも、役割を分けて重ねることで、少し触ってみたくなる印象に寄せています。
組み合わせのポイント
- ボタン本体は数ピクセルだけ持ち上げて、反応したことを最初に伝える
- 矢印は本体と同時に動かさず、少し前に出すことで視線のきっかけをつくる
- リップルは面積を広げすぎず、ボタンの輪郭の中で収まるようにして品よく見せる
- 入る動きより戻る動きを少し静かにすると、ホバー解除時のバタつきが減る
- 影や背景色は演出の土台なので、アニメーションだけで目立たせようとしない
まとめ
CTA の演出は、ひとつの大きな動きで見せるより、小さな反応を丁寧に重ねる方がまとまりやすいです。実案件でも、読みやすさや押しやすさを崩さない範囲で反応を足していくと、無理のない見え方になりやすいと思います。