対話のデザインプロセス〜Amazon Echoのスキル開発〜

f:id:transit_kix:20171121225937p:plain

デザイナー倉光です。先日ついに日本語に対応した Amazon Echo!エンジニア山田の記事に引き続き、今日は音声操作のデザインプロセスについて紹介します。

💬 Amazon Echoとは

f:id:transit_kix:20171121225949p:plain

Amazon Echoは、音声だけでリモート操作できるスマートスピーカーです。「アレクサ」と話しかけることで、様々なスキルを実行することができます。音声操作の特徴は「命令はことばで実行し、結果は音声で受け取る」こと。そのため、視覚や触覚の情報なしでもコンピューターと対話可能なデザインが求められます。

🍳 クックパッドのスキルについて

「使いたい材料だけで、すぐに作れる人気の料理レシピ提案」

このスキルでは、Amazon Echoを使って使いたい材料だけですぐに作れる人気の料理レシピを教えてくれます。

f:id:transit_kix:20171121225953p:plain

「晩ごはん用意したけどなんかちょっと物足りない...」 「冷蔵庫になすが余っているけど、スマホでレシピさがすのは面倒…」

そんな時は使いたい材料をクックパッドに呼びかけてください。クックパッドが材料にあった食べ方やレシピを一緒に考えて、今日作る料理を考えているあなたに提案します。レシピが決まったらiOS/Androidアプリへ自動でそのレシピを送信します。*1

✍️ 初期コンセプト

日々の料理に役立つスキルとしては、レシピ読み上げ/調理補助/ニュースなどいくつかの構想がありましたが、

  • 日常で繰り返し使える
  • インスピレーションを与えることで、「今日は料理するぞ!」というモチベーションを与える
  • クックパッド上にある278万品のレシピを活用

といった点を念頭に置き、検証活動を通し現在のスキルができあがりました。

[図]初期に構想していたユーザーストーリー図

f:id:transit_kix:20171121230007p:plain

🏃 Let's プロトタイピング

音声操作の可能性を探るために、さまざまな検証活動を行いましたが、その中で特徴的だったものを紹介します。

Case1. Alexaになりきる

登場人物は、作り手役とAlexa役の2名。作り手役は、Alexa役に話しかけてレシピを読み上げてもらいながら料理してみるといったもの。人間が擬似的にAlexa役をする*2ので、一行もコードを書かずとも検証可能です。(音声アシスタントの検証方法としては、相性が良いですね)

結果は…あまり芳しくはありませんでした。音声入力は便利でも、音声出力はやはり認知の面でハードルがあります。とはいえ実際に体験してみると、「食材を切って…と言われてもどう切るの?写真がないとわからない」「想像していた見た目と全然違った」など、何がどう不便なのかが可視化された点では収穫がありました。

Case2.音声対応レシピを自分で書いてみる

つぎに「音声で聴いた時に理解しやすい料理の表現とは何か?」を知るために、自分で音声対応レシピを書いてみました。以下は「ツナと枝豆のマヨネーズ和え」というレシピの手順です。音声で聞き取りやすいようリライトしてみると、いくつかの表現のコツが見えてきます。

f:id:transit_kix:20171121230000p:plain

クックパッドに存在するレシピは基本的に目で読み取りやすいフォーマットで書かれたレシピが大半です。先ほどのCase1の検証結果も合わせて、既存レシピをそのまま音声で読み上げるだけでは実際に料理をする行動まで導くことは現段階では難しいことがわかりました。

そのため、今回のスキルではAmazon Alexaは料理するきっかけを生み出す存在として捉え、全ての行動を音声で完結させるのではなく、スマートフォンのクックパッドアプリと連携することでユーザーの目的を達成する設計に変更しました。

Case3.いざ食材を目の前にすると、人々はどう行動するのか?

スマートフォンのクックパッドアプリと連携をするという方針も決まり、理想的な発話フローは設計できました。つぎに確かめたのは「スキルを使ってみようかなと思う場面に遭遇した時、人は何を話しかけるのか?」についてです。

