「クックパッドマート」のデザインができるまで　ラフデザインから完成形までの軌跡

ラフデザインを思う存分楽しみながらつくる

米田哲丈氏（以下、米田）：僭越ながら自己紹介をさせていただきますと、私は米田と申します。5月1日に入社したところなので、4、5ヶ月ぐらいやっているという感じです。

デザイナー？（笑）。我々のチームは職にあてられない仕事が多くて、エンジニアもエンジニアっぽくないことをしてるし、デザイナーもデザイナーっぽくないことをしているので、はてなを付けました。

もともと制作会社に3年いて、フリーランスを7年やって、DeNAに3年いて、この間ここに来たというかたちです。こういう会社でこういうことをやってました。

まずデザインの話で、これは僕の好みの話なんですけれども、サービスの一番最初の段階はデザインするのが一番楽しい状況なので、それを思う存分楽しみたいという気持ちがあって。

前提条件とか制約を聞いてからサービスのデザインをしちゃうと、すごい幅の狭いデザインができてしまうと思っていて、サービスの概要、こういうサービスですというのを福崎から聞いたあとに、そういうサービスということはこういうデザインかな？　とか、こういうことができるのかな？　と想像しながら、最初にラフデザインをつくりました。

思いついただけ作る。メディア中心なのでメディアっぽくなっちゃうんですけれども、画像はこのくらいの大きさかなとか、画像だけで選ぶ感じかなとか、AbemaTVっぽい感じはどうかなとか（笑）。

（会場笑）

あとは探しやすい感じがいいのかなとか、いろいろ考えてからやり始めました。一番最初のデザインは楽しんで、まっさらな状態で広げるのがいいかなと思っています。

使いやすいこと、おいしいこと、楽しいことを実現できるUI

ここからちゃんとデザインをしていきます。いろいろな既存アプリから学ぶことも多いので、Uber EatsさんとかAmazon Prime Nowさんとか、honestbeeさんとか、いろいろチェックをしています。

このUIを我々のサービスでも使おうとかではなくて、メンタルモデル、すでに新しいサービスでもほかのアプリで常識とされている使い勝手や、ユーザーの期待値があるものであれば、その引用元を探すというかたちで見ています。

例えば、もろに競合しているサービスから学ぶべきこともあるかもしれないけれども、全然関係ないアプリから学ぶこともあるので、そういう目でもいろいろなアプリを見ています。

EC先進国中国のアプリもいろいろ見ました。

中国のアプリは日本のアプリとすごく違っていておもしろいので、あまりチェックしていない方もぜひ見てみてください。

僕なりに中国ショッピングアプリの特徴を探してみると、サービスカラーが全面的に出ていてそれぞれの企業で「緑！　黄色！　青！」みたいな感じとか、サービスのキャラクターがいたりします。犬とカンガルーとカバみたいな。

あと漢字ならではのレイアウトをしていて、この緑の、左側にタグがある中国のアプリはけっこう多くて、英語だとたぶん無理だと思うんですよね。漢字だから実現できているデザインで、これは日本だとあまりやっているところは少ないかなと思うんですけれども。

この3つのアプリどれも左側で漢字でタグ化しているというのをやっていて、いろいろ学ぶことはあるんですけれども、UIにおいては採用しませんでした（笑）。純粋におもしろいです。

あとはこぼれ話なんですけれども、いろいろなサービスを探す時にGoogle画像検索で「750×1334」というサイズで検索すると、いろいろ見つかってよいです。

こういういろいろなサービスを見てきて、どんな体験を提供したいかというのは言語化したほうがいいなと思って言語化してみました。

我々は「使いやすいこと・見つけやすいこと」が当たり前なんですけれども、使いやすいこと以外にも「おいしいことが期待できること」「おいしそう」「買い物自体が楽しいこと」とか、使いやすいこと、おいしいこと、楽しいことを実現できるUIを考えました。

何を買うか決めてはいないけどなんとなく食べたいものはある

それはどういう体験なのかなと考えた時に、「何を買うか決めてはいないけどなんとなく食べたいものはある」というのが我々の想定で。それは「何を観るか決めていないけどなんとなく観たいものはある」と同じだなと。これNetflixなんじゃないのかと。じゃあNetflixだなということで第1段のデザインが完成しました（笑）。

もともと一番最初のプロトタイプの段階だと、ダミーの文言とか画像でつくっていたんですけれども、本物の、これは我々のコンテンツのチームが実際に写真を撮ったり料理をつくったりしてコンテンツを用意しているんです。

こういうのを入れるとマージン（余白）の取り方であったり、色味であったりも全然変わってくるので、本物の写真でデザインするのはとても大事だなと思います。

ユーザーインタビューを通じてわかったこと

これでとりあえず1発目のデザインはできたので、ユーザーインタビューをしました。ユーザーインタビューはflintoを使って注文から受け取りまで、受け取りはクーラーボックスでこういう感じで届きます、みたいなかたちでやりました

