動的デザインガイドラインのつくり方

Inside Frontend #2 / 動的デザインガイドラインのつくり方 / Masanari Hamada @nairirou / #InsideFE

Transcript

1. ಈతσβΠϯΨΠυϥΠϯͷͭ͘Γํ
   Masanari Hamada / @narirou
   Yahoo! JAPAN - WebEngineer
   GYAO! - Engineer
   

   View Slide

2. Masanari Hamada / @narirou
   Yahoo! JAPAN ΤϯδχΞ
   GYAO ΤϯδχΞ
   GYAO WEB ϦϑΝΫλϦϯά
   GYAO WEBಈըϓϨʔϠʔ ϦϑΝΫλϦϯά
   GYAO iOS SwiftԽ/ϦϑΝΫλϦϯά
   GYAO BFF APIαʔόʔ(TypeScript)
   झຯ: WEB Node.js
   ʊਓਓਓਓਓਓਓਓਓਓਓਓਓਓਓਓʊ
   ʼɹϦϑΝΫλϦϯά͔ͯ͠͠ͳ͍ɹʻ
   ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ
   

   View Slide

3. ❖ Design System ʹ͍ͭͯ
   ❖ ಈతσβΠϯΨΠυϥΠϯͷ࡞੒ϙΠϯτ
   ❖ GYAO! Web࡮৽ࣄྫ
   - Ͳ͏΍ͬͯطଘߏ੒ͷWEB͔ΒҠߦͤ͞Δʁ
   TOPICS
   

   View Slide

4. ͸͡Ίʹ
   SGDD (ελΠϧΨΠυɾυϦϒϯɾσϕϩοϓϝϯτ)
   Living Design Guideline
   ❖ طଘͷࢿ࢈Λ๊͑ͨWEBͰ΋ಋೖͰ͖Δʁ
   

   View Slide

5. ੜ͖ͨσβΠϯΨΠυͷ࢓૊ΈΛ
   Ͳ͏΍ͬͯαʔϏεͰ࣮ݱ͢Δ͔
   ❖ ࣮ࡍʹGYAO! ͰಋೖதͷϓϩηεΛަ͑ͯ঺հ
   ❖ આಘʹͲ͏ͧ
   ͸͡Ίʹ
   

   View Slide

6. DESIGN SYSETM
   

   View Slide

7. DESIGN SYSTEM
   σβΠϯ͸ఆ͚ٛͨͩ͠Ͱ͸
   ࣮ݱ͠ͳ͍
   

   View Slide

8. DESIGN SYSTEM
   ։ൃ͢ΔͨΊʹ
   ߟ͑Δ͜ͱ͸ͨ͘͞Μ͋Δ…
   ❖ σβΠϯΛ࣮ݱ͢ΔͨΊͷखஈΛɺຖճݕ౼͢Δʁ
   ❖ ϖʔδ΍։ൃऀ͕ෳ਺ͷνʔϜʹ෼͔Εͨ৔߹͸ɺͦͷ౎౓ߟ͑Δʁ
   ❖ σβΠϯͷҙਤ͢ΔมߋΛਖ਼͘͠ɺෳ਺ՕॴͰ൓ө͢Δ͜ͱ͕Ͱ͖Δʁ࿙Εͳ͘ʁ
   ❖ ඳ͍͍ͯͨσβΠϯ͸ػೳͱͯ͠ഁ୼ͳ͘ಈ͘ʁ
   ❖ ࠓճͷมߋɺશһ͕ڞ௨ೝࣝΛ͍࣋ͬͯΔʁ
   

   View Slide

9. DESIGN SYSTEM
   ຖճɺ͜ΕΛߦ͏ͷ͔ʁ
   ➔ ϓϩηεͷ໰୊͕ݟ͑ͯ͘Δ
   

   View Slide

10. Complexion Reduction
    Flat Design
    ग़య: https://www.swarmnyc.com/whiteboard/complexion-reduction-a-new-trend-in-design-1
    DESIGN SYSTEM
    ੈؒ΋มΘΔɻσβΠϯைྲྀ͸਺೥ͰมԽ͍ͯ͘͠…
    Minimal Material Micro Anim
    

    View Slide

