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
CMS管理画面のアクセシビリティ
magi1125
8
2.4k
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
2
2.8k
freee + Product Design FY25Q4
freee
4
15k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
200
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
580
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
130
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
480
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
270
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
360
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
490
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
110
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Language of Interfaces
destraynor
158
25k
Being A Developer After 40
akosma
90
590k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Done Done
chrislema
185
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
A Tale of Four Properties
chriscoyier
160
23k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