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

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

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

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. 8IZ
   6TF
   %-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*ύʔπΛ੔ཧ্ͨ͠Ͱɺػೳ࣮૷͍ͨ͠ɻ
    ੔ཧ͢ΔͨΊͷσβΠϯΛ͍ͨ͠ɻ 1IPUP
    CZ
    ্࢙࠷΋ඒ͍͠Ϋʔϖ
    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