SlideShare a Scribd company logo
1 of 30
Download to read offline
第7章 モーションとアニメーション




            2012年7
                 7⽉28⽇
           ARCHIT 安藤直紀
第1部                             第2部              第3部             第4部
バイルの特殊性                         現れつつある            モバイルの         モバイルUXの未
                               モバイルのパターン
                               モバイルのパタ ン        エクスペリエンスを
                                                    創る

 い     ユ      モ            形      モ     モ        モ        感
 う     ー      バ    デ       態      バ     バ        バ    動   情             新
 パ     ザ      イ    ン       の      イ     イ        イ    き   に             し
 ラ     ー      ル    バ       変      ル     ル        ル    の   働             い
 ダ     イ      固    ー   遷          の     の        プ    つ   き             モバ
 イ                の                              ロ   け      か             イ
 ム   ン     有      ピ                              ト   か      け             ル
                                UX



                                      UX
                                  パ         パ
     タ     の      ー               タ         タ    タ   た      る             の
     ーフ    ナチ     ナッ                             イ                  形
       ェ                         ー     ー         ピ
       ー    ュ     ツ              ン     ン         ン
       ス    ラ     バ              5               グ
       と    ルな    ター             選
Layer6:ビジュアルデザイン
                     ・視覚的にどのように⾒せるか?
                      視覚的にどのように⾒せるか?
     ビジュアルデザイン
     ビジ アルデザイン
                     ・どう演出するか?


                     Layer5:コンテンツ作成
                     ・どんなコピー、⽂章、写真に展開するか?
     コンテンツ作成
                     Layer4:情報設計・インタラクション
                     ・画⾯の中で情報をどう整理するのか?
                      画⾯の中で情報をどう整理するのか?
 インタラクション   情報設計     ・ユーザーの⾏動にどんな反応を⾏わせるのか?
 デザイン       (画⾯構成)
                     Layer3:サイト構造設計
                       y
                     ・情報をどう整理して構造化するのか?
     情報構造設計          ・ユーザー導線、ユーザータスク検討


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

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




アニメーションに関する書籍で
             で紹介されている12の基本原則を
モバイルエクスペリエンスにおいてわずかな動きを伴
                       伴ったアニメーションは強制的なデザイン材料として
扱われ始めている
幼少時の⼟曜⽇朝のテレビタイムの回想


   Movement breathes life into everything it touches
                             o               touches.
   「動き」が全ての触れるものに命を与える
アニメーションにおける12の基本原
                原則



     1.潰れと伸張
     2.予期(アフォーダンス)
     3.ステージング
     4.Pose to Pose
     5.フォロースルーとオ    オーバーラップ
     5.ゆっくり始まりゆっくり終わる
     7.アーク(弧)
     8.副次的なアクション
     9.タイミング   グ
     10.誇張
     11.ソリッドドローイ グ
           リ ドド     イング
                    イ
     12.アピール
1.潰れと伸張

現実世界にあるものの持つ質感の特
               特徴を考えて、取り⼊れる。
               特徴を考えて 取り⼊れる


・本棚や⽊の椅⼦について、堅くて曲がらない印象を持っている
・布⽣地や植物の葉について、柔
 布⽣地や植物の葉について、柔
              柔軟性を持っていると思っている




 Flip”board”は硬さを表現、iBook
                       ksは曲がりで薄さと柔軟さを表現
2.予期(アフォーダンス)

アクションをアニメーションで表現
アクシ ンをアニメ シ ンで表現
               現するのに必要な3つの状態




   アクションの        アク
                  クション      アクションの結果
   準備完了状態        その
                  のもの




            次に起こること
                  とを予期させる
2.予期(アフォーダンス)

WindowsPhone7でのアプリケーシ ン の遷移
Wi d   Ph   7でのアプリケ シ
                    ションへの遷移




          次に起こること
                とを予期させる
        これは本当にタイルUIへの
                    の予期をさせているのか?
2.予期(アフォーダンス)

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




            操作⽅法を予期させる
