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


    !@@TBLJUP@@

    αΠϘ΢ζגࣜձࣾ%FTJHO5FDIOPMPHJTU

    View Slide

  2. ࣗݾ঺հ
    w 4BLJUP !@@TBLJUP@@

    w αΠϘ΢ζגࣜձࣾ
    w %FTJHO5FDIOPMPHJTU
    w LJOUPOF%FTJHO5FBNॴଐ
    w ϢʔβʔମݧΛ࠷ߴʹ͢ΔνʔϜ ௨শɿ.BOUMFνʔϜ
    ͷϓϩμ
    ΫτΦʔφʔ

    View Slide

  3. ΞδΣϯμ
    w νʔϜͱσβΠϯγεςϜ
    w 6*ϥΠϒϥϦͷ࣮૷ͱ഑෍
    w ࣮ྫ
    w ·ͱΊ

    View Slide

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

    View Slide

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

    View Slide

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

    ૉૣ͘։ൃͰ͖ΔΑ͏ʹͳΔ͜ͱΛ໨ࢦ͢
    w ্هͷ໨ඪΛ࣮ݱ͢ΔͨΊͷखஈͱͯ͠σβΠϯγεςϜΛߏங͍ͯ͠Δ

    View Slide

  7. ͜ͷࢿྉͷຊ୊
    w ࠓճ͸ʮ6*ϥΠϒϥϦʯͱʮυΩϡϝϯτʯʹ͍͕ͭͯຊ୊

    View Slide

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

    View Slide

  9. 6*ϥΠϒϥϦΛߏங͍ͯ͠Δཧ༝
    w ϓϩμΫτɺٕज़ɺσβΠϯΛ֤νʔϜʹ഑෍͢ΔͨΊ
    w ϓϩμΫτͷཧ૝ɺཁ๬ɺෆ۩߹
    w Ϣʔβʔମݧ
    w σβΠϯݪଇɺ%FTJHO5PLFOɺίϯϙʔωϯτͷ࢓༷
    w ٕज़ɺσβΠϯͷมԽ
    w ϒϥ΢β΍)5.- $44ʜ
    w ֤νʔϜ͔Β͕͋ͬͨ՝୊ͳͲΛ4MBDL΍*TTVFͰऩू͠ɺଞͷνʔϜ΁࠶഑෍͢Δ

    View Slide

  10. 6*ϥΠϒϥϦͷߏ੒ٕज़ͱ഑෍
    w 3FBDUίϯϙʔωϯτΛ4USPZCPPL্Ͱ֬ೝͭͭ͠։ൃ
    w 4UPSZCPPLͱDISPNBUJDΛ࢖ͬͯςετͷ֬ೝ
    w WJTVBMSFHSFTTJPOUFTUJOH
    w *OUFSBDUJPOUFTUT

    View Slide

  11. υΩϡϝϯτ͕ηοτ
    w ഑෍͍ͯ͠Δίϯϙʔωϯτ͸υΩϡϝϯτ͕ηοτʹ
    ͳ͍ͬͯΔ
    w ίϯϙʔωϯτͷ'JHNBɺ֓ཁɺߏ੒ɺૢ࡞ͷ࢓༷ɺछ
    ྨͳͲʜ
    w ͦ͜ʹࢸΔ·ͰͷഎܠͳͲ΋͋Δ
    w 1SPQT໊΍ίϯϙʔωϯτ໊΋͕͜͜ج४ʹͳ͍ͬͯΔ
    w 4UPSZCPPL%PDTΛར༻͍ͯ͠Δ
    w (JUIVCͰͷ؅ཧ
    w 13ϕʔεͰίϯϙʔωϯτͱڞʹϨϏϡʔ
    w DISPNBUJD্ͰίϯϙʔωϯτͱڞʹݟΕΔ

    View Slide

  12. ࣮ྫ

    View Slide

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

    w ղܾͨ͜͠ͱ
    w 6OEFSMJOFΛ͕Ҿ͚ΔΑ͏ʹ-JOLίϯϙʔωϯτ
    ʹPQUJPOBMͰ௥Ճ
    w υΩϡϝϯτʹ6OEFSMJOFΛ͚ͭΔ৔߹ͷ؍఺Λ௥
    ه

    View Slide

  14. ࣮ྫ%JBMPHίϯϙʔωϯτͰൃੜ͢Δಛఆͷෆ۩߹
    w "νʔϜͰݟ͔ͭͬͨ%JBMPHίϯ
    ϙʔωϯτͷෆ۩߹
    w ಛఆͷ৔߹ʹBSJBIJEEFO͕
    CPEZͷࢠཁૉʹ͍ͭͨ··ʹ
    ͳͬͯ͠·͏΋ͷ
    w νʔϜͰݟ͔ͭͬͨෆ۩߹͕ͩɺ
    6*ϥΠϒϥϦଆʹ࣮૷ͨ͜͠ͱͰɺ

    ͜ͷमਖ਼ΛଞνʔϜ΋ڗडͰ͖ͨ

    View Slide

  15. ࣮ྫ͜Ε͔Βߟ͍͑ͯΔ͜ͱ
    w )5.-΍$44ͷมԽΛ6*ϥΠϒϥϦ΍σβΠϯʹऔΓೖΕ͍͍ͯ͘
    w ྫ
    w EJBMPHͷ࢓༷ʹԊͬͨ%JBMPHίϯϙʔωϯτ࣮૷ͱσβΠϯ
    w $44$POUBJOFS2VFSJFTΛ࢖༻֤ͨ͠ίϯϙʔωϯτͷϧʔϧͱৼΔ෣͍
    ͷมԽͷ࢓༷Խ
    w 3FBDUͳͲͷϑϨʔϜϫʔΫͷมԽΛऔΓೖΕ͍ͯ͘
    w ͜ΕΒͷϓϥςΟΫεΛ٧ΊࠐΈɺ֤νʔϜ͕มԽΛऔΓೖΕ͍͚ͯΔΑ͏ʹ͠
    ͍ͯ͘

    View Slide

  16. ·ͱΊ

    View Slide

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

    View Slide

  18. ͓ΘΓ

    View Slide