モーショングラフィックによる 「つかいかた」の「つくりかた」/ How to create motion graphics for micro interactions

地味だけど、ユーザー体験を大きく左右するマイクロインタラクション。
その中でも特に重要な、「つかいかた」をより分かりやすくするための、モーショングラフィック作成のポイントと具体的な「つくりかた」について。

Transcript

1. ϞʔγϣϯάϥϑΟοΫʹΑΔ
   ʮ͔͍͔ͭͨʯͷʮͭ͘Γ͔ͨʯ 5BLBNBTB
   .BUTVNPUPʛ$PJOFZ
   *OD
   ώΧˑϥϘʰʲ,ZBTIɺ$PJOFZɺ1":ʳ৽͍͠ࢧ෷͍ͷܗΛ࡞ΔɺϞόΠϧܾࡁαʔϏεͷ։ൃͷཪଆͱ͸ʱ
2. দຊོԠ
   5BLBNBTB
   .BUTVNPUP
 $PJOFZʗIFZ
   ϦʔυσβΠφʔ
   w ೥$PJOFZ૑ۀ࣌ʹδϣΠϯʙ໿೥ؒΞϓϦͷ6*Λ୲౰
   w ίʔϙϨʔτϓϩμΫτͷ౷߹తͳσβΠϯ
   w ࠷ۙ͸IFZͷίʔϙϨʔτσβΠϯͳͲ΋୲౰
3. Ұݟ஍ຯͳϞʔγϣϯάϥϑΟοΫɺ͚ͬ͜͏׆༂ͯ͠·͢ɻ
4. 
   ͳͥ࡞Δ͔
   
   Ͳ͏࡞Δ͔
5. 
   ͳͥ࡞Δ͔
6. ΧʔυಡΈऔΓͷඍົͳχϡΞϯεΛ఻͑Δͱ͍͏՝୊ ΧʔυΛλον
   
 ʜ͍ͬͯΘΕͯ΋۩ମతʹͲ͏͢Δͷ
   ΧʔυΛεϥΠυ

   ʜͬͯͲͷ͘Β͍ͷ଎͞
   ΧʔυΛࠩ͠ࠐΉ
   
 ʜͬͯͲͬͪͷ޲͖Ͱࠩ͠ࠐΊ͹͍͍ͷ
7. ͦ͜ͰʮकΓʯͷϞʔγϣϯάϥϑΟοΫͷग़൪ ϚχϡΞϧ͸ඞͣݟΒΕΔͱ͸ݶΒͳ͍ʜ
 ςΩετ΍ը૾Ͱ͸ඍົͳχϡΞϯε͕఻ΘΒͳ͍ʜ
 τϨʔχϯάϞʔυ͸޻਺ɾӡ༻తʹ΋ΩϏ͠Ίʜ
   ˣ
   ద੾ͳλΠϛϯάͰʮಈ͖ʯΛදࣔͯ͠௚ײతͳཧղΛͭ͘Δ
 ʮकΓʯͷϞʔγϣϯάϥϑΟοΫͰղܾ
8. ϞʔγϣϯάϥϑΟοΫͷ໾ׂͱදݱͷҧ͍ ߈Ί कΓ ໨త ظ଴ײɾָ͠͞ɾ໘ന͞ ཧղɾঢ়ଶදࣔ τϦΨʔ ೳಈతɾҰ࣌త จ຺ɾडಈతɾৗ࣌ ྫ ΠϯτϩμΫγϣϯ 
 ͍͍ͶϘλϯ
   ໨ඪୡ੒ 5PVDI*%
   GBDF
   *%
 "EPCFܥπʔϧνϡʔτϦΞϧ
9. ʮकΓʯͷϞʔγϣϯάϥϑΟοΫࣄྫ
 GBDF
   *% إೝূͰ͋Δ͜ͱɾೝূͷϓϩάϨεΛ෼͔Γ΍͘͢දࣔ
