デザインの視点でみる「Dish」の誕生から動画公開まで
こんにちは、株式会社ピケの CTO の中西（@nakanishy）です。デザイナー兼フロントエンドエンジニアをやっています。先日、Dish をリリースすることができました 🎉
この記事では、Dish のアイデアが生まれた経緯から、動画を公開するまでに行ったことを、デザインの視点でお伝えしたいと思います。
1. Dish とは
2. なぜ動画を Twitter に投げたのか
3. アイデアの発想
4. アイデアからラフへ
5. Sketch でデザインを起こす
6. アニメーションの作成
7. 最後に
1. Dish とは
Dish は「サクッとランチが決まるグルメアプリ」です。先日、2ヶ月間の開発期間を経て iOS アプリをリリースすることができました 🎉
この2ヶ月間に何をしていたかについては、代表の坂本（@lotus_rs）の 約4万RTされたグルメアプリ「Dish」を2ヶ月でリリースするまで をご覧ください。
アプリを開発することになったきっかけは、5月の中旬、こちらのツイートが 1000 RT を達成したことでした。
ツイートを出す前は「1000 RT いくかな？いったらそこそこ凄いよね」という話をしていたのですが、結果は約4万 RT と、想像を遥かに超える反響を頂き、大変うれしかったです。
以下では、この動画が作られるまでの流れをお伝えします。
2. なぜ 動画を Twitter に投稿したのか
まず、背景として、なぜ Twitter に動画を投稿しようと思ったのかをお話します。
今まで会社として、大小合わせて10個弱のサービスを作り、失敗してきました。1週間でやめたサービスもあれば、2ヶ月以上の開発期間をかけ、2週間でやめたサービスもあります。
これらの失敗から学んだ教訓。それは、仮説検証はなるべく少ない工数で行い、小さく失敗する、ということです。リーンスタートアップにおいて当たり前の考え方で、理解しているつもりでいましたが、実際にやるとその難しさがよくわかりました。
Twitter に動画を流して仮説検証するという方法も、この考えがベースにあります。「みんなが欲しがってたらバズるし、そうでなければバズらない。お金もかからない。反応もすぐに得られる。」という坂本の発案でした。
3. アイデアの発想
Dish のアイデアの原型は、ある日の散歩中に出てきました。メンバー3人で次のプロダクト案を考えるため、散歩に出かけているとき。坂本の質問から。
坂本「次どうしようね。なんか最近困ったことないの？」
古内「あ、そういえば GW に友達と遊んだとき、ご飯探すの苦労したわ」
坂本「あー、そういえば俺も困ったな。家族とのご飯探しで」
中西「俺も家族とご飯行くとき困った」
坂本「あれ、3人とも困ったってことは何かあるんじゃない！？」
このとき「飲食店探し」になにか課題があるのではないかという仮説が生まれました。以前から飲食店探しに関するアイデアは出ていたのですが、「食べログがあるしなぁ」で終わっていました。そこに「実は何かありそう」という気づきが得られました。
家に帰り、早速ラフに落とし込みました。
4. アイデアからラフへ
まずは手書きのラフを描き、それぞれの頭の中にあるイメージをすり合わせました。こちらが、家に帰って来てすぐに描いたラフ。条件を入れて検索すると、結果がリストで表示されるというシンプルなもの。
このラフに対して、以下のような意見が出ました。
・条件の入力部分をもっとかっこよく
・ステップ形式でサクサク選べるといいかも
・リストじゃなくて Tinder みたいなイメージだった
・お店を一気に出されると迷うから、一つずつ出したほうがいいかも
・サクッと感も出そう
そして、上記の意見を取り入れて描いたラフがこちら。Twitter に上げた動画の原型です。
このラフをもとに実際のデザインに落とし込んでいきました。
5. Sketch でデザインを起こす
さて、Sketch でのデザインです。ラフで描いたものを実際のデザインに落としていきました。
デザインのテイストは「既存の飲食店サービスとは違う、イケてる感」を出したかったので、ボーダーを使わず影で境界線を出すような今っぽいテイストにしました。
ただし、少ない工数で出したかったので、細部にはこだわりすぎず、最小の労力で「いい感じ」に見えるように心掛けつつデザインしていきました。
6. アニメーションの作成
Sketch で作成したデザインに動きをつけます。アニメーションの作成は、ほとんど初めてだったので、どうやれば作れるのか想像できませんでした。頭の中で想像していた動きはこうでした。
・ 人数を選ぶと横にスライドして予算が表示される
・ カードをスワイプするとヌルっと飛んでいく
・ 詳細画面に遷移時、カードの画像が共有される（Shared Element 風）
これらを実現できるツールを探すことにしました。そこで、いくつかのプロトタイピングツールを YouTube で検索し、チュートリアル動画をあさり、要件を満たせるツールを探しました。
そこで見つけたのが、こちらの動画。
ドンピシャでした。しかも簡単そう。Sketch からもインポートできる。Principle の他の動画も見て「これでいこう！」となりました。とにかく要件通りの動画を作ることができればよかったので、他のツールと比較検討は行いませんでした。
ツールが決まれば、あとはひたすら作るだけ。先程の動画と同じ投稿者のチュートリアルである Principle App Crash Course を見て、使い方を覚えながら作成していきました。大雑把な使い方を理解するには、動画が一番手っ取り早かったです。英語がわからなくても操作を見ればなんとなくわかりますからね。
最終的な Principle プロジェクト
7. そして動画リリースへ
Principle の録画機能を利用し動画を撮影して完成です。動画をツイートして反応を待ちました。
5月20日の夜にアイデアが出て、22日の夜に動画の完成したので、工数は丸2日間でした。
正直に言うとバズった後に「こんなにバズるならもっとちゃんと作ればよかった」と思った部分があります 笑。スローで再生しないとわからないレベルですが、条件選択や詳細への遷移のアニメーションがガタガタです。
しかし、実際に出すまではバズるかどうかわからなかった。
私自身は、どちらかというと完璧主義で、キレイに完成しきったモノを出したい性格です。しかし、スタートアップにおいては、その完璧主義な考えは抑えたほうが良いことがあります。なぜなら、スタートアップは時間も資金も限られていて、その中で成果を出さなければならないからです。
当たり前のような話ですが、会社としてそれができなかった時期があります。完璧にして出せば、クオリティの高いものができますが、本当に今そこに時間をかける価値があるか、ということはよく考えるようにしています。
8. 最後に
この記事では、アイデアの発想〜動画の完成までに、何を考え、何を行ったのかをお伝えしました。
何度もお伝えしましたが、一番意識したことは小さく出すことです。つまり、工数を最小限に抑え、失敗したときのリスクを最小限にする、ということです。
参考になれば幸いです。
-----------------
ここまで読んでいただき、ありがとうございました！
この記事では触れなかった React Native での実装の話やブランドデザインの話はまた後日書こうと思います。
サーバーサイドやアルゴリズムに関しては、古内の「Dishを支えるランチ推薦アルゴリズム」をご覧ください。
ご意見、ご質問、FB は @nakanishy までよろしくお願いします。
この記事が気に入ったらサポートをしてみませんか？