Edited at

闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう


はじめに

本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。


アニメーションの12の基本原則と GUI

ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。



SQUASH & STRETCH



ANTICIPATION



FOLLOW THROUGH & OVERLAPPING



ARCS

ビデオ解説:The illusion of life

これらを見ただけでも、『あー、ディズニーっぽい』という印象を抱きますね。単なる立方体がドナルド・ダックに見えてくるから不思議です。そういえば小学生のときにピタゴラスの定理を解説した教育ビデオを観たことがあるのですが、(名前は忘れましたがドナルドのさんすうマジック」というそうです)あれもディズニーが制作していて、三角形がこのような動きをしていたのは今でも記憶に残っています。子供の印象にも残りやすい映像技術で教材を作ってしまうところはやっぱりディズニーは凄いですね。

さて、この12の基本原則をそのまま GUI にも応用できるかとなるとまた話は変わってきそうです。いわば映像に命を吹き込むためのアニメーション理論となりますが、そのすべてとは言わないにしても GUI にドナルド・ダックは必要でしょうか。近頃 Dribbble ではこのようなショットをよく見かけます。



https://dribbble.com/shots/1623679-Open-Close



https://dribbble.com/shots/2067564-Replace

引っ張って離したら飛行機が飛んでいくやつは面白いアイディアですね。ただこういうのは映像として観るのであれば楽しいのですが、GUI ではあまり効果的ではないように思えます。表現として冗長に感じられます。


Your UI isn’t a Disney Movie

こちらの記事 Your UI isn’t a Disney Movie は、その名の通り「UI はディズニー映画ではないぞ」という内容の意見を述べています。

この記事の筆者も言われているように、過度なアニメーションが場合によっては無駄な演出となってしまっていることがあるのです。アニメーションというのはただGUIの見た目を派手にするためだけの手法ではありません。映像理論がそうであるように、目的があってアニメーションがデザインされます。そのことを理解せずに派手なアニメーションが先行してしまうと、例の Dribbble ショットのような、なんとなくかっこいいけれど、少し映像っぽい GUI が出来上がってしまいます。


派手なアニメーションは Skeuomorphism の再来か

少し前まで GUI には Skeuomorphism という表現手法の流行がありました。ご存知の通り、現実世界の見た目を画面上に再現して、メタファーで GUI の意味を認識させるというものです。特に Mac OS X / Web 2.0 以降ではより現実に近いモノの見た目を模倣する傾向が顕著になり、「Aqua」インターフェイスだとか陰影だとか凹凸感だとか、そういった表現の流行が GUI デザインの世界ではしばらく続きました。iPhone もその流れの中で現れ、iOS 6までは写実的なグラフィックで GUI を表現するのが当たり前な世界でした。Android でも Material Design が整備されるまでは Skeuomorphism 的な表現が見られました。



http://www.lifehacker.jp/2012/11/121102appleskeuomorphic-design.html

私は最近の 過度なアニメーション の流行はかつての行きすぎた Skeuomorphism の再来のような気がしてなりません。iOS 7でいわゆるフラットデザインが採用されたことで、「どれだけ動かすか」ばかりが強調されたUIのコンセプトが多く造られるようになったような気がします。かつて金属質のボタンだとかにこだわり過ぎていた “あの頃” と状況がなんとなく似ています。

フラットデザインとアニメーションはとても相性が良く、写実的な GUI よりもアニメーションが実装しやすいことがその動きを加速していくことになります。Material Design はアニメーションを推奨していますが、どこか派手にも感じられます。Material Design はまだ意味のあるアニメーションを定義しているので良いのですが、これをやりすぎてしまうとかえって逆効果を生んでしまう余計なアニメーションとなってしまう懸念があります。棒と棒が交差してバッテンになり、ハンバーグが周りを囲ってマルになるという演出が私たちのアプリには必要なのでしょうか。


映画のような UI はたぶんフィクション

少し話は逸れますけれど、Minority Report や Iron Man のようなブルーがかった近未来的な GUI は一見クールで憧れます。2025年くらいには VR が当たり前になって、誰も彼も攻殻機動隊のような電脳世界で会話する的な世界になっているのかもしれません。私にはわかりませんけど少なくとも言えるのは、ああいった映画的な格好よさを狙った近未来的な UI というものは、おそらくは主流にはないであろう、ということです。ただし、ビデオゲームなど世界感を演出することが求められる媒体であれば受け入れられるでしょうね。Halo という Xbox のゲームは近未来的な GUI が溢れていてとてもワクワクする作品です。



Halo: http://www.xbox.com/ja-JP/Marketplace/Product/Halo4/news

例えば Iron Man のように、視界いっぱいに大量の光り輝く情報が表示されるような UI は正直使いこなせる気がしません。映画では「ヒーローがなにやらすごいことをしてる感」が演出できるのでそれが許されるのですが、残念ながら私たちはヒーローではありません。



http://thenextweb.com/media/2012/06/02/jayse-hansen-on-creating-tools-the-avengers-use-to-fight-evil-touch-interfaces-and-project-glass/