開発中のスキルのユーザーテストを実施するにあたって、Amazon Echo/スキルページ…そしてちょっとした小道具を用意しました。

f:id:transit_kix:20171121230013p:plain

段ボールを横置きして食材を入れただけの簡易冷蔵庫です(紙で書いた冷蔵庫をつかうことをもありました)。こんな粗末な小道具でも、テストユーザーは真剣に食材と向き合ってくれて自由にAlexaに話しかけ始めます。

  • 「(スキル紹介ページを見ながら恐る恐る)アレクサ、クックパッドでアボカドでできる料理教えて…?」
  • 「アレクサ、高野豆腐で作れる料理を教えて…あ!クックパッドって言ってない!」
  • 「アレクサ、たまご わかめ スープ 作りたい」

数人のユーザーテストの結果、1つの問題が発覚しました。全員が複数食材からレシピを探す発話を試みたのです。当初このスキルはレシピ提案の精度の問題から食材1つだけからレシピを探す仕様だったのですが、複数食材対応の作業優先をあげて集中的に改良を加えることにしました。

なおリリース後の現在、ユーザーからの全発話のうち44%が複数食材からレシピを探すリクエストだったため、これは事前に発見できてよかった気づきでした。

💡 音声デザインのポイント

音声に関するデザインプロセスについては、amazonが提供している音声デザインガイドを一読していただくのが良いと思いますが、今回の開発を通して特にポイントと感じたのは以下です。

音声認識結果はユーザーにフィードバックしよう

音声操作UIはまだまだ発展途上であり、ありとあらゆる問いかけに万能に対応できるわけではありません。また、環境音やユーザーのイントネーションなど様々な要因で誤認識が発生してしまうこともあります。

ユーザーテストの中でも、ユーザーとアレクサが違う食材を想起したまま気づかず会話が進んでしまい、最終的にレシピを見たときに「間違ってた!」と気づく例もありました。

音声の認識結果は、「…ナスですね。それでは次の中から気になる食べ方を教えてください。」など、つぎの応答で伝えるなどの工夫をしましょう。

シングルタスク、シンプルセンテンス

音声操作UIは、人とコンピューターの対になる言葉のキャッチボールで成立します。そのためスキルの全体像を俯瞰して見るのは難しく、ユーザーは今この瞬間の応答に神経を集中しています。モバイルスクリーン上で動作するUIと違い、前の画面に戻る/中断/スキップといった行為が容易にはできません。3つ以上の長い文章が連なると、何をしていたのかわからなくなります。

極力シンプルなフィードバックを心がけましょう。前述のガイドラインでは「普通に会話する速度で一息にそのセリフを読み上げることができたら、適切なセリフの長さと考えてよいでしょう。」とされています。

人間味のあるセリフはほどほどに

実は開発当初は「人っぽい対話感」を重視するあまり、返答のたびに「それではこちらはいかがでしょうか?」といったコンシェルジュのような丁寧な問いかけを使っていました。

しかしスキルの利用回数を重ねると「もうわかってて、早く次の命令を出したいのに、話しかけるのを待たなければならない…」とWebページのローディング待ちのような苛立ちを感じるようになったため、あまり意味を持たないフィードバックテキストは極力カットしました。

…以上、是非Amazon Echoをお持ちの方はクックパッドを使ってみて、何か気になる点ございましたら是非私たちにフィードバックをいただければ幸いです。 それでは、皆さん楽しいスマートスピーカーライフを。

様々な領域でデザインしたい仲間を募集中です

クックパッドでは、新しい領域におけるインターフェイスデザインも手掛けたいデザイナーを絶賛募集中です。 こちらから是非コンタクトお待ちしています。

*1:こちらのスキルはクックパッドプレミアムサービスご利用の方に提供されております。プレミアムサービス会員ではない方も、クックパッドのスキルを使うとプレミアムサービスがご利用いただけるクーポンが発行されますので、ぜひこの機会にお試しください。

