「クックパッドマート」アプリ開発における知見
開発速度を上げるためにやったこと

クックパッドマートのアプリ開発について

2018年9月26日、クックパッド株式会社が主催するイベント「Cookpad Tech Kitchen」が開催されました。第18回となる今回のテーマは「生鮮食品EC クックパッドマートの開発秘話」。7月に発表したクックパッドの新規事業、生鮮食品ネットスーパー「クックパッドマート」の開発の裏側について、事業責任者、エンジニア、デザイナーたちが語り尽くします。「クックパッドマートのアプリ開発について」に登場したのは、中山陽介氏。クックパッドマートのアプリ開発の裏側と、デザイン面での知見を語ります。講演資料はこちら

クックパッドではデザインスプリントにのっとっている

中山陽介氏(以下、中山):お待たせいたしました。

私はiOSアプリを開発している中山と申します。本日はクックパッドマートのアプリ開発についてお話をさせていただきたいと思います。アプリをリリースするまでの道のりについてじっくりお話を聞いていただければと思います。

その前に自己紹介をさせてください。僕はiOSとAndroidのアプリエンジニアです。

個人アプリの開発者でもあり、今累計110万ダウンロードほどの規模のアプリを運用しています。

価格比較アプリと賞味期限管理アプリとか、なんか少し地味なアプリをつくっているんですが、そのなかでもsubscriptionの課金のアプリをつくるのが好きです。技術はFireBaseとKotlinとSwiftが好きです。家族は嫁さんと2児の、息子と娘がおります。

では、これからクックパッドマートアプリの説明をさせていただきます。

「クックパッドマートのiOSアプリ開発の進め方」。まずデザインスプリントはみなさんご存知ですか? デザインスプリントというのは、デザイン上の課題を解決するために5日間という期間を設けて、本当にすごいスピードでプロトタイピングをつくって、検証してユーザーテストを行う方法なんですが、そういうものを始めに4月に行いました。

その後、その期間の間に先ほど長野からお話があったように、WebサイトでECサイトをつくって、社内テストで運用を開始しました。

そしてその後に社内でiOSアプリをリリースしました。

社内で運用を開始したのが7~9月ぐらいの2ヶ月で、一般公開する前に社内でテストを行いました。そして一般ユーザー向けには9月20日にリリースしました。

なぜアプリなのか?

「なぜアプリでなければならないのか?」。これはもうパーソナライゼーションです。

「ユーザーの好み、位置情報、利用状況などに基づいてサービスを提供したい」と。お腹が空いたタイミングに通知したいとか、注文はサクサクパフォーマンスが重要です。毎日アプリ使ってもらいたいので、ヌルヌルお買い物してほしいということで、アプリの開発がスタートしました。

序盤はこういう感じで、デザイナーが機能込みでSketchで、先ほど米田からあったように画面をつくります。

そして、実現できるかわからないですが、盛り盛りの状態で画面を実装して、議論をして、壊してみる。そして社内配信をして、プロトタイプツールを使って使いやすさをためす。そしてユーザーテストを行う。最後にデザインして、もう一度配信、みたいなことをループしてました。

大切なことは、もう本当にこまめに仲間へ自慢しに行く頻度ですかね。これつくったよーみたいな、機能が新しく追加された! みたいなワイワイやるような感じで。お互いがその調子で褒め称えると。そしてデザインと仕様は何度も変更しました。

でも楽しい! 喜んで!

クックパッドマートアプリのデザインの歴史はすごいもので、一番最初はこんなにシンプルなかたちで、この時点で実装を始めていました。

そして先ほど出たNetflixが出てきて、影、テーブルビューどうするんだろうとか、いろいろあると思うんですけれども。

上とかも増えてきて、iOS開発でナビゲーションコントローラーの上に要素を置くというのは本当に大変で……みなさんわかると思うんですけれども。

完璧なデザインは後から作り直しにくい

「デザイン変更は柔軟に」。スケジュールの問題でデザインの表現が狭まるのは本当によくない。これはデザイナーの方も言っているし、僕もそう思っています。

実装して一番大切なことは触れることです。

細かいcommitでつくりながら、高い頻度でチームへアプリを配信して、レビューして、そしてフィードバックをもらってまた実装してから気付くこともあると。

実装して課題が生まれて、運がよければセレンディピティ的な、目的のものとはまた違うものが発見できたりとか、いいこともあります。

そしてデザインFix後に実装すると制約が本当に生まれやすい。完璧なデザインでやってくると、あとで制約が多いので、つくり直しがきかないみたいなことがあると思います。

「一度すべての画面を遷移付き実装してみては?」というのは、実際にやったんですが、iOSアプリをつくっている方はすごいよくわかると思うんですけれども。このままさすがに実装を進めるのはまずいんですが、最初に画面の実装で、どの画面があるかというのをまず俯瞰して見ることがすごく大事だなと思いました。

すべての画面をまずStoryboard上にいったんつくってしまって、実装を本格的に始めたら、よくある1Storyboardから1ViewControllerへ。コンフリクトが発生したりとかするので、こういったかたちになります。

ただ、そのサイクルをできるだけ早く回したい。

そして開発速度を上げるために具体的にやったことで、もう何度でも壊せるようなつくり、できるだけデザインはパーツ化、xibとかでやります。差し替えが容易な状態で、パーツも俯瞰できるように。

そしてdebugはもうbuildを極力せずに、LLDBを使って、コマンドでどんどんdebugしていける。ファイル数は序盤はもうすごく少ない状態が僕はいいなと思っていて、ファイル数は本当に少なくします。

APIを分業していた部分があるので、そのへんはダミーのJSONを自分で用意してしまって、まずいったんデザインを完成させてしまう。疎結合はディレクトリごと削除してもなんとか動くみたいな、それぐらいしっかり分けて書く。

