Interactive Styleguide App

デザイナーとエンジニアがひとつのサービスを作っていくにあたり、課題になるのがスタイルガイドの運用。お互いが自分のタスクに集中できる環境を作りながら、スタイルガイドは運用できるのか。今回は現在社内で取り組んでいる、Web上でインタラクションまで確認できる“動くスタイルガイド（デモアプリ）”についてご紹介します。

※2017/10/18に開催された「Nextstage Nite vol.2 - 実践されるデザインガイドライン -」の登壇資料です。

Transcript

1. 1PXFSFE
   CZ ελΠϧΨΠυ
2. ઙҪ
   խ඙ גࣜձࣾϏζϦʔν
   )3.04࠾༻؅ཧࣄۀ෦
   ϑϩϯτΤϯυΤϯδχΞ େखͷ8FCاըɾ੍࡞اۀʹͯɺ φγϣφϧΫϥΠΞϯτͷେن ໛ͳ8FC੍࡞Λߦ͏ɻ
   ࣗࣾͷαʔϏε։ൃͰͷ΍Γ͕ ͍ΛٻΊ೥ʹϏζϦʔν ʹࢀըɻ)3.04ࣄۀ෦ͷϑϩ ϯτΤϯυ։ൃΛ୲౰͍ͯ͠Δɻ
3. w)3.04࠾༻؅ཧ঺հ
   wελΠϧΨΠυ
   w՝୊
   w6*ίϯϙʔωϯτ
   wಈ͘ελΠϧΨΠυ
4. w)3.04࠾༻؅ཧ঺հ wελΠϧΨΠυ
   w՝୊
   w6*ίϯϙʔωϯτ
   wಈ͘ελΠϧΨΠυ
5. ೥݄ ೥݄ ೥݄ ܦࡁ࢈ۀল
   ୈճ
   ʮ)3ςΫϊϩδʔେ৆
 ࠾༻αʔϏε෦໳༏ल৆ ड৆ ೥౓
 άουσβΠϯ৆ ड৆ )3.04࠾༻؅ཧ͸ʜ ࠾༻ۀ຿ΛҰݩ؅ཧͰ͖ΔઓུਓࣄΫϥ΢υαʔϏε ϦϦʔε
6. ۈଵ؅ཧ ૊৫؅ཧ ࠾༻؅ཧ ධՁ؅ཧ
7. THJOQVU CBDLHSPVOE
   '''''' CPSEFS
   QY
   TPMJE
   &&& XJEUI
   QY IFJHIU
   QY I
   QY I
   QY I
   QY ඞਢ͕෇͘৔߹ πʔϧνοϓ͕෇͘৔߹ πʔϧνοϓ͕෇͘৔߹ ඞਢͷΞΠίϯ
   JD@SFRVJSFEΛࢀর πʔϧνοϓͷΞΠίϯ
   JD@UPPMUJQTΛࢀর ਧ͖ग़͠ͷࡾ֯ܗ෦෼͸$44Ͱඳըɻ ը໘ͷ୺ͬ͜ʹͳΔͱ͖͸ɺ PWFSqPX
   IJEEFO͞Εͳ͍Α͏ʹ ࡾ֯ܗͷҐஔͱϙοϓΞοϓͷग़ݱҐஔΛௐ੔͢Δɻ จষ આ໌಺༰ w)3.04࠾༻؅ཧ঺հ
   w՝୊
   w6*ίϯϙʔωϯτ
   wಈ͘ελΠϧΨΠυ wελΠϧΨΠυ
8. w 4LFUDIϑΝΠϧͰελΠϧΨΠυ Λ؅ཧ͍ͯ͠Δ
   w ػೳվमͰ৽͍͠6*͕௥Ճ͞Εͨ ࣌͸దٓΞοϓσʔτ
   w ৽͍͠ϧʔϧΛࡦఆͨ͠৔߹͸ɺ 4LFUDIʹ௥ه
   w (PPHMF
   υϥΠϒʹ֨ೲͯ͠ڞ༗ɾ प஌
   w "UPNJD
   %FTJHOͷ֓೦Λࢀߟ ࠷ॳͷελΠϧΨΠυ͸ʜ -6
   $)*"
   -*/ גࣜձࣾϏζϦʔν
   )3.04࠾༻؅ཧࣄۀ෦
   σβΠφʔ
