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
YoujiSakai
May 14, 2020
Design
180
3
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
研修用
2020.5.14
Adobe XD エンタープライズ・デザインシステム概論
YoujiSakai
May 14, 2020
More Decks by YoujiSakai
See All by YoujiSakai
2020.11.12
youjisakai
0
380
20200720
youjisakai
0
300
2020.4.22
youjisakai
0
200
2020.4.22
youjisakai
0
170
2020.1.08
youjisakai
2
310
Project Aeroで実現する!グラフィックデザイナーやwebデザイナーも挑戦できるARコンテンツ制作
youjisakai
0
520
20191119
youjisakai
1
170
20190903-AM.pdf
youjisakai
0
300
2019.9.3 PM
youjisakai
1
260
Other Decks in Design
See All in Design
Of Ordination and Rebellion exploration sketches
rezaline
0
220
図面資産×AI 眠れる資産を起こす挑戦
aonomasahiro
0
220
開発・制作におけるUI・UXデザインの重要性について~UI・UXデザインってなんだろう~
yamasaku
0
200
個人理念(自分の言葉)の言語化ワークショップ
kakukoki
1
200
Техники структурирования беседы с собой, заказчиком и командо
ashapiro
0
280
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
520
デザインツールを開く前に その画面は誰に何と言わせたい?受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
garyuten
1
200
ボタンUIの冪等性の話をしたらVimmerに刺さっちゃった
ottatto
3
1.8k
「バイブコーディングって何?」から始まった、 AIとの一年間と、その先のこと
seto
0
1.2k
デザインワークフローの最前線。 ログラスでのAI活用の現在地
ukaoli
1
2k
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
karad
0
180
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
securecat
1
260
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2.1k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
640
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.3k
Building Flexible Design Systems
yeseniaperezcruz
330
41k
Code Review Best Practice
trishagee
74
20k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
700
For a Future-Friendly Web
brad_frost
183
10k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
220
From π to Pie charts
rasagy
0
350
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Transcript
Design Systems σβΠϯγεςϜ
Design Systems 6*ύλʔϯɾίϯϙʔωϯτɾΞηοτ λΠϙάϥϑΟɾΧϥʔύϨοτ ελΠϧΨΠυɾϑϨʔϜϫʔΫ ϒϥϯυΨΠυϥΠϯɾσβΠϯݪଇ νʔϜͷಇ͖ํɾՁ؍ ίʔυͱσβΠϯͷҰݩཧ %FTJHOUPLFO
TUBOEBSETNBOVBM /FX:PSL$JUZ 5SBOTJU"VUIPSJUZ (SBQIJDT4UBOEBSET.BOVBM %FTJHOFECZ.BTTJNP7JHOFMMJɹBOE#PC/PPSEB 6OJNBSL IUUQTTUBOEBSETNBOVBMDPNQSPEVDUTOZDUBDPNQBDUFEJUJPO
TUBOEBSETNBOVBM /BUJPOBM"FSPOBVUJDTBOE 4QBDF"ENJOJTUSBUJPO (SBQIJDT4UBOEBSET.BOVBM %FTJHOFECZ3JDIBSE%BOOFBOE#SVDF#MBDLCVSO %BOOF#MBDLCVSO IUUQTTUBOEBSETNBOVBMDPNQSPEVDUTOBTBHSBQIJDTTUBOEBSETNBOVBM
ഁ क ܕΛकΓ मߦΛੵΈ ࣮ફΛॏͶ ࣗͷܕΛݟ͚ͭ طଘͷܕΛഁΓ ࠷ऴతʹ ܕ͔ΒΕ
ࣗ༝ʹͳΔ
اը෦ ϓϩδΣΫτνʔϜ ։ൃ෦ ൢച෦
اը෦ ϓϩδΣΫτνʔϜ ࣗݾ৫Խ ৬Ҭԣஅత ։ൃ෦ ൢച෦
اը෦ ϝϯλʔ ϓϩδΣΫτνʔϜ ࣗݾ৫Խ ৬Ҭԣஅత ։ൃ෦ ϝϯλʔ ϝϯλʔ ൢച෦
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
σβΠϯ %&4*(/ ʙલʙࠒʙ
ʙલ ༗໊σβΠφʔʹΑΔ#*ʗ$*ʢاۀϒϥϯσΟϯάʣ ϒϥϯσΟϯάΞΠσϯςΟςΟɺίʔϙϨʔτΞΠσϯςΟςΟ લʙࠒ σβΠϯίϯαϧςΟϯάϑΝʔϜʹΑΔ ਓؒத৺σβΠϯʗΠϊϕʔγϣϯ ʮσβΠϯܦӦʯએݴʗσβΠϯਓࡐ ৫తͳΠϯϑϥͱͯ͠σβΠϯͷΈ
ώτʢਓࡐʣϞϊʢతࢿݯʣΧωʢࡒʣใɺσβΠϯ σβΠϯΛܦӦࢿݯͱͯ͠ͱΒ͑Δ ଐਓతͰͳ͍αεςΟφϒϧͳʢ࣋ଓՄೳͳʣ ػೳͱͯ͠ͷσβΠϯ
σβΠϯܦӦͷඞཁ݅ ɾܦӦνʔϜʹσβΠϯͷ ɹऀʢσβΠϯΦϑΟαʔʣ͕͍Δ ɹ$%0νʔϑσβΠϯΦϑΟαʔ ɾࣄۀઓུߏஙͷ࠷্ྲྀ͔ΒσβΠϯͷνʔϜ͕ ɹؔ༩͍ͯ͠Δ
ɺܦӦʹ$%0 ʢ$IJFG%FTJHO0⒏DFSɿ ࠷ߴσβΠϯऀʣΛઃஔ Ϛϩɾϙϧνʔχ͕ब &ODBOUP1VCMJD3FMBUJPOT%FTJHOBOE13.BVSP1PSDJOJ 1FQTJDP$IJFG%FTJHO0⒏DFS FOHMJTIWFSTJPO IUUQXXXFODBOUPQVCMJDSFMBUJPOTDPNEFTJHOBOEQSNBVSPQPSDJOJQFQTJDPIUNM
δχʔɾϩϝοςΟʢʹ$&0ʹबʣ͕ σβΠϯܦӦΛਪਐɺಉɺ*#.%FTJHOͱ͍͏ ৫Λઃஔɻ θωϥϧɾϚωʔδϟʔʹ ϑΟϧɾΪϧόʔτ *#.ͷσβΠϯࢥߟͷಓࢣɺϑΟϧɾΪϧόʔτࢯຊͰԿΛޠΔ͔ IUUQTCJ[[JOFKQBSUJDMFEFUBJM σβΠϯͱσβΠϯࢥߟͷΧϧνϟʔΛ *#.ʹਁಁͤ͞Δ Mission
μάɾύΤϧ͕σβΠφʔͱͯ͠ཧࣄʹब ʢ*#.Ͱॳʣ σβΠϯࢥߟ͕ͨΒ͢Ϗδωεมֵʂ มΘΓΏ͘σβΠφʔͷׂ IUUQTXXXJCNDPNUIJOLKQKBCVTJOFTTEFTJHOUIJOLJOH
݄Ͱ৽ઃͷ৬ $%0ʢ$IJFG%FTJHO 0⒏DFSʣʹब͢Δ͜ ͱ͕ใ͡ΒΕͨ ݄ɺδϣφαϯɾΞΠϒ͕ +POZ*WFOFBSMZRVJU"QQMF CVUJOTUFBECFDBNF 4UFWF+PCTTTQJSJUVBMQBSUOFS IUUQXXXFDPUJJO6)8KB
ώτʢਓࡐʣϞϊʢతࢿݯʣΧωʢࡒʣใɺσβΠϯ σβΠϯΛܦӦࢿݯͱͯ͠ͱΒ͑Δ ଐਓతͰͳ͍αεςΟφϒϧͳʢ࣋ଓՄೳͳʣ ػೳͱͯ͠ͷσβΠϯ
σβΠϯܦӦܦࡁ࢈ۀল IUUQTXXXNFUJHPKQQSFTTQEG
ΞοϓϧɺμΠιϯɺྑܭըɺϚπμɺϝϧΧϦɺ "JSCOCͳͲͷ#UP$اۀͷΈͳΒͣɺεϦʔΤ Ϝɺ*#.ͷΑ͏ͳ#UP#اۀɺσβΠϯΛاۀͷ ܦӦઓུͷத৺ʹਾ͓͑ͯΓɺʮσβΠϯܦӦʯ ͷ࣮ફاۀɾޭاۀͱ͍͏͜ͱ͕ݴ͑Δɻ σβΠϯܦӦܦࡁ࢈ۀল IUUQTXXXNFUJHPKQQSFTTQEG
ʙલ ༗໊σβΠφʔʹΑΔ#*ʗ$*ʢاۀϒϥϯσΟϯάʣ ϒϥϯσΟϯάΞΠσϯςΟςΟɺίʔϙϨʔτΞΠσϯςΟςΟ લʙࠒ σβΠϯίϯαϧςΟϯάϑΝʔϜʹΑΔ ਓؒத৺σβΠϯʗΠϊϕʔγϣϯ ʮσβΠϯܦӦʯએݴʗσβΠϯਓࡐ ৫తͳΠϯϑϥͱͯ͠σβΠϯͷΈ
σβΠϯࢥߟ ඇσβΠφʔ͕ ରͷࢥߟ๏ σβΠφʔ͕ແҙࣝʹ͍ͬͯΔ࡞ۀͷਐΊํࢥߟ๏ आΓͯΠϊϕʔγϣϯΛى͜͢
None
σβΠϯࢥߟ ඇσβΠφʔ͕ ରͷࢥߟ๏ σβΠφʔ͕ແҙࣝʹ͍ͬͯΔ࡞ۀͷਐΊํࢥߟ๏ आΓͯΠϊϕʔγϣϯΛى͜͢
5IJOL8JUI:PVS)BOET ࡞Γͳ͕Βߟ͑Δ ɹɹɹɹɹߟ͑ͳ͕Β࡞Δ
ߟ͔͑ͯΒ࡞Δ ౷తʹߦΘΕ͍ͯΔ σβΠϯϓϩηε
5IJOL8JUI:PVS)BOET ࡞Γͳ͕Βߟ͑Δ ɹɹɹɹɹߟ͑ͳ͕Β࡞Δ తղܾ
#VJMEJOHUPUIJOL ԿΛ࡞Δ͔Λߟ͑ΔͷͰͳ͘ɺ ߟ͑ΔͨΊʹ࡞ΔͷͰ͢ ςΟϜɾϒϥϯɿ σβΠφʔͬͱେ͖͘ ߟ͑Δ͖ͩ IUUQTXXXZPVUVCFDPNXBUDI W6"JO-B5Y:
4LFUDI *OWJTJPO 'JHNB
.PO[P "UPN / 3FWPMVU Ϟϯκʔ ΞτϜόϯΫ ΤψτΡΤϯςΟγοΫε ϨϘϦϡʔτ νϟϨϯδϟʔόϯΫ
ैདྷͷۜߦۀք͕ͬͨ͜ͱͷͳ͍αʔϏεΛ σδλϧωΠςΟϒͨͪʹఏڙ͢Δ ࣍ੈͷۜߦͷΧλν νϟϨϯδϟʔόϯΫ
ɾσβΠϯܦӦ ɹΞδϟΠϧɺσβΠϯࢥߟ ɾਓࡐҭ ɹֶͼͷ৫ ɾػցֶश ɹσʔλαΠΤϯε ڞ௨
ɾσβΠϯܦӦ ɹΞδϟΠϧɺσβΠϯࢥߟ ɾਓࡐҭ ɹֶͼͷ৫ ɾػցֶश ɹσʔλαΠΤϯε খ͘͞ϦϦʔεɺվળɺνʔϜͰڞ༗ ڞ௨
None
None
5IJOL8JUI:PVS)BOET ࡞Γͳ͕Βߟ͑Δ ɹɹɹɹɹߟ͑ͳ͕Β࡞Δ తղܾ
None
None
Design Systems 6*ύλʔϯɾίϯϙʔωϯτɾΞηοτ λΠϙάϥϑΟɾΧϥʔύϨοτ ελΠϧΨΠυɾϑϨʔϜϫʔΫ ϒϥϯυΨΠυϥΠϯɾσβΠϯݪଇ νʔϜͷಇ͖ํɾՁ؍ ίʔυͱσβΠϯͷҰݩཧ %FTJHOUPLFO
࣋ଓՄೳͳӡ༻ ࣮ओٛ ։ൃํ
࣋ଓՄೳͳӡ༻
(FOFSBMJ[FE.BSLVQ-BOHVBHF (.- 4UBOEBSE(FOFSBMJ[FE.BSLVQ-BOHVBHF 4(.-
)ZQFSUFYU.BSLVQ-BOHVBHF )5.-
(FOFSBMJ[FE.BSLVQ-BOHVBHF (.- ࡞ऀ ൃߦ छྨ
֓ཁ ߏԽ (.-จॻ ʴ ࢹ֮දݱ ࣈମɿ)FMWFUJDB αΠζɿ ϙΠϯτ Ґஔɿதԝἧ͑
จॻͷߏͱදࣔํ๏Λͯ͠ɺ ൚༻తͳλά͚ΛՄೳʹͨ͜͠ͱͰɺ ෳͷυΩϡϝϯτΛҰճͷॲཧͰ ·ͱΊͯมߋ͢Δ͜ͱ͕Մೳʹͳͬͨ େͳυΩϡϝϯτΛޮΑ͘ཧͰ͖ΔΑ͏ʹͳͬͨ
(FOFSBMJ[FE.BSLVQ-BOHVBHF (.- 4UBOEBSE(FOFSBMJ[FE.BSLVQ-BOHVBHF 4(.-
)ZQFSUFYU.BSLVQ-BOHVBHF )5.-
)5.- 8FC ඪ४ʹ४ڌͨ͠ )5.- ಠ֦ࣗுͨ͠ )5.- ޙ ޙͷڥͰ
ӾཡͰ͖Δ ޙͷڥͰ ӾཡͰ͖Δ ಠ֦ࣗுͨ͠اۀ͕ ۀෆৼͰ։ൃΛఀࢭ ޙͷڥͰ શͯΛӾཡͰ͖ͳ͍ ޙ )5.- )5.- )5.- ޙ ඇӦརͷඪ४Խஂମ ʢ8$ʣ ͕ ϝϯςφϯε ඇӦརͷඪ४Խஂମ ʢ8$ʣ ͕ ϝϯςφϯε ޙ )5.- )5.-
(FOFSBMJ[FE.BSLVQ-BOHVBHF (.- 4UBOEBSE(FOFSBMJ[FE.BSLVQ-BOHVBHF 4(.-
)ZQFSUFYU.BSLVQ-BOHVBHF )5.- )ZQFSUFYU.BSLVQ-BOHVBHF *&5' 8$ )5.- )ZQFSUFYU.BSLVQ-BOHVBHF )5.- )ZQFSUFYU.BSLVQ-BOHVBHF )5.- )ZQFSUFYU.BSLVQ-BOHVBHF )5.- )ZQFSUFYU.BSLVQ-BOHVBHF 9)5.-
࣮ओٛ
Ҋ ઌߦ࣮ 8$ ϒϥβʔϕϯμʔ .JDSPTPGU "QQMF (PPHMF .P[JMMB'PVOEBUJPO 0QFSB4PGUXBSF ࠷ऴҊ
קࠂީิ קࠂҊ קࠂ ࣮
Ҋ ઌߦ࣮ ࣮ࡍʹࢼͯ͠ΈΔ ϑΟʔυόοΫ ෦తʹ࠾༻ શ໘తʹ࠾༻ ेͳ࣮ܦݧ ࣮ྫ 8$ ϒϥβʔϕϯμʔ
8FC ੍࡞ऀ .JDSPTPGU "QQMF (PPHMF .P[JMMB'PVOEBUJPO 0QFSB4PGUXBSF ࠷ऴҊ קࠂީิ קࠂҊ קࠂ ࣮
શʹ༷͕ܾఆ͔ͯ͠Β࣮͞ΕΔͷͰͳ͘ɺ ٞ͠ͳ͕Β࣮ࡍʹϒϥβʔͰࢼ͠ɺ ຊʹٻΊΒΕ͍ͯΔػೳ͔Ͳ͏͔ݕূ͠ͳ͕Β ࡦఆ࡞ۀ͕ਐΈ·͢
Ҋ ઌߦ࣮ ࣮ࡍʹࢼͯ͠ΈΔ ϑΟʔυόοΫ ෦తʹ࠾༻ શ໘తʹ࠾༻ ेͳ࣮ܦݧ ࣮ྫ 8$ ϒϥβʔϕϯμʔ
8FC ੍࡞ऀ .JDSPTPGU "QQMF (PPHMF .P[JMMB'PVOEBUJPO 0QFSB4PGUXBSF ࠷ऴҊ קࠂީิ קࠂҊ קࠂ ࣮
։ൃํ
ϓϩάϨογϒɾΤϯϋϯεϝϯτ 1SPHSFTTJWF&OIBODFNFOU
ج४ ݹ͍ϒϥβʔ ใ )5.- ࢹ֮දݱ $44 ಈతදݱ ࠷ઌදݱ +BWB4DSJQU 8FC(-
FUD ීٴ͍ͯ͠Δ ϒϥβʔ ࠷৽ͷ ϒϥβʔ
άϨΠεϑϧɾσάϥσʔγϣϯ (SBDFGVM%FHSBEBUJPO
ج४ ݹ͍ϒϥβʔ ใ )5.- ࢹ֮දݱ $44 ಈతදݱ ࠷ઌදݱ +BWB4DSJQU 8FC(-
FUD ීٴ͍ͯ͠Δ ϒϥβʔ ࠷৽ͷ ϒϥβʔ ࣭Λམͱ͢
ϨάϨογϒɾΤϯϋϯεϝϯτ 3FHSFTTJWF&OIBODFNFOU
ج४ ݹ͍ϒϥβʔ 1PMZpMM ใ )5.- ࢹ֮දݱ $44 ಈతදݱ ࠷ઌදݱ +BWB4DSJQU
8FC(- FUD ීٴ͍ͯ͠Δ ϒϥβʔ ࠷৽ͷ ϒϥβʔ ྗͣ͘Ͱ ରԠͤ͞Δ
ϓϩάϨογϒ Τϯϋϯεϝϯτ άϨΠεϑϧ σάϥσʔγϣϯ ϨάϨογϒ Τϯϋϯεϝϯτ ݹ͍ϒϥβʔ ݹ͍ϒϥβʔ ීٴ͍ͯ͠Δϒϥβʔ ਐతʹରԠ
ج४ ج४ ج४ ྗͣ͘ͰରԠ εΫϦϓτΛͬͯ ݟӫ͑Λ٘ਜ਼ʹͯ͠ ࣭ΛԼ͛ͯରԠ ਐతʹରԠ ࠷৽ͷϒϥβʔ ࠷৽ͷϒϥβʔ ࠷৽ͷϒϥβʔ ݹ͍ϒϥβʔ ීٴ͍ͯ͠Δϒϥβʔ ීٴ͍ͯ͠Δϒϥβʔ
None
None
Waterfall model
Minimum Viable Product ސ٬ʹՁΛఏڙͰ͖Δඞཁ࠷খݶͷ
None
Design Systems 6*ύλʔϯɾίϯϙʔωϯτɾΞηοτ λΠϙάϥϑΟɾΧϥʔύϨοτ ελΠϧΨΠυɾϑϨʔϜϫʔΫ ϒϥϯυΨΠυϥΠϯɾσβΠϯݪଇ νʔϜͷಇ͖ํɾՁ؍ ίʔυͱσβΠϯͷҰݩཧ %FTJHOUPLFO
Design Systems 6*ύλʔϯɾίϯϙʔωϯτɾΞηοτ λΠϙάϥϑΟɾΧϥʔύϨοτ ελΠϧΨΠυɾϑϨʔϜϫʔΫ ϒϥϯυΨΠυϥΠϯɾσβΠϯݪଇ νʔϜͷಇ͖ํɾՁ؍ ίʔυͱσβΠϯͷҰݩཧ %FTJHOUPLFO
Design Systems 6*ύλʔϯɾίϯϙʔωϯτɾΞηοτ λΠϙάϥϑΟɾΧϥʔύϨοτ ελΠϧΨΠυɾϑϨʔϜϫʔΫ ϒϥϯυΨΠυϥΠϯɾσβΠϯݪଇ νʔϜͷಇ͖ํɾՁ؍ ίʔυͱσβΠϯͷҰݩཧ %FTJHOUPLFO நతͳελΠϧͷఆٛ
ΧϥʔɾϚʔδϯ λΠϙάϥϑΟ άϦουɾΞΠίϯ ϒϥϯυ
Design Systems 6*ύλʔϯɾίϯϙʔωϯτɾΞηοτ λΠϙάϥϑΟɾΧϥʔύϨοτ ελΠϧΨΠυɾϑϨʔϜϫʔΫ ϒϥϯυΨΠυϥΠϯɾσβΠϯݪଇ νʔϜͷಇ͖ํɾՁ؍ ίʔυͱσβΠϯͷҰݩཧ %FTJHOUPLFO
Design Systems 6*ύλʔϯɾίϯϙʔωϯτɾΞηοτ λΠϙάϥϑΟɾΧϥʔύϨοτ ελΠϧΨΠυɾϑϨʔϜϫʔΫ ϒϥϯυΨΠυϥΠϯɾσβΠϯݪଇ νʔϜͷಇ͖ํɾՁ؍ ίʔυͱσβΠϯͷҰݩཧ %FTJHOUPLFO ࠶ར༻ՄೳͳϒϩοΫͷఆٛ
ϘλϯɾφϏήʔγϣϯ ΞΠςϜϦετɾΠϝʔδ ώʔϩʔɾهࣄɾΪϟϥϦʔ
Design Systems 6*ύλʔϯɾίϯϙʔωϯτɾΞηοτ λΠϙάϥϑΟɾΧϥʔύϨοτ ελΠϧΨΠυɾϑϨʔϜϫʔΫ ϒϥϯυΨΠυϥΠϯɾσβΠϯݪଇ νʔϜͷಇ͖ํɾՁ؍ ίʔυͱσβΠϯͷҰݩཧ %FTJHOUPLFO
Design Systems 6*ύλʔϯɾίϯϙʔωϯτɾΞηοτ λΠϙάϥϑΟɾΧϥʔύϨοτ ελΠϧΨΠυɾϑϨʔϜϫʔΫ ϒϥϯυΨΠυϥΠϯɾσβΠϯݪଇ νʔϜͷಇ͖ํɾՁ؍ ίʔυͱσβΠϯͷҰݩཧ %FTJHOUPLFO ϧʔϧͱίωΫγϣϯͷఆٛ
ใઃܭɾίϯςϯπݪଇ ྨɾࣙॻ ϞʔγϣϯɾΞΫηγϏϦςΟ ࣮ݱՄೳͳΈ߹Θͤํ