11. DESIGN SYSTEM
    ఆٛͨ͠σβΠϯΛ
    ਝ଎ʹϓϩμΫτʹ൓ө͢ΔͨΊͷ
    γεςϜ͕ඞཁ
    

    View Slide

12. σβΠϯΨΠυϥΠϯߋ৽(ك)
    DESIGN
    σβΠϯݪଇ
    CI (corporate identity)
    VI (visual identity)
    ϞοΫΞοϓ/ϓϩτλΠϐϯά
    ։ൃ / ར༻Օॴચ͍ग़͠
    ࢓༷ࡦఆ(౎౓σβΠϯ͢Δ)
    UIʹ൓ө
    ϓϩμΫτ
    

    View Slide

13. DESIGN
    σβΠϯݪଇ
    CI (corporate identity)
    VI (visual identity)
    ࢓༷΍σβΠϯҙਤͷ໌֬Խ
    ϓϩτλΠϐϯά
    σβΠϯΨΠυϥΠϯ
    ࢓༷΍σβΠϯҙਤͷ೺Ѳ
    ίϯϙʔωϯτར༻ํ๏ͷ೺Ѳ
    ࣮ίʔυʹΑΔαϯϓϧ/ςετ
    શίϯϙʔωϯτͷҰཡ
    UI ίϯϙʔωϯτ
    ίʔυ
    ࠶ར༻Մೳͳద੾ͳUIύʔπ
    ࢀর (ࣗಈੜ੒)
    ࡞੒
    ϓϩμΫτ
    

    View Slide

14. ΞΠσΞΛ଎΍͔ʹ੡඼ʹ൓ө͢Δϓϩηε
    DESIGN
    σβΠϯݪଇ
    CI (corporate identity)
    VI (visual identity)
    ࢓༷΍σβΠϯҙਤͷ໌֬Խ
    ϓϩτλΠϐϯά
    σβΠϯΨΠυϥΠϯ
    ࢓༷΍σβΠϯҙਤͷ೺Ѳ
    ίϯϙʔωϯτར༻ํ๏ͷ೺Ѳ
    ࣮ίʔυʹΑΔαϯϓϧ/ςετ
    શίϯϙʔωϯτͷҰཡ
    UI ίϯϙʔωϯτ
    ίʔυ
    ࠶ར༻Մೳͳద੾ͳUIύʔπ
    ࢀর (ࣗಈੜ੒)
    ࡞੒
    

    View Slide

15. DESIGN SYSTEM
    σβΠϯγεςϜͱ͸ɺ
    ੡඼Λఏڙ͢ΔͨΊͷ੡඼Ͱ͋Δɻ
    Nathan Curtis
    

    View Slide

16. ❖ σβΠϯ
    ౷Ұ͞ΕͨUX / ࠶ར༻ੑͷߴ͍σβΠϯΞηοτ
    ❖ ։ൃ
    ௿ίετͰσβΠϯҙਤΛ࣮ݱ࠶ར༻ੑͷߴ͍։ൃίʔυ
    ❖ ࢓༷
    ࢓༷ɺσβΠϯҙਤͳͲ͸ίϯϙʔωϯτ୯ҐͰ໌֬Խ͞ΕΔ
    ͦͯ͜͠ΕΒ͕σβΠϯΨΠυϥΠϯͱͯ͠ӾཡՄೳ
    DESIGN SYSTEM
    

    View Slide

17. ಈతσβΠϯΨΠυϥΠϯͷ࡞੒ϙΠϯτ
    DESIGN
    σβΠϯݪଇ
    CI (corporate identity)
    VI (visual identity)
    ࢓༷΍σβΠϯҙਤͷ໌֬Խ
    ϓϩτλΠϐϯά
    σβΠϯΨΠυϥΠϯ
    ࢓༷΍σβΠϯҙਤͷ೺Ѳ
    ίϯϙʔωϯτར༻ํ๏ͷ೺Ѳ
    ࣮ίʔυʹΑΔαϯϓϧ
    શίϯϙʔωϯτͷҰཡ
    UI ίϯϙʔωϯτ
    ίʔυ
    ࠶ར༻Մೳͳద੾ͳUIύʔπ
    ࢀর (ࣗಈੜ੒)
    ࡞੒
    

    View Slide