9. .PMFDVMFT ෼ࢠ ٻਓϥϕϧ ϥϕϧͷͳ͍ٻਓ΋ؚ͢ΊΔ Ӧۀ 0SHBOJTNT ༗ػମ ٻਓϥϕϧ ޏ༻ܗଶ ਖ਼ࣾһ ܖ໿ࣾһ ৽ଔ ۀ຿ҕୗ Πϯλʔϯ ΞϧόΠτɾύʔτ ϘϥϯςΟΞ ೿ݣࣾһ ٻਓεςʔλε Լॻ͖ͷٻਓ ืूதͷٻਓ ืूఀࢭதͷٻਓ ऴྃͨ͠ٻਓ ϥϕϧͷͳ͍ٻਓ΋ؚ͢ΊΔ Ӧۀ "UPN ݪࢠ Լॻ͖ͷٻਓ 5FNQMBUFT
   ςϯϓϨʔτ 1BHFT ϖʔδ "UPNJD
   %FTJHO
10. Α͋͘ΔελΠϧΨΠυ THTFMFDUT THTFMFDUT બߟϙδγϣϯΛબ୒ ϝΠϯ৘ใ ϝΠϯ৘ใ ϝΠϯ৘ใ αϒ৘ใ αϒ৘ใ αϒ৘ใ I
    QY X
    QY X
    QY I
    QY ESPQEPXOͷΞΠίϯ
    JD@BSSPX@ESPQ@EPXOΛࢀরɻ ෯ͷछྨ͸JOQVUͱಉ͡
    T
    N
    M
    ͭ͋Γ·͢ SBEJPCVUUPO SBEJPCVUUPO SBEJPCVUUPO SBEJPCVUUPO DIFDLCPY DIFDLCPY DIFDLCPY DIFDLCPY JOQVU<UZQFDIFDLCPY>
    
    MBCFMBGUFS
    \ 
    GPOUGBNJMZ
    JDPOT 
    GPOUTJ[F
    QY 
    MJOFIFJHIU
    QY 
    UPQ
     
    MFGU
    QY 
    DPOUFOU
    a&"# 
    DPMPS
    FFF ^ 
    NBSHJOUPQ
    QY 
    CPSEFSSBEJVT
     
    CPSEFSUPQ
    QY
    TPMJE
    &&& 
    CPSEFSDPMPS
    &&& 
    CPYTIBEPX
    
    QY
    QY
    SHCB 
    
    
      DIFDLCPY I
    QY I
    QY I
    QY I
    QY I
    QY ϝΠϯ৘ใ αϒ৘ใ  GPOUTJ[F
    QY  DPMPS
      GPOUTJ[F
    QY 
    DPMPS
     ৬छ໊
    ঢॱ දࣔΦϓγϣϯ Χόʔը૾Λදࣔ ٻਓλΠτϧΛදࣔ ৬छΛදࣔ ٻਓεςʔλεΛදࣔ ޏ༻ܗଶΛදࣔ ެ։ঢ়گΛදࣔ ܝࡌ೔෇Λදࣔ ద༻ Ωϟηϯϧ ฒͼସ͑ ৬छ໊
    ঢॱ ৬छ໊
    ߱ॱ ద༻ Ωϟηϯϧ બߟϙδγϣϯΛબ୒
11. "  BCG CBTFDPMPSQSJNBSZIPWFS CBTFDPMPSQSJNBSZ CBTFDPMPSWBMJE CBTFDPMPSTFDPOEBSZ GHDPMPSIFBEJOH GHDPMPSUBH EFTBUVSBUF
    EBSLFO
    CBTFDPMPSQSJNBSZ
    
    
    
     EFTBUVSBUF
    MJHIUFO
    CBTFDPMPSQSJNBSZ
    
    
    
     #BTF
    $PMPS )PWFS "DUJWF /PSNBM FEGG MJOFBSHSBEJFOU B
    G  " ' EGC GGG GGGC EC G CHDPMPSIFBEFSIPWFS CHDPMPSUBCMFSPXIPWFS CHDPMPSTJEFOBWIPWFS CHDPMPSTJEFOBWBDUJWF CHDPMPSIFBEFS CHDPMPSTJEFOBW CHDPMPSTJEFOBWMJHIU CHDPMPSTJEFOBWEBSL CHDPMPSUPPMUJQ CHDPMPSGPPUFS EFTBUVSBUF
    MJHIUFO
    CHDPMPSIFBEFS
    
    
    
     EFTBUVSBUF
    MJHIUFO
    CBTFDPMPSQSJNBSZ
    
    
    
    EFTBUVSBUF
    MJHIUFO
    CHDPMPSTJEFOBW
    
    
    
     EFTBUVSBUF
    EBSLFO
    CHDPMPSTJEFOBW
    
    
    
     EFTBUVSBUF
    MJHIUFO
    CBTFDPMPSQSJNBSZ
    
    
    
     MJOFBSHSBEJFOU CHDPMPSTJEFOBWMJHIU
    CHDPMPSTJEF OBWEBSL  EFTBUVSBUF
    MJHIUFO
    CBTFDPMPSQSJNBSZ
    
    
     #BDLHSPVOE
    DPMPST ৭
12. " D GHDPMPSMJOL  CBTFDPMPSTFDPOEBSZ %'# CHDPMPSUPPMUJQ EFTBUVSBUF
    EBSLFO
    CBTFDPMPSQSJNBSZ
    
    
    
     EFTBUVSBUF
    MJHIUFO
    CBTFDPMPSQSJNBSZ
    
    
     EFTBUVSBUF
    MJHIUFO
    CBTFDPMPSQSJNBSZ
    
    
    
     CBTFDPMPSQSJNBSZ
13. Α͋͘ΔάϩαϦʔΨΠυ
14. Α͋͘ΔάϩαϦʔΨΠυ ۽୩
    ܚਓ גࣜձࣾϏζϦʔν
    )3.04࠾༻؅ཧࣄۀ෦
    σβΠφʔ
15. w)3.04࠾༻؅ཧ঺հ
    wελΠϧΨΠυ
    w6*ίϯϙʔωϯτ
    wಈ͘ελΠϧΨΠυ w՝୊
