Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
プロトタイプドリブンなデザインを実現する考え方と環境 / Prototype-dr...
Search
sagaraya
October 07, 2019
Design
5
16k
プロトタイプドリブンなデザインを実現する考え方と環境 / Prototype-driven design
実装含めたプロトタイピングをやっていくための考え方や環境について、UX Engineer Meetupで話しました。
sagaraya
October 07, 2019
Tweet
Share
More Decks by sagaraya
See All by sagaraya
入りやすい保育園マップ / Hoikuen-hairu
sagaraya
0
260
エンジニアリングを軸にデザインもやる、UXエンジニアという働き方(公開版)/ Work style as a UX engineer
sagaraya
0
2.7k
エンジニアが使うツールから未来のデザインツールを予想する / Forecast design tools from tools used by engineers
sagaraya
0
650
より良いUXを実現するための開発プロセスとは / Development process for better UX
sagaraya
10
49k
iOSでテーマ(着せ替え)機能を実装した時のTips
sagaraya
1
2.9k
Atomをもっと使いやすくする方法
sagaraya
5
2.8k
Other Decks in Design
See All in Design
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
650
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
3
2.6k
kintone Style Book
kintone
5
6.9k
kintone_aroma
kintone
0
820
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
220
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
1.1k
Franks Myth
gfht1
0
250
アイデアを加速させる!Firefly ボードで発想の幅を広げよう
connecre
0
150
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
540
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
170
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
320
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
180
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
340
57k
The Invisible Side of Design
smashingmag
302
51k
Fireside Chat
paigeccino
41
3.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
700
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
70
Faster Mobile Websites
deanohume
310
31k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
54k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[RailsConf 2023] Rails as a piece of cake
palkan
58
6.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
690
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
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ΤϯδχΞืूதͳͷͰɺڵຯ͍Δํ͍ͨΒ͓͠·͠ΐ͏ʂ