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.4k
動的デザインガイドラインのつくり方
Inside Frontend #2 / 動的デザインガイドラインのつくり方 / Masanari Hamada @nairirou / #InsideFE
narirou
February 11, 2018
Tweet
Share
More Decks by narirou
See All by narirou
遷移の高速化 ヤフートップの試行錯誤
narirou
7
2.3k
LINEヤフーにおけるPrerender技術の導入とその効果
narirou
5
5.8k
Webパフォーマンス高速化とこれからのアーキテクチャ
narirou
13
6.4k
GYAO!TOPページパフォーマンス改善 (PWA Night 2021)
narirou
6
3.6k
ReactHooksでvideoを乗りこなす
narirou
13
2.8k
GraphQLでフロントエンドの複雑性とたたかう
narirou
13
3.2k
Other Decks in Design
See All in Design
#Dubois Challenge 2025: Economics
ajstarks
0
140
PF_濵村ひろみ_202503
maru_design78
0
200
Cyber Heart Online Book
hjnasby
0
150
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
2
2.6k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
380
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
470
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
280
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.1k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.7k
sachi_y_portfolio
sachi337
0
420
Liquid Iron
mcduckyart
1
120
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Bash Introduction
62gerente
613
210k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
4 Signs Your Business is Dying
shpigford
184
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
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͔ΒҠߦͤ͞Δʹʁ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