*2:サービスデザインの分野では、オズの魔法使いやアクティングアウトと呼ばれることもあります

クックパッドのAmazon Echo向けサービスをリリースしました 〜開発で得られた音声操作の知見〜

こんにちは。研究開発部エンジニアの山田(@y_am_a_da)です。ついに日本でも Amazon Echo の発売が始まりましたね。

今回は Amazon Echo 向けにリリースをしたクックパッドのスキル( Amazon Echoではアプリと呼ばずにスキルと呼びます)についての紹介と、開発をしてみてわかった音声操作の強みと弱みについて紹介をしていきたいと思います。

Amazon Echoとは

Amazon Echo は、Amazon 社の販売するスマートスピーカーです。声で命令をすることで、端末に内蔵されている Alexa と呼ばれる音声アシスタントが処理を行ってくれます。 特徴として、基本的に操作は全て音声で行い、レスポンスも音声で返ってくる点が挙げられます(海外では液晶が搭載されており、そこへレスポンスを返すモデルも存在します)。

すなわち、スキルの開発者は、 PC やスマートフォン上と違い、基本的には全てを音声のみで完結させる必要があるという前提で開発を進めていく必要があります。 この制約のもと開発を進めて得られた音声でのユーザーインターフェース、いわゆる Voice User Interface についての強みと弱みについて紹介をします。

Voice User Interface の強み

  • 情報の入出力が早い

端末を手に届く範囲に持ってくる必要がないため、使いたいと思った瞬間に命令を行い、その結果を受け取ることが出来ます。

  • 操作が直感的

音声アシスタントのインタラクションは基本的に人間を模倣しているため、人間とのコミュニケーションを取るように操作が出来ます。

  • ハンズフリー

入出力は音声なので、キッチンや車内、フィットネス中には嬉しい利点です。

Voice User Interface の弱み

  • 一覧性に乏しい

視覚での情報と比較して処理できる情報量は少ないため、一度に多くの情報を返す用途には向いていません。何かの検索結果を30件読み上げられる状況を想像してみるとその難しさがわかると思います。

  • 情報のフィルタリングが難しい

視覚的な情報であれば、慣れてくると流し読みのように必要な情報だけを受け取ることができるのですが、音声では読み上げ側に工夫をしないとこれが出来ません。

  • 全体のインタラクションはそこまで早くない

入出力こそ早いものの、出力された情報をフィルタリングすることが難しいことから、工夫をしないと全体のインタラクションは早くなりません。

また、強みか弱みかはケースバイケースなのですが

  • インタラクションは基本的に全てオープンである

という点も大きな違いです。

クックパッド 〜使いたい材料だけで、すぐに作れる人気の料理レシピ提案〜

上記の点を踏まえた上で、さらに

  • Amazon Echoは基本的に屋内、特に個人での購入であれば家に置かれることが多いだろう
  • 聞かれるタイミングは料理をする直前、もしくは最中である

という仮説を立てて、わざわざ買い物に行かなくてもすぐに料理を始められるよう、冷蔵庫にある食材1つだけで美味しい料理のインスピレーションを与えるスキルを開発しました。

スキルの具体例は、明日弊社デザイナーの倉光が投稿する記事にございますのでこちらでは省略致します。

現在プレミアムサービスユーザーでない方は、スキルの起動時にプレミアムサービスが最大2ヶ月無料になるクーポンをプレゼントしておりますのでこの機会にぜひお試しください。

工夫をした点

スキルを開発する上で意識をしたことを紹介します。

モバイルアプリの代替は目指さない

Voice User Interface の特性上、一貫した情報が取得しにくく、フィルタリングも難しいため一度に提供できる情報はかなり少ないです。また、スマートスピーカーはスマートフォンとハードウェアの特性が異なり、おそらく購入の用途も異なることが多いと思います。

そのため、スマートフォン用に提供されているモバイルアプリをそのまま移植しようとせず、音声操作の利便性をできる限り活かせるよう意識して開発を進めました。

