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

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

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

Transcript

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

   View Slide

2. CLINICS DLS
   ࣗݾ঺հ
   ϚΤμΫχΦϦ
   σβΠϯ
   '
   ྟػԠมϚϯ
   #008:
   ώϜϩοΫ
   .49
   ΞΠϧτϯɾηφ
   ߏ੒ཁૉ
   ೥ͷࡀ݄
   َՇ
   ਓͷࢠͲ΋
   Ϗʔϧ
   ABOUT DLS
   

   View Slide

3. %-4ͱ͸
   CLINICS DLS ABOUT DLS
   

   View Slide

4. Design Language System
   CLINICS DLS ABOUT DLS
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. 8FC J04 "OESPJE
   ͜Ε·Ͱͷ՝୊
   CLINICS DLS ABOUT DLS
   ಉҰαʔϏεͰ͋Γͳ͕ΒɺσόΠεຖͷ6*ʹ͕ࠩੜ͍ͯ͡Δɻ
   ୲౰ΤϯδχΞຖʹ6*ͷղऍ͕ҧ͏ɻ
   σβΠϯ͕ఆ·ͬͯͳ͍ͨΊɺ࣮૷ޙͷख໭Γ͕ੜ͍ͯͨ͡ɻ
   

   View Slide

10. CLINICS DLS ABOUT DLS
    6*ύʔπΛ੔ཧ্ͨ͠Ͱɺػೳ࣮૷͍ͨ͠ɻ
    ੔ཧ͢ΔͨΊͷσβΠϯΛ͍ͨ͠ɻ
    1IPUPCZ্࢙࠷΋ඒ͍͠ΫʔϖQFVHFPUDPVQF
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. CLINICS DLS ABOUT DLS
    σβΠϯݴޠͱίʔυ͸͠͹͠͹ڞ༗͞ΕΔͨΊɺ΄΅ಉ࣌ʹɺ͢΂ͯͷωΠςΟϒϓϥοτϑΥʔ
    ϜͰػೳΛߏஙͯ͠ϦϦʔε͢Δ͜ͱ͕Ͱ͖·͢ɻϓϩμΫτΤϯδχΞ͸ϏϡʔίʔυͰ͸ͳ͘ػೳ
    ϩδοΫͷ࡞੒ʹઐ೦Ͱ͖ΔͨΊɺ։ൃ͸Ұൠతʹߴ଎Ͱ͢ɻ ͞ΒʹɺΤϯδχΞͱઃܭऀ͸ڞ௨ݴ
    ޠΛڞ༗͠·͢ɻ
    σβΠφʔ΋γεςϜʹڵฃ͍ͯ͠·ͨ͠ɻ ͜ΕʹΑΓɺύσΟϯά
    ɺΧϥʔɺλΠϓͷબ୒Ͱ͸ͳ
    ͘ɺσβΠϯͷ࣮ࡍͷίϯηϓτ΍ܦݧʹয఺Λ౰ͯͨ੡඼ϨϏϡʔ͕ՄೳʹͳΓ·͢ɻ DLS͸Ϗ
    δϡΞϧελΠϧΛڞ༗͠ɺ୯ҰͷγεςϜ΁ͷߩݙΛ߹ཧԽ͠·͢ɻ ͜ͷγεςϜʹΑΓɺࢲͨͪ
    શһ͕ΞΠσΞͷϓϩτλΠϓԽ΍࣮ݧΛૉૣ͘௿ίετͰߴਫ਼౓Ͱߦ͑ΔΑ͏ʹͳΓ·͢ɻ
    ࢲ͸ɺ͜ΕΒͷγεςϜΛࢧԉͯ͠ɺࢲ͕ͨͪকདྷతʹ࡞Γ͍࣮ͨࡍͷϢʔβʔΤΫεϖϦΤϯε΍
    ίϯηϓτʹ΋ͬͱूதͰ͖Δͱ৴͍ͯ͡·͢ɻ
    

    View Slide

17. CLINICS DLS ABOUT DLS
    ͪΌΜͱ੍໿Λͭ͘Γɺܧଓతʹӡ༻͞ΕΔ΋ͷɻ
    %-4Λى఺ͱͯ͠6*͕ߏங͞ΕΔঢ়ଶ΁
    

    View Slide

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

    View Slide

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

    View Slide

20. CLINICS DLS ABOUT DLS
    "OESPJE
    

    View Slide

