Upgrade to Pro — share decks privately, control downloads, hide ads and more …

「よいアニメーション」から「良いアニメーション」へ / Frontend de KANPAI!...

「よいアニメーション」から「良いアニメーション」へ / Frontend de KANPAI! #4 - ものづくりの遊びごころ-

2018年7月25日「Frontend de KANPAI! #4 - ものづくりの遊びごころ」にて発表した資料です。

Avatar for akirafukuoka

akirafukuoka

July 25, 2018
Tweet

More Decks by akirafukuoka

Other Decks in Design

Transcript

  1. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 2018.07.25 ʮΑ͍Ξχϝʔγϣϯʯ͔Β ʮྑ͍Ξχϝʔγϣϯʯ΁ fukuoka@ficc.jp / FICC inc. / BXΫϦΤΠςΟϒࣄۀ෦ γχΞΫϦΤΠςΟϒσΟϨΫλʔ ෱Ԭཅ'VLVPLB"LJSB 'SPOUFOEEF,"/1"*΋ͷͮ͘Γͷ༡ͼ͜͝Ζ
  2. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 ͸͡Ίʹ ࣗݾ঺հ ෱Ԭཅ akirafukuoka  ೥ΑΓגࣜձࣾ'*$$ۈ຿  ߴߍ೥ੜͷࠒ͔Β'MBTIʹ৮ΕΞχϝʔγϣϯ Λ࡞੒  ೖࣾޙ΋'MBTIίʔμʔͱͯ͠ۈ຿ɺݱ୅Ͱ͍͏ ʮϑϧελοΫʯతۀ຿  ݱࡏ͸ϒϥϯυΤΫεϖϦΤϯεΫϦΤΠςΟ ϒࣄۀ෦γχΞσΟϨΫλʔ  ϒϥϯσΟϯάͱετϦʔςϦϯά͕ݱࡏͷઐ ໳෼໺ ࠓʁΞχϝʔγϣϯʁ஌ΒΜ
  3. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 ͭͷʮΑ͍ʯ Α͍ ৗʹӈ΁ਐΉ͜ͱΛҙࣝ͢Δ͜ͱ ྑ͍ ળ͍ ٕ޼తʹ༏Ε͍ͯΔ ໨త͕ୡ੒Ͱ͖͍ͯΔ ࣾձతʹળྑͰ͋Δ ͋ΒΏΔ੍࡞ऀ͕໨ࢦ͢΂͖ʮΑ͍ʯͷࡾஈ׆༻ ςΫχοΫ σβΠϯ ύʔύε
  4. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 Α͍Ξχϝʔγϣϯ ʮΑ͍Ξχϝʔγϣϯʯͱ͸ʁ ͨ͘͞Μಈ͘ɺෳࡶͰ͕Μ͹ͬͯΔ Ξχϝʔγϣϯ ੈؒͰʮ͵Δ͵Δಈ͘ʯʮਆ࡞ըʯͱධ͞Εͦ͏ͳ΋ͷ
  5. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 ྑ͍Ξχϝʔγϣϯ ʮྑ͍Ξχϝʔγϣϯʯͱ͸ʁ ҙਤΛద੾ʹ఻͑ɺ໨ඪΛୡ੒͢Δ σβΠϯ͞ΕͨΞχϝʔγϣϯ Ξχϝͷࡉ͔͞΍ྔ͸ؔ܎͕ͳ͍
  6. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 Ξχϝʔγϣϯʹେ੾ͳ͜ͱ͸ ʮྑ͍ΞχϝʔγϣϯʯͷͨΊʹ·ͣߟ͑Δ΂͖͜ͱ͸ Ξχϝʔγϣϯͤ͞Δ໨త ʮಈ͔͢ʯͱ͍͏͜ͱ͸وॏͳϦιʔεΛ࿘අ͢Δ͜ͱ ࢹௌऀͷ࣌ؒɺඳըॲཧೳྗɺόοςϦʔɺͦ΋ͦ΋ͷ੍࡞࣌ؒʜ ͦΕʹݟ߹ͬͨ݁Ռ͕ͦͷΞχϝʔγϣϯͰಘΒΕ͍ͯΔ͔ʁ Ξʔτ දݱ ʹσβΠϯ ໨త ͕॓ΓɺϓϩμΫτʹͳΔ
  7. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 ݁Ռ͕ಘΒΕͳ͍ͷͰ͋Ε͹ಈ͔͢ཧ༝͸ͳ͍ ө૾ͷݪଇվగ൛ ΩωϚ०ใϜοΫ ෋໺༝༔ق ஶ ͦͯ͠ɺΞχϝͷ৔߹lֆͳΜ͔ͩΒ ͠ΐ͏͕ͳ͍zͱ͏ΤΫεΩϡʔζΛ ੜΈ΍͍͢͜ͱ΋͋ͬͯl͋ͷ૸Δԋ ٕ͸ྑ͔ͬͨzl͋ͷา͖͸ྑ͔ͬͨz ͱ͍͏ධՁ͸·ͣ͋Γ·ͤΜɻ Ͱ͔͢Βɺ΅͘͸zา͘zͱl૸Δzࣳ ډΛܶதʹͱΓ͍Εͳ͍౒ྗΛͭͮ͠ ͚͖ͯ·ͨ͠ɻ ŠŠୈষσδλϧٕज़Ҏલ·Ͱͷݱ࣮త໰୊ʮΞχϝͷlา͖zl૸Γz͸ࢸ೉ʯΑΓ l
  8. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 ʮྑ͍ΞχϝʔγϣϯʯΛ໨ࢦͯ͠ ʮྑ͍ʯΛ໨ࢦͨ͢Ίʹߟ͑Δ ࢲͳΓͷ جຊݪଇͷҰ෦ ͔͜͜Β͸
  9. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 Ξχϝʔγϣϯͱ͸ Ξχϝʔγϣϯͷߏ੒ཁૉͱ݁Ռ มԽ ࣌ؒ ଎౓ ʷ ʷ Կ͕มԽ͢Δ͔ʁ େ͖͞ʁ৭ʁ֯౓ʁ Ͳͬͪͷํ޲ʹʁ ͲΕ͘Β͍ͷ௕͞Ͱʁ ॠ࣌ʹʁΏͬ͘Γʁ ͣͬͱʁ܁Γฦ͠ʁ ͲΜͳ଎౓มԽͰʁ ౳଎ʁՃ଎ʁݮ଎ʁ ૢ࡞ʹԠͯ͡ʁ ཁૉʹΑͬͯ༩͑ͨೝ͕ࣝΞχϝͷ݁Ռ ා͍ʜ ڧͦ͏ ԡ͍ͨ͠ Ҡಈͨ͠ มΘͬͨ ਖ਼͍͠ ऴΘͬͨ ҧͬͨ
  10. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 BUTTON ΠϯλϥΫγϣϯʹ͓͚ΔΠʔδϯά ΠϯλϥΫγϣϯͷ݁Ռදࣔ͸جຊFBTFPVU ΞΫγϣϯ ʮબ୒Ͱ͖ͨʯೝࣝ ݁Ռදࣔ ΞχϝʔγϣϯͷมԽ͕஗͍ͱʜ BUTTON BUTTON ඞͣ೴ͷೝࣝΑΓઌʹ݁ՌΛ໌Β͔ʹ͢Δ ؾ࣋ͪѱ͍ʜ BUTTON ΞΫγϣϯ ݁Ռදࣔ ʮબ୒Ͱ͖ͨʯೝࣝ BUTTON շదʂ BUTTON
  11. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 FBTFPVUͱFBTFJO ॠ࣌ͷมԽ͸FBTFPVUɺେ͖ͳมԽ͸FBTFJO ease-out ΄ͱΜͲͷΞχϝ͸FBTFPVUͰ͍͍ ๫࿦  ΠϯλϥΫγϣϯʹ·ͭΘΔ΋ͷͳΒঘߋ ease-in େ͖ͳֆͷมԽ΍ʮऴྃʯʮ੾Γସ͑ʯͷ ҙຯ߹͍͕ڧ͍ʢ҉సͳͲʣ Ճ଎ͱ͸ҙຯ͕ফࣦ͍ͯ͘͜͠ͱͱಉٛ
  12. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 Ξχϝʔγϣϯ࣌ؒ Ξχϝʔγϣϯ͍ͯ͠Δ࣌ؒ͸ʮૢ࡞Ͱ͖ͳ͍࣌ؒʯ ಈ͍͍ͯΔϘλϯ͸ԡͤͳ͍ɺಈ͍͍ͯΔจࣈ͸ಡΊͳ͍ ϘλϯͷΞΫςΟϒදࣔͳͲɺ ΠϯλϥΫγϣϯʹΑͬͯൃੜͨ͠Ξχϝʔγϣϯ͸ۃྗΫΠοΫʹ จࣈͷΞχϝʔγϣϯ͸ࢭ·Δ·ͰಡΊͳ͍ ԋग़ʹΑͬͯૢ࡞Λ੍ݶ͠ͳ͍!
  13. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 ςΩετΞχϝʔγϣϯͷ࣌ؒײ֮ ςΩετΞχϝʔγϣϯͷ଎౓ ςΩετΞχϝͷදࣔ࣌ؒ͸ʮ੠ʹग़ͯ͠ಡΜͰʯ֬ೝ ςΩετΞχϝʔγϣϯͰจষΛ఻͑Δ৔߹͸ ͪΌΜͱࢹௌऀ͕࣌ؒ಺ʹೝ஌Ͱ͖Δ͔Ͳ͏͔ɺࣗ෼Ͱ੠ʹग़ͯ͠ಡΜͰ֬ೝ͢Δ͜ͱ ੠ʹग़ͯ͠ಡΊͳ͚Ε͹ͦͷΞχϝʔγϣϯ͸଎͗͢ Վࢺදࣔܥ.7Έ͍ͨʹಡ·ͤΔؾͳ͚Ε͹͍͍͚ͲͶ
  14. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 มܗʹΑΔҙຯ߹͍ͷมԽ ݟͨ໨ͷมԽͱҙຯͷมԽΛ౳͘͠ ྫ ͕ճసͯ͠ʷʹͳΔϘλϯ ͜Ε͸ Ϙλϯ ͜Ε͸ʷϘλϯ ͜Ε͸ʜʁ ҧ͏ҙຯΛ࣋ͬͨϘλϯͳͷʹճస͢Δ͚ͩͰ੾Γସ͑ͯ͠·͍͍ͬͯͷ͔ʁ ϘλϯมԽΛ఻͑Δͷʹʮճసʯͱ͍͏Ξχϝʔγϣϯ͸ຊ౰ʹਖ਼͍͠ͷ͔ʁ σϑΝΫτͰ͋ͬͯ΋Ξχϝͷҙຯ͕ਖ਼͍͔ٙ͠͏΂͖
  15. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 ࠷ޙʹ Ξχϝʔγϣϯͱ͸ มԽʹΑͬͯ૬खʹ෺ޠΔ͜ͱ ʮΑ͍Ξχϝʯ͔Βʮྑ͍Ξχϝʯ ͦͯ͠ʮળ͍ϓϩδΣΫτʯ΁
  16. F I C C B X C R E A

    T I V E T E A M P U B L I S H E D B Y D A T E P R O J E C T F r o n t e n d d e K A N P A I ! # 4 2 0 1 8 . 0 7 . 2 5 ऴ ੍࡞ɾஶ࡞ ෱Ԭཅ ʮΑ͍Ξχϝʔγϣϯʯ͔Β ʮྑ͍Ξχϝʔγϣϯʯ΁ 'SPOUFOEEF,"/1"*΋ͷͮ͘Γͷ༡ͼ͜͝Ζ