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

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

m-yoshiro
September 22, 2017

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

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

m-yoshiro

September 22, 2017
Tweet

More Decks by m-yoshiro

Other Decks in Design

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. 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