デザインスプリントがわかる方はそれのday5（検証とインタビュー）のみを行うと思っていただけるとイメージしやすいかなと思います。

我々が達成したい項目を3つ「スプリントクエスチョン」っていうのですが、果たしてこのインタビューを通してユーザーに届いているか、実現できているかというのをこうしてペタペタ貼って調べるという方式でやりました。

そうすると大量の課題が浮き彫りになってくるんです。魚お任せセットというのがあったら、お任せはやだ、選びたいとか。高いか安いかわからないとか、いっぱい出てくるんです。

こういうのは、2通りの対応方法があると思っていて、ユーザーはこういうサービスがいいと言っているので、サービスはそのサービスを用意してあげるというのと、デザインを変えてユーザー側が期待するものに変えていくという2通りです。

まああとは「やらない」という3つ目の選択肢あるんですけれども（笑）。主にこの2つかなと思うので、デザイナーの役割としては両者ともにやるんですけれども、デザインで期待を合わせるというというほうをユーザーインタビューを経てやっていきました。

ユーザーの期待値をデザインで変える

例えば、ユーザーテストでわかったことで、おいしいことは期待できるけれども、値段が高そうという印象を与えてしまいました。

「おいしいことが期待できること」を提供したいので、それは提供できたんですけれども、今度は高いと思われてしまいました。

そこでカラーリングを大幅に変更して、黒をできるだけ落として、これで少し高級なサービスには見えなくなりました。カラーパターンもこういう感じで描きました。

あと商品の陳列順もサービスのイメージに大きく関わるかなと思って、例えば一番最初に高級な牛肉が出てくるのと野菜が出てくるのではだいぶ印象も違うので、陳列順も変更しました。

今サービスが出たてなので、やってみてどう思われるか、どう買われるかというのを見ながら、どんどん変更していこうと思っています。

下の画像にあるのはスーパーマーケットの陳列のノウハウです。これはまったく役に立っていないんですけれども、すごいおもしろくて、このコーナーに置くと何パーセントの人の目に入っているとかもあるので、役には立たないけどおもしろいのでおすすめです（笑）。これから役立てるかもしれないですね。

ユーザーテストによってミクロで何をやるべきなのかが明確に

ただユーザーテストでわかったことその2としては、食材セットというのを我々はやっています。

例えば「カレーがつくれるセット」で「ニンジンとジャガイモと牛肉」が届くようなものです。もともと左側のデザインがカートになっていて、カレーセットはわかるけれども、これにはお米が含まれるか、ジャガイモが含まれるのかわからない。

商品詳細にいけばわかるけど、カートでわからないというのが課題として浮き彫りになりました。今実装されているデザインでは、カートの中で、ガパオライスは今売っていないんですが、ガパオライスの中にはひき肉、たまねぎが入っていますよみたいなことがわかるようなデザインに変更しました。

あとは、受け取りまで混載だと思わなかったと。

混載というのは、先ほど長野から説明もあったように、いろいろなユーザーの商品が同じ箱に入れられている状態で、もともとユーザーが期待していないものでした。

その期待値を合わせるために、これがベストな方法だとはあまり思っていないんですけれども、パネルで説明をしたり、チュートリアルのアニメーションでできるだけわかりやすく、いろいろなところにこういう感じで入るよみたいなものを表現して、課題解決に努めました。

インタビューすることで、マクロでいうと事業の仮説検証はわかるんですけれども、ミクロだと何をやるべきかというのがわかりやすくなります。

ユーザーインタビューで出てくるのは「そんなことを思っていたのか！」みたいなびっくりするようなものはあまりなくて、まあそうだよねみたいなのはわかるんですけれども、そのなかでも多くの人が言っていると、やっぱりそれは解決しなければいけない問題なのかとか、これはある程度おいといていいのかみたいな優先順位をつけやすくなるので、いいかなと思いました。

ゴールに向かって同じ目線になるように調整する

そしていよいよ実装です。デザインは私が機能盛り盛りでデザインをしたので、実際いきなりリリース時に盛り盛りのデザインを実装するのは難しく、断捨離をしていきます。

すり合わせ隊というのがありまして、これはチームで集まって話しているところなんですけれども、Googleカレンダーですり合わせ隊で検索したらいろいろなすり合わせ隊が出てきて、アプリすり合わせ隊とか、QA結果読み合わせ隊とか、こういうのもやっております。

すり合わせ隊とは何かなんですけれども、我々がつくっているもののゴールの目線を合わせていくと。開発もデザインも運用をやっているところも、食材を調達するところも、全員の目線を合わせていくのがすり合わせ隊です。

スケジュールとかすごい雑で、これひどいんですけれども、このくらい？　みたいな。QAここらへん？　みたいな。無理！　とか。

（会場笑）

すごいですよね（笑）。怒られるようなスケジュールの書き方をしていまして、でもゴールイメージはきちんと合わせるというところを徹底していて、これはすり合わせ隊のKPTです。

