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
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
200
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.9k
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
Kid Cowboy 103
marilutwin
0
270
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
AI時代に淘汰されないデザインのしごと
akinen
1
140
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
250
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.9k
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
750
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Producing Creativity
orderedlist
PRO
346
40k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
4 Signs Your Business is Dying
shpigford
184
22k
For a Future-Friendly Web
brad_frost
179
9.8k
Building Applications with DynamoDB
mza
95
6.5k
Bash Introduction
62gerente
614
210k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Raft: Consensus for Rubyists
vanstee
140
7k
Documentation Writing (for coders)
carmenintech
72
4.9k
Automating Front-end Workflow
addyosmani
1370
200k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