インタラクションをできる限り減らす

せっかく情報の入出力が早いという利点を持つ Voice User Interface を使っても、インタラクションを増やしてしまうと全体としてはスマートフォンを使ったほうが早いし便利ということになりかねません。

そうならないように、クックパッドのスキルでは無駄なインタラクションを省きシンプルにすることを目指しました。これは、例えば読み上げる文章を短くするというだけのことではなく、そもそもスマートスピーカーには向いていないような機能は実装せず、できることを思い切って減らすということもしています。

例えば、何でも検索できるフリー検索機能でユーザーの望む検索結果を提供するためには、スキルは提案の量を増やすか聞かれた内容の意図を絞り込むためにユーザーに質問をする必要があります。これではユーザーに長い文章を我慢して聞いてもらうか、多くの質問に答えてもらうことが必要となってしまい離脱の原因となるおそれがあります。

聞かれた内容によって提案のフローを変える

無駄なインタラクションを減らしつつもできる限り多くのニーズに応えられるよう、聞かれた内容によってレシピを提案するロジック、インタラクションを変更しています。大まかには

  • 食材1つの場合 もともとのコンセプトである「使いたい材料だけで、すぐに作れる人気の料理レシピ提案」に準じて聞かれた材料だけで簡単に作ることのできるレシピを提案します。
  • 食材2 or 3つの場合 インスピレーションを得ることを目的としていると想定し、食材が1つの場合よりも幅広くレシピを提案します。
  • 料理名を聞かれた場合 その料理の作り方を思い出したい(もしくは知りたい)と想定し、その料理で一番人気のレシピを提案します。

これら3パターンにおいて、それぞれユーザーが聞く状況の仮説を立て、適切な提案ができるようロジックを組み立てています。 あくまでも仮説をベースとしているので、利用のされ方を見ながら検証と改善を進めていく必要があると思います。

このような工夫をすることで、モバイルアプリのような万能さはなくても、特定のシーンではより役に立てるよう意識しています。 PCとスマートフォンの関係のように、シーンごとに使い分けられる存在になることを目指しています。

日常的に使えるものを目指す

Amazon Echo には液晶が存在しないため、ユーザーはスキルのインストール時以外にそのアイコンを目にする機会がありません。

すなわち、一度ユーザーにスキルの存在を忘れられてしまうと再び見つけてもらうことが困難であるため、リテンション率が低くなってしまいます。 そのためにも、日常的に使ってもらうことでその存在を覚えていてもらえることを目指しました。

まとめ

いかがでしたでしょうか。スマートスピーカー向けに提供するサービスは、その制約の厳しさにより、ユーザーやその周辺情報へのより深い理解が必要となります。

今回は仮説と検証にもとづき開発を進めていきましたが、機械学習やIoTを活用することでよりユーザーフレンドリーなサービスを開発できる可能性があると考えています。弊社ではこのような課題を解決できる機械学習、IoTの知識を持つエンジニアを募集しています。 クックパッド株式会社 研究開発部 採用情報

明日は弊社デザイナーの倉光よりスキルの開発にあたって実際に行ったプロトタイピングなどについて紹介致します。

【出張開催レポ】Cookpad tech kitchen #11, #12 in 京都・福岡

こんにちは!人事部の冨永です。

2017/09/28~29の二日間に渡って、技術系イベント「Cookpad Tech Kitchen」を開催しました。クックパッドの技術的な知見を定期的にアウトプットすることを目的とする本イベント。#11, 12の今回は株式会社はてなさん(京都)とGMOペパボ株式会社さん(福岡)のお力をお借りして、京都・福岡での出張開催を実現しました!

テーマは一夜限りのPremium Talkと題して「各社開発の裏側」を発表。本イベントで初めて公開する情報や、ここだけでしか聞けない裏話など、興味深い内容が盛り沢山なイベントとなりました。

発表資料を交えてイベントのレポートをお届けします。

