🍛: CoCo壱番屋アプリの注文体験をネイティブUIで再設計してみた

CoCo壱番屋の新しいモバイルアプリ体験を想定して、注文UX/UIの試作をしてみました。 本ページでは試作に対するモチベーション及びアウトプットの内容を整理して紹介します。

なぜこの試作をしたのか

CoCo壱番屋は本社を愛知県一宮市に置く、カレー専門店チェーンです。(超有名なので後は説明不要)
そして筆者(@shamaton)は同市出身なのですが、たまたまアプリをダウンロードしたことがきっかけでした。AppStore でのレビューは厳しい評価が多く、実際に触ってみた私も面食らう経験をしました。

地元を代表する会社のアプリ、、、もっとよくできるはずという思いもあって、どこがどうなっているのかを自分なりに分析してみたくなりました。ストアにあるレビューを見てみたところ、いくつかの問題に整理できることがわかりました。

• 注文不具合
• 2重アカウント登録
• Webベースの動作
• クーポン導線がわかりにくさ

不具合やアカウント登録については、「修正する、アカウントを整理する」という明確なゴールがあるため今回は触れず、UI/UXの観点で「Webベースの動作」と「クーポン導線がわかりにくさ」を中心に、モバイルアプリとしての注文体験を改善し、「カレーを選び、注文を組み立て、安心して完了できる体験」が気持ちよくできることを目指します。

X(Twitter)にいくつかの動画に分けて試作内容を投稿していたので、この記事ではその流れに沿って、今回の試作で何を考えたのかを紹介します。

1. 全体の流れ

まず最初にホーム画面から注文完了までのざっとした流れです。 ホーム画面 → メニュー → 店舗設定 → カレーのカスタマイズ、注文完了という流れになっています。 特に今回は、以下のような体験を目指しています。

• ホームから自然にメニューへ入れる
• 商品選択後、すぐ注文の検討に進める
• カスタマイズしない場合もスムーズに注文できる
• 最後に注文できたことが明確に分かる

動作はスムーズにページが進んでいるように注文の主導線を止めないようにしました。 おそらくアプリを起動して一番確認したいのは「今日はどのカレーにしようかな」という気持ちからメニューを選択すると思うので、ホーム画面にはメニューボタンを配置しています。

「今すぐ注文したい」という気持ちを邪魔しないことが重要だと考えました。
(店舗設定については店舗のQRコードを読んで店舗設定をするというパターンもありそうですが、今回は割愛しています。)

2. オーダー開始の流れ

次はオーダー開始部分を見ていきます。上記の動画ではホームからメニューへ進み、店舗選択を挟み、戻る操作や再選択をしながら注文を始める流れを紹介しています。

今回の試作では、アプリ起動直後に必ず店舗選択を強制するのではなく、まずメニューが見られるという構成にしています。 ユーザーはおそらくはすでに店内にいるか、最寄りの店舗で注文するケースが多いのではないかと想定しています。 とはいえ、逆のパターン(店舗選択 → メニュー)でも進められるようにしています。

順序はどちらでもOKですが、実際に注文を進めるには店舗コンテキストが必要です。
ですので、注文に入るタイミングで店舗選択をゲートとして挟む設計にしています。

この流れで検証したかったのは、次の点です。

• 店舗未選択でもメニュー閲覧はできる
• 注文へ進む瞬間に店舗選択を求める
• 戻る操作をしても、ユーザーが今どこにいるか分かる
• 2皿目追加やキャンセルも自然に扱える

店舗選択を「最初に必ず通る壁」にするのではなく、「注文可能な状態に入るための文脈設定」として扱うことを意識しました。キャンセル時には店舗設定のリセットも含めて行う形としています。

3. カレーのカスタマイズ

今回の試作のメインといってもよい、カレーのカスタマイズ部分です。 CoCo壱番屋のカレー最大の魅力は、豊富なメニューとトッピング、辛さをお好みにカスタマイズできるところです。

