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

0f0b6159cf553aa5c931dedfd460ef70?s=47 narirou
February 11, 2018

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

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

0f0b6159cf553aa5c931dedfd460ef70?s=128

narirou

February 11, 2018
Tweet

Transcript

  1. 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ʉ
  2. 12.

    σβΠϯΨΠυϥΠϯߋ৽(ك) DESIGN σβΠϯݪଇ CI (corporate identity) VI (visual identity) ϞοΫΞοϓ/ϓϩτλΠϐϯά

    ։ൃ / ར༻Օॴચ͍ग़͠ ࢓༷ࡦఆ(౎౓σβΠϯ͢Δ) UIʹ൓ө ϓϩμΫτ
  3. 13.

    DESIGN σβΠϯݪଇ CI (corporate identity) VI (visual identity) ࢓༷΍σβΠϯҙਤͷ໌֬Խ ϓϩτλΠϐϯά

    σβΠϯΨΠυϥΠϯ ࢓༷΍σβΠϯҙਤͷ೺Ѳ ίϯϙʔωϯτར༻ํ๏ͷ೺Ѳ ࣮ίʔυʹΑΔαϯϓϧ/ςετ શίϯϙʔωϯτͷҰཡ UI ίϯϙʔωϯτ ίʔυ ࠶ར༻Մೳͳద੾ͳUIύʔπ ࢀর (ࣗಈੜ੒) ࡞੒ ϓϩμΫτ
  4. 14.

    ΞΠσΞΛ଎΍͔ʹ੡඼ʹ൓ө͢Δϓϩηε DESIGN σβΠϯݪଇ CI (corporate identity) VI (visual identity) ࢓༷΍σβΠϯҙਤͷ໌֬Խ

    ϓϩτλΠϐϯά σβΠϯΨΠυϥΠϯ ࢓༷΍σβΠϯҙਤͷ೺Ѳ ίϯϙʔωϯτར༻ํ๏ͷ೺Ѳ ࣮ίʔυʹΑΔαϯϓϧ/ςετ શίϯϙʔωϯτͷҰཡ UI ίϯϙʔωϯτ ίʔυ ࠶ར༻Մೳͳద੾ͳUIύʔπ ࢀর (ࣗಈੜ੒) ࡞੒
  5. 16.

    ❖ σβΠϯ ౷Ұ͞ΕͨUX / ࠶ར༻ੑͷߴ͍σβΠϯΞηοτ ❖ ։ൃ ௿ίετͰσβΠϯҙਤΛ࣮ݱ࠶ར༻ੑͷߴ͍։ൃίʔυ ❖ ࢓༷

    ࢓༷ɺσβΠϯҙਤͳͲ͸ίϯϙʔωϯτ୯ҐͰ໌֬Խ͞ΕΔ ͦͯ͜͠ΕΒ͕σβΠϯΨΠυϥΠϯͱͯ͠ӾཡՄೳ DESIGN SYSTEM
  6. 17.

    ಈతσβΠϯΨΠυϥΠϯͷ࡞੒ϙΠϯτ DESIGN σβΠϯݪଇ CI (corporate identity) VI (visual identity) ࢓༷΍σβΠϯҙਤͷ໌֬Խ

    ϓϩτλΠϐϯά σβΠϯΨΠυϥΠϯ ࢓༷΍σβΠϯҙਤͷ೺Ѳ ίϯϙʔωϯτར༻ํ๏ͷ೺Ѳ ࣮ίʔυʹΑΔαϯϓϧ શίϯϙʔωϯτͷҰཡ UI ίϯϙʔωϯτ ίʔυ ࠶ར༻Մೳͳద੾ͳUIύʔπ ࢀর (ࣗಈੜ੒) ࡞੒
  7. 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ͷܕ΁
  8. 27.

    GYAO! Web ࡮৽ࣄྫ Script Template(Pug) README.md package.json ಈ࡞ Style(SASS) ελΠϧ

    ςϯϓϨʔτ README.md σβΠϯҙਤ ࢖༻ํ๏ Ϗδωε࢓༷ component֓ཁ ґଘ͢Δσʔλܕ(json-schemaͰఆٛ) ➔ ΨΠυΛࣗಈੜ੒ (Node.js)
  9. 29.

    GYAO! Web ࡮৽ࣄྫ ϫʔΫϑϩʔͷมԽΛप஌ DESIGN ENGINEER σβΠϯΨΠυϥΠϯ ࢓༷΍σβΠϯҙਤͷ೺Ѳ ίϯϙʔωϯτར༻ํ๏ͷ೺Ѳ ࣮ίʔυʹΑΔαϯϓϧ

    શίϯϙʔωϯτͷҰཡ UIίϯϙʔωϯτͷ࡞੒͸ΑΓεΩϧ͕ඞཁʹͳΔ σβΠφͱΤϯδχΞ͕ڠྗͯ͠σβΠϯΨΠυϥΠϯΛҡ͍࣋ͯ͘͠ϑϩʔʹมԽ͢Δ
  10. 31.
  11. 32.
  12. 35.
  13. 36.

    આಘνʔτγʔτ ✔ ։ൃऀ ύϑΥʔϚϯε / ίϯϙʔωϯτ୯Ґͷ୹ظ։ൃ / Ϟμϯ ✔ σβΠφʔ

    Ϣʔβʔʹ౷ҰੑΛ୲อͰ͖Δ / σβΠϯ͕ਝ଎ʹಧ͚ΒΕΔ ࡞ۀޮ཰ͷ޲্ ✔ اը/ܦӦऀ ·ͣཧղͰ͖Δࢿྉʂ / ࣄނϦεΫͷݮগɺ޻਺ͷ࡟ݮ ைྲྀΛଈ࠲ʹಧ͚ΒΕͳ͍γεςϜ͸ɺܦӦΛڴ͔͢ϦεΫ
  14. 38.
  15. 41.

    GYAO! Web ࡮৽ࣄྫ LEVEL 3 ঃʑʹ೉౓Λ্͍͛ͯ͘ ❖ σʔλͷ෼ذॲཧ ❖ JSʹΑΔಈతมߋ

    ❖ ෳࡶͳίϯϙʔωϯτͷར༻ ͲΜͲΜTϙΠϯτ͕ஷ·Δ! ➔ (΋ͪΖΜٙࣅ)
  16. 46.

    ❖ Design System ʹ͍ͭͯ ❖ ಈతσβΠϯΨΠυϥΠϯͷ࡞੒ϙΠϯτ ❖ GYAO! Web࡮৽ࣄྫ -

    طଘߏ੒ͷWEB͔ΒҠߦͤ͞Δʹ͸ʁ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