コピペで作れる状態を持っておく、強くてニューゲーム

そして極力、これはなんかおかしい話なんですが、コードは書かないみたいな。SwiftGenみたいなSwiftジェネレーターで、定数とかは全部ジェネレートでやってしまって、よく使ったのがSnippetです。

「強くてニューゲーム」、これがすごく大事で、常にプロジェクト開始前から道具をそろえておくということが僕は大事だなと思いました。

開発しているとXcodeのTemplate化みたいなものを自前でどんどん持っておく、ある程度つくられた状態からスタートしていくというのが僕のおすすめです。

CocoaPodsやCarthageなど、必ず入れるものというのは、なんとなくみんな入れていると思うんですけれども、確実に入れるだろうというスタメンみたいなものをつくっておくといい感じです。

過去の開発でも、コードレビューが通ったものは貪欲にどんどんスニペットに追加していく。そして、ほとんどコピペでつくれるような状況というのを僕らは持っています。

クックパッドマートのアプリ自体も、すごくスタンダードなつくりであることがアプリ開発をやっている方だとわかると思います。下にタブがこういうふうに3つあって、上にナビゲーションがあって、スライドがあって、この前にチュートリアルとログイン画面があるという、この状態を本当にまっさらな状態で持っておくと、あとはテーブルビュー、コレクションビューを組んでいくという感じの状況がつくれるので、かなり高速につくれます。プロジェクトが終わるたびに強くなります。

そして「画面をパーツ化」。一個一個xib化しているとファイル数がどんどん増えてしまうので、1ファイルで俯瞰して見られるようにしました。

パーツの比較と変更・管理がこの状態はすごく楽になりました。

普段遣いしなければ、求められている機能もわからない

ここからは少し熱が熱いところになるんですけれども、自分がアプリ開発する上でもっとも大切にしていることは、これに勝るものはありません。「自分が開発しているアプリを普段使いする」こと。これが僕は一番大切だと思っています。

みなさん、ご自分でアプリ開発されている方は今日どれぐらいいらっしゃいますか? 半分ぐらいいらっしゃいますね。本当にみなさん毎日使ってますか? 本当ですか? なるほど! みなさんさすが使っていらっしゃる。

普段使いしないと、便利なのか不便なのか、ほしい機能すらわからない。開発者の多くが、僕が出会ったという個人的な偏見ではあるんですけれども、コードを組むことが楽しいだけという方もけっこういらっしゃって。

アプリというのを本当につくっていかなきゃいけないという前提がないケースもけっこう多いので、僕はこれをすごく大事にしています。僕が本当によく使うアプリを今日は集めてみました。

僕のホーム画面です。これは一軍です。

見ていただくと、車が好きなので車系のアプリがたくさんあるんですが、すごく便利です。毎日使っています(笑)。

もちろん僕は毎日クックパッドマートのアプリを使っています。

普段の生活において、食料の調達は高い頻度で行われます。もうお腹は誰でも空きます。でも、土日とかはけっこうみなさん買い物だけで時間の多くを過ごすことが多いと思うんです。平日は仕事をして、土日くらいしか買い出す時間がないと。それも一日の半分ぐらい使っているので、人生のうちどれぐらいこの状況を繰り返しているのかというのがあります。

クックパッドマートは、買い物の時間を節約できると。しかもおいしい食材が手に入る。最高ですね。

でもネットスーパーでいいんじゃないですか? ネットスーパーをけっこう使われた方は多いですかね? 使ったことありますか? 少ないですね。すみません。

僕はネットスーパーを以前けっこう使っていたんですけれども、ネットスーパーは最低限の送料を無料にするためには、6,000円とか高いもので8,000円とかかかります。最後の1,000円、2,000円は、本当に送料を無料にするために買っているような感じなんです。

毎日使い続けてもらうためにどうするか

じっくり商品選別をします。注文するだけで30分ぐらい。何回も見直して、これは漏れてないかな、みたいな作業を繰り返しています。

さらに、常に受け取る人が必要です。配達してもらうので、生鮮食品は再配達してしまうと鮮度がすごく落ちてしまいます。今後、配送ドライバーも本当に不足していくと思います。

でもクックパッドマートは1つから送料無料。必要なものを都度注文すればいいんです。商品は自分が好きなタイミングで受け取りに行ける。だから毎日使えます。よく使われているアプリは、生活に欠かせないものばかり。もう毎日使います。

アプリはリテンションがすべてです。リテンションがないとサービスは続かない。普段サービス開発をしているみなさんよくご存知だと思います。

ということは、クックパッドマートは生活に欠かせません。今後、クックパッドマートは多くの人に使われると思います。まだまだ受け取れる場所が少ないです。課題も多いです。こことあと1ヶ所ぐらいしかないです。

700万人。この数字は60歳以上の買い物弱者の数です。2015年でこの数です。買い物には課題がたくさんあります。今後もクックパッドマートはこういった問題を解決できるようにがんばっていきたいです。

今後のクックパッドマートにご期待ください! ありがとうございます。

(会場拍手)

Occurred on , Published at

Cookpad Tech Kitchen

クックパッドオフィスのキッチンで、開発に関する知見や学びを共有する勉強会です。

スピーカー

関連タグ

人気ログ

人気スピーカー

人気コミュニティ

ピックアップ

編集部のオススメ

ログミーTechをフォローして最新情報をチェックしよう!

人気ログ

人気スピーカー

人気コミュニティ

ピックアップ

編集部のオススメ

そのイベント、ログしないなんて
もったいない!

苦労して企画や集客したイベント「その場限り」になっていませんか?