18. 1
    ࣮ίʔυΛࢀরͯ͠
    ੜ͖ͨσβΠϯΨΠυϥΠϯΛ࡞Δ
    σβΠϯΨΠυϥΠϯ
    ࢓༷΍σβΠϯҙਤͷ೺Ѳ
    ίϯϙʔωϯτར༻ํ๏ͷ೺Ѳ
    ࣮ίʔυʹΑΔαϯϓϧ
    શίϯϙʔωϯτͷҰཡ
    UI ίϯϙʔωϯτ
    ίʔυ
    ࠶ར༻Մೳͳద੾ͳUIύʔπ
    ࢀর (ࣗಈੜ੒)
    

    View Slide

19. 2
    υΩϡϝϯτʹ͸
    ଟϨΠϠʔͷ৘ใΛؚΊΔ͜ͱ
    σβΠϯҙਤɺϏδωε࢓༷
    ٕज़৘ใɺར༻ํ๏
    ➔ ٕज़৘ใ͔͠ͳ͍UIͷҰཡͰ͸ɺ
    ٕज़ऀ͔͠໾ཱͨͳ͍
    σβΠϯΨΠυϥΠϯ
    ࢓༷΍σβΠϯҙਤͷ೺Ѳ
    ίϯϙʔωϯτར༻ํ๏ͷ೺Ѳ
    ࣮ίʔυʹΑΔαϯϓϧ
    શίϯϙʔωϯτͷҰཡ
    

    View Slide

20. 3
    UIίϯϙʔωϯτؒͷ
    σʔλܕΛ໌֬ʹఆٛ͢Δ
    UI ίϯϙʔωϯτ
    ίʔυ
    ࠶ར༻Մೳͳద੾ͳUIύʔπ
    UI͕ड͚औΔܕσʔλΛఆ͓ٛͯ͘͠
    ➔ ಉ͡σʔλ͑͞౉ͤ͹
    ίϯϙʔωϯτ͕ඞͣಉ͡ঢ়ଶͰද
    ࣔग़དྷΔΑ͏ʹ͢Δ
    

    View Slide

21. σβΠϯγεςϜ࣮ྫ
    Riff
    

    View Slide

22. σβΠϯγεςϜ࣮ྫ
    ATLASKIT
    

    View Slide

23. GYAO! Web ࡮৽ࣄྫ
    طଘߏ੒ͷWEB͔ΒσβΠϯγεςϜΛ࡞Δʹ͸
    

    View Slide

24. GYAO! Web ࡮৽ࣄྫ
    ݹ͍ߏ੒ͷWEB͔ΒҠߦͤ͞Δ
    ❖ ReactͳͲͷϞμϯ؀ڥʹҠߦ͠ͳ͍ͱ࣮
    ݱͰ͖ͳ͍ͷ͔ʁ
    ͍͍͑ɺஈ֊తʹ࣮ݱͰ͖·͢ɻࢲ͕ͨͪͦͷಓΛ౿ΜͰ͍·͢ɻ
    

    View Slide

25. GYAO! Web ࡮৽ࣄྫ
    ݱঢ়ͷఢΛ೺Ѳ
    ҠߦϓϥϯΛཱͯΔ
    JSͱCSSΛ಺แ͢ΔɺςϯϓϨʔτͱϩδοΫ͕Ұ
    ମԽͨ͠ڊେPHPϑΝΠϧ
    ಉ͡Α͏ͳϘλϯɺμΠΞϩά͕10छྨҎ্
    

    View Slide