16. σβΠφʔ ΤϯδχΞ ։ൃʹ͓͚Δ՝୊ 4LFUDIελΠϧΨΠυ͸ΞοϓσʔτͰ ͖Δ͕ɺ࣮ࡍͷը໘Λ࣮૷͢Δͷ͸Τϯ δχΞͨͪɻҙਤͨ͠΋ͷ͕ग़དྷ্ ͕Δ͔͸ٕज़ྗͱϦιʔεʹࠨӈ͞ΕΔ ࡉ͔͍ΠϯλϥΫγϣϯʢྫΞχϝʔ γϣϯʣ΍৭ΛͲ͏ࢦఆͨ͠Βྑ͍͔ɺ ײ֮Ͱ͔͠Θ͔Βͳ͍΋ͷ͕ଟ͍
17. σβΠφʔ σβΠφʔ ։ൃʹ͓͚Δ՝୊ ػೳվमͰ৽͍͠6*͕ग़Δ౓ ʹదٓΞοϓσʔτ͠ͳ͚Ε ͹ͳΒͳ͍ ὎
    Ξοϓσʔτ໘౗͍͘͞
18. ΠϯλϥΫγϣϯͷϧʔϧ͸Ͳ͏͢Δʁ ຕ໨ ຕ໨ ຕ໨
19. 6*69ΛධՁ͍͍͍ͨͩͯΔதɺ·͢ ·͢σβΠϯΨΠυϥΠϯ͕ॏཁͳཁ ૉʹͳ͖͍ͬͯͯΔ ϑϩϯτΤϯυͷ՝୊
20. w)3.04࠾༻؅ཧ঺հ
    wελΠϧΨΠυ
    w՝୊
    wಈ͘ελΠϧΨΠυ w6*ίϯϙʔωϯτ
    
21. w ΞϓϦͱ6*͕ີʹͭͳ͕͍ͬͯͯɺ ͓ޓ͍͕ϝϯςφϯεͮ͠Β͍ঢ়گ ʹɻ
    w 6*·ΘΓ͸σβΠφʔʴϑϩϯτΤ ϯυΤϯδχΞͷखͰΞοϓσʔτ ͍ͨ͠ɻ
    w ΞϓϦ·ΘΓ͸ΤϯδχΞͷखͰΞο ϓσʔτ͍ͨ͠ɻ ͖͔͚ͬ
