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

  • 838
    いいね
  • 6
    コメント

はじめに

本稿は UI Design Advent Calendar 2015 – 9日目の GUI に関する記事です。枠に急遽空きができたので連投になりますがこの記事を書かせていただきました。なお8日目は私の記事 君たちはそんなにハンバーガーメニューが好きなのかね? です。ご興味あれば合わせて如何でしょうか。

また途中脱線気味かもしれないので、目次から適当に読み飛ばすか、ご興味がなければそっとじしてください。

アニメーションの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/1746065-Floating-burger-2-0


https://dribbble.com/shots/1832066-GIF-for-Restaurant-Menu


https://dribbble.com/shots/2184431-Join-the-Gmail-Inbox-Design-Team


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

引っ張って離したら飛行機が飛んでいくやつは面白いアイディアですね。ただこういうのは映像として観るのであれば楽しいのですが、GUI でこんなことやられても正直鬱陶しいだけです。無駄なアニメーションというやつです。ここ最近 Web やスマホアプリで流行している「パララックス効果」なんてのも場合によってはきっとそのひとつになるでしょう。中にはパララックスを効果的に活用しているサイトもありますが、『それ、パララックス必要?』という感想を抱く事例も多いように思えます。

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 とフラットデザインをそれぞれ中途半端に実装してしまっていたことで、フラットでもない iPhone よりも劣った立体感の、そんな GUI になってしまっていました。なのでもしかしたら Android プラットフォームではまた違った流れだったのかもしれません。


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

そのような歴史は今更百も承知だとは思いますが、私は最近の 過度なアニメーション の流行はこの Skeuomorphism の再来なのではないかと考えています。iOS 7あたりでいわゆるフラットデザインにパラダイムシフトした際(もちろんそれ以前からフラットデザインの実装例はあったにしても、大きな変革が起こったのには Apple の影響が大きい)、いままでああいった派手な GUI で食べてきた人たちが次の新天地として選んだのがこの GUI アニメーションの世界だったのではないか、ということです。新しいこと、新しい表現に挑戦したいという気持ちは私もよくわかりますが、GUI にアニメーションさせることが目的になっている気がしてなりません。これを専門用語で何と呼ぶのはわかりませんが、金属質のボタンだとかにこだわり過ぎていた “あの頃” となんとなく似ています。

幸い(あるいは不幸にも)フラットデザインとアニメーションはとても相性が良く、写実的な GUI よりも圧倒的にアニメーションが実装しやすいことがその動きを加速していくことになります。Material Design は紙とインクのメタファーの上で派手なアニメーションを推奨しています。ハンバーガーアイコンがくるんと動いて左矢印に変化するのも、同じボタンを押して戻れるんだよ、という視覚誘導のためのアニメーションだということは理解できなくはありません。

ただそれを履き違えると、例の Dribbble ショットのようなことになってしまいます。パンとパンが交差してバッテンになり、ハンバーグが周りを囲ってマルになるという演出があなたのアプリに絶対的に必要でしょうか。ハンバーガーのときにはマルで囲ってなかったのに、バッテンになると突然マルで囲うアイコンに変化するのも統一感が無さすぎます。

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

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

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

例えば Iron Man のように、一度に視界いっぱいに大量の光り輝く情報が表示されることが本当に良い GUI と言えるでしょうか。映画では「ヒーローがなにやらすごいことしてる感」が演出できるのでそれが許されるのですが、我々は残念ながらヒーローではありません。


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 になれる日はまだまだ遠いみたいです。

enchantMOON というデバイスをご存知でしょうか。あれも面白い試みなのですが、何せ基本的な部分の出来が酷すぎて最悪なのです。ペンでマルを描くと命令を実行できるとか普段の鉛筆やペンを利用するのと同様の動きで操れるのはすごく良かったのですが、何せその認識率の悪さとレスポンスが酷いせいで、日常的に使用するには耐え難いものでした。周りの人たちは皆5分で飽きてしまっていました。なぞった線はピーターパンのティンカーベルのように光り輝きながら描画されるのですが、線を引くごとにそのレスポンスが悪くなる一方なので、ティンカーベルどころではありません。

