ディズニーのアニメーション12原則
から学び取るスマホデザインの極意
安藤幸央
@yukio_andoh
2013/6/19
デザインラウンジ
のアイデアラウンジ
(CC) by kankan

アニメーションの法則
multitasking woman

ディズニーアニメーション 生命を吹き込む魔法

ディズニーのアニメーションの12原則
■スクオッシュ（潰し）とストレッチ（伸ばし）
■アンチシペーション（予備動作）
■ステージング（舞台演出）
■ストレート・アヘッド・アクション（逐次描き）と
ポーズ・トゥ・ポーズ（原画による設計）
■フォロー・スルーとあと追いの工夫
■スロー・インとスロー・アウト（両端づめ）
■アーク（運動曲線）
■副次アクション
■タイミング
■誇張
■実質感のある絵
■訴える力

ディズニーのアニメーションの12原則
The 12 Principles of Animation http://www.youtube.com/watch?v=xqGL1ZLk3n8

アニメーションの原則を生かす手法
1■ 良いアプリをたくさん自分で使い込む。たくさん探す。
2■ 良いものが、なぜ良いのか、自分の中で分析・分解する。
3■ 常用アプリが更新したら、どこが変わったのか比較する。
4■ 必要なのは「意味のある」動きだけ。単一画面内での動き。
5■ コンテンツが王様。直接操作。UIは本来無くていいもの。
6■ インタフェースは媒介物、人々のインタラクションを考慮。
7■ 指が触れて操作する瞬間は画面が見えないことを考慮。
8■ 使っている人を観察する。5人の試用で85%の問題は解明。
9■ 情報の密度を落とす。着目すべきところを演出する。
10■ 中断されることが前提。途中から始まることが前提。
11■ iPhone と Android と同じにする必要無し。一人１台。
12■ 外に出て使う。ストレスフルな状況下で使う。速度重要。

via. apple.com

iOS 7 時代のフラットデザイン
1■ 単に平らなだけではない。レイヤー構造を持ったことが重要
2■ 限られた画面サイズを面積以上に活用するためのフラット
3■ 操作の前後におけるアニメーションこそが重要。透明度重視
4■ どこ触ったらいいか解らないのを「近接／類同／閉合」で
5■ コントラスト、カラーテーブルの設定、色を使いすぎない
6■ 文字とフォントがますます重要に。グリッドデザイン重視

真にシンプルであることとは、
ただ装飾と煩雑さが不在であるとい
うことよりも
複雑さに秩序をもたらすということ
を意味する。（Jonathan Ive）
via. http://jonyiveredesignsthings.tumblr.com/

さまざまなしがらみから解き放つことに
フォーカスすべき（John Maeda）
Rhode Island School of Design

アイコンを平らにするのは
一番最後です（Basuke）
via. http://www.icojam.com/blog/?p=380

間違いなくモバイルの時代

ディズニーのアニメーション12原則
から学び取るスマホデザインの極意
安藤幸央
@yukio_andoh