ハクソク

世界を動かす技術を、日本語で。

目的のあるアニメーション

2025年9月5日原文(emilkowal.ski)

概要

  • アニメーション はUIの体験を大きく左右
  • 目的 のあるアニメーション設計が重要
  • 使用頻度 や 速度 が快適さの鍵
  • ユーザーの 期待と行動 を考慮した導入
  • 最適なアニメーションは時に 「無い」こと も選択肢

アニメーションの正しい活用法

  • アニメーション はUIに 予測可能性 ・ 高速感 ・ 楽しさ を付与
  • プロダクトの個性 や 差別化 にも貢献
  • 一方で 逆効果 となる場合もあり、 不快感 や 信頼喪失 の原因
  • 導入前に「 このアニメーションの目的 は何か」を明確化
    • Linear でのマーケティングアニメーションは Product Intelligence の機能説明
    • 静止画よりも、 初見での理解 を助ける
    • ボタン押下時の スケールダウン は、 応答性 と「生きている」感の演出
    • Sonner のトースト表示アニメーションは、 違和感回避 と 空間的一貫性 を両立
  • 目的が「楽しさ」 の場合もあるが、 頻度 に注意
    • 稀な体験 なら「驚き」として機能
    • 頻繁な利用 では 煩わしさ と 遅延感 へ変化

使用頻度とアニメーション

  • Raycast のように 高頻度利用 のUIでは、 アニメーション非表示 が最適
  • 明確な目的 を持つ操作では、 素早い応答 が最優先
  • ホバー効果 や キーボード操作 も、 多用時はアニメーション不要
    • 遅延 や 不一致感 の発生を防止
  • タッチデバイス でも同様、 連続操作 には アニメーションオフ が推奨

アニメーションの速度感

  • マーケティングサイト 以外のUIアニメーションは 高速 が基本
  • 知覚上のパフォーマンス向上 に寄与
    • 例： 高速スピナー で「速く感じる」ローディング
    • ドロップダウン は180msが理想、400msは 遅く感じる
  • 300ms以内 がUIアニメーションの目安
  • ツールチップ は初回のみ 遅延表示、以降は 即時反応 が最適
    • Radix UI や Base UI がこの設計を採用

優れたUIのためのアニメーション設計

  • 目的のないアニメーション は避ける
  • ユーザーが日常的に気持ちよく使えるUI を目指す
  • 最良のアニメーション は「 必要な時だけ」または「 全く無い」選択
  • 理論と実践 を深めたい場合は「 Animations on the Web」コースも参考

アニメーション設計 は、 目的・頻度・速度 のバランスが肝要。 「 動かすべきか、動かさざるべきか」を常に問い、 ユーザー体験 を最優先に考える姿勢が重要。

Hackerたちの意見

ウェブデザインのアニメーションって、みんなが思ってるよりもパワーポイントに似てる気がするんだよね。要するに、UIを整えるために99%の確率でクイッククロスフェードが使えるけど、それ以上のことをする必要はあんまりないってこと。

個人的には、これらのアニメーションをもっと速くしたいな。300msは長すぎる。ほとんど気づかないくらいのアニメーションが好き。取り除いた時に気づくかもしれないけど、それ以上の時間は遅すぎると思う。

└

前は250msを目指してたけど、今は200msにしてる。UIのトランジションに関しては、これがちょうどいい感じだと思う。何が変わってるのか、どうして変わってるのかを理解するのに役立つし、もしその基準を満たさないなら、トランジションはやめた方がいい。200msはCSSで書くのも短くていいし、.2sって感じ。もっと短くしようかとも考えたけど、150msだとトランジションが間違ってるように感じることがある。特にアニメーションの最初の数フレームが落ちると、短いレンダリングのグリッチみたいに感じることが多いからね（.2sだと約10フレームしかないし）。アニメーションのトランジションの利点を得るには短すぎるし、でも即時感を持たせるには長すぎる。

デザイナーがアニメーションについて話すとき、いつも「洗練」や「楽しさ」を考えて、知覚的な遅延とのバランスを取ってるよね。それ自体は間違ってはいないけど、ちょっとしたポイントがある。1. 楽しさは過大評価されてると思う。派手なアニメーションに本当に喜んでるのは、他のデザイナーだけじゃないかな。2. アニメーションを決めるときは、状態について考える方が有用だと思う。ユーザーが起こった状態の変化を認識するのに苦労する可能性はある？もしそうなら、アニメーションを使って何が起こったかを視覚化するのがいい。これがアニメーションを使う主な理由だと思う。他はただの見栄だよ。

└

これには完全に同意するよ。マウスダウン時のボタンの見た目の変化がアニメーションと見なされることに驚いた。("ボタンを押すときのこの微妙なスケールダウン効果も、もう一つの目的のあるアニメーションです。") これは、コンポーネントがクリック可能であることを示すための基本的な視覚的フィードバックじゃないの？