10. ʮकΓʯͷϞʔγϣϯάϥϑΟοΫࣄྫ
 (PPHMF
    ೋஈ֊ೝূΞϓϦ 1$ͰͷϩάΠϯ࣌ʹ(PPHMFΞϓϦΛ։͍ͯߦ͏Ұ࿈ͷૢ࡞Λ͞Γ͛ͳ͘දࣔ
11. 
    Ͳ͏࡞Δ͔
12. ؾΛ͚ͭͨ͜ͱ  ίϯςΫενϡΞϧ
 Ϣʔβʔͷ;Δ·͍ʹԠͨ͡ద੾ͳλΠϛϯάͰͷදࣔ
     ҙຯΛҾཱ͖ͯΔ
 ৘ใΛ࡟͗མͱͨ͠άϥϑΟοΫʢ࿏ઢਤͷΑ͏ͳந৅౓ʣ
     ͪΐͬͽΓָ͠͞Λײ͡Δಈ͖
 ຖ೔࢖͏΋ͷ͔ͩΒͦ͜ݟ͍ͯͯ๞͖ͳ͍΋ͷ
13. ϝΠΩϯά ˠ ˠ
14. 
    "OJNBUJDΛ͔ͭͬͨϥϑΞχϝʔγϣϯ࡞੒ w ΦχΦϯεΩϯػೳͰ
 ααοͱॻ͍ͯಈ͖Λଈ֬ೝ
    w ϑϨʔϜෳ੡ػೳͰ௙Δ
    w Ϟʔγϣϯ͚ͩͰͳ͘69ͷ γφϦΦͱ͔Λઆ໌͢Δࡍʹ ΋ศར
15. 
    "&ͰϞʔγϣϯ࡞੒ˠCPEZNPWJOͰॻ͖ग़͠ ΠϥϨͰը૾ૉࡐ࡞੒
    "&ͰϞʔγϣϯ࡞੒ ˠ CPEZNPWJOͰը૾Ξηοτͱ
    ϞʔγϣϯϑϨʔϜͷEBUBΛੜ੒
16. 
    -PUUJFʢCPEZNPWJOʣͰίϯτϩʔϧ
17. -PUUJFͷϝϦοτ  ޻਺࡟ݮ
 ͻͱͭͭ͘Ε͹J04"OESPJE8FC͢΂ͯͰ࢖͑Δ
     ωΠςΟϒ
 ϓϩάϥϜʹΑͬͯঢ়ଶʹԠͨ͡ϑϨʔϜͷมߋ͕༰қ
     ໿෼ͷͷσʔλྔ
 ಈըσʔλྔ
    ˠ
    ྫɿ.#ˠ,#
18. Ϣʔβʔͷ੠ʛ$PJOFZͷ͝ར༻͢ΔΞϯέʔτ ར༻։࢝೔ޙ w Կͷ໎͍΋ແ͘࢖͑·ͨ͠ɻ

    ੌ͘؆୯Ͱઆ໌͍Βͣɻ
    w ϚχϡΞϧͳ͠Ͱ
 εϜʔζʹͰ͖·ͨ͠ɻ
    w ΨΠυ͕ग़ͯ؆୯ɻ
    w ࣮૷νϣʔ؆୯Ͱͨ͠
 ʕ
    ͚Μɾ·͍΍ʔͣʢ$PJOFZΤϯδχΞʣ εϜʔζʹઃఆɾ
    ૢ࡞Ͱ͖ͨ ໿ 
19. ·ͱΊ ʮकΓʯͷϞʔγϣϯάϥϑΟοΫɺ͚ͬ͜͏େࣄɻ
 ஍ຯ͚ͩͲεϜʔζͳϢʔβʔମݧΛͭ͘Δେ͖ͳཁૉʹͳΔɻ
    ָ͠͞΍ظ଴Λͭ͘Δʮ߈Ίʯͱɺ
    Θ͔Γ΍͢͞ɾ͋Μ͠ΜΛͭ͘ΔʮकΓʯͷϞʔγϣϯͰɺ
    όϥϯεͷऔΕͨ༏ΕͨϢʔβʔମݧ΁ɻ
20. Thanks! ΤϯδχΞͷ஥ؒืूத
 ϋʔυ΢ΣΞָ͍͠Α Thank You!