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
fumink7
July 08, 2018
Design
4
600
デザイナーとエンジニアの垣根を超えたフロントエンド開発
Forkwellというサービスの開発について「デザイナーとエンジニアの垣根を超えたフロントエンド開発」という内容で発表させていただきました。
@ HTML5 APP CONFERENCE 2018
fumink7
July 08, 2018
Tweet
Share
More Decks by fumink7
See All by fumink7
「デザインは反復である」ということをメンバーに理解してもらっておこう - 具体と抽象 -
fumink7
1
5.9k
Rails開発の中でデザイナーの私はどこまで担当しているのか
fumink7
0
320
anime.jsがいいらしい
fumink7
1
730
(非)デザイナーがUIデザインで困ったらどうするか?
fumink7
1
190
Other Decks in Design
See All in Design
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
440
TUNAG BOOK 2024
stmn
0
290
新しいemoji😄のアイデアをUnicodeが募集中‼️🏃♀️💨💨💨傾向を学んでみんな提案しよう💪
oguemon
2
660
root COMPANY DECK / We are hiring!
root_recruit
1
14k
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
230
Arborea Art Book
thebogheart
1
280
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
220
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
180
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
500
Tataki Ryu
olgastoryboard
0
140
Commune_Brand_Guideline_JA
commune
1
150
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.3k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Side Projects
sachag
452
42k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
Building Adaptive Systems
keathley
38
2.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Documentation Writing (for coders)
carmenintech
65
4.4k
Designing for Performance
lara
604
68k
RailsConf 2023
tenderlove
29
880
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
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
͓ΘΓ