22. 6*ͱΞϓϦͷ෼཭ 6*
    ίϯϙʔωϯτϥΠϒϥϦ ΞϓϦέʔγϣϯຊମ w ίʔυ͕ॻ͚ΔσβΠφʔͱϑ ϩϯτΤϯυΤϯδχΞ͕։ൃ ͱӡ༻Λߦͳ͍ͬͯΔ
    w σβΠϯʹؔΘΔϧʔϧ͸͢΂ ͯ͜ͷϥΠϒϥϦʹू໿ɻ
    w ʢΞϓϦʹؔΘΔʣ࣮σʔλ΍ ঢ়ଶ͸࣋ͬͯ͸͍͚ͳ͍ɻ wओʹΤϯδχΞ͕ӡ༻
 ʢσβΠφʔ͸͋·Γؔ༩͠ͳ͍ʣ
    w6*ίϯϙʔωϯτϥΠϒϥϦΛ༻͍ͯΞϓ Ϧέʔγϣϯͷػೳͱը໘Λ࣮૷ɻ
    wΞχϝʔγϣϯɺ৭ɺϑΥϯτ౳Λࢦఆͨ͠ ͍৔߹͸ɺ6*ίϯϙʔωϯτ಺ʹ͋ΔTDTTͷม ਺Λར༻͢Δ
    wσβΠϯʹؔ͢ΔϧʔϧΛΞϓϦέʔγϣϯʹه ड़ͨ͠Γɺ্ॻ͖ͯ͠͸͍͚ͳ͍ɻ
23. .PMFDVMFT ෼ࢠ 0SHBOJTNT ༗ػମ "UPN ݪࢠ 5FNQMBUFT
    ςϯϓϨʔτ 1BHFT ϖʔδ "UPNJD
    %FTJHO
24. "UPNT w #VUUPO
    w $IFDLCPY
    w 3BEJP
    #VUUPO
    w 5PPMUJQ
    w "WBUBS
25. .PMFDVMFT w %SPQEPXO
    w /PUJpDBUJPO
    w %BUF
    4FMFDU
26. 0SHBOJTNT w 4JEFOBW
    w )FBEFS
    w *NBHF
    $SPQ
27. ίϯϙʔωϯτ࡞੒தͷ՝୊ w 6*ίϯϙʔωϯτΛ໢ཏతʹ֬ೝ͢ Δ͜ͱ͕Ͱ͖ͳ͍ɻ
    w ࡞ͬͨίϯϙʔωϯτΛͲ͏΍ͬͯ ࢖͑͹ྑ͍ͷ͔Θ͔Βͳ͍
    w ΞϓϦͷͲ͜ͷ෦෼ͰͲΜͳ6*͕࢖ ΘΕ͍ͯΔ͔ɺن໛͕େ͖͘ͳΔʹ ͭΕ೺Ѳ͢Δ͜ͱ͸·͢·͢ࠔ೉ʹɻ
28. ʜ
29. σϞΞϓϦΛ࡞ͬͯ͠·͓͏ σβΠφʔɾΤϯδχΞ͕ݟΕΔ ʮσϞΞϓϦʢʹಈ͘ελΠϧ ΨΠυʣʯ΋ซͤͯ։ൃ
30. w)3.04࠾༻؅ཧ঺հ
    wελΠϧΨΠυ
    w՝୊
    w6*ίϯϙʔωϯτ
    wಈ͘ελΠϧΨΠυ
31. σϞɹ
32. ಈ͘ελΠϧΨΠυ w ΠϯλϥΫγϣϯ·ͰؚΊͯ֬ೝ͕Ͱ͖Δ
    w σβΠφʔ͸ɺ6*Χλϩάूͱͯ͠ར༻ͨ͠Γɺҙਤ௨Γ࣮ ૷͞Ε͍ͯΔ͔֬ೝͨ͠ΓͰ͖Δ
    w ΤϯδχΞ͸ɺ͜ͷ6*ΛͲ͏΍࣮ͬͯ૷͢Ε͹ྑ͍ͷ͔ɺιʔ είʔυ͕ݟΕΔϦϑΝϨϯεͱͯ͠׆༻͍ͯ͠Δ
    w ։ൃ͕׬ྃͨ͠ίϯϙʔωϯτ͔ΒॱʹɺελΠϧΨΠυΞ ϓϦ͕σϓϩΠ͞ΕΔͷͰɺ͍ͭͰ΋࠷৽൛ͷελΠϧΨΠ υΛ֬ೝՄೳ
