一定の速さ
ゆっくり止まる
行き過ぎて戻る
「もう一度」を押すと、3つの動き方を見比べられます。

あわせて引く

イージング(緩急)

Easing

ふだんの言い方動きの緩急ぬるっと動くカクカク動く

動きはじめと終わりの速さの変化。これで、動きの気持ちよさが決まる。

見分けるポイント

  • 一定の速さ(linear)は、機械的で硬い印象
  • ゆっくり止まる(ease-out)は、自然でなめらかな印象
  • 行き過ぎて戻る(バウンス、スプリング)は、弾むような元気な印象

AIへの伝え方

変更する場所:サイト全体のアニメーション。 アニメーションのイージング(緩急)を整えてください。要素が現れるときは、速く動きはじめてゆっくり止まる ease-out(cubic-bezier(0.2, 0.8, 0.2, 1))にし、時間は0.3〜0.5秒にしてください。一定の速さの linear は、回転しつづけるものにだけ使ってください。ボタンを押したときの反応には、少し行き過ぎて戻るバネのような動きを付けてください。 変更は指定した箇所に限定し、それ以外のレイアウト・文章・配色は維持してください。スマートフォンでも要素がはみ出さず、文字や操作を妨げないようにしてください。

コピーした文章を、お使いのAIに貼り付けてください。

「動き」の言葉

触れたとき、現れるとき、スクロールしたときの動き。

207語すべてを、見た目から引く