21. CLINICS DLS ABOUT DLS
    J04
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. CLINICS DLS ABOUT DLS
    ࣮૷࣌ʹؾΛ͚ͭͨ఺
    ɾશը໘ͷॻ͖׵͑Λ͠ͳͯ͘͸ͳΒͳ͍ͷͰɺͦ͜Β΁ΜΛؾΛ͚ͭͨɻDLS͍ͬͯ͏Θ͚͡Όͳ͍͚Ͳɻ
    ಋೖલޙͰҙ͕ࣝมΘͬͨ఺ͳͲ͋Δ͔ɻ
    ɾͦ΋ͦ΋ϧʔϧ͕ͭ͘ΒΕͯͳ͔͔ͬͨΒɺσβΠϯϑΝΠϧݟͳͯ͘΋UI૊ΈཱͯΒΕΔͷͰɺ࡞ۀޮ཰͕Α͘ͳͬͨɻ
    
    ɾ৽͍͠ը໘΋͍··ͰͷύʔπΛྲྀ༻͔ͯͭ͑͠Δɻ
    ɾWEBͱ͔΋͜͏͍͏ͷ͕Ͱ͖ͨͷ͕ɺ͋ͨΓ·͑ͩͬͨͷͰ౰ͨΓલͳঢ়ଶʹͳͬͨ͜ͱ͕Α͔ͬͨɻ
    ɾωΠςΟϰͬͯҙຯͰ͍͏ͱɺωΠςΟϒͬͯҙຯͰ͍͏ͱʢͳ͔ͥ̎౓ݴ͏ʣOSಠࣗͷUIͷ֓೦ͷҧ͍͸͋ΔͷͰɺ
    ɹͦΕΛؚΊͨڞ௨ೝ͕ࣝͰ͖Δͱ΋ͬͱ͍͍͔ͳͬͯײ͔͡ͳʁwebʹ΋ੜ͖Δͱ͍͍ΑͶɻ
    ಋೖͯ͠Α͔ͬͨ఺
    ɾࠩ෼͕ͳ͘ͳͬͨɻAndroidͱiOSͷUIύʔπͷࠩ෼͕ͳ͘ͳͬͨͷ͸ɺΑ͔ͬͨɻ
    
    ɾϝΠϯͷύʔπͷ͕ࠩͳ͘ͳͬͨ͜ͱͰɺ࿩Λ͠΍͘͢ͳͬͨɻڞ௨ೝࣝ΋ͪ΍͘͢ͳͬͨɻ
    Android Engineer
    

    View Slide

30. CLINICS DLS ABOUT DLS
    ࣮૷࣌ʹؾΛ͚ͭͨ఺
    ɾCLASS໊Λ͋ͯΔ͚ͩͰɺStoryboardͰUIύʔπΛ֬ೝͰ͖ΔΑ͏ʹ࣮૷ͨ͠ɻ
    ɾϚʔδϯͳͲͷϧʔϧ͸ɺύʔπ୯ҐͰ࣋ͨͤΔ͜ͱʹΑΓɺύʔπͷ૊Έ߹Θ͚ͤͩͰͦΕͳΓʹϨΠΞ΢τ͕૊ΊΔঢ়ଶʹͳͬͨɻ
    ಋೖલޙͰҙ͕ࣝมΘͬͨ఺ͳͲ͋Δ͔ɻ
    ɾσβΠϯ෦෼ʹ͍ͭͯɺߟ͑Δඞཁ͕ͳ͘ͳͬͨɻ
    
    ɾͱ͘ʹϚʔδϯͱ͔ɺ͜Ε·ͰݸผͰߟ͑ͯͨͷ͕ɺDLSͷج४ʹ͕ͨ͠͏͜ͱͰɺޮ཰తʹͳͬͨɻ
    ಋೖͯ͠Α͔ͬͨ఺
    ɾύʔπԽͨ͜͠ͱͰɺ࣮૷ࣗମޮ཰͖ͯʹͳͬͨɻ
    
    ɾࣅͨΑ͏ͳը໘΋͢΂ͯݸผʹͭͬͯͨ͘ͷͰɺҰՕॴ͔͑ͨΒશ෦ม͑ΒΕΔΑ͏ʹͳͬͨͷ͸ྑ͔ͬͨɻ
    iOS Engineer
    

    View Slide

31. 8FC J04 "OESPJE
    ͜Ε·Ͱͷ՝୊
    CLINICS DLS ABOUT DLS
    ಉҰαʔϏεͰ͋Γͳ͕ΒɺσόΠεຖͷ6*ʹ͕ࠩੜ͍ͯ͡Δɻ
    ୲౰ΤϯδχΞຖʹ6*ͷղऍ͕ҧ͏ɻ
    σβΠϯ͕ఆ·ͬͯͳ͍ͨΊɺ࣮૷ޙͷख໭Γ͕ੜ͍ͯͨ͡ɻ
    

    View Slide

32. 8FC J04 "OESPJE
    %-4࣮૷ޙ
    CLINICS DLS ABOUT DLS
    σόΠεຖͷ6*ͷࠩΛͳͤͨ͘ɻ
    ୲౰ΤϯδχΞಉ࢜Ͱίϛϡχέʔγϣϯ͕׆ൃʹͳΓɺ
    6*ઃܭʹ͓͍ͯڞ௨ೝࣝΛ࣋ͯΔΑ͏ʹͳͬͨɻ
    σβΠϯ͕ఆ·Γɺ࣮૷ޙͷख໭Γ͕ܹݮͨ͠ɻ
    

    View Slide

33. CLINICS DLS ABOUT DLS
    σβΠϯݴޠͱ͸ɺ·͞ʹ
    σβΠϯΛ௨ͯ͡ίϛϡχέʔγϣϯ͕औΕΔ
    ͦΜͳૉఢͳγεςϜͰͨ͠ɻ
    

    View Slide

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

    View Slide