└

「デライトは過剰評価されてると思う。Nerdsnipeは他のエンジニアやデザイナーがTwitterでそれを称賛してるから広まったんだろうね。別にそれ自体は悪くないけど、ほとんどのユーザーが気にしてるふうに振る舞うべきじゃない。」

└

経験から言えるのは、印象的なヒーローバナーやアニメーションがユーザーの注意を引くと、バウンス率が下がるってこと。もしあなたが確立されたビジネスで、製品の市場適合や口コミで顧客を得ているなら、あまり関係ないかもしれないけど、小さなお店が初期の顧客を獲得しようとする場合には、めちゃくちゃ重要だよ。

└

「1. デライトは過剰評価されてると思う。アニメーションを最初の3回見たときは嬉しいけど、その後はオフにしたい。プロセスに余計な遅延を加えないでほしい。」

└

「デライトは過剰評価されてると思う。派手なアニメーションに本当に喜んでるのは、他のデザイナーだけだと思う。もし（これが大きな条件だけど）アニメーションが実際に何かを伝えるときだけ適度に使われて、積極的な妨害にならないなら（リンクされた投稿で示されたように）、ユーザーにとってはかなりの効果があると思う。ただし、多くの人が期待するような効果ではないけどね。意味のある、目立たないアニメーションは、ポジティブな印象を形成するための無数のパズルの一部なんだ。それは「良い」と「優れた」をユーザーの心の中で分ける最後の20%の大きな部分を占めてる。必ずしも必要ではないけど、同じくらい良い競合の間では、片方がもう片方を引き離す手助けになる。ユーザーは「しっかり感」の強い印象を持って帰るから。物理製品の質の高さを測る指標として、重さや曲がりにくさを考えるのと似てるよね。問題なのは、10年ほど前からUIデザイン全体が、雰囲気やスライドショーのワオファクター、そして「ブランディング価値」に大きく傾いてしまって（これを書くときにちょっと気持ち悪くなった）、よく研究されたベストプラクティスから離れてしまったこと。アニメーションの良い使い方に対する評価も失われてしまった。UIデザインは実用的なユーザビリティの方向に戻るべき時期が来てると思う。」

└

僕の意見では、喜びって過剰に評価されてると思う。豪華なアニメーションに本当に喜んでる人たちは、ほとんどが他のデザイナーなんじゃないかな。ソフトウェアデザインにおける喜びを（それ自体のために）評価するのは、（昔ながらの？）Appleファンの核心的な特性だと思う。例えば、ジョブズ以降の時代における遊び心の減少を嘆いているとか。これをまとめた権威ある作品は知らないけど、この短い記事で少し触れられてるよね。https://daringfireball.net/linked/2024/12/05/festivitas 喜びを評価することが比較的ニッチだというのは真実だと思うけど、デザイナーだけに限った話ではないよ。例えば、ここで言ってるように、Appleファンの核心的な特性はこういう細かいところを評価することなんだ。

└

もう一つの問題は、B2Bで働いているデザイナーが、B2Cで働いているかのようにデザインしていることだね。B2B（特にエンタープライズB2B）では、あなたのソフトウェアは顧客の従業員が日常業務で必要とするツールに過ぎない。豪華なアニメーションや多色のグラデーション（今はグラデーションが「AI」を意味するからね）などの派手なものは、誰かの仕事を楽にするわけじゃない。ただのノイズで、テキストが多いダッシュボードをナビゲートしようとしているユーザーを常に気を散らせるだけ。もし「きれい」で「喜び」を感じる体験をデザインしたいなら、CRM/ERPのワークフローに関わる会社に入るのはあまり意味がないよ。ユーザーの温かくてふわふわした気持ちに直接結びつく価値を持つ会社で働くべきだね。

Appleはこれから学ぶことがあるね。あのくだらないアニメーションが終わるのを待ってることが多すぎる。さっき、画面を下にスクロールするためにスワイプしたら、すぐにボタンが見えたからタップしたんだけど、バウンスが止まるまで何度もタップしなきゃいけなかった。これは一例だけど、こういうことはいつも起こる。Appleはもっと良くできるはず。私のAndroidフォンは、アニメーションがもっとキビキビしてたから、すごく反応が良かった（120Hzの画面のおかげだと思う）。すぐに思いつく他の例：- アプリを切り替えるために上にスワイプするのがすごく遅い。（実際、ジェスチャーを使ったアクティビティはほとんどが痛いほど遅い！） - 通知を消す（特にMacで） - ドロワーを開く - ドックを表示する - 時々、アニメーションが重なってるのを見かける。一つのアニメーションが完全に終わってから、次のアニメーションが始まって、やっとコンピュータを使えるようになる。アクセシビリティの設定に行って、これらを無効にしないとデバイスが使えないのは皮肉だよね。

Hacker Newsで議論の続きを見る