それはそうと、SF 映画のインターフェースデザインに興味をお持ちなら、こちらの本がおすすめです。アフィリエイトとかは仕込んでいないのでご安心ください。
SF映画で学ぶインタフェースデザイン アイデアと想像力を鍛え上げるための141のレッスン

そしてこちらはヤコブ・ニールセン博士の記事で、映画の中の UI と現実は異なるということを指摘されています。
映画の中のユーザビリティ間違い・トップ10

脱線しすぎたので戻しますね。

GUI アニメーションの原則


Your UI isn’t a Disney Movie

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

  • ユーザーの操作を邪魔しない
  • 視覚的に誘導させる目的で使用する
  • 必要以上に待機させない、あるいは意図的に待機させる目的で使用する
  • 目的に合わせ、必要最低限に留める
  • 「滑らかさ」を表現するためにイージングを効かせると良い

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

「あえて待たせる」という目的のためにアニメーションを活用するのも良いと思います。あの通信中の “ぐるぐる” もそうですし、ドラクエなんかの戦闘シーンに入る直前の画面崩壊演出だって、体感的な待機時間を緩和させる目的のために使用されているアニメーションのひとつです。

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

適切なイージング

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

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

  • 停止している物体が動いて再び停止する動き: Ease In Out
  • 停止している物体が動きだす動き: Ease In
  • すでに動いている物体が停止に向かう動き: Ease Out
  • 物体が壁に当たって跳ね返ったのちに停止する動き: Ease Out Bounce / Ease Out Elastic

こちらの ユーザ・インターフェースのためのイージングカーブをつくる という記事はとても参考になるので合わせてお読みください。
また、こちらのサイト http://easings.net/ja では様々な基本イージングのサンプルコードを公開しています。Linear, Ease In, Ease Out, Ease In Out あたりは iOS でもお馴染みですね。

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

iOS では UIScrollView(スクロールビュー)が非常に滑らかな動きをすることはご存じでしょう。素早く弾いて指を離すと、そこで動きは停止せずに慣性の法則に従って滑るように減速していって停止します。Safari など WebView ではこの減速率が急になっていて滑りが悪いのですが、ネイティブアプリであればほぼなにも考えずにこの動きを実装することができます。
このようなアニメーションはやはり iOS のユーザー体験のためには必要不可欠な要素となっていて、スクロールビューの滑り方とバウンス・バックがあるおかげで、そんなにスペックが高くなくても十分に滑らかな動きをする GUI が実現されています。端っこにぶち当たったらちょっと食い込んだのちに跳ね返って停止する、というのは、現実世界の物理現象を模倣しているのでより自然に見えます。GUI が指に吸い付くような感覚はそこから生まれます。

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

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

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

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

むすび

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

デザイナーであればおそらく理論で説明されなくとも感覚で理解できるはずです。『このアニメーションがちょっともっさりしてるなぁ』とか『ここもっと動かさないとビューの関係がわかりにくいよ』というのは普段からやってらっしゃることだと思います。ただ、そこを履き違えて派手なアニメーションを実装することに固執してしまうと、残念ながら「もっさり感」を与える無駄なアニメーションとなってしまいます。

これはデザイナーだけでなくエンジニアやもっと上流の偉い人たちにもその感覚を持って欲しいです。アニメーションはなかなか仕様書では定義しづらい分野でその効果を数値化しにくくどうしても感覚頼りになってしまうところがあります。プロトタイピングなどのプロセスで解決できるかもしれませんが、皆がその感覚を理解できていれば、よりスムーズに、そしてより良いものを作ることができるようになると思います。考えなしにディズニー映画みたいなアニメーションを GUI に実装するのはもうやめましょう。

参考資料


UI Design Advent Calendar 2015 明日10日目は Pixate Studio 2.0 で加わった機能紹介 です。お楽しみに。