Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
動的デザインガイドラインのつくり方
Search
narirou
February 11, 2018
Design
10
6.9k
動的デザインガイドラインのつくり方
Inside Frontend #2 / 動的デザインガイドラインのつくり方 / Masanari Hamada @nairirou / #InsideFE
narirou
February 11, 2018
Tweet
Share
More Decks by narirou
See All by narirou
Webパフォーマンス高速化とこれからのアーキテクチャ
narirou
13
6k
GYAO!TOPページパフォーマンス改善 (PWA Night 2021)
narirou
6
3.2k
ReactHooksでvideoを乗りこなす
narirou
13
2.4k
GraphQLでフロントエンドの複雑性とたたかう
narirou
13
3k
Other Decks in Design
See All in Design
Ubie Vitalsの取り組み紹介
8845musign
0
280
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
330
Wolf and the seven goatkids
_limex_
PRO
0
500
Tuzukuru解説ブック
atsumaru1377
0
120
Apple HIGのススメ
temoki
0
110
ホワイト化するこの世界の片隅に
hisayosky
0
150
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.3k
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
1.1k
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
240
Building a mindful relationship with digital media for zillennials prone to anxiety
mastervicedesign
0
130
文化に寄りそうデザイン
recruitengineers
PRO
4
960
他人事じゃないWebアクセシビリティ入門
arihiro17
0
260
Featured
See All Featured
It's Worth the Effort
3n
180
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
Six Lessons from altMBA
skipperchong
22
3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Faster Mobile Websites
deanohume
300
30k
Teambox: Starting and Learning
jrom
128
8.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Adopting Sorbet at Scale
ufuk
69
8.6k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
A Modern Web Designer's Workflow
chriscoyier
689
190k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Transcript
ಈతσβΠϯΨΠυϥΠϯͷͭ͘Γํ Masanari Hamada / @narirou Yahoo! JAPAN - WebEngineer GYAO!
- Engineer
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ʉ
❖ Design System ʹ͍ͭͯ ❖ ಈతσβΠϯΨΠυϥΠϯͷ࡞ϙΠϯτ ❖ GYAO! Web৽ࣄྫ -
Ͳ͏ͬͯطଘߏͷWEB͔ΒҠߦͤ͞Δʁ TOPICS
͡Ίʹ SGDD (ελΠϧΨΠυɾυϦϒϯɾσϕϩοϓϝϯτ) Living Design Guideline ❖ طଘͷࢿ࢈Λ๊͑ͨWEBͰಋೖͰ͖Δʁ
ੜ͖ͨσβΠϯΨΠυͷΈΛ Ͳ͏ͬͯαʔϏεͰ࣮ݱ͢Δ͔ ❖ ࣮ࡍʹGYAO! ͰಋೖதͷϓϩηεΛަ͑ͯհ ❖ આಘʹͲ͏ͧ ͡Ίʹ
DESIGN SYSETM
DESIGN SYSTEM σβΠϯఆ͚ٛͨͩ͠Ͱ ࣮ݱ͠ͳ͍
DESIGN SYSTEM ։ൃ͢ΔͨΊʹ ߟ͑Δ͜ͱͨ͘͞Μ͋Δ… ❖ σβΠϯΛ࣮ݱ͢ΔͨΊͷखஈΛɺຖճݕ౼͢Δʁ ❖ ϖʔδ։ൃऀ͕ෳͷνʔϜʹ͔Εͨ߹ɺͦͷߟ͑Δʁ ❖ σβΠϯͷҙਤ͢ΔมߋΛਖ਼͘͠ɺෳՕॴͰө͢Δ͜ͱ͕Ͱ͖Δʁ࿙Εͳ͘ʁ
❖ ඳ͍͍ͯͨσβΠϯػೳͱͯ͠ഁͳ͘ಈ͘ʁ ❖ ࠓճͷมߋɺશһ͕ڞ௨ೝࣝΛ͍࣋ͬͯΔʁ
DESIGN SYSTEM ຖճɺ͜ΕΛߦ͏ͷ͔ʁ ➔ ϓϩηεͷ͕ݟ͑ͯ͘Δ
Complexion Reduction Flat Design ग़య: https://www.swarmnyc.com/whiteboard/complexion-reduction-a-new-trend-in-design-1 DESIGN SYSTEM ੈؒมΘΔɻσβΠϯைྲྀͰมԽ͍ͯ͘͠… Minimal
Material Micro Anim
DESIGN SYSTEM ఆٛͨ͠σβΠϯΛ ਝʹϓϩμΫτʹө͢ΔͨΊͷ γεςϜ͕ඞཁ
σβΠϯΨΠυϥΠϯߋ৽(ك) DESIGN σβΠϯݪଇ CI (corporate identity) VI (visual identity) ϞοΫΞοϓ/ϓϩτλΠϐϯά
։ൃ / ར༻Օॴચ͍ग़͠ ༷ࡦఆ(σβΠϯ͢Δ) UIʹө ϓϩμΫτ
DESIGN σβΠϯݪଇ CI (corporate identity) VI (visual identity) ༷σβΠϯҙਤͷ໌֬Խ ϓϩτλΠϐϯά
σβΠϯΨΠυϥΠϯ ༷σβΠϯҙਤͷѲ ίϯϙʔωϯτར༻ํ๏ͷѲ ࣮ίʔυʹΑΔαϯϓϧ/ςετ શίϯϙʔωϯτͷҰཡ UI ίϯϙʔωϯτ ίʔυ ࠶ར༻ՄೳͳదͳUIύʔπ ࢀর (ࣗಈੜ) ࡞ ϓϩμΫτ
ΞΠσΞΛ͔ʹʹө͢Δϓϩηε DESIGN σβΠϯݪଇ CI (corporate identity) VI (visual identity) ༷σβΠϯҙਤͷ໌֬Խ
ϓϩτλΠϐϯά σβΠϯΨΠυϥΠϯ ༷σβΠϯҙਤͷѲ ίϯϙʔωϯτར༻ํ๏ͷѲ ࣮ίʔυʹΑΔαϯϓϧ/ςετ શίϯϙʔωϯτͷҰཡ UI ίϯϙʔωϯτ ίʔυ ࠶ར༻ՄೳͳదͳUIύʔπ ࢀর (ࣗಈੜ) ࡞
DESIGN SYSTEM σβΠϯγεςϜͱɺ Λఏڙ͢ΔͨΊͷͰ͋Δɻ Nathan Curtis
❖ σβΠϯ ౷Ұ͞ΕͨUX / ࠶ར༻ੑͷߴ͍σβΠϯΞηοτ ❖ ։ൃ ίετͰσβΠϯҙਤΛ࣮ݱ࠶ར༻ੑͷߴ͍։ൃίʔυ ❖ ༷
༷ɺσβΠϯҙਤͳͲίϯϙʔωϯτ୯ҐͰ໌֬Խ͞ΕΔ ͦͯ͜͠ΕΒ͕σβΠϯΨΠυϥΠϯͱͯ͠ӾཡՄೳ DESIGN SYSTEM
ಈతσβΠϯΨΠυϥΠϯͷ࡞ϙΠϯτ DESIGN σβΠϯݪଇ CI (corporate identity) VI (visual identity) ༷σβΠϯҙਤͷ໌֬Խ
ϓϩτλΠϐϯά σβΠϯΨΠυϥΠϯ ༷σβΠϯҙਤͷѲ ίϯϙʔωϯτར༻ํ๏ͷѲ ࣮ίʔυʹΑΔαϯϓϧ શίϯϙʔωϯτͷҰཡ UI ίϯϙʔωϯτ ίʔυ ࠶ར༻ՄೳͳదͳUIύʔπ ࢀর (ࣗಈੜ) ࡞
1 ࣮ίʔυΛࢀরͯ͠ ੜ͖ͨσβΠϯΨΠυϥΠϯΛ࡞Δ σβΠϯΨΠυϥΠϯ ༷σβΠϯҙਤͷѲ ίϯϙʔωϯτར༻ํ๏ͷѲ ࣮ίʔυʹΑΔαϯϓϧ શίϯϙʔωϯτͷҰཡ UI ίϯϙʔωϯτ
ίʔυ ࠶ར༻ՄೳͳదͳUIύʔπ ࢀর (ࣗಈੜ)
2 υΩϡϝϯτʹ ଟϨΠϠʔͷใΛؚΊΔ͜ͱ σβΠϯҙਤɺϏδωε༷ ٕज़ใɺར༻ํ๏ ➔ ٕज़ใ͔͠ͳ͍UIͷҰཡͰɺ ٕज़ऀཱ͔ͨ͠ͳ͍ σβΠϯΨΠυϥΠϯ ༷σβΠϯҙਤͷѲ
ίϯϙʔωϯτར༻ํ๏ͷѲ ࣮ίʔυʹΑΔαϯϓϧ શίϯϙʔωϯτͷҰཡ
3 UIίϯϙʔωϯτؒͷ σʔλܕΛ໌֬ʹఆٛ͢Δ UI ίϯϙʔωϯτ ίʔυ ࠶ར༻ՄೳͳదͳUIύʔπ UI͕ड͚औΔܕσʔλΛఆ͓ٛͯ͘͠ ➔ ಉ͡σʔλ͑ͤ͞
ίϯϙʔωϯτ͕ඞͣಉ͡ঢ়ଶͰද ࣔग़དྷΔΑ͏ʹ͢Δ
σβΠϯγεςϜ࣮ྫ Riff
σβΠϯγεςϜ࣮ྫ ATLASKIT
GYAO! Web ৽ࣄྫ طଘߏͷWEB͔ΒσβΠϯγεςϜΛ࡞Δʹ
GYAO! Web ৽ࣄྫ ݹ͍ߏͷWEB͔ΒҠߦͤ͞Δ ❖ ReactͳͲͷϞμϯڥʹҠߦ͠ͳ͍ͱ࣮ ݱͰ͖ͳ͍ͷ͔ʁ ͍͍͑ɺஈ֊తʹ࣮ݱͰ͖·͢ɻࢲ͕ͨͪͦͷಓΛ౿ΜͰ͍·͢ɻ
GYAO! Web ৽ࣄྫ ݱঢ়ͷఢΛѲ ҠߦϓϥϯΛཱͯΔ JSͱCSSΛแ͢ΔɺςϯϓϨʔτͱϩδοΫ͕Ұ ମԽͨ͠ڊେPHPϑΝΠϧ ಉ͡Α͏ͳϘλϯɺμΠΞϩά͕10छྨҎ্
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ͷܕ
GYAO! Web ৽ࣄྫ Script Template(Pug) README.md package.json ಈ࡞ Style(SASS) ελΠϧ
ςϯϓϨʔτ README.md σβΠϯҙਤ ༻ํ๏ Ϗδωε༷ component֓ཁ ґଘ͢Δσʔλܕ(json-schemaͰఆٛ) ➔ ΨΠυΛࣗಈੜ (Node.js)
GYAO! Web ৽ࣄྫ ·ͣϖʔδ୯ҐͰɺঃʑʹ ComponentΛڞ௨Խ & ࡉԽ
GYAO! Web ৽ࣄྫ ϫʔΫϑϩʔͷมԽΛप DESIGN ENGINEER σβΠϯΨΠυϥΠϯ ༷σβΠϯҙਤͷѲ ίϯϙʔωϯτར༻ํ๏ͷѲ ࣮ίʔυʹΑΔαϯϓϧ
શίϯϙʔωϯτͷҰཡ UIίϯϙʔωϯτͷ࡞ΑΓεΩϧ͕ඞཁʹͳΔ σβΠφͱΤϯδχΞ͕ڠྗͯ͠σβΠϯΨΠυϥΠϯΛҡ͍࣋ͯ͘͠ϑϩʔʹมԽ͢Δ
GYAO! Web ৽ࣄྫ اըɺܦӦਞɺपғͷઆಘ ·ͣɺݱঢ়ͷΛચ͍ग़ͯ͠ɺཧղͯ͠Β͏͜ͱ͔Βɻ Γ͍ͨཧΛཧཧ͓ͯ͘͠
ࢿྉ
ࢿྉ
ࢿྉ ͜͏ͳͬͯͨͷΛʂ
ࢿྉ ͜͏͍ͨ͠ʂ
ࢿྉ
આಘνʔτγʔτ ✔ ։ൃऀ ύϑΥʔϚϯε / ίϯϙʔωϯτ୯Ґͷظ։ൃ / Ϟμϯ ✔ σβΠφʔ
Ϣʔβʔʹ౷ҰੑΛ୲อͰ͖Δ / σβΠϯ͕ਝʹಧ͚ΒΕΔ ࡞ۀޮͷ্ ✔ اը/ܦӦऀ ·ͣཧղͰ͖Δࢿྉʂ / ࣄނϦεΫͷݮগɺͷݮ ைྲྀΛଈ࠲ʹಧ͚ΒΕͳ͍γεςϜɺܦӦΛڴ͔͢ϦεΫ
GYAO! Web ৽ࣄྫ ΞϑλʔϑΥϩʔ ࿅शΛ࡞ͯ͠ɺॳظͷֶशίετΛݮΒ͢औΓΈ Level 2 Level 3
ࢿྉ
GYAO! Web ৽ࣄྫ ❖ جૅ͔ΒԠ༻·Ͱ5 ❖ ࠷ऴʮཁ݅ʯͷΈ͕ఏࣔ͞Ε͓ͯΓɺ࣮ࡍ ʹΤϯδχΞͱσβΠφʔ͕ΜͰߦ͏ ࣮ફʹଈͨ͠࿅श՝
GYAO! Web ৽ࣄྫ LEVEL 1 ࠷ॳ୯७ͳόφʔΛ ίϯϙʔωϯτԽ͢Δ ➔
GYAO! Web ৽ࣄྫ LEVEL 3 ঃʑʹΛ্͍͛ͯ͘ ❖ σʔλͷذॲཧ ❖ JSʹΑΔಈతมߋ
❖ ෳࡶͳίϯϙʔωϯτͷར༻ ͲΜͲΜTϙΠϯτ͕ஷ·Δ! ➔ (ͪΖΜٙࣅ)
GYAO! Web ৽ࣄྫ ❖ ϨϕϧผͷϑΥϩʔΞοϓ͕Մೳʹ ❖ ࣮Ҋ݅ʹೖΓ͍͢ ❖ ৽نࢀೖϝϯόʔͷΩϟονΞοϓͷॿ͚ʹ ❖
ʮָ͍͠ʯ ➔ Ҡߦͷֶशίετͷݮʹ ࿅श՝ͷϝϦοτ
GYAO! Web ৽ࣄྫ ݁Ռ ϞϊϦεঢ়ଶ͔Β50ݸҎ্ͷίϯϙʔωϯτʹͨ͠ ͜Ε͚ͩͷมߋΛՃ͑ͯ طଘϝϯόʔʹΑΔӡ༻ۀʹࢧোͳ͘ߦ͑Δঢ়ଶ
GYAO! Web ৽ࣄྫ ݁Ռ UIίϯϙʔωϯτ͔ΒɺಈతσβΠϯΨΠυϥΠϯΛੜΈ
GYAO! Web ৽ࣄྫ ݁Ռ ҰํͰɺӡ༻ϑϩʔͷมߋʹΑΔݱͷֶशίετΓ͋Δ ❖ ݱͰίʔσΟϯάλεΫͱϏδϡΞϧλεΫ͕͞ΕɺͦΕͧΕ͕ ಘҙͱ͢ΔʹϑΥʔΧε͢Δମ੍ͱͳͬͨ ❖ UX/UIͷݕ౼ʹूத
+ ٕज़ઃܭʹूத ׂ୲͢Δ͜ͱ͋Δ ➔ ޮͱΫΦϦςΟUP
❖ Design System ʹ͍ͭͯ ❖ ಈతσβΠϯΨΠυϥΠϯͷ࡞ϙΠϯτ ❖ GYAO! Web৽ࣄྫ -
طଘߏͷWEB͔ΒҠߦͤ͞Δʹʁ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