26. GYAO! Web ࡮৽ࣄྫ
    Phase 1 Phase 2 Phase 3
    ❖ PHPΛϦϑΝΫλϦ
    ϯά (DIίϯςφΛ༻
    ͍ͨMVVM)
    ❖ ίʔυΛϩδοΫͱ
    ςϯϓϨʔτʹ෼཭
    ❖ ςϯϓϨʔτΤϯδ
    ϯ(pug)Λར༻
    ❖ ϞϊϦεΛίϯϙʔ
    ωϯτʹେ͖͘෼ղ
    ❖ ෼ղग़དྷͨ΋ͷͳ͔
    ͔Βڞ௨ԽͰ͖Δ΋
    ͷ͸ߋʹࡉ෼Խ
    ❖ ViewͱServerؒͷ
    σʔλఆٛΛJSON-
    schemaͰ໌֬ʹ͢Δ
    ❖ PHP͔ΒTypeScriptʹ
    Ҡߦ
    ❖ Vue.jsʹҠߦ
    ❖ طଘͷView(pug)ͷࢼ
    ࢉΛ׆͔͢ܗ
    ❖ ܕఆٛ͸JSON-
    schema͔ΒTSͷܕ΁
    

    View Slide

27. GYAO! Web ࡮৽ࣄྫ
    Script
    Template(Pug)
    README.md
    package.json
    ಈ࡞
    Style(SASS)
    ελΠϧ
    ςϯϓϨʔτ
    README.md
    σβΠϯҙਤ
    ࢖༻ํ๏
    Ϗδωε࢓༷
    component֓ཁ
    ґଘ͢Δσʔλܕ(json-schemaͰఆٛ)
    ➔ ΨΠυΛࣗಈੜ੒
    (Node.js)
    

    View Slide

28. GYAO! Web ࡮৽ࣄྫ
    ·ͣ͸ϖʔδ୯ҐͰɺঃʑʹ
    ComponentΛڞ௨Խ & ࡉ෼Խ
    

    View Slide

29. GYAO! Web ࡮৽ࣄྫ
    ϫʔΫϑϩʔͷมԽΛप஌
    DESIGN
    ENGINEER
    σβΠϯΨΠυϥΠϯ
    ࢓༷΍σβΠϯҙਤͷ೺Ѳ
    ίϯϙʔωϯτར༻ํ๏ͷ೺Ѳ
    ࣮ίʔυʹΑΔαϯϓϧ
    શίϯϙʔωϯτͷҰཡ
    UIίϯϙʔωϯτͷ࡞੒͸ΑΓεΩϧ͕ඞཁʹͳΔ
    σβΠφͱΤϯδχΞ͕ڠྗͯ͠σβΠϯΨΠυϥΠϯΛҡ͍࣋ͯ͘͠ϑϩʔʹมԽ͢Δ
    

    View Slide

30. GYAO! Web ࡮৽ࣄྫ
    اըɺܦӦਞɺपғͷઆಘ
    ·ͣɺݱঢ়ͷ໰୊఺Λચ͍ग़ͯ͠ɺཧղͯ͠΋Β͏͜ͱ͔Βɻ
    ΍Γ͍ͨཧ૝Λ੔ཧ͸੔ཧ͓ͯ͘͠
    

    View Slide

31. ࢿྉ
    

    View Slide

32. ࢿྉ
    

    View Slide

33. ࢿྉ
    ͜͏ͳͬͯͨ΋ͷΛʂ
    

    View Slide

34. ࢿྉ
    ͜͏͍ͨ͠ʂ
    

    View Slide

35. ࢿྉ
    

    View Slide

36. આಘνʔτγʔτ
    ✔ ։ൃऀ
    ύϑΥʔϚϯε / ίϯϙʔωϯτ୯Ґͷ୹ظ։ൃ / Ϟμϯ
    ✔ σβΠφʔ
    Ϣʔβʔʹ౷ҰੑΛ୲อͰ͖Δ / σβΠϯ͕ਝ଎ʹಧ͚ΒΕΔ
    ࡞ۀޮ཰ͷ޲্
    ✔ اը/ܦӦऀ
    ·ͣཧղͰ͖Δࢿྉʂ / ࣄނϦεΫͷݮগɺ޻਺ͷ࡟ݮ
    ைྲྀΛଈ࠲ʹಧ͚ΒΕͳ͍γεςϜ͸ɺܦӦΛڴ͔͢ϦεΫ
    

    View Slide

