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.6k
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
16
14k
How Cookpad use Figma
kenshir0f
3
830
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
5.9k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.1k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.5k
Introduce Atomic Design with small rework
kenshir0f
3
260
Basic css note for Komerco Team
kenshir0f
6
7.8k
Design for Behavior and Impact
kenshir0f
9
4.9k
s-dev-talks#2-komerco-team-building
kenshir0f
4
870
Other Decks in Design
See All in Design
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
220
ブランドづくりの双視点 - GUILD #31 ブランディング勉強会
yampuu
0
110
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
180
アフォーダンスとシグニファイア
ryokanakai
1
320
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.4k
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.2k
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
300
ito aya|Portfolio2409
itoaya116
0
260
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
420
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
300
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
650
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Happy Clients
brianwarren
98
6.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Bash Introduction
62gerente
608
210k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
RailsConf 2023
tenderlove
29
900
Done Done
chrislema
181
16k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Git: the NoSQL Database
bkeepers
PRO
427
64k
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νʔϜ݈͘͢͝શͰಇ͖͍͢ ɾଞʹΓ͍ͨ͜ͱ͕ͨ͘͞Μʜ ໊ϑΥτΨΠυͷ։ൃൿͳͲ ɾΫοΫύουσβΠφʔΛืू͍ͯ͠·͢ʂʂʂ