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
プロトタイプドリブンなデザインを実現する考え方と環境 / Prototype-dr...
Search
sagaraya
October 07, 2019
Design
16k
5
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
プロトタイプドリブンなデザインを実現する考え方と環境 / Prototype-driven design
実装含めたプロトタイピングをやっていくための考え方や環境について、UX Engineer Meetupで話しました。
sagaraya
October 07, 2019
More Decks by sagaraya
See All by sagaraya
入りやすい保育園マップ / Hoikuen-hairu
sagaraya
0
270
エンジニアリングを軸にデザインもやる、UXエンジニアという働き方(公開版)/ Work style as a UX engineer
sagaraya
0
2.8k
エンジニアが使うツールから未来のデザインツールを予想する / Forecast design tools from tools used by engineers
sagaraya
0
660
より良いUXを実現するための開発プロセスとは / Development process for better UX
sagaraya
10
50k
iOSでテーマ(着せ替え)機能を実装した時のTips
sagaraya
1
2.9k
Atomをもっと使いやすくする方法
sagaraya
5
2.8k
Other Decks in Design
See All in Design
「バイブコーディングって何?」から始まった、 AIとの一年間と、その先のこと
seto
0
1.1k
セブンデックス プロジェクト事例 / innovation Scenes
sevendex
1
1.5k
もう迷わない!“なんとなく”を卒業するフォントの選び方【村田俊英】
toshihidemurata
0
800
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
500
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
nagata03
0
580
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
nbkouhou
2
520
エンジニアがAI活用してスライドデザインできる世界が来たよ!
kaikou
1
360
Of Ordination and Rebellion exploration sketches
rezaline
0
190
Design dependencies
teba_eleven
0
150
From the Visible Crossroads: Turning Outputs into Outcomes
takaikanako
2
1.5k
全員がアウトプットを出せる時代、 誰を採用する?
nishame
0
620
CULTURE DECK/Marketing Director
mhand01
0
1.5k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
4.2k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
520
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Un-Boring Meetings
codingconduct
0
370
Designing for Performance
lara
611
70k
[SF Ruby Conf 2025] Rails X
palkan
2
1.2k
Designing for Timeless Needs
cassininazir
1
430
Documentation Writing (for coders)
carmenintech
77
5.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Rails Girls Zürich Keynote
gr2m
96
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.8k
Transcript
ϓϩτλΠϓυϦϒϯͳσβΠϯ Λ࣮ݱ͢Δߟ͑ํͱڥ 2019/10/7 UX Engineer Meetup ॏా ܡ
ॏా ܡ Shigeta Keisei ϛΫγΟ → Goodpatch → Sen →
ΫοΫύου @sagaraya (Twitter/noteͳͲ) UXΤϯδχΞྺ2ʙ3
ϓϩτλΠϐϯάͯ͠·͔͢ʁ
ϞϊΛݟͳ͕Βͨ͠΄͏͕ੜ࢈ੑ͕ߴ͍ ૣ͘ϑΟʔυόοΫΛΒ͏ ݴ༿ʹͰ͖ͳ͍ͷΛΧλνʹ͠ͳ͕Βߟ͑Δ
࣮ࡍΔͷ͍͠ σβΠϯπʔϧͰͰ͖ͯɺ࣮ϨϕϧͰ Δͷ͞Βʹ͍͠
ͬͱίετͰݕূ͍ͨ͠ ՁͷΘ͔Βͳ͍ͷʹίετΛ ͔͚͍͍ͯͷ͔ ͤ·Δʒ
None
IUUQTUZQFKQFUGFBUVSF ʲUXΤϯδχΞΛࢦ͢ʹʁʳΫοΫύουͷUXΤϯδχΞ ʹฉ͍ͨɺಇ͖ํษڧ๏ - ΤϯδχΞtype | స৬type 20ͷϓϩτλΠϓͱݴޠԽͷ྆ྠͰΞϓϦΛϦ χϡʔΞϧ͠·ͨ͠ IUUQTOPUFNVTBHBSBZBOOBCDBBFG
͜Ε·ͰͰҰ൪ϓϩτλΠϐϯάͰ͖ͯΔ࣮ײ͕͋Δ
None
ͳͥͰ͖ͯΔͷ͔ʁ
1. ʮliving onʯΛॏࢹ͢Δ 2. ΤϯδχΞͱͯ͠ͷৗࣝΛࣺͯΔ 3. ճΓΛॆ࣮ͤͯ͞εϐʔυΞοϓ
ʮliving onʯΛॏࢹ͢Δ 1
$SFBUJWF4FMFDUJPO Q lࣗࣾͷ։ൃதʹɺͦͷΛ։ൃऀ͕ࣗͬͯධՁ͢Δख๏ Λɺ͜ͷۀքͰʮυοάϑʔσΟϯάʯͱ͍͏ɻ͜ͷ༻ޠݸਓతʹ ͋·Γ͖Ͱͳ͔ͬͨ͠ɺΞοϓϧతͳηϯεʹૌ͑ͳ͍ɻʢத ུʣΞοϓϧࣾͰʮυοάϑʔσΟϯάʯͱݺͿ߹͕͋ͬͨɺ ։ൃதͷΛৗੜ׆Ͱ࣮ͷΑ͏ʹ͏͜ͱΛࢦͯ͠ΑΓසൟʹ ΘΕͨͷɺʮMJWJOHPOʢΒ͢ʣʯͱ͍͏දݱͩͬͨɻz
ը໘
ը໘ ΞϓϦར༻தͷମݧ
ը໘ ΞϓϦར༻தͷମݧ ར༻લͷମݧ ར༻ޙͷମݧ ྉཧɾ৯ʹؔ͢Δͷମݧ
ը໘ ΞϓϦར༻தͷମݧ ར༻લͷମݧ ར༻ޙͷମݧ ྉཧɾ৯ʹؔ͢Δͷମݧ ɾɾɾ ɾɾɾ ྉཧɾ৯ʹؔ͢Δຖͷମݧ
ը໘ ΞϓϦར༻தͷମݧ ར༻લͷମݧ ར༻ޙͷମݧ ྉཧɾ৯ʹؔ͢Δͷମݧ ɾɾɾ ɾɾɾ ྉཧɾ৯ʹؔ͢Δຖͷମݧ ຖͷମݧΛͱ͓ͯ͠ɺϢʔβʔ͕ͯ͠ ࣗͷײ֮ͰྉཧΛָ͠ΊΔΑ͏ʹͳΔ
ࢦ͢ͱ͜Ζ
ը໘ ΞϓϦར༻தͷମݧ ར༻લͷମݧ ར༻ޙͷମݧ ྉཧɾ৯ʹؔ͢Δͷମݧ ɾɾɾ ɾɾɾ ྉཧɾ৯ʹؔ͢Δຖͷମݧ ϢʔβʔςετͰ ݕূͰ͖Δൣғ
ը໘ ΞϓϦར༻தͷମݧ ར༻લͷମݧ ར༻ޙͷମݧ ྉཧɾ৯ʹؔ͢Δͷମݧ ɾɾɾ ɾɾɾ ྉཧɾ৯ʹؔ͢Δຖͷମݧ ຊʹݕূ͍ͨ͠ൣғ
living on͢Δʢৗੜ׆ͷதͰ͏ʣ ʹ࣮͢Δ͔͠ͳ͍
ΤϯδχΞͱͯ͠ͷৗࣝ ΛࣺͯΔ 2
σβΠϯ ΤϯδχΞϦϯά ͍͢͞ ඒ͠͞ ՁΛఏڙͰ͖͍ͯΔ͔ ίϯηϓτ͕ΘΔ͔ อकੑ ҆ఆੑ ༷Λຬ͍ͨͯ͠Δ͔
σβΠϯ ΤϯδχΞϦϯά ͍͢͞ ඒ͠͞ ՁΛఏڙͰ͖͍ͯΔ͔ ίϯηϓτ͕ΘΔ͔ อकੑ ҆ఆੑ ༷Λຬ͍ͨͯ͠Δ͔ ϓϩτλΠϐϯάͰߟ͑Δ
ͷͬͪ͜
ϓϩτλΠϐϯάΤϯδχΞϦϯάΛ ͏σβΠϯߦҝ
ΤϯδχΞϦϯά อकੑ ҆ఆੑ ༷Λຬ͍ͨͯ͠Δ͔ ΤϯδχΞͱͯ͠ ͷৗࣝ
͖Ε͍ͳίʔυͰͳ͘εϐʔυΛ༏ઌ͢Δ ίʔυϨϏϡʔ͠ͳ͍ ΞʔΩςΫνϟڽΒͳ͍ εϐʔυ্͕ΔͳΒίʔυڞ௨Խ͢Δ͠ςετॻ͘
༷fix͢ΔͷͰͳ͍ ͋Δͷݱ࣌ͷϕετ ༷ܾ·ͬͯͳ͍͔Β࣮͠ͳ͍/(
ΈΜͳͰݟੵΒͳ͍ ظݶͰͳ͘ɺ࣭ʹϑΥʔΧε͢Δ ʢͱ͍͑ࣗͳΓʹ͍ͭ·ͰʹΔ͔ܾΊΔʣ ͋ͱͰΑΓྑ͍ͷΛࢥ͍͍ͭͯΧλνʹ ͍͢͠
ίʔυΛॻ͘͜ͱʹͩ͜ΘΒͳ͍ σβΠϯπʔϧͬͨ΄͏͕ૣ͘ࢼͤΔ߹͋Δ
ճΓΛॆ࣮ͤͯ͞ εϐʔυΞοϓ 3
None
αʔϏεͰͳ͘ ձࣾͷDesign System ৽نࣄۀͰ͑Δ
ίʔυԽ͞Ε͍ͯͯɺૣ͘ߴ͍࣭ͷͷΛͭ͘ΕΔ
ΫοΫύουͷ։ൃதͷΞϓϦΛμϯϩʔυͰ͖ΔαΠτ
None
ϥϕϧΛ͚ͭΕϚʔδ͠ͳͯࣾ͘৴Ͱ͖Δ ૣ͘৴ͯ͠ϑΟʔυόοΫΛΒ͑Δ ৄͪ͘͜͠Βˣ ಈ࡞֬ೝͷͨΊͷࣾΞϓϦ৴αʔϏεΛ৽ͨʹ࡞ͬͨJ04%$ IUUQTTQFBLFSEFDLDPNTMJHIUBJSJPTED
1. ʮliving onʯΛॏࢹ͢Δ 2. ΤϯδχΞͱͯ͠ͷৗࣝΛࣺͯΔ 3. ճΓΛॆ࣮ͤͯ͞εϐʔυΞοϓ ৗੜ׆Ͱ͏ͨΊʹϓϩτλΠϐϯά͢Δ ϓϩτλΠϐϯάΤϯδχΞϦϯάΛ͏σβΠϯߦҝ citrusʢձࣾͷσβΠϯγεςϜʣʗhanedaʢࣾ৴πʔϧʣ
͓·͚ ࠓ͞ͳ͔ͬͨ͜ͱ ࠙ձͰͯ͠Έ͍ͨ͜ͱ
• ߟ͑ํɾڥͰͳ͘εΩϧ໘ͷ • ΤϯδχΞͱͯ͠1ਓલʹ͍ͬͯ͘εΩϧ ʴ ྑ͍ײ͡ྗ • UXͱ͍͏ݴ༿ͷ൷ͱͦΕʹର͢Δճ • ϓϩτλΠϐϯά͢Δͱ͖ͱ͠ͳ͍ͱ͖ͷ͍͚
• ΫοΫύουͰͷUXΤϯδχΞͷಇ͖ํ • UXΤϯδχΞืूதͳͷͰɺڵຯ͍Δํ͍ͨΒ͓͠·͠ΐ͏ʂ