.ステージング(演技⼒?)

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




   「リアルだけど伝わらない」より「伝わる⾒え⽅」
   「リアルだけど伝わらない」より「伝わる⾒え⽅」
.ステージング(演技⼒?)

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




   iPad版Keynoteで⽤いられ
                   れているステージング。
   ファイル構造の中でどれに
   フ イル構造の中 どれに    に働きかけているのかわかり
                   に働きかけ  るのかわかり
   エクスペリエンスをより強    強固にさせる(適切なサンプル?)
4.Straight AheadとPoseToPose
                          e

■Straight Ahead



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


■Pose to Pose



                              キーフレームのみの表現



            単純な遷移ならPos to Poseで⼗分。
                     se
4.Straight AheadとPoseToPose
                          e


 ■Pose to Poseの例              ■Straight Aheadの例
                                    g         例




 ⾃分の⼟地の育成が主⽬的                  果物を切る爽快感がこのアプリの
 新しい作物が誕⽣したことの表現は              体験価値
 それほど重要ではない
5.フォロースルーとオーバーラッ
               ップ




     各要素をタイミングをず
               ずらしたり速度をずらす
.ゆっくり始まりゆっくり終わる(加速度の表現)




         慣性の採⽤、
              、イージング
.ゆっくり始まりゆっくり終わる(加速度の表現)




         慣性の採⽤、
              、イージング
.ゆっくり始まりゆっくり終わる(加速度の表現)




         慣性の採⽤、
              、イージング
.弧

物体は様々な⼒によって⽅向性を
物体は様々な⼒によ て⽅向性を
              を持って動くが軌跡は⽬に⾒えない
              を持 て動くが軌跡は⽬に⾒えない
機械は直線的に動くし、有機的な
              なものの軌跡は曲線を描く
.副次的なアクション




        体と⾜としっぽの動きは別
              ぽ
副次的なアクション




   「追いやられるスクリーン
              ン」の横移動と
   「新しいウインドウ」が⼿
              ⼿前に移動の別々の動き
タイミング
サイズや重さ、スケ ルなど現実
サイズや重さ スケールなど現実
              実の感覚を想起させるのに重要




        シュッと広がる、ずず
                 ずずいっと広がる
0.誇張
⾮現実的な強調表現は親しみが⽣まれる
              ⽣まれる
              ⽣
0.誇張
⾮現実的な強調表現は親しみが⽣まれる
              ⽣まれる
              ⽣
1.ソリッドドローイング
主にキャラクタ 表現で使われる
主にキャラクター表現で使われる
              る⼿法だがモバイルUXにも応⽤可
陰や光を使った3次元表現で重さ
              さやバランスの表現を⾏う
2.アピール
必ずしもポジティブな印象や同情
              情を誘うようなものでなくてよい
醜いもの、モンスターでも同様に
              にアピールになる
モーションを成果物に組み込むため
               めの⼿法
 スケッチ
モーションを成果物に組み込むため
               めの⼿法
 ワイヤフレ ム
 ワイヤフレーム
モーションを成果物に組み込むため
               めの⼿法
 プロトタイピング
モバイルUXプロジェクトを実施する
                る際のTips

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



 ・法則を補完し合う
   それぞれの法則は単独では望望ましい効果を達成し得ない。
   それぞれを協調させること



 ・サポートの役⽬としてのアニメ
               メーション
   モバイル体験の中でアニメー
               ーションは補助的な役割
   ⼿段と⽬的を間違えないよう
               うに
感想

 ・12の法則は明確に分離していな
                ない
   法則として正しいが、サンププルが適切でないものも。
   今後多くの事例が⽣まれて初初めて完成するのかも


 ・感覚の違いを吸収するためのプ
               プロトタイピング
   コンパイルが必要なプロダク
    ンパイルが必要なプ ダク
               クトでは難しい?
               クト は難し ?
   アニメーションを検討するた
               ためのツールの必要性がありそう

More Related Content

Viewers also liked

VR comes of age. Why VR is relevant now and what it means for the future
VR comes of age. Why VR is relevant now and what it means for the futureVR comes of age. Why VR is relevant now and what it means for the future
VR comes of age. Why VR is relevant now and what it means for the futureBristol Media
 