f:id:mamiracle:20171115180848j:plain

9月28日【京都開催 feat.はてな】Cookpad Tech Kitchen #11

f:id:mamiracle:20171115174411p:plain (Premium Talk in Kyoto)

京都のはてなオフィスにお邪魔しての開催。実は登壇者同士が学生時代のインターンシップ同期で良き仲間でありライバル(!)だったこともあり、和気あいあいとしながらも白熱した登壇となりました。

f:id:mamiracle:20171115174335j:plain (大盛り上がりだったQAディスカッションの様子)

それでは登壇内容をご紹介します。

「ScalaとPerlでMicroservices in production」中澤 亮太/株式会社はてな

1人目の登壇者である中澤 亮太さん(@aereal)は、アプリケーションエンジニアとしてご活躍されています。静的解析や静的型付けがお好きで、はてなブログチームのテックリードをお務めになられています。この日は、ScalaとPerlを使ったマイクロサービス化について登壇をしてくださいました。

speakerdeck.com

「イカリング2におけるシングルページアプリケーション」加藤 尋樹/株式会社はてな

2人目の登壇者である加藤 尋樹さん(@cockscomb)は、アプリケーションエンジニアとしてご活躍されています。モバイルアプリからWebサービスの開発まで積極的に取り組まれており、あの「イカリング2」の開発も担当されています。この日は、「イカリング2」の開発の裏側を教えて下さいました。

speakerdeck.com

f:id:mamiracle:20171115174355j:plain (美味しくておしゃれなケータリングに大喜び!)

はてなさんがいつもお世話になっているという京都のケータリングご飯を用意していただきました!発表を聞きながらでも楽しめるピンチョススタイルです。 イベントの後は、仕事終わりのはてなメンバーの方々と、行きつけだという居酒屋で打ち上げもしましたよ!はてなさん、ありがとうございました。

9月29日【福岡開催 feat.ペパボ】Cookpad Tech Kitchen #12

f:id:mamiracle:20171115174432p:plain (Premium Talk in Fukuoka)

翌日は、福岡のGMOペパボオフィスにお邪魔して開催!弊社社員は福岡初上陸のメンバーが多く、みんなのテンションが高かったことをよく覚えています。笑

f:id:mamiracle:20171115174808j:plain (こちらでもQAセッションが大盛り上がりでした)

それでは登壇内容をご紹介します。

「コンテナたちを計測すること - マネージドクラウドの今まさに開発中の裏側」近藤 うちお/GMOペパボ株式会社

3人目の登壇者である近藤 うちおさん(@udzura)は技術基盤チームに所属されています。mruby製のLinuxコンテナエンジン「Haconiwa」をリリースされたり、『パーフェクトRuby』『パーフェクトRuby on Rails』などを共著されたり広くご活躍されています。この日は、コンテナ計測について登壇してくださいました。

speakerdeck.com

「ムームードメイン ショッピングカート機能を支える技術」中村 光佑/GMOペパボ株式会社

4人目の登壇者である中村 光佑さん(@litencatt)ホスティング事業部ムームードメイングループに配属。Webサービス開発においてPHPやRuby、サービス知識など福岡支社の凄腕エンジニアたちに囲まれて日々多くのことを学ばれながら、毎日を全力で楽しんでいるそうです。この日は、ムームードメインに新しく追加されたショッピングカート機能の裏側についてお話してくださいました。

speakerdeck.com

f:id:mamiracle:20171115174515j:plain (ペパボさんのケータリングご飯もボリュームたっぷりで大満足!)

この日のご飯には、「minne」に出品されていたクラフトチーズも登場。お洒落で美味しくて感動の一言でした…。ペパボさん、ありがとうございました!

また今回、クックパッドからは2名が登壇しました。

「機械学習でサービスの常識を破壊する」杉本 風斗/クックパッド株式会社