すり合わせ隊よかったよね、みたいな話を振り返った紙なんですけれども、デザインレベルがよかったよねとか、すり合わせ隊が機能したとか、ゴールイメージがすり合わせできるよねみたいな話が出ていました。

デザインレビュー（すり合わせ隊）は今はやっていないんですけれども、都度必要な時に週1回ぐらいやって、こういうディスプレイが使えない時はSlackの画面共有機能を使ってやったりとか、ひっかかればその場で何度でも議論するというのがすり合わせ隊の進め方でした。

デザインと開発のすり合わせについて

基本的にデザインすり合わせ隊では、私がsketchを使ってプレゼンをしていくという方法なんですけれども、もうその議事録もsketchに書いちゃう方式にしていました。

β版ではやらないよとか、ここはタップできないよねみたいなことを、その場で確認事項だったり議論があったりしたことは全部sketchに書いていきます。

これは僕のやり方であまりおすすめしないんですけれども、「汚い言葉で自らを罵倒していくスタイル」でやっていまして、例えばこの画面、「二重のオーバーレイってアホか」「このUIだとレビュー掲載できない。後々のことちゃんと考えろ」とか、こうやると僕は奮い立つタイプですので、こういうやり方をしています。

あと、デザインと開発が五月雨で進むことが多々あるんですけれども、そうなるとどのデザインがフィックスしていないのかというのがわからないので、それも全部sketchに書いちゃいます。

いろんなツールを使う手もあるんですが、開発者の方にsketchの使い方を教えて、これが一番早いからこれでやらせてくれと、30分ぐらい説明したら「うん、わかった」みたいな感じでやってくれたので、今はこの方式を採用しています。

Flintoなんですけれども、これをつくるのはたぶん1時間ぐらいでできるんですけれども、いちいちやっているとめんどくさいので、これはこのボタンの高さがたぶん64ピクセルなんですけれども、64ピクセルがいいのか44ピクセルがいいのかとか、触って確かめたい時にだけFlintoを使っています。

繰り返しになりますが、ゴールの認識だけ合わせて、細かいどうやるかとかプロセスとか手段とかは、個々が判断できるような進み方にしましたというかなりましたという感じです。

機能の断捨離とすり合わせは、後からどんどん変わっていく

機能の断捨離の話なんですが、もともと盛り盛りのデザインではいろいろな機能があったんです。

検索できて、お気に入りできて、チャットで問い合わせができて。実際はそうはうまくはいかないので、最初はこれぐらいやりました、次これでやりましょう、というかたちで断捨離をしていきました。

あとは実装していくと、「シャドウだとどうやら動作が重いらしい」ということが分かりボーダー表現に変更したり、カートに入れる時に僕はどうしてもアニメーションがやりたかったんですけれどもそれはしんどいということで、タップした時にブルッと震えるようにしようとか、細かい変更も実装時に発生しています。

そして盛り盛りデザインでつくって断捨離をして、また盛り盛りデザインでつくって断捨離をして、いつかは押した時にピーっと入るアニメーションを入れてもらおうとたくらんでおります。

やんやありまして、デザインはいろいろ変わって、シャドウがついて、色味が変わって、ボーダーの色も変わって、パネルの色も変わって、このように着地をしました。

一度すり合ったと思っても、また新しい問題がどんどん出てくるんです。魚はその日にならないと仕入れがわからない問題とか、都市型農家がたまねぎを扱っていない問題とか、卵の輸送が難しい問題とか、いろいろ出てくるんです。

時価問題とか、朝採れ野菜の温度が高い問題とか、なんかいっぱい出てくるんです。新しい問題がどんどん出てきて、優先順位が変わるので、細かくすり合わせます。

そして細かいことは個々で判断できるように、ゴールをすり合わせていきましょうというのがすり合わせ隊の趣旨でございます。

キャラクターの話

時間は大丈夫ですか？　時間ですって書いてある！　もう少しだけ。

さっきからいるこの子なんですけれども、「トマート」とうクックパッドマートの公式キャラクターです。あそこのヒゲのデザイナーがつくりました。

もともとクックパッドマートというサービス名は、クックパッドという名前をどうしても入れたくて、そのほうがいろいろなステークホルダーというか、受け取り場所とか店舗さんとかの交渉に有利に働くだろうと思って、クックパッドを入れたんです。

そうすると、「サービスとしての印象に残るもの」を打ち出しにくいと。うーんどうしたものかと考えた時に、中国ショッピングアプリでキャラクターを使っていたことを思い出しました。

マートだからトマトでしょみたいな。人っぽいやつみたいな。なんか妖精っぽいやつ？　みたいな。

自分がやったんじゃないので、さっさと流したいんです（笑）。

最終的に中性的な男でも女でもないみたいな、人でも妖精でもない……妖精か。そんなキャラクターに落ち着いたので、これもちょいちょい小出しにして使っていこうと思っています。

長くなってしまいましたが、ありがとうございました。

（会場拍手）