ただカスタマイズ要素が豊富なため、すべてを一度に見せると操作が重くなり、ユーザーのストレスにつながります。
そのため今回の試作では、カスタマイズを段階的に進める構成にしました。

特に意識したのは、次の3点です。

• 今のカレーのカスタマイズの状況がすぐに分かる
• 選択によって価格がどう変わるかが分かる
• トッピング追加や変更が楽しく、かつ迷わない

カスタマイズは、単なるフォーム入力ではなく「自分の注文を作っている感覚」が大事です。
そのため、選択時の反応や、決定後に内容を見直せる流れも含めて試作しました。カレーソースやトッピングは選択状態がわかるようにアニメーションをいれ、ライスの量や辛さは複数のUI操作で選べる形にしています。価格表示にもアニメーションをいれました。

トッピングを選択して決定した後、変更したければ決めたものを変えられます。動画内では削除していませんが、削除も可能です。
このあたりは、実際の注文でも当たり前に行われる操作として試作でも実装しました。

4. お気に入りとクーポン

ユーザーによっては、お気に入りの一皿を毎回頼みたいというニーズがありますよね。例えばライスは 400g で辛さは 5辛 でトッピングはアレとコレ…というのを毎回設定して注文するのは面倒です。

そこでお気に入りの機能です。こちらは「Myメニュー機能」として公式でも案内されていますが、体験を作る上で欠かせない機能として試作に入れました。

1皿目をお気に入りから注文 → 2皿目をカスタマイズして追加注文 → クーポンを適用 → 注文確定 → お気に入り登録
という流れで、リピート注文とクーポン提案の扱いを検証しています。

CoCo壱番屋のようにカスタマイズ性の高い注文では、「いつもの組み合わせ」が価値を持ちます。毎回ゼロから辛さや量、トッピングを選ぶのではなく、保存済みの組み合わせから始めて、必要なところだけ少し変えられると便利です。今回はいつもの組み合わせにトッピングを少し変えたいというケースを多く想定し、お気に入り選択後はトッピングに遷移するようにしました。

クーポンについては、主導線を邪魔しない形にしてみました。

クーポンを探すために注文の流れから離れるのではなく、注文確認の文脈で「この注文に使えるもの」を自然に提示する形にしています。
使えるかどうか分からないクーポンを探させるより、注文内容に合うものを表示する方が、体験としてはスムーズでは？という提案です。 （クーポンがあるから、これを頼むというケースもあると思いますが、今回の試作には含めていません）

お気に入りや、クーポンという要素は、それぞれ単体では便利ですが、出し方を間違えると注文体験を複雑にしてしまいます。 今回の試作では、それらを注文の流れの中に組み込むことで自然な注文が可能かを試しました。

デザインについて

筆者は UI/UX のプロフェッショナルではありませんが、試作の見た目として、温かさ、分かりやすさ、ネイティブらしさを意識しました。

目指したのは、高級レストランの予約アプリでも、クーポン配布アプリでもありません。
「カレーを選ぶ時間が少し楽しくなる、温度感のあるモバイルUI」です。

色はアイボリーやカレー色をベースにし、価格や主要なボタンはしっかり目立つようにしました。一方で、透明感やガラス表現は冷たい印象を持つため、情報の階層を整理するための補助として扱っています。

注文アプリでは、見た目の新しさだけでなく、次に何をすればよいかがすぐ分かることが重要です。そのため、店舗、商品、金額、次のアクションが常に見えるようにしています。 またページ遷移を行う主要なボタンは画面下部に配置し、操作のストレスがないようにしました。

まとめ

今回のPoCでは、実運用の注文システムを作るのではなく、モバイルアプリとしての注文体験に集中しました。

ホームからメニューを見て、店舗を選び、カレーをカスタマイズし、クーポンを自然に使い、明確に注文完了する。この一連の流れをネイティブUIとして組み直すだけでも、体験の印象は大きく変えられそうです。

公式アプリもネイティブ実装され、楽しくサクサクと注文体験が行えるように改善されることを願っています。

ここまでお読みいただきありがとうございました！
@curryichibanya に届きますように🙏