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

by sakito

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ w 4BLJUP !@@TBLJUP@@ w αΠϘ΢ζגࣜձࣾ w %FTJHO5FDIOPMPHJTU w LJOUPOF%FTJHO5FBNॴଐ w ϢʔβʔମݧΛ࠷ߴʹ͢ΔνʔϜ ௨শɿ.BOUMFνʔϜ ͷϓϩμ ΫτΦʔφʔ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

࣮ྫ

Slide 13

Slide 13 text

࣮ྫϦϯΫͷମݧͱσβΠϯͷมߋͷ഑෍ w ՝୊ w จࣈྻϦϯΫʹ6OEFSMJOFΛҾ͖͍͕ͨίϯϙʔω ϯτʹ1SPQT͕ͳ͔ͬͨͷͰɺ௥Ճͯ͠΄͍͠ͱ͍ ͏ཁ๬ w ͦ΋ͦ΋6OEFSMJOFΛҾ͘৔߹ͱͦ͏Ͱͳ͍৔߹ ͷɺσβΠϯͷҙࢥܾఆϥΠϯ͕ܾ·͍ͬͯͳ͔ͬͨ   w ղܾͨ͜͠ͱ w 6OEFSMJOFΛ͕Ҿ͚ΔΑ͏ʹ-JOLίϯϙʔωϯτ ʹPQUJPOBMͰ௥Ճ w υΩϡϝϯτʹ6OEFSMJOFΛ͚ͭΔ৔߹ͷ؍఺Λ௥ ه

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

·ͱΊ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

͓ΘΓ