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
970
チームを前に進めるデザイン 〜あなたがやること、すべてはデザイン〜
fumink7
0
42
「デザインは反復である」ということをメンバーに理解してもらっておこう - 具体と抽象 -
fumink7
1
6.2k
Rails開発の中でデザイナーの私はどこまで担当しているのか
fumink7
0
340
anime.jsがいいらしい
fumink7
1
750
(非)デザイナーがUIデザインで困ったらどうするか?
fumink7
1
200
Other Decks in Design
See All in Design
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3k
アクセシビリティに取り組むメリット
magi1125
1
220
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
260
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
360
#Dubois Challenge 2025: Economics
ajstarks
0
140
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
620
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
110
sachi_y_portfolio
sachi337
0
410
AI時代に淘汰されないデザインのしごと
akinen
1
150
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
320
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
280
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Site-Speed That Sticks
csswizardry
10
720
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
We Have a Design System, Now What?
morganepeng
53
7.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How GitHub (no longer) Works
holman
314
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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
͓ΘΓ