はじめに
カード UI は、最初に並んだ瞬間の見え方と、触れたときの反応の両方で印象が変わります。この 2 つを同じテンションで設計すると少し騒がしく見えやすいので、役割を分けて考えると整理しやすくなります。
このサンプルでは、最初の登場ではスタッガーでリズムをつくり、操作中はマグネットホバーで反応を返すようにしています。表示のための動きと操作のための動きを分けることで、見た目の気持ちよさと使いやすさの両方を取りやすくしています。
組み合わせのポイント
- 最初はスタッガーで順番に見せて、一覧全体に読み始めるリズムをつくる
- hover 中はポインタに対して少しだけ傾けて、触っている感覚を返す
- 各カードの反応量に差をつけすぎず、一覧としてのまとまりを崩さない
- hover 解除は急停止させず、少し余韻を残して自然に戻す
- 影や余白の設計も合わせて見直し、動きだけに頼らない印象づくりをする
まとめ
カード演出は、何を見せるための動きなのかを分けるだけでも整理しやすくなります。登場時は一覧の印象づくり、hover 時は触った手応えづくり、というように役割を分けると、UI として無理のない演出に寄せやすいです。