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
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
640
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.2k
What makes a great Director?
_limex_
0
270
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
180
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
910
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.3k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
650
佐藤千晶|ポートフォリオ
chimi_chia
0
170
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
880
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Practical Orchestrator
shlominoach
190
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Become a Pro
speakerdeck
PRO
29
5.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Being A Developer After 40
akosma
91
590k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