開発初期からはじめるスタイルガイド

社内イベント `Designer's MTG #1 「失敗事例・成功事例」` で発表した資料です。

Transcript

1. ։ൃॳظ͔Β͸͡ΊΔ
   ελΠϧΨΠυ
   1
   ϗεςΟϯάࣄۀ෦σβΠφʔদຊ๕࿠
   

   View Slide

2. 2
   দຊ๕࿠ !CFOOLZPVHJSBJ
   d
   

   View Slide

3. ϜʔϜʔυϝΠϯʂΧʔτԽʂ
   
   wυϝΠϯൢചͷ࿝
   ฮαΠτ
   w೔ຊ/P
   

   View Slide

4. ͓࿩ͷ಺༰
   ΧʔτԽͰͷಋೖͷ࿩
   ϦϦʔεޙͷධՁͷ࿩
   4
   ελΠϧΨΠυʹ·ͭΘΔ
   

   View Slide

5. ຊ୊ʹೖΔલʹ
   5
   

   View Slide

6. ελΠϧΨΠυͱ͸
   ഑৭΍λΠϙάϥϑΟ
   σβΠϯϧʔϧͷఆٛ
   6
   σβΠϯɾઃܭͷҰ؏ੑΛอͭͨΊʹඞཁ
   6*ɾίϯϙʔωϯτͷ
   σβΠϯύλʔϯҰཡ
   IUUQVYNBJMDIJNQDPNQBUUFSOTGPSNT
   IUUQTXXXMJHIUOJOHEFTJHOTZTUFNDPNHVJEFMJOFTUZQPHSBQIZ
   

   View Slide

7. ࠓճͷϙΠϯτ
   ࠓ·Ͱ͸ɺϦϦʔεޙʹߏங͞ΕΔ͜ͱ͕ଟ͍ҹ৅ɻ
   ࠓճ ։ൃॳظ͔Βߏஙʂ
   7
   ʮελΠϧΨΠυͷߏஙλΠϛϯάʂʯ
   

   View Slide

8. ΧʔτԽͰͷಋೖͷ࿩
   8
   

   View Slide

9. ΧʔτԽϓϩδΣΫτ
   
   

   View Slide

10. w υϝΠϯΛෳ਺ߪೖͰ͖ΔΧʔ
    τػೳͷ։ൃ
    w ؀ڥ͕ͭʹ෼͔ΕͯΔ
    w Χʔτػೳ3BJMT
    w طଘαΠτ1)1
    ΧʔτԽϓϩδΣΫτ
    
    

    View Slide

11. ελΠϧΨΠυಋೖͷཧ༝
    w $44ઃܭͷจԽΛࠜ෇͔ͤΔ
    w ػೳ௥Ճ͕සൟͳαʔϏεɻΤϯδχΞ͕ϑϩϯτ΋࣮૷
    Ͱ͖ͨ΄͏͕ྑ͍
    w υϝΠϯͷߪೖϑϩʔ͸ෳࡶɻॳظʹઃܭ͠ͳ͍ͱഁ୼͠
    ͦ͏ɻ
    w ։ൃऀؒͷίϛϡχέʔγϣϯπʔϧͱͯ͠ظ଴ͯͨ͠
    11
    

    View Slide

12. ελΠϧΨΠυͷπʔϧબఆ
    12
    

    View Slide

13. ελΠϧΨΠυͷπʔϧબఆ
    ಋೖ͠΍͍͢͜ͱ
    ૄ݁߹Ͱ͋Δ͜ͱ
    ͙͢ʹࣺͯΕΔ͜ͱ
    13
    ̏ͭͷબఆج४
    

    View Slide

14. 'SBDUBM
    14
    IUUQGSBDUBMCVJME
    ಋೖ͠΍͍͢͜ͱ
    ૄ݁߹Ͱ͋Δ͜ͱ
    ͙͢ʹࣺͯΕΔ͜ͱ
    

    View Slide

15. View Slide

