![見出し画像](https://assets.st-note.com/production/uploads/images/15522350/rectangle_large_type_2_cdf5f8d7fbfcdcc62a2cc25a0270b908.png?width=800)
クックパッドのサービス開発の日常とデザイナーの醍醐味
こんにちは。先日、シンソツデザイナートーク〜GMOペパボ×mixi×クックパッド〜で登壇させていただきましたのでその発表内容を公開します。
当日は多くのデザイナー志望の学生が参加して、美味しいご飯を食べながらイベントは進んで懇親会もわいわい盛り上がりました。
![画像38](https://assets.st-note.com/production/uploads/images/15538944/picture_pc_51b4874fe294bd56f5bd1ecb4c925f5a.jpg?width=800)
他社の新卒3年目デザイナーの方達は自身の成長について丁寧に話されてる中自分は「クックパッドのデザイナーいいぞ〜」という勢いの内容になってしまいましたが楽しく喋らせていただきました🙃
--- 以下発表内容です ---
![画像1](https://assets.st-note.com/production/uploads/images/15522412/picture_pc_6558772a8385d4efabf8ee07bf2fd4b9.png?width=800)
まずは自己紹介から。佐野大河といいます。今年で新卒3年目のデザイナーです。
投稿開発部という部署に新卒で入り、今年の途中に会員事業部という部署に移動しました。部署は違いますがずっとクックパッドのレシピサービス周りのデザインを担当しています。
![画像2](https://assets.st-note.com/production/uploads/images/15522456/picture_pc_858de92bfed954523ee60a19be76c20c.png?width=800)
最初に、なんでクックパッドに入ったのかについて軽く触れますね。
理由は大きく2つあって、まず「ユーザーに使い続けてもらうためのサービス開発を学びたかったから」加えて「料理に関心があったから」クックパッドが良いなと第一志望に選びました。まぁ詳しくは懇親会で聞いてください。
![画像3](https://assets.st-note.com/production/uploads/images/15522492/picture_pc_f46b27a48f5e0602ef12bf9a2b7a7cef.png?width=800)
さっそく本題に入っていきたいんですが、あれこれ喋る前に
![画像4](https://assets.st-note.com/production/uploads/images/15522517/picture_pc_3553fdd7f0d4ad5c5b68a16bc8aedccf.png?width=800)
この2年半で、自分が手がけた中で世の中に出たUIデザイン、全部見せようかと思います。とりあえずものがあった方がイメージしやすいと思いますし。
![画像5](https://assets.st-note.com/production/uploads/images/15522553/picture_pc_f4662ceee327751117c85dc1628ad20c.png?width=800)
ではさっそく。1年目。
クックパッドにレシピを投稿してる人が自分のレシピをまとめて公開できる機能のデザインを担当しました。例えば「一人暮らし飯」といったカテゴリを作って公開し、それに合うレシピを追加していく、といったものです。
![画像6](https://assets.st-note.com/production/uploads/images/15522602/picture_pc_2c167765ff70d402f379c83239cc6e2f.png?width=800)
2年目。
これはクックパッドとは別アプリで、レシピ投稿者向けの新機能を試すβアプリを作り、そのアプリアイコンや画面のデザイン全般を担当しました。
![画像7](https://assets.st-note.com/production/uploads/images/15522615/picture_pc_3d4cf7c5a245ce69b75b63d53ed6886c.png?width=800)
サクサク行きます。3年目。
クックパッドのiOSアプリでレシピ投稿者向けの機能のデザインリニューアルを2つやりました。左側はレシピを書くためのエディタ画面。右側は投稿したレシピがどれだけ見られたかなどがわかるレポート画面です。
![画像8](https://assets.st-note.com/production/uploads/images/15522633/picture_pc_c2406040cfa04398a6484ef199f2e630.png?width=800)
最近は、レシピを検索する人がまたつくりたいお気に入りのレシピを取っておける機能のデザインを担当しています。
ざっと見せましたがだいたいこんなもんですね。もちろん他にも細かいものやリリースされなかったものなど色々ありますが、メインで関わったのはこれで全部です。
![画像9](https://assets.st-note.com/production/uploads/images/15522654/picture_pc_c65bf2113364a91760349528134138de.png?width=800)
これを見て「2年半でこれだけかよ」って感想もあるんじゃないかと思います。
大学でデザインを学んでる皆さんからすれば結構少ない量なんじゃないかなと思います(学生の頃の自分だったら少ないなって思います)
![画像10](https://assets.st-note.com/production/uploads/images/15522682/picture_pc_85803da6416b2677122c40b11624cc7f.png?width=800)
ここで何が言いたいかというと、これらのデザインを作るのに費やした時間は全体の0.2%ぐらいだということです。
![画像11](https://assets.st-note.com/production/uploads/images/15522698/picture_pc_5b4ab7a5e954650d99419cb319837b60.png?width=800)
じゃあ残りの99.8%は何をしてるのかというと
![画像12](https://assets.st-note.com/production/uploads/images/15522705/picture_pc_e2e9ed1b2dc55487443b6879a98906a7.png?width=800)
超ざっくり言うと「作って壊す」をひたすら繰り返してます。
![](https://assets.st-note.com/img/1659339178322-xTSlLobUfr.png?width=800)
ちょっとだけ丁寧に言うと
・こうしたらサービスがこう良くなりそうだなという仮説を立てる
・仮説を元にデザインをつくる
・つくったものを元に仮説が合っているかどうかを検証する
・検証で何かしら学びを得て、その上で壊す
というサイクルを繰り返しています。
✍️
懇親会で「このサイクルはどの程度の大きさなんですか?」という質問が出てきたのですが、このサイクルは大きい場合も小さい場合もあります。
大きいものであれば、期待値を設定したのち実際にリリースして分析する、など。これは比較的イメージしやすいと思います。
本当に小さいものだと、おそらく学生の皆さんもデザインを作る過程でも必ずやっていることで、例えば「ここのテキストを強調したいから色を変えてみよう」と考えるのは「テキストの色を変えたら強調できるだろう」という仮説から来るわけで、実際にやってみたら「全体的に似たようなスタイルがあって思ったほど目立たなかった」という学びを得るかもしれない。そういうのも1つのサイクルだと思っています。
なのでデザインを作っている時は常に「仮説は何か?」「実際やってみて何がわかったか?」を意識できると良いと思います(と、偉そうに話しましたが自分も全然出来てないことあるので精進します。笑)
![画像14](https://assets.st-note.com/production/uploads/images/15522851/picture_pc_cbdd2a76c1ff9982365cbba133813cdb.png?width=800)
前置きが長くなりましたが、作って壊すのを繰り返すのがクックパッドのサービス開発の日常です。
では、具体的な話を2つの特徴をもとに紹介していきたいなと思います。
![画像15](https://assets.st-note.com/production/uploads/images/15522882/picture_pc_20b9462d5e71d3743b8aca59804dff3a.png?width=800)
1つ目の特徴は、「作って壊す」をとにかく早くやること。
![](https://assets.st-note.com/img/1659339191341-jcVBfBpZaX.png?width=800)
これは、結局カタチにしてみないと何もわからない、なるべく早く失敗して早く学びを得たい、だからこのサイクルを早く回そう、というものです。
その中で具体的にデザイナーがやっていることをいくつか挙げます。
![](https://assets.st-note.com/img/1659339219262-cyar0duRxH.png?width=800)
ミニマムなものだと、とりあえず紙に書いてみること。とりあえず構想したものを手書きでもいいから描いてカタチにしてみます。
例えばさっき紹介した「レシピをまとめられる機能」の初期構想は(汚過ぎて見せるのに抵抗あるんですが...)こんな雑な手書きから始まりました。
![](https://assets.st-note.com/img/1659339319097-l0vpHejXvL.png?width=800)
またこれは紙に限らずなんですが、カタチにしたら、なぜそのデザインにしたのかという意図や触って感じたことを整理することで、次の仮説やアイデアに繋げていきます。
![](https://assets.st-note.com/img/1659339305827-pvOYAwfaxj.png?width=800)
手書きよりもう少しちゃんとしたものだと、モックを作ってユーザーに当ててみたりします。ツールは何でもいいんですが、FigmaやProtopieを現場ではよく使います。
インタビューにデザイナー自ら参加してユーザーさんと直接やりとりすることもあります。
![](https://assets.st-note.com/img/1659339337902-J5hznnSXFw.png?width=800)
また、リリースした後もそれで終わりじゃなく、データやユーザーのご意見から分析して改善に繋げることもあります。
![](https://assets.st-note.com/img/1659339348958-2tfQPBP7L5.png?width=800)
まぁいろいろやり方はあるんですが、作って壊すをとにかく早く回す環境だから構想をカタチにする力やカタチにしたものがユーザーに届くか確かめる力が身につくと思っています。
![画像22](https://assets.st-note.com/production/uploads/images/15523369/picture_pc_ee9346022a58779db092c6b6cd4db3ac.png?width=800)
もうちょっと平たく言うと「今よりもっといいデザインがあるはず」というのをとことん追求できる環境がいいぞという話です。具体的なスキルとして何を身に付けたいかは自分次第で、手を上げれば成長する機会が貰える環境なのも良い点です。
![画像23](https://assets.st-note.com/production/uploads/images/15523385/picture_pc_d7c268ce4ead107fc1013b987f97bbd2.png?width=800)
2つ目の特徴は「全員で考える」。
![](https://assets.st-note.com/img/1659339412404-WWhjN5RowR.png?width=800)
「こうしたらもっとサービスが良くなりそう」ということは基本的にチームメンバー全員が考えている環境なんです。
![](https://assets.st-note.com/img/1659339421322-PKrkwV9HTF.png?width=800)
学生のとき自分が思ってたイメージとして、なんかえらい人が「これやるぞ!」と企画を持ってきてデザイナーがデザインする、エンジニアが実装する、みたいな流れを想像してたんですが
![画像26](https://assets.st-note.com/production/uploads/images/15524295/picture_pc_4b4c0dc2b307a8016243a05cc24c63e9.png?width=800)
本当に職種や立場関係なく考えていて、サービスのいわゆる上流の設計から関われるのは当たり前だし、どういう体験を作るか、どういうデザインが良いかはメンバー全員で考えています。
![画像27](https://assets.st-note.com/production/uploads/images/15524320/picture_pc_b077c0f1d3922bd146fdc579733b54ad.png?width=800)
でも!
![画像28](https://assets.st-note.com/production/uploads/images/15524328/picture_pc_b075656832cf3dff4d114ce3c9bf8620.png?width=800)
そんな全員で考える環境とはいえ、最終的にユーザーに届けるUIを作るのはデザイナーの役割なんですよ。何を当たり前のことを言ってるんだという感じかもしれませんが、やっぱりここが醍醐味だと思っています。
![](https://assets.st-note.com/img/1659339433695-i3BhgQDV6M.png?width=800)
なので、デザイナーはただ全員の考えを取り入れてデザインを作ればいいわけではありません(最初自分は結構これになりがちでした...)
![](https://assets.st-note.com/img/1659339444172-qFfZD6NJWs.png?width=800)
例として、レポート画面のリニューアルのデザインについて話します。
これは自分の投稿したレシピがどれだけ見られたかがわかる画面です。ここでは「レシピを書いた人が毎日訪れて、その日の反応に一喜一憂できるようにしたい」。そういう誰にどう感じてもらいたいのか狙いを定めた上で「だから累計よりも1日の数を強調しました」といった具合にデザインを組み立てていきました。
![](https://assets.st-note.com/img/1659339452919-SW4WsHZ3NO.png?width=800)
反対に、狙いから外れるアイデアだったりデザインをもっとこうした方がいいのでは?みたいな意見があった場合は「狙いから外れるので今回は諦めます」という判断をするのもデザイナーの役割です。
![](https://assets.st-note.com/img/1659339482099-fhkkME9ESi.png?width=800)
ちなみにこのレポート画面のデザインについては、最近noteに細かくまとめたので良かったら読んでみてください。
話は逸れますが、社内のデザイナーが書いた記事を更新していくデザインマガジンもあるのでぜひこれもフォローしてみてください。
![画像33](https://assets.st-note.com/production/uploads/images/15524460/picture_pc_91cbf5dd81db2ad7c97d3321ed94ca09.png?width=800)
そんな感じで、全員が考える環境だからこそ、ユーザーにどう感じてもらいたいか、そのためにどういうデザインがベストなのかはデザイナーが考え抜かなきゃダメだし、何を選んで何を諦めるか(選ぶことよりも諦めることの方が難しい)を判断するのもデザイナーの役割です。
![画像34](https://assets.st-note.com/production/uploads/images/15524478/picture_pc_c1b1dec1d0cb81c046a21312c1390fbe.png?width=800)
これも平たく言うなら、ちゃんと理由のある芯を持ったデザインを設計する力が求められる・身に付く環境がいいぞという話です。
![画像35](https://assets.st-note.com/production/uploads/images/15524491/picture_pc_b0aaa0e852660c5a5a100efa9244508b.png?width=800)
まとめです。
![画像36](https://assets.st-note.com/production/uploads/images/15524495/picture_pc_8fa3d9e4ac509c532d6ac3feb156ccf0.png?width=800)
[クックパッドのサービス開発]
特徴① 作って壊すをとにかく早くやる環境
なのでデザイナーは「今よりもっといいデザインがあるはず!」をとことん追求できる
特徴② 全員で考える環境
なのでデザイナーは芯を持ったデザインを設計することが求められる・身に付く
これを見てちょっとでもいいなと思ってくれたならクックパッドと相性は良いんじゃないかなと思います。笑
![画像37](https://assets.st-note.com/production/uploads/images/15524585/picture_pc_fa87d7bc70dcfcf33055852838f260d9.png?width=800)
以上です、ありがとうございました。
この記事が気に入ったらサポートをしてみませんか?