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.7k
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
16k
How Cookpad use Figma
kenshir0f
3
880
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
6.1k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1.2k
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
9.8k
Introduce Atomic Design with small rework
kenshir0f
3
290
Basic css note for Komerco Team
kenshir0f
6
8k
Design for Behavior and Impact
kenshir0f
9
5k
s-dev-talks#2-komerco-team-building
kenshir0f
4
910
Other Decks in Design
See All in Design
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
2
1.2k
decksh object reference
ajstarks
2
1.3k
Cyber Heart Online Book
hjnasby
0
180
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.7k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.4k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
株式会社バクタム 会社説明資料
bactum
0
340
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
400
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
590
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
800
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Code Review Best Practice
trishagee
71
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Cult of Friendly URLs
andyhume
79
6.6k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Typedesign – Prime Four
hannesfritz
42
2.8k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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νʔϜ݈͘͢͝શͰಇ͖͍͢ ɾଞʹΓ͍ͨ͜ͱ͕ͨ͘͞Μʜ ໊ϑΥτΨΠυͷ։ൃൿͳͲ ɾΫοΫύουσβΠφʔΛืू͍ͯ͠·͢ʂʂʂ