アニメーションはなぜ必要なのか。調べてみて分かった“動き”の役割

UXデザイン部のNです。

先日、アプリのUIにアニメーションを追加する案件に携わりました。
いただいた要望は、「ユーザーがワクワクするような動きを加えたい」というものです。

その背景にあったのは、
「ユーザーに使い続けてもらいたい」
「達成感を感じてもらいたい」
「頑張るユーザーを応援したい」
というサービス側の想いでした。

つまり私が考えるべき課題はアニメーションそのものではなく、「どうすればユーザーの行動や気持ちを後押しできるか」ということです。

今回は、案件をきっかけにアニメーションについて調べる中で感じた、「動きがユーザー体験に与える役割」について考えてみました。

なぜ動きにコストをかけるのか

デザインを考える中で、「ここに動きを入れると良さそう」「もう少しリッチな体験にしたい」という会話がよくあります。
一方で実装工数を考えると、「本当に必要なのか？」という議論も発生します。

実際、動きがなくてもサービスとして成立するケースは少なくありません。

極端な話、

• ボタンは押せる
• 画面は遷移できる
• 情報は閲覧できる

のであれば、機能としては成立します。

ではなぜ多くのサービスは、わざわざコストをかけて動きを実装しているのか。
さまざまな事例や記事を調べる中で感じたのは、アニメーションは装飾というよりも、「ユーザーの理解を支援する仕組み」に近い存在なのではないかということです。

動きはユーザーが迷わないための手がかりになる

例えば、iPhoneの計算機アプリにある履歴機能を見てみます。
履歴を開く際は、ボタンが反応した後に履歴パネルが画面下からスライドして表示されます。

もしこれが何の動きもなく瞬時に表示されたとしても、機能としては成立するでしょう。

しかし利用者は、

• ボタンが反応したのか
• どこから表示されたのか
• 電卓画面との関係はどうなっているのか
• どう操作すれば元の状態に戻れるのか

を直感的に理解しづらくなります。

一方で、ボタンが反応している様子とパネルがスライドして現れる一連の流れがあることで、「このボタンを押すとパネルが出てくる」「今見ている画面の上に履歴機能が表示されている」という関係性を自然に理解することができます。

つまり動きは演出である前に、状態の変化や要素同士の関係性を伝える役割を持っています。

実際の制作現場では、アニメーションを最後の仕上げとして考えることも少なくありません。
しかし今回調べる中で、動きはUIを彩るためではなく、ユーザーの理解を助けるために存在しているのだと感じました。

良いアニメーションとは何か

一方で、すべてのアニメーションが良いわけではありません。
例えば学習アプリやゲームでは、派手な演出が積極的に取り入れられています。
ただ、それはサービス全体が常に派手に動いているということではありません。

学習アプリの事例としてDuolingoを見ると、問題を解いている最中は比較的シンプルなUIですが、正解時や目標達成時には大きな演出が表示されます。

もし画面遷移のたびに派手なエフェクトが入り、ボタンを押すたびにキャラクターが大きく動いていたら、おそらくユーザーは学習に集中できず、疲れてしまうはずです。

重要なのは、アニメーションの量や派手さではなく、どのタイミングでどのような動きを見せるかなのだと思います。

ユーザーが達成感を得るタイミングでは演出は価値になります。
一方で、ユーザーが情報を読みたい時や操作に集中したい時には、アニメーションはできるだけ自然である方が望ましい場合もあります。

つまり良いアニメーションとは、美しい動きでも、目立つ動きでもなく、ユーザーが今やりたいことを後押しする動きです。

アニメーションについての認識

今回の案件では、「ユーザーがワクワクするような動きを加えたい」という要望をいただいていました。
そのため、アニメーションについて考え始めた時は、

• 学習アプリの達成演出
• ゲームのレベルアップ演出
• キャラクターのリアクション
• 紙吹雪などのエフェクト

といった、一目見て「アニメーションだ」と分かるような演出を思い浮かべていました。
実際に提案した内容も、ユーザーに達成感や楽しさを感じてもらうためのアニメーションが中心です。


しかし今回の記事を書くにあたり、さまざまなサービスやアニメーションについて調べている中で、認識が少し変わりました。
それは、私たちが意識していないだけで、アニメーションは身の回りに数多く存在しているということです。

先ほど紹介した履歴パネルの表示アニメーションもその一つですが、

• ボタンを押した時のわずかな反応
• ローディング中の動き
• パネルやモーダルが表示される際の遷移

などが例として挙げられます。

これらは多くのサービスに当たり前のように組み込まれているため、これまで意識することはありませんでしたが、

• 状態を伝える
• 操作結果を伝える
• 要素、画面同士の関係性を理解してもらう
• ユーザーを迷わせない

といった明確な目的があります。

私たちが普段目にしているアニメーションの多くは、演出というよりも体験を支える仕組みとして機能しています。
ただフェードイン・フェードアウトしているように見える動きにも、
ただ拡大・縮小しているように見える動きにも、
「なぜその動きが必要なのか」という意図が込められていました。

今回の案件で考えたこと

私自身、アニメーションについて考える際は、「楽しさ」や「特別感」を演出するものというイメージに引っ張られていました。
しかし実際には、

• ユーザーに状態を正しく伝える
• 操作結果を理解してもらう
• 次の行動を促す
• 達成感をより強く感じてもらう

など、明確な目的を持って設計されているケースが数多くありました。
今回提案を考える中でも、「どんな動きにするか」以上に、「その動きによってユーザーに何を感じてもらいたいのか」を考える時間の方が長かったように思います。

調べていく中で感じたのは、アニメーションはデザインの最後に付ける演出ではなく、ユーザー体験をより良くするための施策として活用できるということです。

ボタンの色や文言を検討するのと同じように、
「どこで動かすか」 「どの程度動かすか」 「何を伝えるために動かすか」
を考えることにも意味があります。

アニメーションはUX改善の施策になり得る

アニメーションは一見すると小さな要素に見えます。
しかし、

• 続けてもらう
• 達成感を感じてもらう
• 次の行動を促す
• 不安を減らす

といった体験に影響を与えることができます。
だからこそアニメーションは、「見た目を良くするための演出」ではなく、ユーザー体験を改善するための施策の一つとして考える価値があるのかもしれません。