16. ߏ੒
    w 3BJMTͷTBTTΛ࢖͏ͨΊʹ(VMQͰUBTL૊Μͩ
    16
    3BJMT 'SBDUBM
    4UZMFHVJEF
    
    (VMQ
    TBTT $44
    (VMQͰελΠϧΨΠυΛىಈ͢Δͱ
    3BJMTͷTBTT͔Β$44ΛCVJME
    

    View Slide

17. ޻ఔ
    17
    σβΠϯ ϑϩϯτΤϯυ ελΠϧΨΠυ
    
    ϫΠϠʔɾϓϩτλΠϓ ؀ڥߏஙɾ४උ
    ɾ$44ͷϕʔεઃܭߏங
    ɾίϯϙʔωϯτҰཡγʔτΛ࡞੒
    ɾίϯϙʔωϯτ։ൃ Ͱ͖Δͱ͜
    
    σβΠϯ σβΠϯͷ൓ө΋ணख
    ɾΧϥʔɾλΠϙάϥϑܾఆ
    ɾίϯϙʔωϯτσβΠϯ
    ϖʔδσβΠϯ ֤ϖʔδͷαϯϓϧ࡞੒
    3BJMT΁൓ө
    

    View Slide

18. 18
    ίϯϙʔωϯτͷ૊Έ߹Θͤ΋ελΠϧΨΠυͰઌʹ࡞੒
    

    View Slide

19. 19
    খ͍͞ίϯϙʔωϯτ͔Β
    େ͖ͳߏ੒΁
    

    View Slide

20. ༨ஊ
    20
    ίϯϙʔωϯτҰཡγʔτΛ࠷ॳʹ࡞੒͢ΔͷΦεεϝ
    ޻਺ݟੵ΋Γ͠΍͍͢
    λεΫͷࡉ෼Խશମײͷ೺Ѳ
    ίϯϙʔωϯτઃܭͷԼॻ͖
    

    View Slide

21. 21
    ภࣥڰͷ͝ͱ͘ɺίϯϙʔωϯτΛϦετΞοϓ
    

    View Slide

22. 22
    ແࣄϦϦʔεʂʂ
    

    View Slide

23. ϦϦʔεޙͷධՁͷ࿩
    23
    

    View Slide

24. Α͔ͬͨ͜ͱ
    24
    

    View Slide

25. σβΠφʔͱΤϯδχΞͷ
    ίϯϑϦΫτݮ
    25
    ! "
    ελΠϧΨΠυͰ
    ίʔσΟϯάʂ
    3BJMTͰػೳ։ൃ
    ʹूதʂ
    ྫ͑͹ϩάΠϯը໘
    όοΫͱϑϩϯτͷ։ൃ؀ڥ͕෼͔ΕͯΔͷͰόοςΟϯ
    ά͕ͳ͔ͬͨ
    

    View Slide

26. ։ൃʹूதͰ͖Δ
    w ϓϩμΫτͷ࢓༷ͷ੍ݶΛड͚ͣදࣔ֬ೝͰ͖Δ
    ྫ
    ϩάΠϯɺߪೖϑϩʔͳͲखଓ͖͕ඞཁͳը໘
    26
    ! "
    ࡞ۀ͍ͨ͠ϖʔδΛ
    ͙͢ΈΕΔʂ
    ϑΥϩʔ͕ݮͬͯ
    ։ൃʹूதͰ͖Δʂ
    

    View Slide

27. ϨϏϡΞʔબͼ΍͍͢
    w ͜Ε͸ΤϯδχΞʁσβΠφʔʁͱ͍͏໎͍͕ݮͬͨ
    w ؀ڥ͕λεΫͷࡉ෼ԽΛଅ͢ϨϏϡʔϙΠϯτ͕໌֬ʹ
    ͳΔ
    27
    ! "
    ελΠϧΨΠυ্ͷߋ৽͔ͩΒ
    σβΠφʹϨϏϡʔґཔ
    ػೳ։ൃ͕ϝΠϯ͔ͩΒ

    ΤϯδχΞʹϨϏϡʔґཔ
    

    View Slide

28. ίϛϡχέʔγϣϯऔΓ΍͔ͬͨ͢
    w ٙ໰΍՝୊ΛελΠϧΨΠυΛΈͳ͕Β֬ೝͰ͖ͨ
    w Έͳ͕Β΍ΓͱΓ͢Δ͜ͱͰղܾ·Ͱ͕εϜʔζ
    28
    !
    "
    !
    !
    "
    ςΩετϑΥʔϜ͸Ͳ͜ʹ͓͘ͷʁ
    ͜͜Ͳ͏͢Δʁ
    

    View Slide

29. ౔ஃ৔ͷσβΠϯमਖ਼ɾมߋʹରԠ
    ͠΍͔ͬͨ͢
    w मਖ਼ର৅Λ͕͞͠΍͍͢ɻ
    w ίϯϙʔωϯτؒͷؔ࿈͕Έ͑΍͍͢
    w मਖ਼ͷࡍʹద੾ͳ൑அΛߦ͑ͨʢ৔͠ͷ͗͡Όͳ͍ରԠʣ
    29
    "
    Ұ෦࢓༷Λ΁Μΰϗΰϗʂ ͋ͷϘλϯ͸ϑΥʔϜͱϞʔμϧͰ
    ࢖ΘΕͯΔ͔Β
    ৽͘͠௥Ճ͠Α͏ʂ
    

    View Slide

30. 30
    ͜ͷؔ܎ੑͱ΄΅શͯͷ૊Έ߹ΘͤΛ
    ၆ᛌͯ͠ΈΕΔ
    

    View Slide

31. ઃܭΛ่ͣ͞ϦϦʔεͰ͖ͨ
    w ౔ஃ৔Ͱ΋͖ͪΜͱରԠͰ͖ͨͷͰɺϦϦʔε࣌΋ઃܭ͕
    ่Εͳ͔ͬͨʢ·ͬͨ͘Ͱ͸ͳ͍͚Ͳɻɻʣ
    31
    ! "
    
    

    View Slide

32. Α͔ͬͨ͜ͱ·ͱΊ
    32
    σβΠφʔͱ
    ΤϯδχΞͷ
    ίϯϑϦΫτݮ
    ։ൃʹूதͰ͖Δ
    ϨϏϡΞʔ
    બͼ΍͍͢
    ίϛϡχέʔγϣϯ
    औΓ΍͔ͬͨ͢
    ౔ஃ৔ͷσβΠϯ
    मਖ਼ɾมߋʹ
    ରԠ͠΍͔ͬͨ͢
    ઃܭΛ่ͣ͞
    ϦϦʔεͰ͖ͨ
    

    View Slide

33. Α͔ͬͨ͜ͱ·ͱΊ
    33
    σβΠφʔͱ
    ΤϯδχΞͷ
    ίϯϑϦΫτݮ
    ։ൃʹूதͰ͖Δ
    ϨϏϡΞʔ
    બͼ΍͍͢
    ίϛϡχέʔγϣϯ
    औΓ΍͔ͬͨ͢
    ౔ஃ৔ͷσβΠϯ
    मਖ਼ɾมߋʹ
    ରԠ͠΍͔ͬͨ͢
    ઃܭΛ่ͣ͞
    ϦϦʔεͰ͖ͨ
    ޮ཰্͕͕Δʂ
    ίϛϡχέʔγϣϯ
    ͕औΓ΍͍͢
    ։ൃͷ౔ஃ৔Ͱ΋
    ཧੑΛอͯΔʂ
    

    View Slide

34. ՝୊
    34
    

    View Slide

35. ՝୊
    w ։ൃ؀ڥͰ͔͠ӾཡͰ͖ͳ͍
    w ίϯϙʔωϯτͷ৔ॴΛ֮͑ͮΒ͍
    w ຊՈͱ3BJMT͕ผ؀ڥͳͷͰελΠϧΨΠυ͕࿈ܞͰ͖ͳ͍
    w TMJN΁ͷม׵͕ඞཁ
    w ελΠϧΨΠυͷ࡞Γ͕ଐਓԽͪ͠Όͬͨɻɻ
    35
    w ίετͱརӹͷόϥϯε
    

    View Slide

36. ίετͱརӹͷόϥϯε
    w ಋೖʹࡍͯ͠͸Ұ൪ͷ՝୊͔΋
    w ࠓޙͷӡ༻Ͱ༗ޮੑΛࣔͤΔΑ͏ʹ͠ͳ͖Ό͍͚ͳ͍
    36
    

    View Slide

37. ελΠϧΨΠυΛॳظಋೖͯ͠Έͯ
    w ελΠϧΨΠυى఺ͷ։ൃָ͕νϯʂ
    w ࠷ॳʹελΠϧΨΠυͰ࡞ΔΫη͕͍ͭͨ
    37
    

    View Slide

38. ໨ࢦ͢͸ελΠϧΨΠυʰυϦϒϯʱʂ
    38
    ελΠϧΨΠυ͕ϑϩϯτ։ൃͷى఺ͱͳΔ
    

    View Slide

39. ·ͱΊ
    w։ൃͷޮ཰Ξοϓʂ
    wίϛϡχέʔγϣϯʹ΋࢖͑Δʁ
    wϦϦʔεͷ౔ஃ৔ʹڧ͍ʂ
    wελΠϧΨΠυΛ࢖͏จԽ͕ࠜ෇͖΍͍͢
    39
    ։ൃॳظ͔Βಋೖ͢Δͱʜ
    

    View Slide

40. ·ͣ͸ؾܰʹ࢝ΊͯΈΔͱྑ͛͞
    40
    

    View Slide