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
7.3k
動的デザインガイドラインのつくり方
Inside Frontend #2 / 動的デザインガイドラインのつくり方 / Masanari Hamada @nairirou / #InsideFE
narirou
February 11, 2018
Tweet
Share
More Decks by narirou
See All by narirou
遷移の高速化 ヤフートップの試行錯誤
narirou
7
2.2k
LINEヤフーにおけるPrerender技術の導入とその効果
narirou
5
5.4k
Webパフォーマンス高速化とこれからのアーキテクチャ
narirou
13
6.3k
GYAO!TOPページパフォーマンス改善 (PWA Night 2021)
narirou
6
3.6k
ReactHooksでvideoを乗りこなす
narirou
13
2.7k
GraphQLでフロントエンドの複雑性とたたかう
narirou
13
3.2k
Other Decks in Design
See All in Design
横断組織デザイナーの働き方
mixi_design
PRO
0
430
Goodpatch Tour💙 / We are hiring!
goodpatch
31
820k
250131_product meetup
motokoishida
0
160
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
210
Dinosaur Mayhem
storyartist
PRO
0
170
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
300
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
590
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
160
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
250
NAHO SHIMONO_Portfolio2025
nahohphp
0
390
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
430
Kid Cowboy 103
marilutwin
0
150
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
38k
How to train your dragon (web standard)
notwaldorf
90
6k
Producing Creativity
orderedlist
PRO
344
40k
How to Ace a Technical Interview
jacobian
276
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Making Projects Easy
brettharned
116
6.1k
Agile that works and the tools we love
rasmusluckow
328
21k
It's Worth the Effort
3n
184
28k
Gamification - CAS2011
davidbonilla
81
5.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
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͔ΒҠߦͤ͞Δʹʁ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