本コラムの第1回では、iPhoneをはじめとするタッチパネル操作がなぜ気持ちが良いのか、自己に帰属する動きとアニメーションに分けて説明しました。その際、アニメーションはユーザの注意を引いたり、ナビゲーションの際に利用するという話をしました。

今回はより詳しいアニメーション表現の種類について考えていきます。

Disneyが提案するアニメーションの原理

アニメーションの語源は「アニマ」というラテン語の「魂」という意味に由来し、「⁠命を与えて動かす」という意味があります。したがって、アニメーションの目的には、生命らしい動きの追求があります。

アニメーションはさまざな作家によって研究されていますが、特に動きの体系化として有名なのが、Walt Disneyが分類・定義したアニメーション12の法則です[1]⁠。

1. スクオッシュ（潰し）とストレッチ（伸ばし）
2. アンチシペーション（予備動作）
3. ステージング（演出）
4. ストレート・アヘッド・アクション（逐次描き）とポーズ・トゥ・ポーズ（原画による設計）
5. フォロースルーとオーバーラッピング・アクション（あと追いの工夫）
6. スロー・インとスロー・アウト（両端詰め）
7. アーク（運動曲線）
8. 副次アクション
9. タイミング
10. 誇張
11. 実質感のある絵
12. アピール（訴える力）

この法則は、アニメーションをより視聴者に「それらしく」見せる方法として有名です。これらの方法は、UIに利用するアニメーションでも参考になります。ここではそのいくつかを紹介します[2]⁠。

アニメーションの原理の紹介

スクオッシュとストレッチ

人間や動物の身体は柔軟です。またボールなどの物質もバウンド時には変形しています。こういった潰しや伸ばしを取り込むことで、より生命的で、やわらかい表現になります。

図1はauから発売されているINFOBAR A02の画面です。スクロール時にスクオッシュとストレッチの表現が使われており、スクロールの動きの速さに応じてアイコンが伸び縮みします。このUIはWebページでも体験できるので、ぜひ試してみることをお勧めします。

アンチシペーション

アンチシペーションとは予備動作という意味です。キャラクターが動く前に準備動作があることが多く、たとえば走り出す前には少しだけ後ろに下がるような構え動作、助走を入れてから「走る」動作の表現をしたほうが生命らしいということから、法則として定義されました（図2⁠）⁠。

動作に入る前の予備動作だけでなく、本動作が終わったあとの動作、たとえば、走る場合だと急には止まれないので、そのためのアクションを入れることも重要とされています。

アンチシペーションはGUIで言えば、ロールオーバー時とクリック時のアニメーションの連続性を考えることができるでしょう。ロールオーバー時に予備動作を提示すれば、クリック時にどういう動作が起こり得るかをユーザが予測可能になります。

これは単純にロールオーバーするとボタンが光ってクリック可能であることを示すという話ではありません。現在のiPhoneで言えば、ロック画面にあるカメラアイコンをタップするとタップでは動作できないことをアニメーションで表現しています。またiPhoneのスクロールは末端に行くと跳ね返りの予備動作を提示することで、これ以上スクロールできないことをユーザに提示します。

スロー・インとスロー・アウト

動物は走っても急に最高速度にはなりませんし、止まるときも急には止まれません。これは人間の手足の運動も同様です。ですからたとえば、GUI上の動きもスローインやスローアウトのアニメーションの法則を取り入れることで、身体に近い動きになります。これは慣性の法則による動きと考えることもできます。

スマートフォン上で指と画面が接触しているときは、ユーザの身体の動きそのものですが、そこから指が離れたあとの動きはアニメーションとして設計する必要があります。そのときにスローアウトの設計は使われています。iPhone、Android、INFOBAR A02などで同じような設計がされています。

法則の組み合わせ

これらの法則は分解・分類したもので、多くの場合組み合わせて利用されます。たとえば、スクロール中はスロー・インとスロー・アウトを利用し、最後まで到達したときにスクオッシュ効果の表現を用いることも可能でしょう。

自己帰属の余韻とアニメーション

第1回では「指に連動する動き」と「指に連動しないで動く動き＝アニメーション」を分けて説明しました。今回は後者についての話をさらに詳しく解説しました。どちらの動きも重要ですが、それが別の性質を持っていることに注意しなければなりません。

動きがユーザの入力操作と連続的に表現されれば、自己へ帰属[3]してきますが、アニメーションは自己へ帰属しません。しかし指を動かしたあと、たとえばスクロール動作などは慣性で動き続けるようなときの動きは中間的です。言わば「投げたボール」の動きです。投げて手から離れるまではボールは自己に100％帰属していますが、手から離れた瞬間その帰属は低下し物理法則に従うようになります。

画面上は投げたボールとは異なり物理法則はないため、どのように表現するかは自由です。ですからここでデザインの「遊び」やそのデバイス特有の個性を表現できる可能性があります。

もちろん、操作から逸脱した動きは因果関係が不明瞭になるため、限度はあると思います。たとえるならば、ある楽器が音が出したときに反響音周辺に広がる「余韻」のようなものと考えるとよいかと思います。適切な余韻は空間的な広がりを感じさせてくれますが、その反響音がひどすぎると、もはや自分の出した音（あるいはそこから出ている音）であるかは判別がつかなくなってしまうからです。

おわりに

コンピュータのデザインは動きを自由に設計できることが大きな特徴で、強みでもあります。自己帰属する動き、アニメーションそれぞれの要素をうまく取り入れることで、身体に馴染むデザインになるでしょう。

今回紹介したのはDisneyが分類したアニメーションの法則です。スタジオジブリもこの法則は参考に勉強したということですが、これらの法則にそのまま従うとディズニーらしいアニメーションになってしまいます[4]⁠。

日本のアニメーションはこれとはまた違います。違いについてはさまざまに論じられていますが、たとえばスタジオジブリの宮﨑駿氏や高畑勲氏の師匠とも言われるアニメーション作家、大塚康生氏のドキュメンタリービデオ「大塚康生の動かす喜び」も興味深い内容ですので、ぜひ一度観られることお勧めします。