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
fumink
July 08, 2018
Design
4
620
デザイナーとエンジニアの垣根を超えたフロントエンド開発
Forkwellというサービスの開発について「デザイナーとエンジニアの垣根を超えたフロントエンド開発」という内容で発表させていただきました。
@ HTML5 APP CONFERENCE 2018
fumink
July 08, 2018
Tweet
Share
More Decks by fumink
See All by fumink
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
1.1k
チームを前に進めるデザイン 〜あなたがやること、すべてはデザイン〜
fumink7
0
59
「デザインは反復である」ということをメンバーに理解してもらっておこう - 具体と抽象 -
fumink7
1
6.3k
Rails開発の中でデザイナーの私はどこまで担当しているのか
fumink7
0
350
anime.jsがいいらしい
fumink7
1
750
(非)デザイナーがUIデザインで困ったらどうするか?
fumink7
1
200
Other Decks in Design
See All in Design
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
400
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
150
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1k
decksh object reference
ajstarks
2
1.3k
portfolio.pdf
onof003
0
200
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
530
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
150
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
Liquid GlassとApp Intents
touyou
0
430
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
110
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
920
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.6k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
470k
Unsuck your backbone
ammeep
671
58k
Building Applications with DynamoDB
mza
96
6.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Language of Interfaces
destraynor
162
25k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
The World Runs on Bad Software
bkeepers
PRO
72
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Transcript
'PSLXFMM )5.-"11$0/'&3&/$& σβΠφʔͱΤϯδχΞͷ֞ࠜΛ͑ͨ ϑϩϯτΤϯυ։ൃ ϦχϡʔΞϧͷཪଆ
גࣜձࣾHSPPWFTͷσβΠφʔɻ தݪැݟେ !GVNJ ΤϯδχΞͷΛαϙʔτ͢ΔαʔϏε ʮ'PSLXFMMʯͷ։ൃʹܞΘͬͯ·͢ɻ ࣗݾհ
ࠓճ͓͢Δ༰ ࣍ શһͰਐΊΔϑϩϯτΤϯυ։ൃ 6*σβΠϯͰଥڠ͠ͳ͍
'PSLXFMMʹ͍ͭͯ
'PSLXFMMͱʁ 'PSLXFMM ͠ଓ͚ΔΤϯδχΞ Λࢧԉ͢ΔαʔϏεͰ͢ɻ ɾస৬ࢧԉ ɾϙʔτϑΥϦΦ IUUQTGPSLXFMMDPN
'PSLXFMMͱʁ 'PSLXFMM ͠ଓ͚ΔΤϯδχΞ Λࢧԉ͢ΔαʔϏεͰ͢ɻ ɾస৬ࢧԉ ɾϙʔτϑΥϦΦˡ3FOFXBM IUUQTGPSLXFMMDPN
'PSLXFMMϙʔτϑΥϦΦ *5ΤϯδχΞͷͨΊͷ ʹͭͳ͕Δ ΦʔϓϯͳϙʔτϑΥϦΦ Λࢦͯ͠࡞Γ·ͨ͠ɻ ʢ͋Γͦ͏Ͱҙ֎ͱͳ͍ʣ 'PSLXFMMͱʁ
*5ΤϯδχΞͷͨΊͷΦʔϓϯͳϙʔτϑΥϦΦ ɾࣗݾհαΠτͱͯ͠ʢษڧձɺస৬ʣ ɾଞਓͱൺֱʢଞͷਓͲΜͳײ͡ʁʣ ɾࠓޙͳΓ͍ͨ࢟Λߟ͑Δʢ্࢘ͱͷPOʣ ࠓޙ༷ʑͳػೳΛՃ͍͖ͯ͠·͢ʂ 'PSLXFMMͱʁ
6*։ൃखΛൈ͚ͳ͍ɻ ΑΓଟ͘ͷ*5ΤϯδχΞʹ ͬͯΒ͏ͨΊɺ
ࠓճͷϦχϡʔΞϧʹ͋ͨͬͯɺ ͲͷΑ͏ʹνʔϜશମͰ6*։ൃʹऔΓΜͩͷ͔ ͓͍͖ͤͯͨͩ͞·͢ɻ ͳʹ͔গ͠ͰࢀߟʹͳΔใ͕͋Ε͍Ͱ͢ʜ
̍શһͰਐΊΔϑϩϯτΤϯυ։ൃ
'PSLXFMM։ൃνʔϜ ͔ෆ͔ ։ൃϝϯόʔશһ͕+BWB4DSJQUΛ ॻ͘νʔϜ
'PSLXFMM։ൃνʔϜ ΤϯδχΞ໊ σβΠφʔ໊ "ϓϩμΫτϚωʔδϟʔͱ։ൃΛ݉ͶΔϝΨω #ύϑΥʔϚϯεվળʹΛΔϝΨω ϝϯόʔհʢࡶʣ $ΠϯϑϥϑϩϯτΤϯυ͜ͳ͢ϝΨω %σβΠϯˍϑϩϯτΤϯυʹৄ͍͠ϝΨω &ࢲɻ6*σβΠϯˍ࣮ΛϝΠϯͰ୲͢ΔϝΨω
Ͳ͏͍ͬͯͬͯΔͷ͔ʁ ϝϦοτʁ શһͰϑϩϯτΤϯυ։ൃ
ϑϩϯτΤϯυʹҰ൪ৄ͍͠σβΠφʔʢ%͞Μʣ͕ ઌͯ͠ڥΛ͑ͨ શһͰϑϩϯτΤϯυ։ൃ ϦχϡʔΞϧϓϩδΣΫτҎલͷऔΓΈ
'PSLXFMMελΠϧΨΠυͷ࡞ 3BJMTΞϓϦέʔγϣϯͰͷڥߏங ։ൃʹඞཁͳϥΠϒϥϦΛ࡞ˠ )BNM 4"44 3FBDUʹΑΔελΠϧΨΠυͰ6*࣮ͷޮԽ ΤϯδχΞͱڠྗ͠ͳ͕ΒߏஙΛ͢͢Ίͨ &4 #BCFM 8FCQBDL
8FCQBDLFS 3FBDU 3FBDU3BJMT .PDIB &O[ZNF શһͰϑϩϯτΤϯυ։ൃ %͞Μ ੵۃతʹใڞ༗ɺஸೡʹϨϏϡʔ
3FEVY͕ΦʔόʔεϖοΫͳͷͰ ίϯϙʔωϯτ୯ҐͰ4UBUFཧͰ͖ΔίϯϙʔωϯτΛ࡞ શһͰϑϩϯτΤϯυ։ൃ
શһͰϑϩϯτΤϯυ։ൃ શһ͕ܞΘΔ͜ͱͷڧΈ ྫʣࣗಈੜϓϩϑΟʔϧͷ දࣔίϯϙʔωϯτ࡞ͷྲྀΕ
ԾσʔλͰࢲʢσβΠφʔʣ͕ϕʔεͱͳΔ3FBDUίϯϙʔωϯτΛ࡞ ɹˠઃܭͨ͠ਓ͕·ͣݟͨΛ࡞ͬͯ͠·͏ શһͰϑϩϯτΤϯυ։ൃ ίϯϙʔωϯτ࣮ͷྲྀΕ ΤϯδχΞ͕αʔόʔαΠυ͔ΒσʔλΛ͢ ɹˍදࣔ༰ΛΈཱͯΔ෦Λ࣮ ϑϩϯτΤϯυಘҙͳσβΠφʔΛத৺ʹ ɹϝϯόʔΈΜͳͰϨϏϡʔ
શһͰϑϩϯτΤϯυ։ൃ શһ͕ϑϩϯτΤϯυͷཧղΛ͓࣋ͬͯ͘͜ͱͰ ͦΕͧΕͷڧΈΛ׆͔ͯ͠ޮతͳ6*։ൃ͕Ͱ͖Δ 'SPOUFOE 6*%FTJHO 4FSWFS4JEF
ɾͦͷࣄฑʹੵۃతͳϦʔμʔ ·ͱΊͦͷ ɾҰॹʹऔΓΜͰ͘ΕΔϑΥϩϫʔ Γ͍ͨਓ͕Ի಄ΛͱΔͱεϜʔζɻνʔϜͰͱΔɻ ϑΥϩϫʔ͕͍ͳ͍ͱػೳɾλεΫ͕ଐਓԽ͢Δɻ ΈΜͳ͕ੵۃతͰͳ͍͍ͯ͘ɺಋೖͷ߹ҙ͕ඞཁɻ શһͰϑϩϯτΤϯυ։ൃ ઌ͢ΔϦʔμʔˍϑΥϩʔ͢ΔϝϯόʔͲͪΒେࣄ
ɾຎࡲ͕ੜ͡ʹ͍͘ ·ͱΊͦͷ ɾαʔϏεઃܭͷ͕ٞਂ·Δ ڞ௨ཧղ͕͋ΔͨΊɺ͍ΘΏΔσβΠφʔΤϯδχΞରཱͷΑ͏ͳ ͕ൃੜ͠ʹ͍͘ 6*࣮ʹશһ͕ؔΘΔ͜ͱͰɺαʔϏεઃܭʢ69ʣͷ͕ٞਂ·Δ ͔ͭ۩ମతͳ࣮ઃܭ·Ͱ͘͢མͱ͠ࠐΉ͜ͱ͕Ͱ͖Δ શһͰϑϩϯτΤϯυ։ൃ αʔϏεʢ։ൃʣͷํੑ͕ఆΊ͍͢
6*σβΠϯͰଥڠ͠ͳ͍
ɾΞτϓοτͷެ։Λָʹ͍ͨ͠ 6*Ͱଥڠ͠ͳ͍͜ͱ ϙʔτϑΥϦΦͷ6*Ͱࢦͨ͜͠ͱ ɾΤϯδχΞʹྑ͍ҹΛ࣋ͬͯΒ͑Δ6*σβΠϯ ɾଥڠͷͳ͍σβΠϯΛࢦ͢ 344ɺϦϙδτϦɺεϥΠυͳͲΛखܰʹ·ͱΊͯެ։Ͱ͖ΔΑ͏ʹ γϯϓϧʹɺ͔ͭҹʹΔݟͨʢΧϥʔɺΩϟϥΫλʔʣ
ɾΞτϓοτͷެ։Λָʹ͍ͨ͠ ϙʔτϑΥϦΦͷ6*Ͱࢦͨ͜͠ͱ ɾΤϯδχΞʹྑ͍ҹΛ࣋ͬͯΒ͑Δ6*σβΠϯ ɾଥڠͷͳ͍σβΠϯΛࢦ͢ʁ 344ɺϦϙδτϦɺεϥΠυͳͲΛखܰʹ·ͱΊͯެ։Ͱ͖ΔΑ͏ʹ γϯϓϧʹɺ͔ͭҹʹΔݟͨʢΧϥʔɺΩϟϥΫλʔʣ 6*Ͱଥڠ͠ͳ͍͜ͱ
ʺ ଥڠͷͳ͍σβΠϯ ᘳͳσβΠϯ 6*Ͱଥڠ͠ͳ͍͜ͱ
ʹ ଥڠͷͳ͍σβΠϯ Ձݕূ͕Ͱ͖Δ ϨϕϧͷσβΠϯ 6*Ͱଥڠ͠ͳ͍͜ͱ
ʮͱʹ͔͘ૣ͘ϦϦʔεͯ͠ɺϢʔβʔͷԠΛΈΑ͏ʯ 6*Ͱଥڠ͠ͳ͍͜ͱ աڈͷࢲୡ Ͱ͖Δͱ͜·ͰɺͰϦϦʔε
ͲͪΒ͔அͰ͖ͳ͍ʜ ˣ Ձݕূ͕Ͱ͖ͳ͍ʂ ࢥͬͨΑ͏ͳԠ͕ͳ͔ͬͨ߹ʜ "ఏڙͨ͠ػೳʹ ՁΛײͯ͡Β͑ͳ͔ͬͨɻ #6*͕͍ͮΒ͍ͨΊɺՁ͕ ϢʔβʔʹΘΒͳ͔ͬͨɻ PS 6*Ͱଥڠ͠ͳ͍͜ͱ
࠷খػೳ͕ͳ͑͘ΔϨϕϧͷ6*ʢ.71ʣͱɺ ɾϓϩϑΟʔϧΛ҆৺ͯ͠ΈΜͳʹެ։Ͱ͖Δ ɾ(JU)VCϒϩάεϥΠυαʔϏεͱ࿈ܞͯ͠ΞϐʔϧͰ͖Δ ৽نϢʔβʔ͕͜ͷػೳΛͳ͑͘Δ͜ͱɺͦ͜ଥڠ͠ͳ͍ɻ 6*Ͱଥڠ͠ͳ͍͜ͱ
ͱ͍͑࣌ؒʹ੍ݶ͋ΔʜՁ͕Ϣʔβʔʹಧ͘͜ͱ͕ୈҰ ɾຊ"KBYͰߋ৽͍͚ͨ͠Ͳɺී௨ͷTVCNJUͰՁఏڙͰ͖Δ ɾਤΞχϝʔγϣϯΛͬͯઆ໌͍͚ͨ͠ͲɺςΩετͰΘΔ 6*Ͱଥڠ͠ͳ͍͜ͱ
#FGPSFɿʮͰ͖Δ͜ͱʯʮͦͷͨΊʹ͢Δ͜ͱʯ͕Θ͔Βͳ͍ʜ 6*Ͱଥڠ͠ͳ͍͜ͱ
6*Ͱଥڠ͠ͳ͍͜ͱ /PXɿΘ͔Γ͘͢ͳ͍ɺͨͩ͠ʮͰ͖Δ͜ͱʯʮͦͷϝϦοτʯඞͣ͑Δ
ଥڠ͠ͳ͍ͨΊʹͦͷ̍ 6*σβΠϯϞοΫͷϨϏϡʔ 6*Ͱଥڠ͠ͳ͍͜ͱ ɾσβΠφʔ͔ΒͷϨϏϡʔ Θ͔Γ͢͞ɾΘΓ͢͞ɺσβΠϯͷόϥϯεʢݟͨʣ ɾΤϯδχΞ͔ΒͷϨϏϡʔ λʔήοτͱͯ͠ͷࢹɺ࣮͢͠͞ɺψέϞϨͷνΣοΫ
ଥڠ͠ͳ͍ͨΊʹͦͷ̍ 6*σβΠϯϞοΫͷϨϏϡʔ 6*Ͱଥڠ͠ͳ͍͜ͱ ɾޮతˍޮՌͷ͋ΔϨϏϡʔํ๏Λ୳Δ 6*σβΠϯҊΛݟͳ͕ΒͷϨϏϡʔձ πʔϧΛͬͨඇಉظϨϏϡʔʢྫɿ*O7JTJPOʣ ࣮ͪ͠Όͬͯ(JU)VC্ͰίʔυˍσβΠϯϨϏϡʔ υοάϑʔσΟϯάձ
ɾϨϏϡϫʔͷ৺ߏ͑ ଥڠ͠ͳ͍ͨΊʹͦͷ ϨϏϡʔΛؾܰʹґཔͰ͖Δۭؾͮ͘Γ ୲ऀͷϦεϖΫτɻ࡞ͬͨਓͷܟҙɻ ࢦఠͰͳ͘ఏҊͬͯߟ͑Δͷྑ͘ͳ͍Ͱ͔͢ʁ ɾϨϏϡΠʔͷ৺ߏ͑ ϨϏϡʔͱਓͰͳ͘Ξτϓοτʹରͯ͠ͷͷ ֆจࣈͷྑ͞ ͓͢͢Ίຊɿ ΈΜͳͰ͡ΊΔσβΠϯ൷ධ
6*Ͱଥڠ͠ͳ͍͜ͱ
ɾσβΠφʔ͕࣮·Ͱ୲͢Δ߹ʢࠓճͷࢲʣ ଥڠ͠ͳ͍ͨΊʹ͓·͚ σβΠϯϞοΫΞοϓͲ͜·Ͱ࡞ΓࠐΉͷ͔ʁ ࢲ࣮·Ͱ୲͢ΔͷͰɺਖ਼ৗܥʢجຊύλʔϯʣ͕Ͱ͖͍ͯΕ ͋ͱ࣮ͰΧόʔ͢Δ߹͕ଟ͍ ΞχϝʔγϣϯͳΜ͔ίϝϯτͰදݱ͢ΔͷΈ ɾσβΠφʔ͕࣮ʹ͔͔ΘΒͳ͍߹ ༷ʑͳঢ়گͷϞοΫΞοϓΛ࡞͓ͬͯ͘ඞཁ͕͋Γͦ͏ ϓϩτλΠϓͷ࡞ৄࡉͳࢿྉʢ;FQMJOʣΛར༻͢Δ΄͏͕͍͍߹ 6*Ͱଥڠ͠ͳ͍͜ͱ
ଥڠ͠ͳ͍ࣄͷҙຯํ๏ͳΜͱͳ͘Θ͔͚ͬͨͲʜ 6*Ͱଥڠ͠ͳ͍͜ͱ σβΠϯஅͬͯ͘͠Ͷʁʂʁʁ ҙݟͷ૬ҧɺͲ͜·Ͱ͕ଥڠͳͷ͔ʁɺͳͲͳͲ Α࣭͘͞ΕΔ͜ͱ
ɾσβΠϯσβΠφʔ͕Λ࣋ͭ ·ͱΊ σβΠϯʢ6*ʣΛ࡞Δͷ͕σβΠφʔͰͳ͍ɻ ੈʹग़͢ΞτϓοτʹΛ࣋ͭͷ͕ओͳׂɻ ҆৺͍ͯͩ͘͠͞ɺͦͷͨΊʹσβΠφʔ͕͍·͢Α 6*Ͱଥڠ͠ͳ͍͜ͱ %#ઃܭΠϯϑϥʹΤϯδχΞ͕ࡋྔΛ࣋ͭͷͱಉ͡ɻ σβΠϯʹ͍ͭͯσβΠφʔʹ͓͍ͤͩ͘͞ɻ
શһͰਐΊΔϑϩϯτΤϯυ։ൃ ࠓͷ·ͱΊ ɾઌ͢ΔϦʔμʔˍϑΥϩʔ͢ΔϝϯόʔͲͪΒେࣄ 6*Ͱଥڠ͠ͳ͍͜ͱ 6*σβΠϯͰଥڠ͠ͳ͍ ɾαʔϏεʢ։ൃʣͷํੑ͕ఆΊ͍͢ ɾՁݕূ͕Ͱ͖ΔϨϕϧ·Ͱଥڠ͠ͳ͍ ɾઐՈͰ͋ΔσβΠφʔΛத৺ʹ
ࠓޙνʔϜͷΈΜͳͰվળΛਐΊ͍͖ͯ·͢ɻ ͠͝ҙݟͳͲ͋Γ·ͨ͠Β 'PSLXFMMϖʔδͷ͓͍߹Θͤ 5XJUUFSͳͲͰ͝࿈བྷ͍͚ͨͩΔͱخ͍͠Ͱ͢ʂ ࠷ޙʹ IUUQTQPSUGPMJPGPSLXFMMDPN IUUQTUXJUUFSDPN'PSLXFMM@KB
͓ΘΓ