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

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

Medley Inc.
August 02, 2017

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

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

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

Medley Inc.

August 02, 2017
Tweet

More Decks by Medley Inc.

Other Decks in Design

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