コワくないmicroInteractionの考え方・作り方

コワくない.jsで使用した、マイクロインタラクションの考え方の資料です。

Transcript

1. ίϫ͘ͳ͍
   NJDSP
   JOUFSBDUJPOͷߟ͑ํ ίϫ͘ͳ͍KT!+640
    UIV
   ."546%"
   &NJ
2. ίϫ͘ͳ͍KTʜʁʁ w ࠷ۙͷ+4ͷษڧձɺΨν͗ͯ͢ίϫ͍ɻ
   w ͚ͲɺΘ͔Μͳ͍͜ͱ૿͑ͯΔ͔Βษڧ͍ͨ͠ɻ
   w ࢓ࣄ+4Ͱ࢖ͬͯΔ͚ͲɺͳΜͱͳ͔͘͠Θ͔ͬͯͳ͍Μ ͩΑͶɻ
   w Έ͍ͨͳํ޲͚ͷ͓ษڧձͰ͢ɻ
   w ͲͪΒ͔ͱ͍͏ͱʮXFCαΠτ޲͚ʯͷ+4ͷ࢖͍͔ͨΛɺ ΍΍͍͜͠೉͍͠࿩ψΩʹ͓࿩͍͚ͯͨ͠ΒΑ͍ͳͱɻ
3. ίϫ͘ͳ͍KTʜʁʁ
4. ίϫ͘ͳ͍KTʜʁʁ w େৎ෉ɻ
   w ʮશ෦֮͑ͳ͖Ό͍͚ͳ͍ʯͱ͔ɺͳ͍͔ΒͶʁ
5. ࣗݾ঺հ
   ʢલճɺ͔ͬ͢Γ๨Εͯ·ͨ͠ʣ \
   ໊લɿ
   ."546%"
   &NJ
   ࢓ࣄɿࣦۀத
   ৬छɿXFC
   EFWFMPQFS
   PG
   GSPOUFOE
   
   NBSLVQ
   DPNNVOJUZɿ\
   *P5
   ,ZPUPɿ͍͍ͩͬ͠΃
   3FBDULZPUPɿר͖ࠐ·Εͨਓ
   ^
   ^
6. ࠓճͷςʔϚɿ
   ϚΠΫϩΠϯλϥΫγϣϯ w σβΠϯ΁ͷ΄Μͷͪΐͬͱͷ Ћͳಈ࡞
   w ϢʔβͷΞΫγϣϯʹରͯ͠ಈ࡞Λฦͯ͋͛͠Δ ͜ͱͰɺจ຺΍࣍ͷߦಈΛΑΓཧղ͠΍͘͢ɻ
   w ա৒ͳΞϐʔϧͷԡ͠෇͚ʹͳΒͳ͍Α͏ʹͶɻ
   w ͋͘·ͰɺʮϢʔβ΁ͷิॿʯɻͶʁʁ
7. ͜Μͳײ͡ɻ w IUUQTUZNQBOVTOFU%FWFMPQNFOU#VUUPO4UZMFT*OTQJSBUJPO
 ʢ͍ͪ͹Μ࢖͍ಓ͋Γͦ͏ͩͬͨʣ
   w IUUQDBSCPOEFTJHOTZTUFNDPN
 ʢͪΐͬͱΧϫΠΠXʣ
   w IUUQTDPEZIPVTFDPEFNPJNBHFNBTLF⒎FDUQSPKFDU IUNM
 ʢΦϞϩ͍͔΋΍͚Ͳ࢖͏ਓ͍ΔΜͩΖ͏͔ʜʁʁʣ
   w ΄͔ʹ΋͍ͬͺ͍͚͋ͬͨͲɻ
 ཁ͸ɺϢʔβʹΞΫγϣϯΛଅ͢ײ͡ɻ
8. ϓϥάΠϯͰ΋Α͍ͷͰ͢ɻ
   Ͱ΋ɺ͜Μͳ࣌ʹ͸ཁ஫ҙɻ w ෳ਺ͷಈ࡞Λ·͍ͥͥͨ͜͠
   w ΋͏ͪΐͬͱλΠϛϯά΍ಈ͖ͷௐ੔͍ͨ͠
   w σΟϨΫλʔ͔ΒɺΑΓৄࡉͳϦΫΤετ͕དྷ ͨ
9. ϓϥάΠϯͰ΋Α͍ͷͰ͢ɻ
   Ͱ΋ɺ͜Μͳ࣌ʹ͸ཁ஫ҙɻ w جຊతʹɺϓϥάΠϯ͸
 ʮϓϥάΠϯ࡞ͬͨਓͷ૝ఆ಺Ͱ͔͠࢖͑ͳ͍ Αʁʁʯ
   w ϓϥάΠϯ࢖ͬͯͯࠔΔͷ͸ɺ͍͍ͩͨʮ૝ఆ Λӽ͑ͨཧ૝ʯΛ΍Ζ͏ͱ͍ͯ͠Δͱ͖
10. ͦΕ͡Όɺ
    ͜Μͳͷͭͬͯ͘Έ·͠ΐɻ w EFNPʢΛ໨ඪʹɻʣ
    w IUUQTHJUIVCDPN."546%"&NJ NJDSP*OUFSBDUJPO%FNP
11. ߟ͑ํ  ʮσϑΥϧτ͸͜ͷঢ়ଶʯ
     ʮԿ͕ى͖ͨΒʯ
     ʮͲ͏ͳͬͯͯ΄͍͠ʯ
    ͷ̏ͭΛҙࣝ͢Δɻ
12. ߟ͑ํ  ʮσϑΥϧτ͸͜ͷঢ়ଶʯɿ$44
     ʮԿ͕ى͖ͨΒʯɿ+4
     ʮͲ͏ͳͬͯͯ΄͍͠ʯɿ$44
    ͕ɺجຊɻ
13. ߟ͑ํ  ʮσϑΥϧτ͸͜ͷঢ়ଶʯɿB
    \ʜ^
     ʮԿ͕ى͖ͨΒʯɿ NPVTFPWFS
     ʮͲ͏ͳͬͯͯ΄͍͠ʯɿBIPWFS\ʜ^
    ͱɺߟ͑ํ͸͍ͬ͠ΐͩΑʢɾТɾʣ
14. ߟ͑ํ w ϚΠΫϩΠϯλϥΫγϣϯͰ΋ͦΕҎ֎Ͱ΋ɺͩ ͍͍ͨ͜Μͳײ͡ɻ
    w ΋ͬͱෳࡶͳ͜ͱ΋Ͱ͖Δ͚ͲɺϚΠΫϩΠϯλ ϥΫγϣϯ͸͜ΕͰे෼͔΋ɻ