37. GYAO! Web ࡮৽ࣄྫ
    ΞϑλʔϑΥϩʔ
    ࿅श໰୊Λ࡞੒ͯ͠ɺॳظͷֶशίετΛݮΒ͢औΓ૊Έ
    Level 2
    Level 3
    

    View Slide

38. ࢿྉ
    

    View Slide

39. GYAO! Web ࡮৽ࣄྫ
    ❖ جૅ͔ΒԠ༻·Ͱ5໰୊
    ❖ ࠷ऴ໰୊͸ʮཁ݅ʯͷΈ͕ఏࣔ͞Ε͓ͯΓɺ࣮ࡍ
    ʹΤϯδχΞͱσβΠφʔ͕૊ΜͰߦ͏
    ࣮ફʹଈͨ͠࿅श՝୊
    

    View Slide

40. GYAO! Web ࡮৽ࣄྫ
    LEVEL 1
    ࠷ॳ͸୯७ͳόφʔΛ
    ίϯϙʔωϯτԽ͢Δ ➔
    

    View Slide

41. GYAO! Web ࡮৽ࣄྫ
    LEVEL 3
    ঃʑʹ೉౓Λ্͍͛ͯ͘
    ❖ σʔλͷ෼ذॲཧ
    ❖ JSʹΑΔಈతมߋ
    ❖ ෳࡶͳίϯϙʔωϯτͷར༻
    ͲΜͲΜTϙΠϯτ͕ஷ·Δ! ➔
    (΋ͪΖΜٙࣅ)
    

    View Slide

42. GYAO! Web ࡮৽ࣄྫ
    ❖ ϨϕϧผͷϑΥϩʔΞοϓ͕Մೳʹ
    ❖ ࣮Ҋ݅ʹೖΓ΍͍͢
    ❖ ৽نࢀೖϝϯόʔͷΩϟονΞοϓͷॿ͚ʹ
    ❖ ʮָ͍͠ʯ ➔ Ҡߦͷֶशίετͷ௿ݮʹ
    ࿅श՝୊ͷϝϦοτ
    

    View Slide

43. GYAO! Web ࡮৽ࣄྫ
    ݁Ռ
    ϞϊϦεঢ়ଶ͔Β50ݸҎ্ͷίϯϙʔωϯτʹ෼཭ͨ͠
    ͜Ε͚ͩͷมߋΛՃ͑ͯ΋
    طଘϝϯόʔʹΑΔӡ༻΋ۀ຿ʹࢧোͳ͘ߦ͑Δঢ়ଶ
    

    View Slide

44. GYAO! Web ࡮৽ࣄྫ
    ݁Ռ
    UIίϯϙʔωϯτ͔ΒɺಈతσβΠϯΨΠυϥΠϯΛੜ੒࢓૊Έ
    

    View Slide

45. GYAO! Web ࡮৽ࣄྫ
    ݁Ռ
    ҰํͰɺӡ༻ϑϩʔͷมߋʹΑΔݱ৔ͷֶशίετ͸΍͸Γ͋Δ
    ❖ ݱ৔Ͱ͸ίʔσΟϯάλεΫͱϏδϡΞϧλεΫ͕෼཭͞ΕɺͦΕͧΕ͕
    ಘҙͱ͢Δ෼໺ʹϑΥʔΧε͢Δମ੍ͱͳͬͨ
    ❖ UX/UIͷݕ౼ʹूத + ٕज़ઃܭʹूத ໿ׂ෼୲͢Δ͜ͱ΋͋Δ
    ➔ ޮ཰ͱΫΦϦςΟUP
    

    View Slide

46. ❖ Design System ʹ͍ͭͯ
    ❖ ಈతσβΠϯΨΠυϥΠϯͷ࡞੒ϙΠϯτ
    ❖ GYAO! Web࡮৽ࣄྫ
    - طଘߏ੒ͷWEB͔ΒҠߦͤ͞Δʹ͸ʁ
    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide