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 full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide