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
tech-kitchen-#16-komerco-design
Search
kenshir0f
July 19, 2018
Design
4
5.5k
tech-kitchen-#16-komerco-design
2018/07/19で発表したTech Kitchen #16 の登壇資料です。
Komercoのサービス立ち上げで取り組んだデザインの話をしました。
kenshir0f
July 19, 2018
Tweet
Share
More Decks by kenshir0f
See All by kenshir0f
Figma with Cookpad
kenshir0f
15
12k
How Cookpad use Figma
kenshir0f
3
780
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
5.8k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.1k
Introduce Atomic Design with small rework
kenshir0f
3
240
Basic css note for Komerco Team
kenshir0f
6
7.6k
Design for Behavior and Impact
kenshir0f
9
4.8k
s-dev-talks#2-komerco-team-building
kenshir0f
4
810
Other Decks in Design
See All in Design
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
採用広報大会議登壇スライド
teamlab
PRO
2
250
Web 組版の課題とその解法
yamatoiizuka
0
110
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
180
Crafting Blog covers: AI tools vs Human Illustrators. Who is the winner?
strongeron
0
130
実務のための マイクロ インタラクション入門
shingo2000
0
340
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
270
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
150
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
360
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Producing Creativity
orderedlist
PRO
336
39k
Code Review Best Practice
trishagee
54
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
How to name files
jennybc
64
92k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
KATA
mclloyd
14
12k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Transcript
Cookpad Inc. θϩ͔Β͡ΊΔαʔϏεͷσβΠϯ ౻Ҫݠ࢜࿕ 2018.07.19 Tech Kitchen #16
Cookpad Inc. All Rights Reserved. ࣗݾհ ౻Ҫݠ࢜࿕ @kenshir0f ΫοΫύουגࣜձࣾ Komercoࣄۀ෦ϦʔυσβΠφʔ
2017৽ଔೖࣾࣾձਓ2 KomercoͷσβΠϯશମΛ୲ ࠷ۙReactॻ͍ͨΓFigmaͰޮԽͨ͠Γ ໌͔ΒσϯϚʔΫʹग़ு $**%4VNNFS8PSL4IPQ
ࠓ্ཱ͔ͪ͛ΒϦϦʔε·Ͱͷྺ࢙Λ͓͠·͢ σβΠϯͷ؍͔Β
Cookpad Inc. All Rights Reserved. ࠓ͢͜ͱ ɾϒϥϯσΟϯάσβΠϯ ɾαʔϏε։ൃͷσβΠϯ
KomercoͷϒϥϯσΟϯάσβΠϯ
Cookpad Inc. All Rights Reserved. ϦϦʔε·ͰͷܦҢ 201710݄ 20186݄ νʔϜൃ ΞϓϦϦϦʔε
ϒϥϯυணख αʔϏε։ൃ 20181݄ 201711݄
Cookpad Inc. All Rights Reserved. ্ཱͪ͛࣌ʹσβΠφʔ͕࠷ॳʹΔ͜ͱ ɾϓϩμΫτΦʔφʔͱώΞϦϯά ɾͷதͰίϯηϓτΛগͣͭ͠ՄࢹԽ͍ͯ͘͠ ɾॳʮ$SFBUPST.BSLFU Ծ
ʯͱ͍͏໊લͰਐߦ
Cookpad Inc. All Rights Reserved. ΦʔφʔͱͷώΞϦϯά CMΛͲΜͳαʔϏεʹ͍ͨ͠Ͱ͔͢ʁ ࣭ ͳΔ΄ͲɺͰτʔϯ͜ΜͳΠϝʔδͰ͔͢ʁ ఏҊ
αʔϏε͜Μͳײ͡ʹʙʙίϯηϓτʙʙ ͦΜͳײ͡ɻͰ͜͜͜͏͍͏ͷ͡Όͳͯ͘ʙ Φʔφʔ
Cookpad Inc. All Rights Reserved. ώΞϦϯάͰҙࣝ͢Δ͜ͱ ɾͦͷதͰॏཁͳϫʔυΛϝϞͯ͠ɺੵΈ্͍͛ͯ͘ ɾ࣭ͱఏҊΛ܁Γฦͯ͠ೝࣝΛ͢Γ߹Θ͍ͤͯ͘
Cookpad Inc. All Rights Reserved. ίϯηϓτώΞϦϯά࣌ͷࢿྉ ɾαʔϏεͷίϯηϓτ ॏཁͳϫʔυΛϝϞͯ͠ೝࣝΛ͢Γ߹ΘͤΔ
Cookpad Inc. All Rights Reserved. τϯϚφώΞϦϯά࣌ͷࢿྉ ϜʔυϘʔυͰτʔϯͷΠϝʔδΛ͢Γ߹ΘͤΔ
Cookpad Inc. All Rights Reserved. ώΞϦϯάͨ͠༰Λܗʹམͱ͠ࠐΉ ɾϒϥϯυΧϥʔͰαʔϏεͷੈք؍Λ͑Δ ɾϒϥϯυϓϩϛεͰαʔϏεͷࢦΛݻΊΔ
Cookpad Inc. All Rights Reserved. ϒϥϯυϓϩϛε σβΠϯγεςϜͷ༰Λࡌ͍ͤͯΔͷͰ໊લ͕ܾ·ͬͨޙʹͳ͍ͬͯ·͢
Cookpad Inc. All Rights Reserved. ϒϥϯυΧϥʔ ίϝϧίάϦʔϯ ίϝϧίϒϥϯ ϝΠϯΧϥʔ৯ੜ໋Λද͢ɻ DPPLQBEͷΦϨϯδͱΕ͍ͯΔͨΊαʔϏεͷ۠ผΛ͚͍ͭ͢ɻ
αϒΧϥʔੜ׆Λද͢ɻ ϝΠϯΧϥʔͱΈ߹ΘͤͯKomercoͷੈքΛ࣮ݱ͢Δ
Cookpad Inc. All Rights Reserved. ͦͷ࣌ظʹαʔϏεͷ໊শ͕ܾ·Δ ɾαʔϏε໊শʮKomercoʯʹܾఆ ɾ໊લܾ·ͬͨ͠ϩΰΛ࡞Ζ͏ ɾଞʹʮϦίϛμʯʮσϦϚϧʯͳͲ͕ީิʹ
Cookpad Inc. All Rights Reserved. ϩΰϚʔΫ γϯϘϧϚʔΫ ϩΰλΠϓ
Cookpad Inc. All Rights Reserved. ϩΰ੍࡞ͷϓϩηε ɾϩΰίϯηϓτͱಉ͘͡গͣͭ͠ೝࣝΛ͢Γ߹Θ͍ͤͯ͘ ɾ·ͣϩΰλΠϙ͔ΒܾΊ͍ͯͬͨ
Cookpad Inc. All Rights Reserved. ڝ߹ௐࠪͱϚοϐϯά
Cookpad Inc. All Rights Reserved. λΠϙάϥϑΟͷΣΠτݕূ
Cookpad Inc. All Rights Reserved. Χʔχϯάͱࣼମͷݕূ
Cookpad Inc. All Rights Reserved. ࠷ޙࡉ͔͍ௐΛͯ͠ϩΰλΠϙ ͊࣍͞γϯϘϧΛ࡞Δͧʂʂʂ
Cookpad Inc. All Rights Reserved. γϯϘϧϚʔΫͷ࡞ ɾߤ͢ΔPS[ ɾ࣮ֆΛඳ͘ܦݧ͕΄ͱΜͲͳͯ͘ϥϑҊ͕શ͘ग़ͣ མॻ͖ͷϑγ̋μω ɾ͜ͷ࣌ظ݂໎ͬͯͯύοͱર͍ͨΞΠσΞΛܗʹ͍ͯͨ͠
Cookpad Inc. All Rights Reserved. γϯϘϧλΠϓͷॳظҊ
Cookpad Inc. All Rights Reserved. γϯϘϧλΠϓͷॳظҊ ΞδΧϯ͔Α ͥΜͥΜҧ͏ ΕͨφΠϑʁ Φʔφʔ
ʔɺͲ͏͢ΓΌ͑͑Μ ؤுΕ
Cookpad Inc. All Rights Reserved. ͍ͬͨΜৼΓฦΔ ɾڝ߹ௐࠪΛϕʔεʹ࣭ͱఏҊͰࠓ·Ͱ͏·͖ͬͯͨ͘ ɾϩδοΫΛཱͯͯগͣͭ͠ਐΊͯΈΑ͏
Cookpad Inc. All Rights Reserved. গͣͭ͠ݟ͑ͯ͘Δ ྉཧ͏ͭΘ ख࡞Γ͔ͩΒՁ͕͋Δ ϒϥϯυϓϩϛε
Cookpad Inc. All Rights Reserved. ϥϑҊΛϒϥογϡΞοϓ
Cookpad Inc. All Rights Reserved.
Cookpad Inc. All Rights Reserved. ্ཱ͔ͪ͛ΒϒϥϯσΟϯάσβΠϯ·ͱΊ ɾௐࠪͱ࣭ͱఏҊ͕ϝΠϯ ɾࣗͷΞΠσΞૣ͍ஈ֊ͰݟͤͯೝࣝΛ͢Γ߹ΘͤΔ ɾΞΠσΞ͚ͩΛઌߦͤ͞Δͱݫ͍͠ɺ͔͚ͬͭͯ͜͢Έ·ͤΜͰͨ͠ ɾϒϥϯσΟϯάαʔϏεͷ͋ΒΏΔͰʹೖΔͷͰ࠷ॳʹखΛ͚Δ
αʔϏε։ൃͷσβΠϯ
Cookpad Inc. All Rights Reserved. ϦϦʔε·ͰͷܦҢ 201710݄ 20186݄ νʔϜൃ ΞϓϦϦϦʔε
ϒϥϯυணख αʔϏε։ൃ 20181݄ 201711݄
Cookpad Inc. All Rights Reserved. ։ൃॳظͷϝϯόʔ J04ΤϯδχΞ σβΠφʔ σΟϨΫλʔ $$$
% & 5໊ͷνʔϜ ฏۉྸ25ࡀ
Cookpad Inc. All Rights Reserved. ։ൃॳظͰେʹ͍ͯͨ͜͠ͱ ɾϢʔβʔͷମݧΛ࠷༏ઌʹߟ͑ΔɺUI͋ͱ ɾૉૣ͘ϓϩτλΠϓͰԾઆΛݕূ ΠϯλϏϡʔ ɾσβΠϯͷํੑΛϓϩτλΠϓͰνʔϜͰڞ༗
Cookpad Inc. All Rights Reserved. ։ൃॳظͷ6* 100% 9%41 AM komerco
Λग़͢Δ γϣοϓཧ ϝοηʔδ ཧ จཧ ཧ ग़தͷ͕͋Γ·ͤΜ 100% 9%41 AM komerco 100% 9%41 AM komerco ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ܙൺणෑ ࡏݿ͋Γ #͓ṟ #ແண৭ #αονʔω ͷઆ໌ ˇ1,200 ΧʔτʹೖΕΔ
Cookpad Inc. All Rights Reserved. ։ൃॳظͷ6* 100% 9%41 AM komerco
Λग़͢Δ γϣοϓཧ ϝοηʔδ ཧ จཧ ཧ ग़தͷ͕͋Γ·ͤΜ 100% 9%41 AM komerco 100% 9%41 AM komerco ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ܙൺणෑ ࡏݿ͋Γ #͓ṟ #ແண৭ #αονʔω ͷઆ໌ ˇ1,200 ΧʔτʹೖΕΔ શମతʹແ࠼৭ cookpadͷΦϨϯδͰ༻ cookpadͷֆจࣈ
Cookpad Inc. All Rights Reserved. ։ൃॳظͷ6* 100% 9%41 AM komerco
Λग़͢Δ γϣοϓཧ ϝοηʔδ ཧ จཧ ཧ ग़தͷ͕͋Γ·ͤΜ 100% 9%41 AM komerco 100% 9%41 AM komerco ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ܙൺणෑ ࡏݿ͋Γ #͓ṟ #ແண৭ #αονʔω ͷઆ໌ ˇ1,200 ΧʔτʹೖΕΔ શମతʹແ࠼৭ cookpadͷΦϨϯδͰ༻ cookpadͷֆจࣈ ࠓ͋ΔϦιʔεͰૉૣ͘.71Λ࡞Δ
Cookpad Inc. All Rights Reserved. ϒϥογϡΞοϓޙ ϦϦʔεલ ޙͰΞΠίϯΛద༻ ৭ޙ͔Β
Cookpad Inc. All Rights Reserved. αʔϏεͷσβΠϯશମ૾͕ݟ͖͑ͯͨΒ ɾʮϢʔβʔͷମݧʯͱʮ࣮ͷʯΛߟྀͯ͠։ൃ͢Δ ɾ։ൃ͍͢͠σβΠϯΛঃʑʹߟ͍͑ͯ͘ ɾUI͋͘·Ͱ෭࣍తɺͱʹ͔͘ମݧΛ࠷༏ઌ
։ൃ͍͢͠σβΠϯΛҙࣝ͢Δ
Cookpad Inc. All Rights Reserved. σβΠϯΨΠυϥΠϯΛ࡞Δ ɾڞ௨Խ͍ͯ͠ΔΧϥʔίϯϙʔωϯτΨΠυϥΠϯʹ·ͱΊΔ ɾσβΠφʔϧʔϧΛৼΓସ͑ΕΔͷͰ౷ҰੑΛҙ͍ࣝ͢͠
Cookpad Inc. All Rights Reserved. σβΠϯΨΠυϥΠϯ
Cookpad Inc. All Rights Reserved. ΤϯδχΞͱڠྗͯ͠νʔϜͷ։ൃεϐʔυΛ্͛Δ ɾσβΠϯ10%͘Β͍Ͱ༷ΛΤϯδχΞʹ֬ೝ͔ͯ͠ΒਐΊΔ ɾ؆୯ͳमਖ਼ר͖औΔࢫΛ͑Δ 6*ௐɺόάमਖ਼ɺը૾ͷࠩ͠ସ͑ͳͲ ɾେࣄͳ͜ͱɺνʔϜͱͯ͠ૉૣ͘ՁΛఏڙ͢Δ͜ͱ
Cookpad Inc. All Rights Reserved. ΦʔτϨΠΞτΛमਖ਼ͨ͠ྫ ෆࣗવͳ༨ന ϨΠΞτ่Ε
Cookpad Inc. All Rights Reserved. ؆୯ͳ࡞ۀͦ͜ר͖औΔ
Cookpad Inc. All Rights Reserved. ʹΑͬͯಘҙྖҬΛΧόʔ͢Δ ɾiOSΤϯδχΞϝΠϯͷiOS։ൃʹूதͰ͖Δ ɾwebͷ։ൃڥΤϯδχΞʹ૬ஊͯ͠ม͍͑ͯͬͨ ɾKomercoͷςΟβʔαΠτσβΠϯ͔Β࣮·Ͱશ෦୲
Cookpad Inc. All Rights Reserved. ϦϦʔεલޙͷ։ൃڥͷมԽ ϦϦʔεલ ϦϦʔεޙ ίϯύΠϧޙͷHTMLΛhostingʹ͚ͬΔ Next.js
+ ReactͰfunctionΛ௨ͯ͠SSR ςΟβʔαΠτɺཧը໘ɺσβΠϯγεςϜͰڞ௨Խ
Cookpad Inc. All Rights Reserved.
Cookpad Inc. All Rights Reserved. αʔϏε։ൃͷσβΠϯ·ͱΊ ɾػೳΛ࡞ΔͷͰͳ͘ɺମݧΛ࡞Δɻࡉ͔͍UIޙ͔Βվળ ɾσβΠφʔͷલʹαʔϏε։ൃऀͳΜͧʂʂʂʂ ɾνʔϜͱͯ͠ૉૣ͘ՁΛఏڙ͢Δ͜ͱΛҙࣝͯ͠ಈ͘
͍͞͝ʹ ɾKomercoνʔϜ݈͘͢͝શͰಇ͖͍͢ ɾଞʹΓ͍ͨ͜ͱ͕ͨ͘͞Μʜ ໊ϑΥτΨΠυͷ։ൃൿͳͲ ɾΫοΫύουσβΠφʔΛืू͍ͯ͠·͢ʂʂʂ