第7章 モーションとアニメーショ

2012年7ARCHIT

ン

7⽉28⽇安藤直紀

第1部バイルの特殊性

第2部現れつつある

モバイルのパタ ンモバイルのパターン

モバイル固

ユーザーイ

いうパラダ

デンバー

形態の変遷

モバイル

モバイル

固有のナチ

インターフ

ダイム

のピーナッ

遷 のUX

パタ

のUX

パタチ

ュラルな

フェースと

ッツバター

ーン５選

ーン

なと ー

第3部モバイルの

エクスペリエンスを

第4部モバイルUXの未

エクスペリエンスを創る

モバイルプ

動きのつ

感情に働き

新しいモバプ

ロトタイ

けかた

きかける

バイルの形イ

ピング

形

ビジ アルデザインビジュアルデザイン

コンテンツ作成

インタラクションデザイン

情報設計（画⾯構成）

情報構造設計

機能要件 コンテンツ要件

戦略・施策検討（ユーザーニーズ、ビジネス要件）

アニメーションに関する書籍で通じて モバイルUXを⾼めるテ

Layer6:ビジュアルデザイン・視覚的にどのように⾒せるか？視覚的にどのように⾒せるか？・どう演出するか？

Layer5:コンテンツ作成・どんなコピー、⽂章、写真に展開するか？

Layer4:情報設計・インタラクション画⾯の中で情報をどう整理するのか？・画⾯の中で情報をどう整理するのか？

・ユーザーの⾏動にどんな反応を⾏わせるのか？

Layer3:サイト構造設計y・情報をどう整理して構造化するのか？・ユーザー導線、ユーザータスク検討

Layer2:機能 コンテンツ要件Layer2:機能・コンテンツ要件・どんなコンテキスト、コンテンツにするか？・どんな機能をどのように実装するか？

Layer1:戦略・施策検討・ビジネス・ユーザー条件検討・ターゲットユーザー、ペルソナ、シナリオ検討・ユーザーニーズ、ビジネス要件検討

で紹介されている12の基本原則をテクニックについて紹介

モバイルエクスペリエンスにおいてわずかな動きを伴扱われ始めている幼少時の⼟曜⽇朝のテレビタイムの回想

Movement breathes life intoMovement breathes life into「動き」が全ての触れるもの

伴ったアニメーションは強制的なデザイン材料として

o everything it toucheso everything it touches.に命を与える

アニメーションにおける12の基本原

１．潰れと伸張２．予期（アフォーダ３．ステージング４．Pose to Pose５．フォロースルーとオ５．ゆっくり始まりゆ７．アーク（弧）８．副次的なアクショ

グ９．タイミング１０．誇張

リ ドド イ１１．ソリッドドローイ１２．アピール

原則

ンス）

オーバーラップっくり終わる

ン

イ グイング

１．潰れと伸張

現実世界にあるものの持つ質感の特現実世界にあるものの持つ質感の特

・本棚や⽊の椅⼦について、堅く・布⽣地や植物の葉について、柔布⽣地や植物の葉について、柔

Flip”board”は硬さを表現、iBook

特徴を考えて 取り⼊れる特徴を考えて、取り⼊れる。

て曲がらない印象を持っている柔軟性を持っていると思っている柔軟性を持っていると思っている

ksは曲がりで薄さと柔軟さを表現

２．予期（アフォーダンス）

アクシ ンをアニメ シ ンで表現アクションをアニメーションで表現

アクションの準備完了状態

アクその

次に起こること

現するのに必要な3つの状態現するのに必要な3つの状態

クションのもの

アクションの結果

とを予期させる

２．予期（アフォーダンス）

Wi d Ph 7でのアプリケ シWindowsPhone7でのアプリケーシ

次に起こることこれは本当にタイルUIへのこれは本当にタイルUIへの

シ ン の遷移ションへの遷移

とを予期させるの予期をさせているのか？の予期をさせているのか？

２．予期（アフォーダンス）

P l P で⾒られるアフ ダンPalm Preで⾒られるアフォーダン

操作⽅法を操作⽅法を

スス

予期させる予期させる

．ステージング（演技⼒？）

インタラクシ ンの遷移を明確に伝インタラクションの遷移を明確に伝

「リアルだけど伝わらな「リアルだけど伝わらない