あとよくあるのは、謎のコマンドラインをキーボードでガチャガチャ操作しまくるという場面です。真っ黒い画面に緑色の文字列が浮かび上がる UI は、よほどのエンジニアでもなければ使いこなせませんよね。刑事モノとかであってもマウスを一切使わずに FBI のシステムを操作して犯人の情報を検索したりしています。The Matrix ではあの緑色の文字の雨を見て『ここがセクシーに見えるんだよ』とかそんなセリフがあったと思いますが、そういうのは映画だからこその演出ですよね。

最近みた映像作品「すべてがFになる」というテレビアニメでは、そのような「映画的な演出」を用いるのではなくもっと現実的な表現をされていたことがとても新鮮で、リアリティがありました。『監視カメラの映像を日付順に抽出するスクリプトを書いている』という台詞からもわかるように、ただ闇雲にコマンドをガチャガチャするのではなく、これは意味のあるタイピングなんだよ、ということが視聴者にもよく伝わるものでした。



http://giphy.com/gifs/technoir-movie-film-cinemagraph-zXmbOaTpbY6mA

私は以前 Google Glass を試したことがあるのですが、あれは見た目は格好いいけれども非常に使い勝手が悪いデバイスでした。もちろんプロトタイプであったことは承知の上ですが、やっぱり視界の右上の方に小さな画面がうっすらと浮いているというのがどうにも慣れませんでした。画面に焦点を合わせる労力もありますし、画面が小さすぎてここに普通の GUI を実装するのは無理があると思ったからです。Glass のわずかな面積しかない右側面を指でなぞるとスクロールしたりタップできたりするのですが、既存の考え方で実装されている GUI というのもあって、たかがキッチンタイマーを作動させるのも非常に苦労しました。後継機が開発中という噂もあるので今後に期待したいところですが、私たちが Iron Man になれる日はまだまだ遠いみたいです。

それはそうと、SF 映画のインターフェースデザインというところではこちらの本がおすすめです。

SF映画で学ぶインタフェースデザイン アイデアと想像力を鍛え上げるための141のレッスン

映画の中のユーザビリティ間違い・トップ10


GUI アニメーションの原則



Your UI isn’t a Disney Movie

この gif のようにボタンを表示する際にそれをバウンスさせたりするのは無駄な動きとなってしまいます。ユーザーはボタンを押してその後に続く結果をすぐに得たいのであって、それらが飛び跳ねるのを見て楽しみたいのではありません。このような UI は、すぐに押させてくれないボタン、思ったように操作できない機能として認識され、非常に反応の悪いアプリだという印象を与えてしまいます。


  • ユーザーの操作を邪魔しない

  • 視覚的に誘導させる目的で使用する

  • 必要以上に待機させない、あるいは意図的に待機させる目的で使用する

  • 目的に合わせ、必要最低限に留める

  • 「滑らかさ」を表現するためにイージングを効かせる

私の感覚だと、大抵のアニメーションは 0.2 秒〜 0.4 秒程度で十分です。それ以上になると「反応の悪い GUI」という印象を抱いてしまいます。また、イージング関数も適切なものを採用した方が良いでしょう。イージングに Linear を採用する場面は限られると思います。逆に「あえて待たせる」という目的のためにアニメーションを活用するのも良いと思います。

この 0.x 秒という値はあくまで私の感覚なので、私よりの上の世代ではまた感覚が異なるかもしれません。「MTV世代」なんて言葉もありますが、MTV 登場前後の世代で映像に対する識別能力に大きな差があるそうです。最近のテクノロジーにあまり触れていない世代の方は、もしかしたら高速に切り替わる映像を十分に識別できてない可能性があるのです。私は幼少期からファミコンに触れてきているので映像にまみれながら育ったようなものですが、親世代では少し異なるかもしれませんね。ターゲットとなるユーザーを見極めてアニメーションを調整するというのも試してみる価値はありそうです。


適切なイージング

動いているものは慣性の法則に従って減速する」、「停止しているものは踏ん張って加速する」、そういった物理表現を適切に用いることで GUI の動きをより自然に、滑らかに見せることができるようになります。これは『ディズニー映画みたいにするな』という主張とは矛盾するように聞こえるかもしれませんが、そうではありません。映像表現の世界にまで踏み込んでしまうとそれは意味を為さなくなってしまいますが「12の基本原則」には参考にすべきところはもちろんあって、それらを適切に取り入れて効果的に GUI に適応することが重要です。

iOS の通知センター(上からスワイプすると出てくる画面)を勢いよく下方向に弾くと画面下に衝突した際に少し飛び跳ねる動きをするのはご存知でしょうか。一見無駄な動きにも見えますが、これがあるおかげで『通知センター画面は一時的なシャッターのようなものだ』と認識することができるようになります。シャッターなので、逆に上に持ち上げればスッと元の画面に戻れるということをさり気なく察することが可能です。そこに説明文は一切不要です。アニメーションは 視覚言語 なので、動きでその意味を人に伝えられる力を持っています。


  • 停止している物体が動いて再び停止する動き: Ease In Out

  • 停止している物体が動きだす動き: Ease In

  • すでに動いている物体が停止に向かう動き: Ease Out

  • 物体が壁に当たって跳ね返ったのちに停止する動き: Ease Out Bounce / Ease Out Elastic

