伝説のディズニーアニメーターから学ぶ、UXを向上させる5つのアニメーション/ SXSW 2015 UXレポート

Shingo Hagiwara

·

Follow

9 min read

·

Apr 8, 2015

--

Share

先日、テキサス州オースティンで開催されたSXSW(The South by Southwest：サウス・バイ・サウスウエスト) 2015にAppSociallyとしてブース出展してきました。SXSWは、音楽, フィルム, インタラクティブの3部門からなるイベントで、私たちはインタラクティブ部門のTrade showに参加してきました。

SXSWは、先端の企業が出展するTrade showも注目されていますが、それだけでなく、世界中から著名人が集まり同時多発的に開催される1000以上のセッションも注目の的です。

ブース運営の傍ら、私もセッションに参加して、いろいろと面白い話を聞くことが出来たので、その様子を紹介していきたいと思います。

ディズニーアニメーターとR/GAによるUXで効果的なアニメーションの話

http://schedule.sxsw.com/2015/events/event_IAP37950

今回紹介するのは、ディズニーの伝説のアニメーターGlen KeaneとデジタルエージェンシーR/GAのRebecca Ussaiが、ディズニーアニメーションとモバイルのUXの共通項について語るThe Principles of UX Choreographyです。Keaneはディズニーで40年近くアニメーターとして活躍しアラジンやターザンなど有名なディズニー作品を手がけてきた人物です。組み合わせからして、ものすごく面白そうなこのセッション、予想通り超満員でした。

“Ussaiがモバイルで使用されるアニメーションの手法について紹介し、すぐにKeaneがその場でスケッチを書きながら、その手法をディズニーの世界で表現して説明する”という流れでセッションは進みました。

終了後にはスタンディングオベーションという異例のセッションとなり大盛況で幕を閉じました。

ディズニーが提唱した12のアニメーションの原則

1. Squash & Stretch
2. Anticipation
3. Arc
4. Ease In & Ease Out
5. Appeal
6. Timing
7. Solid drawing
8. Exaggeration
9. Post to Pose
10. Staging
11. Secondary Action
12. Follow Through

これは1930年にディズニーが提唱した良いアニメーションをつくるための12の原則です。当時、ディズニーは現実世界の動物や昔の映像作品を研究し、この原則を創ったそうです。

この動画を見ると、いまモバイルのアプリケーションで実装されているアニメーションが多く含まれていることに気づくのではないでしょうか。いまから80年前、既にその法則はできていたのです。

モバイルUXとディズニーアニメーション

具体的に、現在のモバイルアプリケーションで使われているUXに効果的なアニメーションは以下の5つにわけられます。

1. FEEDBACK

the results of a user’s interaction / demonstrates whether or not it was successful and why

ユーザーの操作の結果、何が起きたか(成功したか、失敗したか)をアプリケーションがユーザーに通知するためのアニメーションです。

• アプリケーション例: iOS

iPhoneのロック画面でパスワード入力に失敗したときに、4つの小さな○が左右に振れて失敗したことを知らせてくれます。

• 関連する12 principle of animation

2. FEEDFORWARD

conveys possible interactions and what to expect / hinting and visual affordance / how things work and fit together / helps users accomplish goals

ユーザーが次に何の動作をしたら良いか促すアニメーションです。

• アプリケーション例: yummly

レシピアプリyummlyでサーチボタンをタップすると、

ロゴは右のスクリーン外に、メニューとサーチボタンは下に下がり、キーボードが表示されます、最後にサーチが小さく拡縮し、ユーザーは自ずと入力の操作へフォーカスします。

• 関連する12 principle of animation

3. SPATIAL AWARENESS

orients the user with the environment and information architecture / strategizes how to properly use screen real estate to reduce complexity

現実世界の動きや空間を意識したアニメーションです。加速度を意識したアニメーションや3Dの空間表現があげられます。

• アプリケーション例: Flipboard

キュレーションメディアFlipboardのアプリでは、ページが3Dのように表現され、ページの移動も加速度が加味されて、本をめくるような感覚で操作できます。

• 関連する12 principle of animation

4. USER-FOCUS

guidance of attention / clarifies change states / controls the transitions of hierarchy each moment in time

状況が変わったときや、アクションを誘導したいときに、ユーザーの注意を惹きつけるためのアニメーションです。

• アプリケーション例: Pinterest

アイテムを長押しして”Like”の方向にフリックをすると

ハートの画像がアニメーションと共に現れて、”Like”が完了したことを教えてくれます。

• 関連する12 principle of animation

5. BRAND TONE

the details that add brand personality / tone of voice / surprise and delight

ブランドのパーソナリティを表現し印象づけるためのアニメーションです。

• アプリケーション例: Snapchat

Snapchatのメッセージリスト画面で、リストを上にプルすると下にいるキャラクターのアニメーションが始まります。これによってSnapchatの”楽しさ”を演出しています。

• 関連する12 principle of animation

いかがだったでしょうか。UXにおいて効果的なアニメーションを使うことは必須になってきています。アニメーションは、細かい部分として見られがちですが、ユーザーに与える印象を大きく左右することもあるでしょう。またあまり意識せずによくある表現を安直に使用してしまいがちです。だからこそ”なぜ”使うのかを常に意識して実装していきたいですね。

• 参考URL

http://northamerica.mslgroup.com/network/sxsw/2015/03/15/sxsw-session-notes-ux-choreography-ux-lessons-from-a-disney-legend/

http://blog.amyrenepowell.com/blog/sxsw-2015-day-3