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.5k
動的デザインガイドラインのつくり方
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
6.3k
Webパフォーマンス高速化とこれからのアーキテクチャ
narirou
13
6.5k
GYAO!TOPページパフォーマンス改善 (PWA Night 2021)
narirou
6
3.6k
ReactHooksでvideoを乗りこなす
narirou
13
2.8k
GraphQLでフロントエンドの複雑性とたたかう
narirou
13
3.3k
Other Decks in Design
See All in Design
root COMPANY DECK / We are hiring!
root_recruit
1
24k
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
130
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.2k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
690
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
4.2k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
560
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
300
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
420
CursorでAI活用のナレッジベースを構築する
kanzaki
0
740
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
910
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
150
Goodpatch Tour💙 / We are hiring!
goodpatch
31
890k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Done Done
chrislema
185
16k
Side Projects
sachag
455
43k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Tale of Four Properties
chriscoyier
160
23k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
We Have a Design System, Now What?
morganepeng
53
7.8k
The Invisible Side of Design
smashingmag
301
51k
Designing for Performance
lara
610
69k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
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͔ΒҠߦͤ͞Δʹʁ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