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

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

narirou
February 11, 2018

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

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

narirou

February 11, 2018
Tweet

More Decks by narirou

Other Decks in Design

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. DESIGN SYSETM

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. ࢿྉ
    ͜͏͍ͨ͠ʂ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide