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
930
チームを前に進めるデザイン 〜あなたがやること、すべてはデザイン〜
fumink7
0
39
「デザインは反復である」ということをメンバーに理解してもらっておこう - 具体と抽象 -
fumink7
1
6.2k
Rails開発の中でデザイナーの私はどこまで担当しているのか
fumink7
0
340
anime.jsがいいらしい
fumink7
1
740
(非)デザイナーがUIデザインで困ったらどうするか?
fumink7
1
190
Other Decks in Design
See All in Design
Echoes Boomerang
artcloudyu
PRO
0
240
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
Storyboard Honey
rocioparronrubio
0
270
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
280
今日から意識できるアクセシビリティ
fumiko
0
240
freee + Product Design FY25Q4
freee
4
14k
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
#Dubois Challenge 2025: Economics
ajstarks
0
110
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
560
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
81
9.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Optimizing for Happiness
mojombo
379
70k
The Cult of Friendly URLs
andyhume
79
6.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
How to Think Like a Performance Engineer
csswizardry
24
1.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Balancing Empowerment & Direction
lara
1
360
Building Applications with DynamoDB
mza
95
6.5k
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
͓ΘΓ