文字の登場エフェクト
タイピング、カウントアップ、ブラーインなど、文字が現れるアニメーションの種類と使い分けは? タイピング、カウントアップ、スクランブル、ブラーイン、単語ごとの登場の5種類があり、数字か文章か強調かで選びます。
文字の現れ方にも名前があります。数字なのか、文章なのか、強調なのかによって選びます。
名前とプレビュー
プレビューをタップすると止まり、もう一度タップすると再生します。
タイピング
Typewriter effect
1文字ずつ打たれるように現れる
カウントアップ
Count-up
数字が0から目標値まで上がっていく
スクランブル
Text scramble
ランダムな文字が入れ替わった末に、正しい位置に落ち着く
ブラーイン
Blur-in
ぼやけていた文字がくっきりする
単語ごとの登場
Staggered word reveal
単語が少しずつ時間差をつけて上がってくる
使い方
- カウントアップは、大きさが大事な数字1つにだけ使います。表の中の数字すべてに使うと、読めなくなります。
- タイピングは、AIの回答のように「今作られている途中」という意味があるときだけ使います。見出しに使うと、読むのが遅くなるだけです。
- 効果が終わったあとの最終的な文字が、スクリーンリーダーに読み上げられる必要があります。入れ替わり途中の文字が読まれてはいけません。
- 1画面に文字のエフェクトは1つだけにします。
コピーして使うプロンプト
主要指標のカウントアップ
ダッシュボード上部の主要指標3つに、カウントアップ(Count-up)アニメーションを入れてください。 - 0から目標値まで800ms、ease-out、3桁区切りのカンマは維持。 - 数字の幅が揺れないよう、tabular-numsを適用。 - 画面に最初に表示されたとき、1回だけ実行。 - 視差効果を減らす設定のときは、すぐに最終値を表示してください。
参考にした投稿: @uxwoodytips