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
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
180
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
520
プロダクトデザインの「守破離」の「破」について
hayashirine
0
330
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
300
250131_product meetup
motokoishida
0
160
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
240
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
1.1k
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
160
横断組織デザイナーの働き方
mixi_design
PRO
0
430
クライアントワークにおける UXリサーチの実践
kozotaira
0
580
Les petites aventures de CSS, saison 2025
goetter
3
4k
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
Featured
See All Featured
Speed Design
sergeychernyshev
29
880
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Invisible Side of Design
smashingmag
299
50k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
52k
Statistics for Hackers
jakevdp
798
220k
Unsuck your backbone
ammeep
670
57k
Optimizing for Happiness
mojombo
377
70k
How to Ace a Technical Interview
jacobian
276
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Designing for humans not robots
tammielis
252
25k
Writing Fast Ruby
sferik
628
61k
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͔ΒҠߦͤ͞Δʹʁ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