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

262日前原文(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で） - ドロワーを開く - ドックを表示する - 時々、アニメーションが重なってるのを見かける。一つのアニメーションが完全に終わってから、次のアニメーションが始まって、やっとコンピュータを使えるようになる。アクセシビリティの設定に行って、これらを無効にしないとデバイスが使えないのは皮肉だよね。

└

Apple Walletが私の電話に接続されるたびに、全く役に立たないアニメーションが再生されて、すごく長く感じるし、画面全体を覆っちゃう。その間、電話で何も見えないし、何もできない。めっちゃイライラするし、理由もない。接続されたときにちょっとしたハプティックをくれればいいのに。

└

iOSのナビゲーションアニメーションが終わるのを待つ必要はないよ。あれは完全に中断可能になるように設計されてるから。

クリックベイトなタイトルだね。「アニメーションをデザインする際に考慮すべきこと」って感じ。ボタンを押した時の微妙なアニメーションが好きだな。視覚的なフィードバックがあると、UIアクションに自信が持てるし、驚かされることも少なくなる。CSSのスムーズスクロールも同じ考え。だけど、これって結構主観的に感じる。UIアニメーションの効果についてのユーザースタディってある？それに、ウェブアプリがゼロアニメーション/軽いアニメーション/フルアニメーションの設定を提供したら、もっと多くの人が幸せになると思う。パワーユーザーはアニメーションをオフにすることで、作業をもっとスピードアップできるしね。私のスマホのUI設定みたいに。

└

それに、ウェブアプリがゼロアニメーションの設定を提供したら、もっと多くの人が幸せになると思う。これはブラウザの設定として存在していて、「prefers-reduced-motion」って呼ばれてる。私のコードでの使用例はこれだよ: https://github.com/mickael-kerjean/filestash/blob/master/pub...

└

アニメーションに関するちゃんとしたユーザビリティスタディがあったら、ちょっと面白いかもね。自分はアニメーションってほとんど役に立たないと思ってるけど、ボタンから生成されるUIコンポーネントに目を引くっていうのは、確かに意味があるかもしれない。一方で、基準が何かははっきりしないよね。間違ったスタディを簡単にやる方法は、アニメーションをオフにして、ヒントなしでコンポーネントがポンポン出てくるダイナミックなデザインを作ることだけど、それは欠陥がある。最初から「アニメーションなし」を前提にしたUIは、もっとダイナミックじゃなくなるはずだから、結局その懸念は無意味になるよね…。

自分のルール：ユーザーがアニメーションが終わるのを待たないと次に進めないなら、アニメーションは取り除くべき。あと、すべてのアニメーションをオフにするアクセシビリティオプションは常に用意しておくべきだよ。

└

注目すべきは、prefers-reduced-motionメディアクエリがこれにとって素晴らしいってことだね。https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

このセクションについての一つの考え: > 例を挙げると、回転が速いスピナーはアプリがより早く読み込まれているように見せるけど、実際の読み込み時間は同じなんだ。これが認知されたパフォーマンスを向上させる。企業が速い読み込みスピナーを悪用しているせいか、実際には何も起こっていないのに、僕は本能的に遅いスピナーの方が信頼できると思ってしまう。

微妙な問題があるんだ: あなたが持っているスクリーンでは「喜び」を感じるアニメーションが、持っていないスクリーンではかなり悪く見えるかもしれない。例えば、著者のボタンをスケーリングするアニメーションは、僕のM1 MacBook Proでは問題ないけど、MacBookに接続しているクソみたいなIBM ThinkVisionモニターではカクカクしていて遅い。自分で確かめてみて: MacBook: https://drive.google.com/file/d/1UjJnxobPlBh_nv18Ych0XHwHEMw... クソモニター: https://drive.google.com/file/d/1jtwJKIFvteLOWD1Pzj1mTZjQwVX...

└

IBMをネイティブ解像度で使ってるって確信してる？

このアニメーションは、Product Intelligence（Linearの機能）がどのように機能するかを説明している。静的なアセットを使うこともできたけど、アニメーション版はこの機能が何をするのかを、ページの初期ビューポートでユーザーに理解させるのに役立つ。デザイナーの意図かもしれないけど、僕にとっては全然そうじゃない。まず、表示されているアニメーションは、まともなUIの一部ではない変な3Dアングルで表示されている。それは何のため？実際のアプリの体験について何も伝えないためだよね。その3Dの見た目は「この機能が何をするのかを理解するのを助ける」わけじゃない。アニメーションのフェードインは、ページのそのエリアに引き寄せられる感じがするけど、それが意図だと思う。3Dの視点は、そのボックス内のテキストが僕が読んでいるページの一部ではなく、別の何か - 彼らの製品のビューだと理解するのに役立つ。でも、製品を理解するのにはあまり役立たない。

アニメーションが遅延を引き起こすたびに問題がある。どうせそのくらいの時間がかかるアクションをアニメーションするのはいいけど、純粋に見た目のためのアニメーションが終わるのを待つのは、もっさりしていて楽しくない。

ハクソク