Save 37% off PRO during our Black Friday Sale! »

Interactive Styleguide App

3dede6f21d7a19838cf4db6a5585b410?s=47 masahiko.asai
October 24, 2017

Interactive Styleguide App

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

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

3dede6f21d7a19838cf4db6a5585b410?s=128

masahiko.asai

October 24, 2017
Tweet

Transcript

  1. 1PXFSFECZ ελΠϧΨΠυ

  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'''''' CPSEFSQYTPMJE&&& XJEUIQY IFJHIUQY IQY IQY IQY ඞਢ͕෇͘৔߹ πʔϧνοϓ͕෇͘৔߹

    πʔϧνοϓ͕෇͘৔߹ ඞਢͷΞΠίϯJD@SFRVJSFEΛࢀর πʔϧνοϓͷΞΠίϯJD@UPPMUJQTΛࢀর ਧ͖ग़͠ͷࡾ֯ܗ෦෼͸$44Ͱඳըɻ ը໘ͷ୺ͬ͜ʹͳΔͱ͖͸ɺ PWFSqPXIJEEFO͞Εͳ͍Α͏ʹ ࡾ֯ܗͷҐஔͱϙοϓΞοϓͷग़ݱҐஔΛௐ੔͢Δɻ จষ આ໌಺༰ 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 બߟϙδγϣϯΛબ୒ ϝΠϯ৘ใ ϝΠϯ৘ใ ϝΠϯ৘ใ αϒ৘ใ αϒ৘ใ αϒ৘ใ

    IQY XQY XQY IQY ESPQEPXOͷΞΠίϯJD@BSSPX@ESPQ@EPXOΛࢀরɻ ෯ͷछྨ͸JOQVUͱಉ͡TNMͭ͋Γ·͢ SBEJPCVUUPO SBEJPCVUUPO SBEJPCVUUPO SBEJPCVUUPO DIFDLCPY DIFDLCPY DIFDLCPY DIFDLCPY JOQVU<UZQFDIFDLCPY> MBCFMBGUFS\ GPOUGBNJMZJDPOT GPOUTJ[FQY MJOFIFJHIUQY UPQ MFGUQY DPOUFOUa&"# DPMPSFFF ^ NBSHJOUPQQY CPSEFSSBEJVT CPSEFSUPQQYTPMJE&&& CPSEFSDPMPS&&& CPYTIBEPXQYQYSHCB      DIFDLCPY IQY IQY IQY IQY IQY ϝΠϯ৘ใ αϒ৘ใ  GPOUTJ[FQY  DPMPS  GPOUTJ[FQY 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    #BDLHSPVOEDPMPST ৭
  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 %BUF4FMFDU

  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. +PJO6T גࣜձࣾϏζϦʔνͰ͸ɺҰॹʹಇ͍ͯ͘ΕΔ ΫϦΤΠςΟϒ৬ɾϑϩϯτΤϯυΤϯδχΞ
 Λืू͍ͯ͠·͢ɻ !#J[3FBDI%FTJHOFST !#*;3&"$)@%FTJHO IUUQTEFTJHOCJ[SFBDIDPKQ

  40. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