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
BASEのデザイナーがコードも書く理由 / base-design-and-frontend
Search
Muneaki Hayakawa
May 23, 2016
Design
2
1k
BASEのデザイナーがコードも書く理由 / base-design-and-frontend
2016/5/20
デザイナーLT&交流会(freee×BASE×みんなのウェディング)にて発表した資料
Muneaki Hayakawa
May 23, 2016
Tweet
Share
More Decks by Muneaki Hayakawa
See All by Muneaki Hayakawa
ユーザーと育てるサービスのデザイン / create a service together with users
mmmatch0129
2
2.3k
デザイナーのための自分サービス開発のススメ/ web service development tips for designers
mmmatch0129
7
2.5k
Other Decks in Design
See All in Design
今日から意識できるアクセシビリティ
fumiko
0
250
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.2k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
freee + Product Design FY25Q4
freee
4
14k
UXデザインはなぜ定着しないのか?
designstudiopartners
0
740
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
290
Echoes Boomerang
artcloudyu
PRO
0
250
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4k
AI時代に淘汰されないデザインのしごと
akinen
1
140
Liquid Iron
mcduckyart
1
110
CIRCULAR ECONOMY + SERVICES
jmanooch
0
120
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
140
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Music & Morning Musume
bryan
46
6.6k
A Tale of Four Properties
chriscoyier
160
23k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Practical Orchestrator
shlominoach
189
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
GraphQLとの向き合い方2022年版
quramy
49
14k
We Have a Design System, Now What?
morganepeng
53
7.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Transcript
Muneaki Hayakawa BASE, Inc. #"4&ͷσβΠφʔ͕ ίʔυॻ͘ཧ༝
ࣗ ݾ հ frontend designer Muneaki Hayakawa ૣफ྄ ݄ೖࣾɻ
#"4&ͷXFCͷϑϩϯτશൠ୲ɻ
# " 4 & ʹ ͭ ͍ͯ
ωοτγϣοϓߏங αʔϏε γϣοϐϯάΞϓϦ
୭Ͱ؆୯ʹແྉͰ ωοτγϣοϓ͕࡞Ε·͢
None
γ ϣ ο ϓ ։ ઃ ສ
ళ ฮ Ҏ ্ ݄ ؒ ສ ళ ฮ ͷ ϖʔε Ͱ ૿ Ճ த
BASE DESIGN MARKET
None
ඦ ສ ԁ ച Εͯ Δ σ βΠφ ʔ
ʂ ʂ
͔͜͜Βͬͱຊɾɾ
#"4&ͷσβΠφʔ͕ ίʔυॻ͘ཧ༝
None
σ βΠφ ʔ ʹ ٻ Ί Β Ε Δ ྖ
Ҭ ͷ ֦ େ
σ βΠφ ʔ ʹ ٻ Ί Β Ε Δ ྖ
Ҭ ͷ ֦ େ ς Ϋ χ Χ ϧ Ϋ Ϧ ΤΠλ ʔ
# " 4 & ͷ ߹
# " 4 & ʹ ೖ ࣾ ͠ ͨ ͱ
͖ ͷ స৬αΠτ
# " 4 & ʹ ೖ ࣾ ͠ ͨ ͱ
͖ ͷ స৬αΠτ 8FCσβΠφʔ ϑϩϯτΤϯυΤϯδχΞ
# " 4 & ʹ ೖ ࣾ ͠ ͨ ͱ
͖ ͷ స৬αΠτ 8FCσβΠφʔ ϑϩϯτΤϯυΤϯδχΞ
# " 4 & ʹ ೖ ࣾ ͠ ͨ ͱ
͖ ͷ స৬αΠτ ҧ͍͕Α͘Θ͔ͳΒ͍ɾɾ 8FCσβΠφʔ ϑϩϯτΤϯυΤϯδχΞ 㲈
# " 4 & ʹ ೖ ࣾ ͠ ͨ ͱ
͖ ͷ స৬αΠτ 8FCσβΠφʔ ϑϩϯτΤϯυΤϯδχΞ 㲈 EJ⒎ͱͬͯΈͨ
# " 4 & ʹ ೖ ࣾ ͠ ͨ ͱ
͖ ͷ స৬αΠτ 8FCσβΠφʔ ϑϩϯτΤϯυΤϯδχΞ 㲈 ݴ͍ճ͕͠ҧ͏͚ͩͰݴͬͯΔ͜ͱಉ͡ EJ⒎ͱͬͯΈͨ
㲈 σβΠφʔ ϑϩϯτΤϯυ ΤϯδχΞ
㲈 σβΠφʔ ϑϩϯτΤϯυ ΤϯδχΞ
㲈 σβΠφʔ ϑϩϯτΤϯυ ΤϯδχΞ ϑϩϯτΤϯυσβΠφʔ
㲈 σβΠφʔ ϑϩϯτΤϯυ ΤϯδχΞ ϑϩϯτΤϯυσβΠφʔ
㲈 σβΠφʔ ϑϩϯτΤϯυ ΤϯδχΞ ϑϩϯτΤϯυσβΠφʔ
#"4&ͷσβΠφʔ͕ ίʔυॻ͘ཧ༝
None
σβΠϯ ϑΝʔετ εϐʔυ Ϟνϕʔγϣϯ Β͟ΔΛ ಘͳ͍ঢ়گ
#"4&ͷσβΠφʔ͕ ίʔυॻ͘ཧ༝ σβΠϯϑΝʔετ
୭Ͱ؆୯ʹ͑Δ
୭Ͱ؆୯ʹ͑Δ ͓͞ΜͰ͑Δ
දͷԬ͕࣮Ոͷ͓͞Μ͔ΒݴΘΕͨ ʮωοτͰΛചΓ͍ͨʯͱ͍͏ ͻͱݴΛ͖͔͚ͬʹ࡞ͬͨαʔϏε
ʮωοτ͕Α͘Θ͔Βͳ͍ʯ͚ΕͲ ʮؾܰʹωοτγϣοϓΛͬͯΈ͍ͨʯ
ίΞͷ෦ػೳΛ࠷େݶݮΒͯ͠ɺγϯϓϧʹ ʮωοτ͕Α͘Θ͔Βͳ͍ʯ͚ΕͲ ʮؾܰʹωοτγϣοϓΛͬͯΈ͍ͨʯ
6* ίΞͷ෦ػೳΛ࠷େݶݮΒͯ͠ɺγϯϓϧʹ
ΤϯδχΞ 6* γεςϜཁ݅ ίΞͷ෦ػೳΛ࠷େݶݮΒͯ͠ɺγϯϓϧʹ
σβΠφʔ ΤϯδχΞ 6* ͓͞ΜͰ ͑Δ͔ʁ γεςϜཁ݅ ίΞͷ෦ػೳΛ࠷େݶݮΒͯ͠ɺγϯϓϧʹ
ίΞͷ෦ػೳΛ࠷େݶݮΒͯ͠ɺγϯϓϧʹ σβΠφʔ ΤϯδχΞ 6* σβΠϯϑΝʔετ ͓͞ΜͰ ͑Δ͔ʁ γεςϜཁ݅
σβΠφʔ ΤϯδχΞ 6* ͓͞ΜͰ ͑Δ͔ʁ γεςϜཁ݅ 6*ଆͷγεςϜͷ࣮ݱੑ୲อ͢Δ
σβΠφʔ ΤϯδχΞ 6* ͓͞ΜͰ ͑Δ͔ʁ γεςϜཁ݅ 6*ଆͷγεςϜͷ࣮ݱੑ୲อ͢Δ ϑϩϯτͷ࣮ߟྀͨ͠σβΠϯ
#"4&ͷσβΠφʔ͕ ίʔυॻ͘ཧ༝ εϐʔυ
Ϣʔβʔ͔Βͷ ཁ όά ɾ վળҊ
Ϣʔβʔ͔Βͷ ཁ όά ɾ վળҊ
6*69νέοτରԠϑϩʔ 6*σβΠϯ
6*σβΠϯ σβΠϯϨϏϡʔ 6*69νέοτରԠϑϩʔ
6*σβΠϯ σβΠϯϨϏϡʔ 6*69νέοτରԠϑϩʔ HJU ϒϥϯν࡞
6*σβΠϯ ࣮ IUNMDTTKTQIQ HJU ϒϥϯν࡞ 6*69νέοτରԠϑϩʔ σβΠϯϨϏϡʔ
6*σβΠϯ HJU ίϛοτ 6*69νέοτରԠϑϩʔ HJU ϒϥϯν࡞ σβΠϯϨϏϡʔ ࣮ IUNMDTTKTQIQ
6*σβΠϯ ίʔυϨϏϡʔ 6*69νέοτରԠϑϩʔ σβΠϯϨϏϡʔ HJU ίϛοτ HJU ϒϥϯν࡞ ࣮ IUNMDTTKTQIQ
σβΠφʔͷΈͰ݁Ͱ͖Δ 6*69νέοτରԠϑϩʔ σβΠϯϨϏϡʔ HJU ίϛοτ HJU ϒϥϯν࡞ 6*σβΠϯ ίʔυϨϏϡʔ ࣮
IUNMDTTKTQIQ
σβΠφʔͷΈͰ݁Ͱ͖Δ αʔϏεվળͷαΠΫϧΛૣ͘ճͤΔ 6*69νέοτରԠϑϩʔ σβΠϯϨϏϡʔ HJU ίϛοτ HJU ϒϥϯν࡞ 6*σβΠϯ ίʔυϨϏϡʔ
࣮ IUNMDTTKTQIQ
#"4&ͷσβΠφʔ͕ ίʔυॻ͘ཧ༝ Ϟνϕʔγϣϯ ̏
Ϣ ʔ β ʔϑ Ν ʔε τ
Ϣ ʔ β ʔϑ Ν ʔε τ ϑ Ν ʔε
τ Ϣ ʔ β ʔ
ࣗ ͕ ͦ ͷ α ʔ Ϗ ε ͷ
Ϣʔ βʔͰ ͋ Γ ɺ ୭ Α Γ ͦ ͷ α ʔ Ϗ ε ͕ ͖ Ͱɺ ͦ ͷ α ʔ Ϗ ε Λ ͍ ࠐ ΜͰ ͍ Δ ͜ ͱ ɻ ϑ Ν ʔε τ Ϣ ʔ β ʔ
MJLF ເɾझຯɾཉٻ ͖ͳ͜ͱ
TIPVME MJLF ເɾझຯɾཉٻ ՝ɾ໋ɾ ͖ͳ͜ͱ ͖͢͜ͱ º
TIPVME ϑΝʔετϢʔβʔʹͳΕΔαʔϏε MJLF ເɾझຯɾཉٻ ՝ɾ໋ɾ ͖ͳ͜ͱ ͖͢͜ͱ º
ࣗͷझຯؔ৺ͷ͋ΔʹؔΘΔ͜ͱɺͭ ୭͔ͷ՝Λղܾ͢Δͱ͍͏໋ײ͕ ݟग़ͤΔϓϩμΫτͰ͋Εɺ lͬͱΑ͍ͨ͘͠zlଟ͘ͷਓʹͬͯΒ͍͍ͨz ͱ͍͏ཉٻ͕͖ͭͳ͘ͳΔɻ
σ βΠ ϯ ͩ ͚ ͡ Ό Γ ͳ
͘ ͳ Δ ɻ ࣮ ͠ ͨ ͘ ͳ Δ ɻ ࣗͷझຯؔ৺ͷ͋ΔʹؔΘΔ͜ͱɺͭ ୭͔ͷ՝Λղܾ͢Δͱ͍͏໋ײ͕ ݟग़ͤΔϓϩμΫτͰ͋Εɺ lͬͱΑ͍ͨ͘͠zlଟ͘ͷਓʹͬͯΒ͍͍ͨz ͱ͍͏ཉٻ͕͖ͭͳ͘ͳΔɻ
#"4&ͷσβΠφʔ͕ ίʔυॻ͘ཧ༝ Β͟ΔΛಘͳ͍ঢ়گ
αʔϏεϦϦʔε͔࣌Βͷෛ࠴
αʔϏεϦϦʔε͔࣌Βͷෛ࠴ $44ɿ໋໊نଇϧʔϧͳ͠ɺৄࡉͷ্ॻ͖߹ઓ KTɿେྔͷK2VFSZϓϥάΠϯɺ$44ͱͷҋґଘ
αʔϏεϦϦʔε͔࣌Βͷෛ࠴ ͪΐͬͱͣͭվળதɾɾ $44ɿ໋໊نଇϧʔϧͳ͠ɺৄࡉͷ্ॻ͖߹ઓ KTɿେྔͷK2VFSZϓϥάΠϯɺ$44ͱͷҋґଘ
αʔϏεϦϦʔε͔࣌Βͷෛ࠴ ͪΐͬͱͣͭվળதɾɾ $44ɿ໋໊نଇϧʔϧͳ͠ɺৄࡉͷ্ॻ͖߹ઓ KTɿେྔͷK2VFSZϓϥάΠϯɺ$44ͱͷҋґଘ #&.ϕʔεͷ໋໊نଇ 4BTTɾ(VMQಋೖ
αʔϏεϦϦʔε͔࣌Βͷෛ࠴ ͪΐͬͱͣͭվળதɾɾ #&.ϕʔεͷ໋໊نଇ σβΠϯΨΠυϥΠϯ࡞ 3FBDUಋೖ $44ɿ໋໊نଇϧʔϧͳ͠ɺৄࡉͷ্ॻ͖߹ઓ KTɿେྔͷK2VFSZϓϥάΠϯɺ$44ͱͷҋґଘ 4BTTɾ(VMQಋೖ
αʔϏεϦϦʔε͔࣌Βͷෛ࠴ ͪΐͬͱͣͭվળதɾɾ ਓ͕Γͳ͍ɾɾʂ $44ɿ໋໊نଇϧʔϧͳ͠ɺৄࡉͷ্ॻ͖߹ઓ #&.ϕʔεͷ໋໊نଇ σβΠϯΨΠυϥΠϯ࡞ 3FBDUಋೖ 4BTTɾ(VMQಋೖ KTɿେྔͷK2VFSZϓϥάΠϯɺ$44ͱͷҋґଘ
IUUQTXXXXBOUFEMZDPNQSPKFDUT
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