１日１プロトタイプって具体的にどうやってるの？ - スープスロットの場合

こんにちは、クックパッドでUXエンジニアをしている重田です。

以前書いた「20ものプロトタイプと言語化の両輪でアプリをリニューアルしました」をご覧いただいた方から、１日でプロトタイプつくるって実際どうやってるの？という質問を頂きました。

少し前につくったスープスロットを例に、具体的なプロセスを紹介します。

スープスロットとは

自炊料理家の山口さんが考案された、スープの組み合わせを考えるキットです。

組み合わせ無限大のスープ作り。一汁一菜料理ワークショップのレポート｜山口祐加＠自炊料理家｜note より

山口さんとたべドリLABOという自炊料理を学ぶイベントを行った流れで、このスープスロットをアプリ化し、イベント参加者にTestFlight配信して利用してもらいました。

野菜 × タンパク質 × 味つけ という構造で、スープって自由につくれるんです。

そして、今回のたべドリLABOのためだけに私が手弁当で作っているスープスロットが実装されました......！
食材を変えるたびにスープの名前が変わって、めちゃくちゃ使いやすい。ずっと遊んでられる。これを1日で作っちゃうエンジニアさん、すごい。。 pic.twitter.com/nzTpKoyLxB

— 山口祐加＠自炊料理家 (@yucca88) October 24, 2019

デザイン・実装の流れ

Day 1 午後
1. MTGでスープスロットをつくることを決める
2. スケッチブックにラフのデザインを描く
3. Figmaでデザインファイルをつくる
4. 一旦山口さんに見てもらって、デザインの方向性を決める
5. 実装する
6. 配信する

Day2 午前
1. 実装したものをチームで見て話す
2. 「おまかせボタン」を実装する
3. 配信する

という感じで、作ることを決めてから1日でデザイン・実装を終えました。

▼Figma

▼Xcodeで実装したstoryboardやコードの様子

▼最終的に実装したもの

デザインと実装を両方やる効果

1. 自分でデザインすると、細かいデザインや仕様が頭に入っているので、スムーズに実装ができます。したがって、実装のスピードがあがります。

2. 実装を自分でやるとデザインファイルは7〜8割ぐらいの完成度でいっかとなります。自分で実装したものを確認して、細かい調整はあとでできるからです（Figmaと実装したものを見比べると微妙に違うと思います）。したがって、デザインのスピードがあがります。

3. 全体的にスピードがあがることで、プロトタイピングを通したトライ＆エラーを数多く回すことができます。

「まずやってみる」チームカルチャー

僕がいるチームでは議論しすぎることより「まずやってみる」ことを大切にしているのですが、かかる時間が大きいとなかなか「やってみよう」となりません。なので、目安として１日以内にアウトプットするというのをおき、やってみやすくしています。

実際のところ、ものによっては１日以上かかることもあるのですが、中途半端でも1日以内に配信するよう心がけています。また、１日１プロトタイプを毎日やれるわけではありません。考える時間やインプットする時間も必要になってくるので。

もっとしっかり仮説を言語化して検証すべきとか、リリースするかわからないものを実装すべきではないといった考え方もあるかもしれません。ですが、考えてばかりで手を動かさないと禅問答に陥って前に進まなくなってしまいます。

スープスロットはLABO用につくったものですが、スープの構造をスロットにしたUIを自分でつくり、使って、チームでディスカッションしたり、LABO参加者の様子を観察することで、より深いドメイン知識やインスピレーションを得ることができました。

おわりに

実はたべドリLABO、新規募集をはじめます！毎日のごはんがマンネリ化して困っている方、料理の構造をとらえて自由な発想で料理を楽しめるようになりませんか？ ぜひご参加お待ちしています。