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
15k
How Cookpad use Figma
kenshir0f
3
840
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
6k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.1k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.6k
Introduce Atomic Design with small rework
kenshir0f
3
260
Basic css note for Komerco Team
kenshir0f
6
7.9k
Design for Behavior and Impact
kenshir0f
9
5k
s-dev-talks#2-komerco-team-building
kenshir0f
4
880
Other Decks in Design
See All in Design
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
220
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
330
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.3k
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
360
GAtechnologies_Designer_Culture_Deck_会社紹介資料
gatechnologies
0
130
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
240
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.4k
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
360
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
530
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
61k
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Designing Experiences People Love
moore
139
23k
The Language of Interfaces
destraynor
155
24k
Optimising Largest Contentful Paint
csswizardry
33
3k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
Side Projects
sachag
452
42k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
How to Ace a Technical Interview
jacobian
276
23k
Become a Pro
speakerdeck
PRO
26
5.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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νʔϜ݈͘͢͝શͰಇ͖͍͢ ɾଞʹΓ͍ͨ͜ͱ͕ͨ͘͞Μʜ ໊ϑΥτΨΠυͷ։ൃൿͳͲ ɾΫοΫύουσβΠφʔΛืू͍ͯ͠·͢ʂʂʂ