← ショーケース一覧

PROTOTYPE · マイクロインタラクション

LINE登録ポップアップのアニメ検証

記事中盤の「LINE登録ボタン」を押した瞬間、ポップアップが「ふわっ」と現れ、チェックマークが弾み、紙吹雪が降る。 この一瞬の気持ち良さが、登録CVRを左右します。イージングと速度を切り替えて、何度でも体感してください。

ChatGPTで月3万稼ぐ最初の一歩

イージング

バウンドが一番「気持ち良い」けれど、きびきびはモバイルで反応が速く感じる。

スピード 400ms

300〜450msが「速すぎず遅すぎず」のスイートスポット。 

/* 現在の設定 */
.popup {
  transition: transform var(--dur) var(--ease),
              opacity calc(var(--dur) * .6) ease;
}
.check {
  transition: transform calc(var(--dur) * .8)
              cubic-bezier(.34,1.56,.64,1)
              calc(var(--dur) * .2);
}