Location Based VR: VR Internet Cafe & VR Arcade | Jikhan Jung
Location Based VR: VR Internet Cafe & VR Arcade | Jikhan JungLocation Based VR: VR Internet Cafe & VR Arcade | Jikhan Jung
Location Based VR: VR Internet Cafe & VR Arcade | Jikhan JungJessica Tams
 
Introduction to VR - Past, Presence & Future
Introduction to VR - Past, Presence & FutureIntroduction to VR - Past, Presence & Future
Introduction to VR - Past, Presence & FutureSam Watts
 
HTC Vive Marketing Plan
HTC Vive Marketing PlanHTC Vive Marketing Plan
HTC Vive Marketing PlanGregory Haeger
 
Consumer Virtual Reality: State of the Market
Consumer Virtual Reality: State of the MarketConsumer Virtual Reality: State of the Market
Consumer Virtual Reality: State of the MarketKZero Worldswide
 
SP1: Exploratory Network Analysis with Gephi
SP1: Exploratory Network Analysis with GephiSP1: Exploratory Network Analysis with Gephi
SP1: Exploratory Network Analysis with GephiJohn Breslin
 
The Emerging Virtual Reality Landscape: a Primer
The Emerging Virtual Reality Landscape: a PrimerThe Emerging Virtual Reality Landscape: a Primer
The Emerging Virtual Reality Landscape: a PrimerSim Blaustein
 

Viewers also liked (9)

VR comes of age. Why VR is relevant now and what it means for the future
VR comes of age. Why VR is relevant now and what it means for the futureVR comes of age. Why VR is relevant now and what it means for the future
VR comes of age. Why VR is relevant now and what it means for the future
 
Location Based VR: VR Internet Cafe & VR Arcade | Jikhan Jung
Location Based VR: VR Internet Cafe & VR Arcade | Jikhan JungLocation Based VR: VR Internet Cafe & VR Arcade | Jikhan Jung
Location Based VR: VR Internet Cafe & VR Arcade | Jikhan Jung
 
Introduction to VR - Past, Presence & Future
Introduction to VR - Past, Presence & FutureIntroduction to VR - Past, Presence & Future
Introduction to VR - Past, Presence & Future
 
VR presentation APKOMINDO 2016
VR presentation APKOMINDO 2016VR presentation APKOMINDO 2016
VR presentation APKOMINDO 2016
 
HTC Vive Marketing Plan
HTC Vive Marketing PlanHTC Vive Marketing Plan
HTC Vive Marketing Plan
 
Consumer Virtual Reality: State of the Market
Consumer Virtual Reality: State of the MarketConsumer Virtual Reality: State of the Market
Consumer Virtual Reality: State of the Market
 
SP1: Exploratory Network Analysis with Gephi
SP1: Exploratory Network Analysis with GephiSP1: Exploratory Network Analysis with Gephi
SP1: Exploratory Network Analysis with Gephi
 
The Emerging Virtual Reality Landscape: a Primer
The Emerging Virtual Reality Landscape: a PrimerThe Emerging Virtual Reality Landscape: a Primer
The Emerging Virtual Reality Landscape: a Primer
 
Realidadvirtual
RealidadvirtualRealidadvirtual
Realidadvirtual
 

Similar to Mobile frontier chapter7

無題の添付ファイル 00060
無題の添付ファイル 00060無題の添付ファイル 00060
無題の添付ファイル 00060Shigeru Kishikawa
 
記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―
記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―
記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―Tadahiro Taniguchi
 
Social Change Starts With YOU!
Social Change Starts With YOU!Social Change Starts With YOU!
Social Change Starts With YOU!Kenji Hiranabe
 
UX TOKYOとワークショップ サード・プレイスとしての機能と役割
UX TOKYOとワークショップ  サード・プレイスとしての機能と役割UX TOKYOとワークショップ  サード・プレイスとしての機能と役割
UX TOKYOとワークショップ サード・プレイスとしての機能と役割uxtokyo
 
