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

デザインシステムにフロントエンドのプラクティスを詰め込んで再配布する

sakito
November 26, 2022

 デザインシステムにフロントエンドのプラクティスを詰め込んで再配布する

sakito

November 26, 2022
Tweet

More Decks by sakito

Other Decks in Technology

Transcript

  1. σβΠϯγεςϜʹϑϩϯτΤϯυͷ ϓϥΫςΟεΛ٧ΊࠐΜͰ࠶഑෍͢Δ +4$POG+1 
 
 [email protected]@[email protected]@ 
 αΠϘ΢ζגࣜձࣾ%FTJHO5FDIOPMPHJTU

  2. ࣗݾ঺հ w 4BLJUP [email protected]@[email protected]@  w αΠϘ΢ζגࣜձࣾ w %FTJHO5FDIOPMPHJTU w

    LJOUPOF%FTJHO5FBNॴଐ w ϢʔβʔମݧΛ࠷ߴʹ͢ΔνʔϜ ௨শɿ.BOUMFνʔϜ ͷϓϩμ ΫτΦʔφʔ
  3. ΞδΣϯμ w νʔϜͱσβΠϯγεςϜ w 6*ϥΠϒϥϦͷ࣮૷ͱ഑෍ w ࣮ྫ w ·ͱΊ

  4. νʔϜͱσβΠϯγεςϜ

  5. ϢʔβʔମݧΛ࠷ߴʹ͢ΔνʔϜ w σβΠϯd࣮૷·Ͱ֞ࠜΛ࣋ͨͣʹ׆ಈ͢ Δ%FTJHO5FDIOPMPHJTU͕ओମͷνʔϜ w ͦΕͧΕ͕ΤϯδχΞϦϯάɺσβΠϯɺ BZΛ࣠ʹڧΈΛ͍࣋ͬͯΔ w LJOUPOF஌͕ࣝ͋Δ2"ɺ෭ۀͱͯ͠σβΠ φʔɺϑϩϯτΤϯυઐ೚΋ॴଐ

  6. σβΠϯγεςϜ͸खஈ w ʮLJOUPOFͷϢʔβʔମݧΛ࠷ߴʹ͢Δʯͱ͍͏໨ඪ w Ұ؏ੑͷ͋ΔϢʔβʔମݧ΍σβΠϯͷ඼࣭ΛϢʔβʔʹఏڙͰ͖Δ͜ͱ w ֤ΞϓϦέʔγϣϯ։ൃνʔϜ͕ओମతʹ඼࣭ͷߴ͍ΞϓϦέʔγϣϯΛ 
 ૉૣ͘։ൃͰ͖ΔΑ͏ʹͳΔ͜ͱΛ໨ࢦ͢ w

    ্هͷ໨ඪΛ࣮ݱ͢ΔͨΊͷखஈͱͯ͠σβΠϯγεςϜΛߏங͍ͯ͠Δ
  7. ͜ͷࢿྉͷຊ୊ w ࠓճ͸ʮ6*ϥΠϒϥϦʯͱʮυΩϡϝϯτʯʹ͍͕ͭͯຊ୊

  8. 6*ϥΠϒϥϦͷ࣮૷ͱ഑෍

  9. 6*ϥΠϒϥϦΛߏங͍ͯ͠Δཧ༝ w ϓϩμΫτɺٕज़ɺσβΠϯΛ֤νʔϜʹ഑෍͢ΔͨΊ w ϓϩμΫτͷཧ૝ɺཁ๬ɺෆ۩߹ w Ϣʔβʔମݧ w σβΠϯݪଇɺ%FTJHO5PLFOɺίϯϙʔωϯτͷ࢓༷ w

    ٕज़ɺσβΠϯͷมԽ w ϒϥ΢β΍)5.- $44ʜ w ֤νʔϜ͔Β͕͋ͬͨ՝୊ͳͲΛ4MBDL΍*TTVFͰऩू͠ɺଞͷνʔϜ΁࠶഑෍͢Δ
  10. 6*ϥΠϒϥϦͷߏ੒ٕज़ͱ഑෍ w 3FBDUίϯϙʔωϯτΛ4USPZCPPL্Ͱ֬ೝͭͭ͠։ൃ w 4UPSZCPPLͱDISPNBUJDΛ࢖ͬͯςετͷ֬ೝ w WJTVBMSFHSFTTJPOUFTUJOH w *OUFSBDUJPOUFTUT

  11. υΩϡϝϯτ͕ηοτ w ഑෍͍ͯ͠Δίϯϙʔωϯτ͸υΩϡϝϯτ͕ηοτʹ ͳ͍ͬͯΔ w ίϯϙʔωϯτͷ'JHNBɺ֓ཁɺߏ੒ɺૢ࡞ͷ࢓༷ɺछ ྨͳͲʜ w ͦ͜ʹࢸΔ·ͰͷഎܠͳͲ΋͋Δ w

    1SPQT໊΍ίϯϙʔωϯτ໊΋͕͜͜ج४ʹͳ͍ͬͯΔ w 4UPSZCPPL%PDTΛར༻͍ͯ͠Δ w (JUIVCͰͷ؅ཧ w 13ϕʔεͰίϯϙʔωϯτͱڞʹϨϏϡʔ w DISPNBUJD্ͰίϯϙʔωϯτͱڞʹݟΕΔ
  12. ࣮ྫ

  13. ࣮ྫϦϯΫͷମݧͱσβΠϯͷมߋͷ഑෍ w ՝୊ w จࣈྻϦϯΫʹ6OEFSMJOFΛҾ͖͍͕ͨίϯϙʔω ϯτʹ1SPQT͕ͳ͔ͬͨͷͰɺ௥Ճͯ͠΄͍͠ͱ͍ ͏ཁ๬ w ͦ΋ͦ΋6OEFSMJOFΛҾ͘৔߹ͱͦ͏Ͱͳ͍৔߹ ͷɺσβΠϯͷҙࢥܾఆϥΠϯ͕ܾ·͍ͬͯͳ͔ͬͨ

    
 w ղܾͨ͜͠ͱ w 6OEFSMJOFΛ͕Ҿ͚ΔΑ͏ʹ-JOLίϯϙʔωϯτ ʹPQUJPOBMͰ௥Ճ w υΩϡϝϯτʹ6OEFSMJOFΛ͚ͭΔ৔߹ͷ؍఺Λ௥ ه
  14. ࣮ྫ%JBMPHίϯϙʔωϯτͰൃੜ͢Δಛఆͷෆ۩߹ w "νʔϜͰݟ͔ͭͬͨ%JBMPHίϯ ϙʔωϯτͷෆ۩߹ w ಛఆͷ৔߹ʹBSJBIJEEFO͕ CPEZͷࢠཁૉʹ͍ͭͨ··ʹ ͳͬͯ͠·͏΋ͷ w νʔϜͰݟ͔ͭͬͨෆ۩߹͕ͩɺ

    6*ϥΠϒϥϦଆʹ࣮૷ͨ͜͠ͱͰɺ 
 ͜ͷमਖ਼ΛଞνʔϜ΋ڗडͰ͖ͨ
  15. ࣮ྫ͜Ε͔Βߟ͍͑ͯΔ͜ͱ w )5.-΍$44ͷมԽΛ6*ϥΠϒϥϦ΍σβΠϯʹऔΓೖΕ͍͍ͯ͘ w ྫ w EJBMPHͷ࢓༷ʹԊͬͨ%JBMPHίϯϙʔωϯτ࣮૷ͱσβΠϯ w $44$POUBJOFS2VFSJFTΛ࢖༻֤ͨ͠ίϯϙʔωϯτͷϧʔϧͱৼΔ෣͍ ͷมԽͷ࢓༷Խ

    w 3FBDUͳͲͷϑϨʔϜϫʔΫͷมԽΛऔΓೖΕ͍ͯ͘ w ͜ΕΒͷϓϥςΟΫεΛ٧ΊࠐΈɺ֤νʔϜ͕มԽΛऔΓೖΕ͍͚ͯΔΑ͏ʹ͠ ͍ͯ͘
  16. ·ͱΊ

  17. ·ͱΊ w 6*ϥΠϒϥϦΛհͯ͠ϓϩμΫτɺٕज़ɺσβΠϯΛ֤νʔϜʹ഑෍͢Δ w ֤νʔϜ͔ΒϑΟʔυόοΫΛ΋Β͏ମ੍Λ੔͑Δͷ΋େࣄ w 6*ϥΠϒϥϦͷ։ൃ͸ɺϓϩμΫτɺσβΠϯɺϑϩϯτΤϯυ஌ࣝɺ BZ஌ࣝͳͲΛ༻͍ͨ૯ྗઓ w υΩϡϝϯτ΋ηοτʹ͢Δ͜ͱͰɺίϯϙʔωϯτͷݴޠԽΛ͠ɺมԽ

    ͷྺ࢙Λ௥͑ΔΑ͏ʹ͓ͯ͜͠͏
  18. ͓ΘΓ