33. ͦΕͰ΋σβΠϯ΁ͷཁ๬ɾ՝୊͸૿͑Δ +BWB4DSJQUͷϥΠϒϥϦʔΞοϓσʔ τͷλΠϛϯάͰཁ๬՝୊ͷ୨Է͠
    σβΠφʔ͸ίϯϙʔωϯτը໘୯Ґ ͰνέοτΛੵΜͰ͓͘
    ϑϩϯτΤϯυΤϯδχΞ͸ɺΞοϓ σʔτͷλΠϛϯάͰ࠷খݶͷ޻਺Ͱ ࣮ݱՄೳͳ΋ͷ͸Ξοϓσʔτͱซͤ ͯվળ
34. Α͔ͬͨ͜ͱ w ։ൃλεΫʹࢀՃ͠΍͘͢ͳͬͨ
    w ΞϓϦ͕յΕͯ͠·͏ϞϠϞϠ͕গͳ͘ͳͬͨ
    w Ұ؏ੑΛอͭ͜ͱ͕Ͱ͖Δͷ͸େ͖͍ w 6*ଆͱΞϓϦଆͷ෼ۀ͕Ͱ͖ΔΑ͏ʹͳΓɺ
 ಘҙ෼໺ʹઐ೦Ͱ͖ΔΑ͏ʹͳͬͨʂ
    w ࠓޙ։ൃ͍ͯ͘͠ΞϓϦέʔγϣϯ΋6*ίϯϙʔω ϯτʹΑΓߴ଎։ൃͰ͖Δ౔୆͕Ͱ͖ͨ w ϑϩϯτΤϯυ΋΍ͬͯΈΔؾ͕༙͍͖࣋ͪͯͨʜʂ
    w σϞΞϓϦͷίʔυͷॻ͖ํΛࢀߟʹͯ͠ɺը໘Λ
 ࡞͍͚ͬͯΔʂ σβΠφʔ ϑϩϯτΤϯδχΞ αʔόʔΤϯδχΞ
35. վળ఺ w ։ൃ޻਺͸͔͔Γ·͢
    w ϑϩϯτΤϯυΤϯδχΞʹ࡞ۀ ͕ूத͠΍͍͢
36. ·ͱΊ
37. w σβΠϯΨΠυϥΠϯͷӡ༻͸େม
    w ΤϯδχΞ΋ػೳ࣮૷ʹूத͍ͨ͠ɺͦͷதͰ6*Λࡉ͔ ͘٧ΊΔͷ͸େม
    w σβΠφʔɾΤϯδχΞͱ΋ʹ͓ޓ͍Ͳ͔͜ͰาΈدΔ ࢟੎͸ඞཁͰ͋Δ
    w 6*ίϯϙʔωϯτͱΞϓϦΛ੾Γ཭͠ɺσϞΞϓϦͱ͍ ͏؀ڥͰݟͨ໨ͷ֬ೝ͕Ͱ͖ΔΑ͏ʹͳͬͨ͜ͱͰɺ͓ ޓ͍ͷ࣋ͪ৔ʹूதͰ͖ΔΑ͏ʹͳͬͨ σβΠφʔ ΤϯδχΞ
38. είʔϓΛ෼͚Δ͜ͱͰɺσβΠφʔɺΤϯ δχΞ͕ࣗ෼ͷؔ৺ࣄʹूதͰ͖Δ؀ڥ΁ ௕ظతͳϏδϣϯ͕͋ΓɺಉҰ6*Ͱ ෳ਺ͷΞϓϦέʔγϣϯΛ։ൃ͢Δ Α͏ͳঢ়گԼͰ͸ɺ΍ͬͯΈΔՁ஋ ͋Γ
39. +PJO
    6T גࣜձࣾϏζϦʔνͰ͸ɺҰॹʹಇ͍ͯ͘ΕΔ ΫϦΤΠςΟϒ৬ɾϑϩϯτΤϯυΤϯδχΞ
 Λืू͍ͯ͠·͢ɻ
    !#J[3FBDI%FTJHOFST !#*;3&"$)@%FTJHO IUUQTEFTJHOCJ[SFBDIDPKQ
40. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