サービス開発部エンジニアの杉本 風斗(@uiureo)。機械学習を使ったプロダクト開発に携わっています。入社当初はAndroid開発を担当するはずが、気づいたらPythonやRedshiftを使ったバックエンド開発が中心になっていたそうです。この日は機械学習を活用したクックパッドの新機能「料理きろく」について登壇しました。

speakerdeck.com

「巨大アプリにおける新規開発とチームビルディング」勝間 亮/クックパッド株式会社

現在サービス開発部長を務める勝間 亮(@ryo_katsuma)は、これまで新規事業、検索、投稿、会員事業などの部門での開発およびエンジニアリーダーを担当してきました。著書に「Webサービス開発徹底攻略」「すべての人に知っておいてほしいJavaScriptの基本原則」などがあり、この日は大規模なチーム開発におけるチームビルディングの方法について登壇をしました。

speakerdeck.com

f:id:mamiracle:20171115174454j:plain (楽しかった2日間の様子です♪)

まとめ

いかがでしたか?とても実りが大きい出張イベントだったため、また開催したいと思っています。次はどこの会社にお邪魔させていただこうかと考え中です…!

クックパッドでは毎月テーマを変えて技術イベントを開催しておりますので、ご興味のある方はイベント Connpassページをご覧くださいね。

▼イベントページ

cookpad.connpass.com

新しい仲間を募集中

クックパッドではレシピサービスの更なるパワーアップと、新規事業の開発に注力をしています!少しでも興味のある方は、まずお気軽にご連絡をお待ちしております!

■ Android アプリエンジニアの募集はこちら
https://cookpad.wd3.myworkdayjobs.com/ja-JP/jobs/job/-/Android---_R-000145

■ iOS アプリエンジニアの募集はこちら
https://cookpad.wd3.myworkdayjobs.com/ja-JP/jobs/job/-/iOS---_R-000162

■ Web アプリエンジニアの募集はこちら
https://cookpad.wd3.myworkdayjobs.com/ja-JP/jobs/job/-/Web--_R-000095

/* */ @import "/css/theme/report/report.css"; /* */ /* */ body{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527163350.png'); background-repeat: repeat-x; background-color:transparent; background-attachment: scroll; background-position: left top;} /* */ body{ border-top: 3px solid orange; color: #3c3c3c; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; line-height: 1.8; font-size: 16px; } a { text-decoration: underline; color: #693e1c; } a:hover { color: #80400e; text-decoration: underline; } .entry-title a{ color: rgb(176, 108, 28); cursor: auto; display: inline; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; font-size: 30px; font-weight: bold; height: auto; line-height: 40.5px; text-decoration: underline solid rgb(176, 108, 28); width: auto; line-height: 1.35; } .date a { color: #9b8b6c; font-size: 14px; text-decoration: none; font-weight: normal; } .urllist-title-link { font-size: 14px; } /* Recent Entries */ .recent-entries a{ color: #693e1c; } .recent-entries a:visited { color: #4d2200; text-decoration: none; } .hatena-module-recent-entries li { padding-bottom: 8px; border-bottom-width: 0px; } /*Widget*/ .hatena-module-body li { list-style-type: circle; } .hatena-module-body a{ text-decoration: none; } .hatena-module-body a:hover{ text-decoration: underline; } /* Widget name */ .hatena-module-title, .hatena-module-title a{ color: #b06c1c; margin-top: 20px; margin-bottom: 7px; } /* work frame*/ #container { width: 970px; text-align: center; margin: 0 auto; background: transparent; padding: 0 30px; } #wrapper { float: left; overflow: hidden; width: 660px; } #box2 { width: 240px; float: right; font-size: 14px; word-wrap: break-word; } /*#blog-title-inner{*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-position: left 0px;*/ /*}*/ /*.header-image-only #blog-title-inner {*/ /*background-repeat: no-repeat;*/ /*position: relative;*/ /*height: 200px;*/ /*display: none;*/ /*}*/ /*#blog-title {*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527172848.png');*/ /*background-repeat: no-repeat;*/ /*background-position: left 0px;*/ /*}*/