ディズニーのアニメーション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