UX TOKYOとワークショップ サード・プレイスとしての機能と役割
UX TOKYOとワークショップ サード・プレイスとしての機能と役割UX TOKYOとワークショップ サード・プレイスとしての機能と役割
UX TOKYOとワークショップ サード・プレイスとしての機能と役割ux_tokyo
 
Nonaka's Scrum, Phronetic Leadership and Requirements Development
Nonaka's Scrum, Phronetic Leadership and Requirements DevelopmentNonaka's Scrum, Phronetic Leadership and Requirements Development
Nonaka's Scrum, Phronetic Leadership and Requirements DevelopmentKenji Hiranabe
 
2D格闘ゲームにおけるユーザビリティとゲームデザインについて
2D格闘ゲームにおけるユーザビリティとゲームデザインについて2D格闘ゲームにおけるユーザビリティとゲームデザインについて
2D格闘ゲームにおけるユーザビリティとゲームデザインについてKoji Morikawa
 
「デザイニング・インターフェース」勉強会 - 第7章
「デザイニング・インターフェース」勉強会 - 第7章「デザイニング・インターフェース」勉強会 - 第7章
「デザイニング・インターフェース」勉強会 - 第7章Tsutomu Kawamura
 
UXD代表的10手法のご紹介 調査~仮説立案~設計~検証のアプローチ
UXD代表的10手法のご紹介 調査~仮説立案~設計~検証のアプローチUXD代表的10手法のご紹介 調査~仮説立案~設計~検証のアプローチ
UXD代表的10手法のご紹介 調査~仮説立案~設計~検証のアプローチIMJ Corporation
 
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方Roy Kim
 
ロール分析マップVer1.5
ロール分析マップVer1.5ロール分析マップVer1.5
ロール分析マップVer1.5Naoka MISAWA
 
ロール分析マップ
ロール分析マップロール分析マップ
ロール分析マップNaoka MISAWA
 
「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014Autumn
「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014Autumn「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014Autumn
「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014AutumnKeysuke Mizuno
 
Agile, Software Engineering, Process Kaizen. They mix like oil and water ?
Agile, Software Engineering, Process Kaizen. They mix like oil and water ?Agile, Software Engineering, Process Kaizen. They mix like oil and water ?
Agile, Software Engineering, Process Kaizen. They mix like oil and water ?Kenji Hiranabe
 
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザインKonomi Kawaharada
 
「実ロボットの運動生成」
「実ロボットの運動生成」「実ロボットの運動生成」
「実ロボットの運動生成」Yurika Doi
 
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹KIT Cognitive Interaction Design
 
スマートフォンUIデザイン
スマートフォンUIデザインスマートフォンUIデザイン
スマートフォンUIデザインKonomi Kawaharada
 

Similar to Mobile frontier chapter7 (20)

無題の添付ファイル 00060
無題の添付ファイル 00060無題の添付ファイル 00060
無題の添付ファイル 00060
 
記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―
記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―
記号を用いたコミュニケーションを実現するために何が必要か?― 記号創発ロボティクスの 視点から ―
 
Agile Overview In Ono
Agile Overview In OnoAgile Overview In Ono
Agile Overview In Ono
 
Social Change Starts With YOU!
Social Change Starts With YOU!Social Change Starts With YOU!
Social Change Starts With YOU!
 
UX TOKYOとワークショップ サード・プレイスとしての機能と役割
UX TOKYOとワークショップ  サード・プレイスとしての機能と役割UX TOKYOとワークショップ  サード・プレイスとしての機能と役割
UX TOKYOとワークショップ サード・プレイスとしての機能と役割
 
UX TOKYOとワークショップ サード・プレイスとしての機能と役割
UX TOKYOとワークショップ サード・プレイスとしての機能と役割UX TOKYOとワークショップ サード・プレイスとしての機能と役割
UX TOKYOとワークショップ サード・プレイスとしての機能と役割
 
Nonaka's Scrum, Phronetic Leadership and Requirements Development
Nonaka's Scrum, Phronetic Leadership and Requirements DevelopmentNonaka's Scrum, Phronetic Leadership and Requirements Development
Nonaka's Scrum, Phronetic Leadership and Requirements Development
 