伝える伝える

」より「伝わる⾒え⽅」い」より「伝わる⾒え⽅」

．ステージング（演技⼒？）

インタラクシ ンの遷移を明確に伝インタラクションの遷移を明確に伝

iPad版Keynoteで⽤いられフ イル構造の中 どれにファイル構造の中でどれにエクスペリエンスをより強

伝える伝える

れているステージング。に働きかけ るのかわかりに働きかけているのかわかり強固にさせる（適切なサンプル？）

４．Straight AheadとPoseToPose

■Straight Ahead

■Pose to Pose■Pose to Pose

単純な遷移ならPos

e

キ フレ ム間のシ ケンスキーフレーム間のシーケンスを全て可視化する

キーフレームのみの表現

se to Poseで⼗分。

４．Straight AheadとPoseToPose

■Pose to Poseの例

⾃分の⼟地の育成が主⽬的新しい作物が誕⽣したことの表現はそれほど重要ではない

e

■Straight Aheadの例g 例

果物を切る爽快感がこのアプリの体験価値

５．フォロースルーとオーバーラッ

各要素をタイミングをず

ップ

ずらしたり速度をずらす

．ゆっくり始まりゆっくり終わる

慣性の採⽤、

（加速度の表現）

、イージング

．ゆっくり始まりゆっくり終わる

慣性の採⽤、

（加速度の表現）

、イージング

．ゆっくり始まりゆっくり終わる

慣性の採⽤、

（加速度の表現）

、イージング

．弧

物体は様々な⼒によ て⽅向性を物体は様々な⼒によって⽅向性を機械は直線的に動くし、有機的な

を持 て動くが軌跡は⽬に⾒えないを持って動くが軌跡は⽬に⾒えないなものの軌跡は曲線を描く

．副次的なアクション

体と⾜としっぽぽの動きは別

副次的なアクション

「追いやられるスクリーン「新しいウインドウ」が⼿「新しいウインドウ」が⼿

ン」の横移動と⼿前に移動の別々の動き⼿前に移動の別々の動き

タイミングサイズや重さ スケールなど現実サイズや重さ、スケ ルなど現実

シュッと広がる、ずず

実の感覚を想起させるのに重要実の感覚を想起させるのに重要

ずずいっと広がる

0．誇張⾮現実的な強調表現は親しみが⽣⾮現実的な強調表現は親しみが⽣⽣まれる⽣まれる

0．誇張⾮現実的な強調表現は親しみが⽣⾮現実的な強調表現は親しみが⽣⽣まれる⽣まれる

1．ソリッドドローイング主にキャラクター表現で使われる主にキャラクタ 表現で使われる陰や光を使った3次元表現で重さ

る⼿法だがモバイルUXにも応⽤可る⼿法だがモバイルUXにも応⽤可さやバランスの表現を⾏う

2．アピール必ずしもポジティブな印象や同情必ずしもポジティブな印象や同情醜いもの、モンスターでも同様に

情を誘うようなものでなくてよい情を誘うようなものでなくてよいにアピールになる

モーションを成果物に組み込むためスケッチスケッチ

めの⼿法

モーションを成果物に組み込むためワイヤフレームワイヤフレ ム

めの⼿法

モーションを成果物に組み込むためプロトタイピングプロトタイピング

めの⼿法

モバイルUXプロジェクトを実施する

・やりすぎを抑えることを学ぼう提供しようとしているユーザ提供しようとしているユ ザ

・法則を補完し合うそれぞれの法則は単独では望それぞれを協調させること

・サポートの役⽬としてのアニメモバイル体験の中でアニメー⼿段と⽬的を間違えないよう

る際のTips

うザー体験をやりすぎないことザ 体験をやりすぎないこと

望ましい効果を達成し得ない。

メーションーションは補助的な役割うに

感想

・12の法則は明確に分離していな法則として正しいが、サンプ法則として正しいが、サンプ今後多くの事例が⽣まれて初

・感覚の違いを吸収するためのプンパイルが必要なプ ダクコンパイルが必要なプロダク

アニメーションを検討するた

ないプルが適切でないものも。プルが適切でないものも。初めて完成するのかも

プロトタイピングクト は難し ？クトでは難しい？ためのツールの必要性がありそう