Atomic Designとデザインとプロダクト

社内イベント ホスTechMTG #3で発表したスライドです。
Atomic Designを通して、デザインがプロダクト（とチーム）ともっと関われるのでは！というお話です。

Transcript

1. "UPNJD%FTJHOͱσβΠϯͱ
   ϓϩμΫτ
   (.0ϖύϘגࣜձࣾϗεςΟϯάࣄۀ෦ϩϦϙοϓʂάϧʔϓদຊ๕࿠
   
   

   View Slide

2. Θͨ͠͸Α͠Ζ͏ɺσβΠφʔʜ
   NJOOFͷσβΠφʔͱͯ͠ೖࣾ
   ͖ͯ͠Ό͖ͬΌͯͨ͠
   !CFOOLZPVHJSBJ
   দຊ๕࿠
   
   
   ϩϦϙοϓʂʹҠΓ͖Ό͖ͬΌ
   ͯ͠Δ
   

   View Slide

3. $POUFOUT
   w ͸͡Ίʹ
   w "UPNJD%FTJHOͱ͸
   w ͜Ε͔ΒͷσβΠϯͱϓϩμΫτͷؔΘΓํ
   

   View Slide

4. ͸͡Ίʹ
   

   View Slide

5. ࠔͬͨʂ
   ಉ͡ύʔπΛ
   ࡞ͬͯ͠·ͬͨʂ
   ϩάΠϯ͠ͳ͍ͱ
   ݟΕͳ͍ʂ
   ೝࣝͷζϨ͕͋Δʂ
   σβΠϯ͕όϥόϥʂ
   

   View Slide

6. Ψείϯϩ͕յΕͨʂ
   ࠔͬͨʂʂʂ
   αʔϏεͷ࢓༷Λ
   ೺Ѳ͢Δͷ͕େมʂ
   ػೳͷݺͼ໊͕
   ਓʹΑͬͯҧ͏
   ػೳΛܾΊ͍ͨͷʹ
   ݟͨ໨ͷ࿩ʹͳͬͯ͠·͏ɻ
   ܾΊࣄͰຖճ
   ಉ͡໰୊্͕͕Δ
   

   View Slide

7. ໰୊఺
   w ϓϩμΫτͷػೳΛ୳ͮ͠Β͍
   w σβΠϯʹҰ؏ੑ͕ͳ͍
   w ೝࣝͷζϨ
   w ৬຿ʹΑͬͯϓϩμΫτͷ6*Λࢦ͢ݴ༿͕ҟͳΔ
   
   ࠔͬͨ͜ͱ͕৭ʑ͋Δ͚ͲɺՌͨͯ͠ผʑͷ໰୊ͩΖ͏͔ʁ
   

   View Slide

8. ΋͔ͯ͠͠ɺ
   σβΠϯͱνʔϜ͕͏·ؔ͘ΘΕ͍ͯͳ͍ʁ
   

   View Slide

9. ʮॿ͚ͯʂʯ
   

   View Slide

10. l"UPNJD%FTJHOz
    όόʔϯ
    

    View Slide

11. "UPNJD%FTJHOͬͯͳʹʁ
    
    

    View Slide

12. "UPNJD%FTJHOͱ͸
    #&.Έ͍ͨͳ$44ͷίʔσΟϯάϧʔϧͷ͜ͱʁ
    
    
    
    ɹΑ͋͘Δޡղ
    σβΠϯͷύʔπԽͱ࠶ར༻ͷ͜ͱͰ͠ΐʁ
    ͢Ͱʹ΍ͬͯΔϫϯ
    "UPNJD໊ͯલɺΧοί͚ͭͯΠέ͔͢ͳ͍Θ
    
    

    View Slide

13. "UPNJD%FTJHOͱ͸
    "UPNJD%FTJHO͸σβΠϯγεςϜ
    w σβΠϯͷҰ؏ੑ
    w ϓϩμΫτͷ։ൃεϐʔυΞοϓ
    w ։ൃऀɾσΟϨΫλʔͷ࿮Λ໰Θͳ͍ڞ௨ݴޠΛ΋ͨΒ͢
    w σβΠϯͷ࠷ॳͷஈ֊͔ΒσβΠφҎ֎ͷϝϯόʔ͕ؔΘΕΔ
    w ஈ֊ʹ෼͚Δ͜ͱͰ֤εςʔδͰूத͢΂͖࡞ۀΛߦ͑Δ
    

    View Slide

14. "UPNJD%FTJHO
    ࢓૊Έ
    

    View Slide

15. "UPN .PMVFDFVMFT 0SHBOJTN 5FNQMBUFT 1BHFT
    ݪࢠ ෼ࢠ ༗ػମ ςϯϓϨʔτ ϖʔδ
    ίϯϙʔωϯτ
    ͷ࠷খ୯Ґ
    "UPN͔Β੒Δ
    ίϯϙʔωϯτ
    .PMVFDFVMFT͔
    Β ུ
    
    ϨΠΞ΢τύλ
    ʔϯ
    ϓϩμΫτಉ౳
    ͷϖʔδ
    FY
    ϘλϯɺϑΥʔ
    Ϝ୯ମ
    FY
    ݕࡧϑΥʔϜ FY
    ϔομʔ
    FY
    ೖྗϑΥʔϜͷ
    ϨΠΞ΢ταϯϓϧ
    FY
    ࣮ࡍͷςΩετ
    Λૠೖͨ͠ϖʔδ
    ࢓૊Έ
    w ݪࢠɾ෼ࢠɾ༗ػମΛϞνʔϑͱͨͭ͠ͷϨΠϠʔΛ࣋ͭ
    

    View Slide

16. "UPN
    5FNQMBUFT
    .PMFDVMFT 0SHBOJTNT
    1BHFT
    MBCFM
    %P MBCFM
    MBCFM
    %P
    MBCFM
    %P
    MBCFM
    MBCFM
    MBCFM
    ͜ͷͭ͸ࠓճ৮Ε·ͤΜɻ
    
    

    View Slide

17. ݁ہͳʹ͕͍͍ͷʁ
    
    

    View Slide

18. νʔϜશһ͕
    ֤ϨΠϠʔʹΞΫηεͰ͖Δ
    

    View Slide

19. "UPN .PMFDVMFT 0SHBOJTNT
    MBCFM
    %P MBCFM
    MBCFM
    %P
    MBCFM
    %P
    MBCFM
    MBCFM
    MBCFM
    ͦΕͧΕͷϨΠϠʔʹ
    νʔϜશһ͕ࢀՃ͢Δʂ
    ྫ͑͹͜ͷͭ
    

    View Slide

20. νʔϜશһͰ΍Δ
    ྫ͑͹͜Μͳํ๏
    w ෼ͰνʔϜશһͰඞཁͳύʔπΛϐοΫΞοϓ
    w શͯΛҹ࡮ͯ͠นʹషΔ
    w νʔϜશһͰΧςΰϥΠζ͢Δ
    w ݸผͷ໋໊ʹམͱ͠ࠐΉ
    "UPN .PMFDVMFT 0SHBOJTNT
    

    View Slide

21. νʔϜશһͰ΍Δ
    ͍͍͜ͱ
    w νʔϜશһ͕ڞ௨ͷೝࣝΛ͍࣋ͯͯΔ
    w σβΠϯ͕׬੒ͯ͠ͳͯ͘΋ɺϑϩϯτɾόοΫͷΤϯδχΞ͕४
    උʹऔΓ͔͔ΕΔ
    w σβΠϯ͕׬੒ͯ͠ͳͯ͘΋ɺϓϩμΫτͷ஌͕ࣝڞ༗Ͱ͖͍ͯΔ
    "UPN .PMFDVMFT 0SHBOJTNT
    

    View Slide

22. ࠓ·ͰͷελΠϧ
    '
    ϞοΫΞοϓ
    Λ࡞੒
    ϖʔδ
    σβΠϯ
    (
    Α͘Θ͔Βͳ͍ͱ͍͏น
    Λ௒͑Δඞཁ͕͋Δ )
    

    View Slide

23. "UPNJDͳελΠϧ
    '
    "UPN 5FNQMBUF
    ( ΈΜͳ͕ࢀՃ͢Δ
    )
    .PMVFTDFVT 0SHBOJTN 1BHF
    σβΠϯͷϨΠϠʔ͕෼ׂ͞Ε͍ͯΔ͔Βɺ
    ͦΕͧΕͷஈ֊ͰΈΜͳ͕ࢀՃͰ͖Δ
    

    View Slide

24. "UPNJD%FTJHOΛ࣮ߦ͢ΔͨΊʹ
    1BUUFSOMBC
    'SBDUBM
    "UPNJDͳσβΠϯΛҡ࣋͠
    ͍ͯͨ͘Ίʹ͸ɺৗʹΈΜͳ
    ͕ӾཡͰ͖Δ৔ॴ͕ඞཁ
    ελΠϧΨΠυ
    IUUQGSBDUBMCVJME
    IUUQQBUUFSOMBCJP
    ͦͷͨΊͷڧྗͳπʔϧ͕
    ελΠϧΨΠυʂ
    ͜͜ͷ࿩͸͍͔ͭ·ͨ
    
    

    View Slide

25. ͜Ε͔ΒͷσβΠϯͱ
    ϓϩμΫτͷؔΘΓํ
    

    View Slide

26. νʔϜશһ͕σβΠϯͱؔΘΔʂ
    σβΠϯ͕ϓϩμΫτͱ޿͍ൣғʹؔΘ͍ͬͯ͘ɻ
    ͜Ε͔ΒͷσβΠϯͷؔΘΓํ
    

    View Slide

27. "UPN
    5FNQMBUFT
    .PMFDVMFT 0SHBOJTNT
    1BHFT
    MBCFM
    %P MBCFM
    MBCFM
    %P
    MBCFM
    %P
    MBCFM
    MBCFM
    MBCFM
    ͕࣍͋Ε͹͜͜΋ʂ
    

    View Slide

28. 4FFZPV
    
    

    View Slide