2D格闘ゲームにおけるユーザビリティとゲームデザインについて
2D格闘ゲームにおけるユーザビリティとゲームデザインについて2D格闘ゲームにおけるユーザビリティとゲームデザインについて
2D格闘ゲームにおけるユーザビリティとゲームデザインについて
 
「デザイニング・インターフェース」勉強会 - 第7章
「デザイニング・インターフェース」勉強会 - 第7章「デザイニング・インターフェース」勉強会 - 第7章
「デザイニング・インターフェース」勉強会 - 第7章
 
UXD代表的10手法のご紹介 調査~仮説立案~設計~検証のアプローチ
UXD代表的10手法のご紹介 調査~仮説立案~設計~検証のアプローチUXD代表的10手法のご紹介 調査~仮説立案~設計~検証のアプローチ
UXD代表的10手法のご紹介 調査~仮説立案~設計~検証のアプローチ
 
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
 
ロール分析マップVer1.5
ロール分析マップVer1.5ロール分析マップVer1.5
ロール分析マップVer1.5
 
ロール分析マップ
ロール分析マップロール分析マップ
ロール分析マップ
 
A Lean UX Workshop
A Lean UX WorkshopA Lean UX Workshop
A Lean UX Workshop
 
「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014Autumn
「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014Autumn「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014Autumn
「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014Autumn
 
Agile, Software Engineering, Process Kaizen. They mix like oil and water ?
Agile, Software Engineering, Process Kaizen. They mix like oil and water ?Agile, Software Engineering, Process Kaizen. They mix like oil and water ?
Agile, Software Engineering, Process Kaizen. They mix like oil and water ?
 
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン
 
「実ロボットの運動生成」
「実ロボットの運動生成」「実ロボットの運動生成」
「実ロボットの運動生成」
 
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹
 
スマートフォンUIデザイン
スマートフォンUIデザインスマートフォンUIデザイン
スマートフォンUIデザイン
 

More from naoki ando

サイボウズの方向性
サイボウズの方向性サイボウズの方向性
サイボウズの方向性naoki ando
 
オウンドメディア企画書
オウンドメディア企画書オウンドメディア企画書
オウンドメディア企画書naoki ando
 
コンビニサプライチェーンを用いたCSR企画書
コンビニサプライチェーンを用いたCSR企画書コンビニサプライチェーンを用いたCSR企画書
コンビニサプライチェーンを用いたCSR企画書naoki ando
 
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」naoki ando
 
行動経済学+UX勉強会発表資料
行動経済学+UX勉強会発表資料行動経済学+UX勉強会発表資料
行動経済学+UX勉強会発表資料naoki ando
 
宮崎講演資料
宮崎講演資料宮崎講演資料
宮崎講演資料naoki ando
 
WebSig24/7 Surviveイベント 安藤講演資料
WebSig24/7 Surviveイベント 安藤講演資料WebSig24/7 Surviveイベント 安藤講演資料
WebSig24/7 Surviveイベント 安藤講演資料naoki ando
 

More from naoki ando (7)

サイボウズの方向性
サイボウズの方向性サイボウズの方向性
サイボウズの方向性
 
オウンドメディア企画書
オウンドメディア企画書オウンドメディア企画書
オウンドメディア企画書
 
コンビニサプライチェーンを用いたCSR企画書
コンビニサプライチェーンを用いたCSR企画書コンビニサプライチェーンを用いたCSR企画書
コンビニサプライチェーンを用いたCSR企画書
 
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
 
行動経済学+UX勉強会発表資料
行動経済学+UX勉強会発表資料行動経済学+UX勉強会発表資料
行動経済学+UX勉強会発表資料
 
宮崎講演資料
宮崎講演資料宮崎講演資料
宮崎講演資料
 
WebSig24/7 Surviveイベント 安藤講演資料
WebSig24/7 Surviveイベント 安藤講演資料WebSig24/7 Surviveイベント 安藤講演資料
WebSig24/7 Surviveイベント 安藤講演資料
 

Mobile frontier chapter7