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

CLINICS DLS - 凡事徹底デザイン言語システムのご紹介 -

D879794ea42768ea417f970914430d56?s=47 Medley Inc.
August 02, 2017

CLINICS DLS - 凡事徹底デザイン言語システムのご紹介 -

メドレー開発部TechLunchで発表した内容を掲載しました。

メドレーで開発部では、隔週で社内勉強会が開かれています。
今回は、「CLINICS DLS - 凡事徹底デザイン言語システムのご紹介 -」というタイトルで、DLSの導入によりUIの基盤をつくることで、開発におけるコミュニケーションの質を高めた取り組みについて発表しました。
発表者:前田 邦織

D879794ea42768ea417f970914430d56?s=128

Medley Inc.

August 02, 2017
Tweet

Transcript

  1. ຌࣄపఈσβΠϯݴޠγεςϜͷ͝঺հ CLINICS DLS .FEMFZ *OD ,VOJPSJ.BFEB!+VOF 

  2. CLINICS DLS ࣗݾ঺հ ϚΤμΫχΦϦ σβΠϯ ' ྟػԠมϚϯ #008: ώϜϩοΫ .49

    ΞΠϧτϯɾηφ ߏ੒ཁૉ ೥ͷࡀ݄ َՇ ਓͷࢠͲ΋ Ϗʔϧ ABOUT DLS
  3. %-4ͱ͸ CLINICS DLS ABOUT DLS

  4. Design Language System CLINICS DLS ABOUT DLS

  5. σβΠϯݴޠΛى఺ͱͨ͠ɺڞ௨ೝ͕ࣝ΋ͯΔ6*ઃܭͷߏங΁ CLINICS DLS ABOUT DLS Design Language System

  6. CLINICS DLS ABOUT DLS "JSCOCͰ͸ɺ%FTJHO-BOHVBHF4ZTUFNͱ͍͏ͷΛӡ༻͍ͯ͠Δͱ͍͏ͷΛ஌Δ ͜Μͳײ͡ͷσβΠϯΨΠυϥΠϯతͳ΋ͷ airbnb సࡌɿ

  7. 8IZ6TF%-4 σβΠϯγεςϜ͕ඞཁͳཧ༝ CLINICS DLS ABOUT DLS

  8. CLINICS DLS ABOUT DLS $-*/*$4͸σόΠεͰల։ 8FC J04 "OESPJE

  9. 8FC J04 "OESPJE ͜Ε·Ͱͷ՝୊ CLINICS DLS ABOUT DLS  ಉҰαʔϏεͰ͋Γͳ͕ΒɺσόΠεຖͷ6*ʹ͕ࠩੜ͍ͯ͡Δɻ

     ୲౰ΤϯδχΞຖʹ6*ͷղऍ͕ҧ͏ɻ  σβΠϯ͕ఆ·ͬͯͳ͍ͨΊɺ࣮૷ޙͷख໭Γ͕ੜ͍ͯͨ͡ɻ
  10. CLINICS DLS ABOUT DLS 6*ύʔπΛ੔ཧ্ͨ͠Ͱɺػೳ࣮૷͍ͨ͠ɻ ੔ཧ͢ΔͨΊͷσβΠϯΛ͍ͨ͠ɻ 1IPUPCZ্࢙࠷΋ඒ͍͠ΫʔϖQFVHFPUDPVQF

  11. CLINICS DLS ABOUT DLS "JSCOCͰ͸ɺ%FTJHO-BOHVBHF4ZTUFNͱ͍͏ͷΛӡ༻͍ͯ͠Δͱ͍͏ͷΛ஌Δ ΍͸Γɺ͜ΕΛͭ͘Δ͔͠ͳ͍ airbnb సࡌɿ

  12. CLINICS DLS ABOUT DLS ͔͠͠ɺલా͸σβΠφʔ͚ͩͲ΋ σβΠϯΨΠυϥΠϯ͖ͯͳͷ͕ݏ͍Ͱ͢ɻ

  13. CLINICS DLS ABOUT DLS ୯ʹσβΠϯΨΠυϥΠϯΛ࡞Δ͚ͩͩͱ ͦͷޙͷӡ༻Ͱ׆༻͞Εͨࢼ͕͠ͳ͍͔Β ͳͥͳΒ ʢϚΤμͷ৔߹ʣ

  14. CLINICS DLS ABOUT DLS Airbnbͷ։ൃऀͨͪ͸ɺͲͷΑ͏ʹӡ༻͍ͯ͠Δͷ͔….

  15. CLINICS DLS ABOUT DLS σβΠϯݴޠ͸ɺଞͷݴޠͱಉ༷Ͱ͢ɻ σβΠϯݴޠΛڞ༗͠ɺͦΕΛ࢖༻͢Δ͢΂ͯͷਓ͕ཧղͰ͖ͳ͍৔߹ɺޡղ͕ੜ͡·͢ɻ

  16. CLINICS DLS ABOUT DLS σβΠϯݴޠͱίʔυ͸͠͹͠͹ڞ༗͞ΕΔͨΊɺ΄΅ಉ࣌ʹɺ͢΂ͯͷωΠςΟϒϓϥοτϑΥʔ ϜͰػೳΛߏஙͯ͠ϦϦʔε͢Δ͜ͱ͕Ͱ͖·͢ɻϓϩμΫτΤϯδχΞ͸ϏϡʔίʔυͰ͸ͳ͘ػೳ ϩδοΫͷ࡞੒ʹઐ೦Ͱ͖ΔͨΊɺ։ൃ͸Ұൠతʹߴ଎Ͱ͢ɻ ͞ΒʹɺΤϯδχΞͱઃܭऀ͸ڞ௨ݴ ޠΛڞ༗͠·͢ɻ σβΠφʔ΋γεςϜʹڵฃ͍ͯ͠·ͨ͠ɻ

    ͜ΕʹΑΓɺύσΟϯά ɺΧϥʔɺλΠϓͷબ୒Ͱ͸ͳ ͘ɺσβΠϯͷ࣮ࡍͷίϯηϓτ΍ܦݧʹয఺Λ౰ͯͨ੡඼ϨϏϡʔ͕ՄೳʹͳΓ·͢ɻ DLS͸Ϗ δϡΞϧελΠϧΛڞ༗͠ɺ୯ҰͷγεςϜ΁ͷߩݙΛ߹ཧԽ͠·͢ɻ ͜ͷγεςϜʹΑΓɺࢲͨͪ શһ͕ΞΠσΞͷϓϩτλΠϓԽ΍࣮ݧΛૉૣ͘௿ίετͰߴਫ਼౓Ͱߦ͑ΔΑ͏ʹͳΓ·͢ɻ ࢲ͸ɺ͜ΕΒͷγεςϜΛࢧԉͯ͠ɺࢲ͕ͨͪকདྷతʹ࡞Γ͍࣮ͨࡍͷϢʔβʔΤΫεϖϦΤϯε΍ ίϯηϓτʹ΋ͬͱूதͰ͖Δͱ৴͍ͯ͡·͢ɻ
  17. CLINICS DLS ABOUT DLS ͪΌΜͱ੍໿Λͭ͘Γɺܧଓతʹӡ༻͞ΕΔ΋ͷɻ %-4Λى఺ͱͯ͠6*͕ߏங͞ΕΔঢ়ଶ΁

  18. CLINICS DLS ABOUT DLS σβΠϯΨΠυϥΠϯ Y γεςϜ࣮૷ͷίϯϙʔωϯτઃܭ Design x Technology

  19. CLINICS DLS ABOUT DLS σβΠϯΨΠυϥΠϯ Y γεςϜ࣮૷ͷίϯϙʔωϯτઃܭ Design x Technology

  20. CLINICS DLS ABOUT DLS "OESPJE

  21. CLINICS DLS ABOUT DLS J04

  22. CLINICS DLS ABOUT DLS Ұ౓ίϯϙʔωϯτઃܭΛͯ͠͠·͑͹ɺ ύοσΟϯά΍ΧϥʔɺجຊϨΠΞ΢τ͸ߟ͑ͳͯ͘΋ %-4ʹैͬͨσβΠϯ͕ߏங͞ΕΔ

  23. CLINICS DLS ABOUT DLS ͳʹΛ໨ࢦ͔ͨ͠ͱ͍͏ͱɻ

  24. CLINICS DLS ABOUT DLS σβΠϯϧʔϧͷࡦఆ

  25. CLINICS DLS ABOUT DLS σβΠϯϧʔϧͷࡦఆ Ͱ͸ͳ͘

  26. CLINICS DLS ABOUT DLS σβΠϯΛߟ͑Δ࣌ؒΛݮΒͯ͠΋Ұ؏ͨ͠඼࣭Λ୲อ͠ɺ ػೳ࣮૷͕εϐʔσΟʹߦ͑Δঢ়ଶʹ͢Δ

  27. CLINICS DLS ABOUT DLS ݁Ռͱͯ͠ɺαʔϏεͷ69ΛߴΊΔ͜ͱʹ஫ྗͰ͖Δ

  28. CLINICS DLS ABOUT DLS %-4ར༻ऀʹΠϯλϏϡʔͯ͠Έ·ͨ͠ɻ

  29. CLINICS DLS ABOUT DLS ࣮૷࣌ʹؾΛ͚ͭͨ఺ ɾશը໘ͷॻ͖׵͑Λ͠ͳͯ͘͸ͳΒͳ͍ͷͰɺͦ͜Β΁ΜΛؾΛ͚ͭͨɻDLS͍ͬͯ͏Θ͚͡Όͳ͍͚Ͳɻ ಋೖલޙͰҙ͕ࣝมΘͬͨ఺ͳͲ͋Δ͔ɻ ɾͦ΋ͦ΋ϧʔϧ͕ͭ͘ΒΕͯͳ͔͔ͬͨΒɺσβΠϯϑΝΠϧݟͳͯ͘΋UI૊ΈཱͯΒΕΔͷͰɺ࡞ۀޮ཰͕Α͘ͳͬͨɻ ɾ৽͍͠ը໘΋͍··ͰͷύʔπΛྲྀ༻͔ͯͭ͑͠Δɻ ɾWEBͱ͔΋͜͏͍͏ͷ͕Ͱ͖ͨͷ͕ɺ͋ͨΓ·͑ͩͬͨͷͰ౰ͨΓલͳঢ়ଶʹͳͬͨ͜ͱ͕Α͔ͬͨɻ

    ɾωΠςΟϰͬͯҙຯͰ͍͏ͱɺωΠςΟϒͬͯҙຯͰ͍͏ͱʢͳ͔ͥ̎౓ݴ͏ʣOSಠࣗͷUIͷ֓೦ͷҧ͍͸͋ΔͷͰɺ ɹͦΕΛؚΊͨڞ௨ೝ͕ࣝͰ͖Δͱ΋ͬͱ͍͍͔ͳͬͯײ͔͡ͳʁwebʹ΋ੜ͖Δͱ͍͍ΑͶɻ ಋೖͯ͠Α͔ͬͨ఺ ɾࠩ෼͕ͳ͘ͳͬͨɻAndroidͱiOSͷUIύʔπͷࠩ෼͕ͳ͘ͳͬͨͷ͸ɺΑ͔ͬͨɻ ɾϝΠϯͷύʔπͷ͕ࠩͳ͘ͳͬͨ͜ͱͰɺ࿩Λ͠΍͘͢ͳͬͨɻڞ௨ೝࣝ΋ͪ΍͘͢ͳͬͨɻ Android Engineer
  30. CLINICS DLS ABOUT DLS ࣮૷࣌ʹؾΛ͚ͭͨ఺ ɾCLASS໊Λ͋ͯΔ͚ͩͰɺStoryboardͰUIύʔπΛ֬ೝͰ͖ΔΑ͏ʹ࣮૷ͨ͠ɻ ɾϚʔδϯͳͲͷϧʔϧ͸ɺύʔπ୯ҐͰ࣋ͨͤΔ͜ͱʹΑΓɺύʔπͷ૊Έ߹Θ͚ͤͩͰͦΕͳΓʹϨΠΞ΢τ͕૊ΊΔঢ়ଶʹͳͬͨɻ ಋೖલޙͰҙ͕ࣝมΘͬͨ఺ͳͲ͋Δ͔ɻ ɾσβΠϯ෦෼ʹ͍ͭͯɺߟ͑Δඞཁ͕ͳ͘ͳͬͨɻ ɾͱ͘ʹϚʔδϯͱ͔ɺ͜Ε·ͰݸผͰߟ͑ͯͨͷ͕ɺDLSͷج४ʹ͕ͨ͠͏͜ͱͰɺޮ཰తʹͳͬͨɻ

    ಋೖͯ͠Α͔ͬͨ఺ ɾύʔπԽͨ͜͠ͱͰɺ࣮૷ࣗମޮ཰͖ͯʹͳͬͨɻ ɾࣅͨΑ͏ͳը໘΋͢΂ͯݸผʹͭͬͯͨ͘ͷͰɺҰՕॴ͔͑ͨΒશ෦ม͑ΒΕΔΑ͏ʹͳͬͨͷ͸ྑ͔ͬͨɻ iOS Engineer
  31. 8FC J04 "OESPJE ͜Ε·Ͱͷ՝୊ CLINICS DLS ABOUT DLS  ಉҰαʔϏεͰ͋Γͳ͕ΒɺσόΠεຖͷ6*ʹ͕ࠩੜ͍ͯ͡Δɻ

     ୲౰ΤϯδχΞຖʹ6*ͷղऍ͕ҧ͏ɻ  σβΠϯ͕ఆ·ͬͯͳ͍ͨΊɺ࣮૷ޙͷख໭Γ͕ੜ͍ͯͨ͡ɻ
  32. 8FC J04 "OESPJE %-4࣮૷ޙ CLINICS DLS ABOUT DLS  σόΠεຖͷ6*ͷࠩΛͳͤͨ͘ɻ

     ୲౰ΤϯδχΞಉ࢜Ͱίϛϡχέʔγϣϯ͕׆ൃʹͳΓɺ 6*ઃܭʹ͓͍ͯڞ௨ೝࣝΛ࣋ͯΔΑ͏ʹͳͬͨɻ  σβΠϯ͕ఆ·Γɺ࣮૷ޙͷख໭Γ͕ܹݮͨ͠ɻ
  33. CLINICS DLS ABOUT DLS σβΠϯݴޠͱ͸ɺ·͞ʹ σβΠϯΛ௨ͯ͡ίϛϡχέʔγϣϯ͕औΕΔ ͦΜͳૉఢͳγεςϜͰͨ͠ɻ

  34. ຌࣄపఈσβΠϯݴޠγεςϜͷ͝঺հ CLINICS DLS .FEMFZ *OD ,VOJPSJ.BFEB!+VOF