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

Interactive Styleguide App

masahiko.asai
October 24, 2017

Interactive Styleguide App

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

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

masahiko.asai

October 24, 2017
Tweet

More Decks by masahiko.asai

Other Decks in Design

Transcript

  1. THJOQVU CBDLHSPVOE'''''' CPSEFSQYTPMJE&&& XJEUIQY IFJHIUQY IQY IQY IQY ඞਢ͕෇͘৔߹ πʔϧνοϓ͕෇͘৔߹

    πʔϧνοϓ͕෇͘৔߹ ඞਢͷΞΠίϯJD@SFRVJSFEΛࢀর πʔϧνοϓͷΞΠίϯJD@UPPMUJQTΛࢀর ਧ͖ग़͠ͷࡾ֯ܗ෦෼͸$44Ͱඳըɻ ը໘ͷ୺ͬ͜ʹͳΔͱ͖͸ɺ PWFSqPXIJEEFO͞Εͳ͍Α͏ʹ ࡾ֯ܗͷҐஔͱϙοϓΞοϓͷग़ݱҐஔΛௐ੔͢Δɻ จষ આ໌಺༰ w)3.04࠾༻؅ཧ঺հ w՝୊ w6*ίϯϙʔωϯτ wಈ͘ελΠϧΨΠυ wελΠϧΨΠυ
  2. w 4LFUDIϑΝΠϧͰελΠϧΨΠυ Λ؅ཧ͍ͯ͠Δ w ػೳվमͰ৽͍͠6*͕௥Ճ͞Εͨ ࣌͸దٓΞοϓσʔτ w ৽͍͠ϧʔϧΛࡦఆͨ͠৔߹͸ɺ 4LFUDIʹ௥ه w

    (PPHMFυϥΠϒʹ֨ೲͯ͠ڞ༗ɾ प஌ w "UPNJD%FTJHOͷ֓೦Λࢀߟ ࠷ॳͷελΠϧΨΠυ͸ʜ -6$)*"-*/ גࣜձࣾϏζϦʔν )3.04࠾༻؅ཧࣄۀ෦ σβΠφʔ
  3. .PMFDVMFT ෼ࢠ ٻਓϥϕϧ ϥϕϧͷͳ͍ٻਓ΋ؚ͢ΊΔ Ӧۀ 0SHBOJTNT ༗ػମ ٻਓϥϕϧ ޏ༻ܗଶ ਖ਼ࣾһ

    ܖ໿ࣾһ ৽ଔ ۀ຿ҕୗ Πϯλʔϯ ΞϧόΠτɾύʔτ ϘϥϯςΟΞ ೿ݣࣾһ ٻਓεςʔλε Լॻ͖ͷٻਓ ืूதͷٻਓ ืूఀࢭதͷٻਓ ऴྃͨ͠ٻਓ ϥϕϧͷͳ͍ٻਓ΋ؚ͢ΊΔ Ӧۀ "UPN ݪࢠ Լॻ͖ͷٻਓ 5FNQMBUFT ςϯϓϨʔτ 1BHFT ϖʔδ "UPNJD%FTJHO
  4. Α͋͘ΔελΠϧΨΠυ 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 ৬छ໊ ঢॱ දࣔΦϓγϣϯ Χόʔը૾Λදࣔ ٻਓλΠτϧΛදࣔ ৬छΛදࣔ ٻਓεςʔλεΛදࣔ ޏ༻ܗଶΛදࣔ ެ։ঢ়گΛදࣔ ܝࡌ೔෇Λදࣔ ద༻ Ωϟηϯϧ ฒͼସ͑ ৬छ໊ ঢॱ ৬छ໊ ߱ॱ ద༻ Ωϟηϯϧ બߟϙδγϣϯΛબ୒
  5. "  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 ৭
  6. " D GHDPMPSMJOL  CBTFDPMPSTFDPOEBSZ %'# CHDPMPSUPPMUJQ EFTBUVSBUF EBSLFO 

    CBTFDPMPSQSJNBSZ     EFTBUVSBUF MJHIUFO  CBTFDPMPSQSJNBSZ     EFTBUVSBUF MJHIUFO  CBTFDPMPSQSJNBSZ     CBTFDPMPSQSJNBSZ
  7. 6*ͱΞϓϦͷ෼཭ 6*ίϯϙʔωϯτϥΠϒϥϦ ΞϓϦέʔγϣϯຊମ w ίʔυ͕ॻ͚ΔσβΠφʔͱϑ ϩϯτΤϯυΤϯδχΞ͕։ൃ ͱӡ༻Λߦͳ͍ͬͯΔ w σβΠϯʹؔΘΔϧʔϧ͸͢΂ ͯ͜ͷϥΠϒϥϦʹू໿ɻ

    w ʢΞϓϦʹؔΘΔʣ࣮σʔλ΍ ঢ়ଶ͸࣋ͬͯ͸͍͚ͳ͍ɻ wओʹΤϯδχΞ͕ӡ༻
 ʢσβΠφʔ͸͋·Γؔ༩͠ͳ͍ʣ w6*ίϯϙʔωϯτϥΠϒϥϦΛ༻͍ͯΞϓ Ϧέʔγϣϯͷػೳͱը໘Λ࣮૷ɻ wΞχϝʔγϣϯɺ৭ɺϑΥϯτ౳Λࢦఆͨ͠ ͍৔߹͸ɺ6*ίϯϙʔωϯτ಺ʹ͋ΔTDTTͷม ਺Λར༻͢Δ wσβΠϯʹؔ͢ΔϧʔϧΛΞϓϦέʔγϣϯʹه ड़ͨ͠Γɺ্ॻ͖ͯ͠͸͍͚ͳ͍ɻ
  8. ʜ

  9. Α͔ͬͨ͜ͱ w ։ൃλεΫʹࢀՃ͠΍͘͢ͳͬͨ w ΞϓϦ͕յΕͯ͠·͏ϞϠϞϠ͕গͳ͘ͳͬͨ w Ұ؏ੑΛอͭ͜ͱ͕Ͱ͖Δͷ͸େ͖͍ w 6*ଆͱΞϓϦଆͷ෼ۀ͕Ͱ͖ΔΑ͏ʹͳΓɺ
 ಘҙ෼໺ʹઐ೦Ͱ͖ΔΑ͏ʹͳͬͨʂ

    w ࠓޙ։ൃ͍ͯ͘͠ΞϓϦέʔγϣϯ΋6*ίϯϙʔω ϯτʹΑΓߴ଎։ൃͰ͖Δ౔୆͕Ͱ͖ͨ w ϑϩϯτΤϯυ΋΍ͬͯΈΔؾ͕༙͍͖࣋ͪͯͨʜʂ w σϞΞϓϦͷίʔυͷॻ͖ํΛࢀߟʹͯ͠ɺը໘Λ
 ࡞͍͚ͬͯΔʂ σβΠφʔ ϑϩϯτΤϯδχΞ αʔόʔΤϯδχΞ