こちらの ユーザ・インターフェースのためのイージングカーブをつくる という記事はとても参考になるので合わせてお読みください。

また、こちらのサイト http://easings.net/ja では様々な基本イージングのサンプルをまとめています。


アニメーションを使うことで得られる体験

iOS では UIScrollView が非常に滑らかな動きをします。指を素早く弾くことで、スクロールの動きはすぐに停止せず慣性の法則に従って滑るように減速していって、最後にスッと停止します。Safari など WebView ではこの減速率が急になっていて滑りが悪いのですが(iOS 10まで)、ネイティブアプリであればほぼなにも考えずにこの動きを実装することができます。

このようなアニメーションの効果は iOS のユーザー体験のためには必要不可欠な要素となっていて、スクロールビューの滑り方とバウンス・バックがあるおかげで、そんなにスペックが高くない iPhone でも十分に滑らかな動きをする GUI が実現されています。端っこに到達したらちょっと食い込んだのちに跳ね返って停止する、という動きは、現実世界の物理現象を模しているので自然に見えます。GUI が指に吸い付くような感覚はきっとそこから生まれます。

残念ながら Android では特許によりバウンス・バックを模倣できないため、無機質で不自然な GUI になってしまっていることは否めません。慣性の効いた高速スクロールで端に到着したらカツッと急停止するのは気持ちが悪い動きですし、またスクロールの加速度も高すぎてかなり不自然に感じます。

このような自然な感覚をもたらす効果を 融けるデザイン という本では「道具の透明性」「自己帰属感」と述べています。タッチ UI では指先の感覚とその画面の向こう側とが一体となっていることが求められます。指先で操作した感覚がそのまま映像としてダイレクトにフィードバックされれば、それは本当の感触が無くても「感触を得られた」のと同じことになります。仮にもしスワイプ・ジェスチャから画面描画までに3〜4フレーム程度の遅延があったら、それはもう指先に吸いつく感覚とはかけ離れた、(たとえ超ハイスペック機種であったとしても)動作のもっさりした GUI と認識されてしまうことでしょう。指の動きと映像が連続的に同期することで、ユーザーに 自己帰属感=道具が自身の一部になる感覚 をもたらします。ビデオゲームの映像を PC にキャプチャしながら遊んだ経験がある方なら、コントローラーの動きとキャプチャ映像とがうまく同期しなくて操作に苦労する遅延問題はよく理解できることと思います。これは自己帰属感が得られなくなってしまっている状態です。

融けるデザインではさらに、マウスカーソルの動きを意図的に遅くしたらどのように感じるか、という実験とその結果について解説しています。ある一定の領域にマウスカーソルが踏み込んだら動きが遅くなるというプログラムを被験者に触らせたところ、皆が「粘っこい」と感じたそうです。マウスもカーソルも画面も別にネバネバしていないのに、ましてや神経なんて通っていないのに、その動きだけで擬似的な感触を与えられるということらしいのです。これは非常に面白いもので、GUI とアニメーションを考える上でとても重要なことだと思います。

私は 融けるデザイン という本は必読書だと思います。デザインに関わる方には是非読んでいただきたい一冊です。


むすび

長らくいろいろ綴ってしまいましたが、例にあげたようなディズニー映画っぽいアニメーションというのは一般的な GUI には不向きだということを述べました。ただしそれのすべてを否定するつもりはなく、12の基本原則 に基づいて適切なアニメーションを取り入れるということが重要です。加速しているものは慣性を伴って減速する、壁に当たると跳ね返る・潰れる、といった物理法則からアニメーションのヒントが得られると思います。ですがそれをやり過ぎてしまうと残念ながら「ディズニー映画」になってしまいます。かといって一切のアニメーションもなしに表現することはおそらく逆効果です。特にスマホの GUI では適切なアニメーションを効果的に使用することが求められ、それはいわゆるユーザー体験を良くすることにつながります。

デザイナーであればおそらく言葉で説明されなくともなんとなく理解できるかと思います。『このアニメーションがちょっともっさりしてるなぁ』とか『ここもっと動かさないとビュー同士の関係がわかりにくいな』みたいな思考は普段からやっていることだと思います。ただ、そこを行き過ぎてしまって派手なアニメーションを実装することに固執してしまうと、残念ながら「もっさり感」を与える余計なアニメーションとなってしまいます。

これはデザイナーだけではなく GUI デザインに関わるすべての方にも持っておいてほしい感覚です。アニメーションに関する事柄はなかなか仕様書では定義しづらいですし、その効果を数値化しにくくどうしても感覚頼りになってしまうところがあります。プロトタイピングなどのプロセスで解決できるかもしれませんが、皆がその感覚を理解できていれば、よりスムーズに、そしてより良いアプリケーションをデザインすることができるようになると思います。


参考資料