こんにちは、sparkgeneです。

10月にGoogle Home。11月にAmazon Echoとスマートスピーカーの日本上陸が続きました！

これに伴い、弊社の料理レシピサービス『ゼクシィキッチン』をGoogle HomeとAmazon Echoに対応させましたのでご紹介します。

まずはこちらのデモ動画を御覧ください。

動画の中に登場するGoogle HomeとAmazon Echo(Echo Dot)の様なスマートスピーカーをご存じない方に簡単に説明するとそれぞれの特徴は以下の通りになります。

Google Home

Googleが開発したスマートスピーカー。グーグルホームはユーザーが音声コマンドを喋ることで搭載されている「Googleアシスタント」を通じてサービスを起動させる事ができる。

Google Homeウィキペディア

Amazon Echo

Amazonが開発したスマートスピーカー。エコーはアレクサ・スキルキットで作成されたスキルにアクセスできる。これはサードパーティーが開発したボイス体験があり、アレクサ対応のどのデバイスにも導入できる。

Amazon Echoウィキペディア

ゼクシィキッチンとは

• https://zexy-kitchen.net/

ゼクシィキッチンは、すべてのレシピがプロの解説動画つきで見られるというのが特徴です。

今回スマートスピーカ向けに開発をすすめる際に、ゼクシィキッチンでは「今日何作ろうかな？」と毎食の献立を考えるのが大変と思っている人が、気軽に目的のレシピを探せるようなアプリを目指して音声UIの設計をしました。

2つのプラットフォーム向けに開発しましたが、全く同じものを提供しているわけではなく、プラットフォームに合わせて作りを変えています。何故作りを変えているかというと、それぞれのプラットフォームで出来ることが違うこともあり、その中でユーザーの体験をより良くするために変えています。

Google Assistantについて

• ゼクシィキッチンのAction

Google HomeではActions on Google¹⁾https://developers.google.com/actions/を使ってGoogle Assistant向けのアプリを作る事ができます。Google AssistantはGoogle Homeだけで利用できるわけではなく、スマートフォン向けのアプリ上でも利用することが可能です。

Androidであれば、6系、7系OSに搭載されており、iPhoneではGoogleアシスタントというアプリが用意されています。

Google Homeでは音声によるやり取りだけに完結しますが、スマートフォンの場合チャットのようなUIで音声と手入力のどちらでも利用することができます。

さらに、テキストのみのやり取りだけではなく、リストやカルーセルのなどリッチなUI²⁾https://developers.google.com/actions/reference/nodejs/AssistantAppを表示することが可能です。

このように画像も含まれており、タップするとゼクシィキッチンのサイトが開きます。そこから材料を確認したり、料理の手順を動画で見たりすることができます。

レシピを探すという行為を行うのであれば、音声で大量のレシピを読み上げられるよりも、画像つきで一覧表示してくれたほうが、ユーザーにとって分かりやすいですので、スマートフォン向けの機能はそのように開発しました。

Amazon Alexaについて

• ゼクシィキッチンのSkill（Alexa Appのアカウントが必要です）

Amazon AlexaではAlexa Skills Kit³⁾https://developer.amazon.com/ja/alexa-skills-kitというものを利用して、Skill（アプリ）を開発して音声でのやり取りを可能にしています。

現在日本で販売されているAmazon Echoなどはディスプレイを持たないデバイスのみの為、音声を中心としたUIを考える必要があります。ただ、Alexa Skills KitにもAlexa Appと呼ばれるAmazon Echoの管理が行えるアプリ上に、UIを表示するcard⁴⁾https://developer.amazon.com/ja/docs/custom-skills/best-practices-for-skill-card-design.htmlと言うものもありますので、これを使うこともできます。

しかし、表示できるのは１つの画像のみの為、一覧表示での利用は難しく、レシピを選んだ後の詳細表示の時にだけ、画像を表示するようにしています。また、表示したレシピをタップしてもゼクシィキッチンのサイトを開くことができなません。

このように、Amazon Alexaの方では現状だと音声UIの方が色々出来る（日本ではまだ使えない機能はありますが）ということもあり、レシピの手順や材料も音声で聞くことが出来るような作りとなっています。材料については、その情報を元に買い出しに行けるように、Alexa Appにも表示するようにしています。

Alexa Skills kitでは買い物リストへのアイテムの追加も可能ですが、１個づつのため食材のよう大量に追加する場合は、処理時間など考えると現実的ではないため、Alexa Appに表示する方式にしています。

アメリカではEcho Showの様にディスプレイを持ったデバイスが発売されています。将来的に日本にもこのようなデバイスが来ると、ゼクシィキッチンのSkillもそれに合わせて、画像付きの一覧表示や動画の再生にも対応することで、より使い勝手の良いSkillへバージョンアップしていこうと思っています。

まとめ

冒頭で書いたように、ユーザーが少しでも簡単に目的のレシピにたどり着けられるように、それぞれのプラットフォームで出来ることやUIをうまく使い分けながら開発しました。

個人的に考える最終的なゴールは、音声でキッチンに置いてあるデバイスを操作しながら、手順の動画を見たり、調味料の分量を確認したり出来るようなアプリが作れると良いのかなと思います。将来的には、スマート家電となった調理器具を、音声やレシピから操作しながら料理が出来る様になると良いですね。