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
6k
Rails開発の中でデザイナーの私はどこまで担当しているのか
fumink7
0
320
anime.jsがいいらしい
fumink7
1
730
(非)デザイナーがUIデザインで困ったらどうするか?
fumink7
1
190
Other Decks in Design
See All in Design
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.3k
Improve a service workshop
mastervicedesign
1
110
Night Shift concept 9/15/2024
cpineda57
0
740
Credence
lratmansunu
0
460
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.2k
Карта процесса-опыта. Презентация метода
ashapiro
0
330
我做了一個詐騙網站...嗎?
crboy
1
150
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
820
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.4k
ブランドづくりの双視点 - GUILD #31 ブランディング勉強会
yampuu
0
110
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
3
170
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
BBQ
matthewcrist
85
9.3k
What's in a price? How to price your products and services
michaelherold
243
12k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Making Projects Easy
brettharned
115
5.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
The Cult of Friendly URLs
andyhume
78
6k
A Philosophy of Restraint
colly
203
16k
Designing for Performance
lara
604
68k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
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
͓ΘΓ