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

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

m-yoshiro
April 27, 2017

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

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

m-yoshiro

April 27, 2017
Tweet

More Decks by m-yoshiro

Other Decks in 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