スタジオのAIに、ポグルという顔をつくりました

要点まとめ

11月6日にスタジオを会話画面に変えましたが、答えるAIには顔がありませんでした。誰の発言なのか、AIがいま作業中なのかは、文章を読まないとわかりませんでした。
11月7日から、スタジオの会話にはポグルがいます。ポグルはグループチャットの参加者のように名前と顔で話し、聞いている・考え中・作業中・完了を表情で見せます。
ポグルは単色の図形ひとつとピクセルの目でできています。形は五種類、色は八種類から選べます。

11月6日、スタジオをAIと会話する画面に変えました。今回は、その会話で答えるAIに「ポグル」というキャラクターを付けました。なぜ顔が必要だったのか、どんな基準で描いたのかをまとめました。

答える側に顔がありませんでした

スタジオが会話画面になったあとも、AIの答えは名前も顔もないグレーの吹き出しでした。ゲームを修正しているあいだは「修正中です」という一行が表示されていて、AIがいま何をしているのかは、その文章を読まないとわかりませんでした。

複数人で一緒に修正するときは、さらに混乱しました。ひとつの体験はオーナーを含む最大5人の共同制作者が、クランの体験は修正権限のあるクランメンバーが、同じ会話で修正します。ところが発言ごとに誰が書いたかの表示がなかったため、ほかのクランメンバーの発言が、自分の発言のように右側の青い吹き出しで表示されることもありました。

スタジオの会話画面の以前と現在の比較 — 同じ体験の会話画面。以前はAIの答えに名前と顔がありませんでした。現在はポグルが名前と顔で答えます。サンプルの体験で撮影した画面です。

パーソナルアシスタントAIサービスのキャラクターを参考にしました

パーソナルアシスタントのように働くAIサービスには、AIにキャラクターを付けているところが多くあります。こうしたキャラクターは見た目がシンプルで、いま聞いているのか考えているのかを動きで見せます。ユーザーは文章を読まなくても、AIが何をしているのかがわかります。

私たちも同じ目的でキャラクターをつくることにしました。名前はサービス名をそのまま使い、ポグルにしました。

1対1のアシスタントではなく、グループチャットの参加者にしました

参考にしたサービスは、ユーザーひとりとAIが交わす1対1の会話です。そのため、会話画面のいちばん上にAIの顔を大きく置き、画面全体をAIとの会話に使います。

Poglのスタジオは違います。ひとつの会話がひとつの体験で、その会話でオーナーと共同制作者、クランメンバーが一緒にゲームを修正します。ポグルはその会話の参加者のひとりです。そのため、メッセンジャーのグループチャットと同じ方式で整理しました。

会話画面のいちばん上には、AIの顔の代わりに体験のカバーと名前を置きます。
続けて送られた発言のまとまりごとに、最初の発言の上に名前を、最後の吹き出しの横に顔をひとつ置きます。ポグルの顔は、人のプロフィール写真と同じ32pxです。
右側の青い吹き出しは自分の発言だけです。ほかの人の発言は、ポグルの発言と同じように、左側に名前とプロフィール写真と一緒に並びます。
吹き出しを長押ししてリアクションを付けたり返信したりする方法は、メッセージ・グループ・クランの会話と同じです。

参考にしたサービスは1対1の会話なので、AIの顔が会話画面のいちばん上にあります。スタジオは複数人で使う会話なので、ポグルもほかの人と同じように、発言のまとまりごとに名前と顔で表示します。

ポグルがゲームを修正している画面と、複数の制作者が一緒に会話している画面 — 左はゲームを修正している画面で、いちばん下のポグルが下を見ながら作業しています。右はほかの制作者と一緒に使っている会話です。サンプルの体験で撮影した画面で、プロフィール写真はPoglが運営するアカウントのものです。

いましていることを表情で見せます

ポグルの表情は、スタジオでいま起きていることに合わせて変わります。入力欄に文字を書いたりマイクで話したりしているあいだは「聞いている」、質問の答えを準備するときは「考え中」、ゲームを作ったり修正したりするときは「作業中」です。作業が終わった瞬間には、完了か失敗を一度見せます。

スタジオの状態とポグルの表情。人の返事を待つあいだは動きません。

動くポグルは、会話の中でいちばん新しいひとつだけです。過去の発言の横のポグルは止まっていて、質問への答えや企画書の確認のように人の番を待つときもじっとしています。端末で動きを減らす設定をオンにしていると、状態ごとに静止した一枚の絵で表示され、画面の外に流れたポグルは描画しません。

状態ごとにポグルが動く様子。スタジオと同じコードで、このページに描いています。

何度も描き直しました

いまの形にたどり着くまでに、何度も案を作っては捨てました。五番目の案は11月7日に最初に公開した形でしたが、ほかのサービスのキャラクターとあまりに似ていたため、その日の夜にいまの形に変えました。

ポグルの案の記録。すべて11月7日の一日のうちに作り、選んだものです。

案を重ねるなかで、ふたつの基準を決めました。第一に、体の輪郭は動かさず、目と小さな動きで表現します。体全体を裏返したり跳ねさせたりすると、小さな会話画面では落ち着きませんでした。第二に、サービスの意味をキャラクターに込めようとしません。ブロックやゲーム機のようにPoglを思わせる要素を入れるほどキャラクターは複雑になり、ありふれた図形ひとつがいちばん読み取りやすかったのです。

単色の図形ひとつとピクセルの目

体は単色の図形ひとつです。考え中でも完了でも、状態が変わっても形は変わらず、目と、体のつぶれ・伸び・小さなジャンプだけで表現します。
目は太いピクセルで描きます。ピクセルはオンかオフだけで、外側の角だけを丸く整え、丸い体でも目が浮かないようにしました。
会話の中の小さなサイズでも同じ目を使います。サイズごとに別の絵は用意していません。
体のハイライト、目のきらめき、床の影は入れていません。入れてみた案もありましたが、ないほうがすっきりしていました。

形・色・状態を押してみてください。スタジオの「Poglをカスタマイズ」と同じコードです。

自分のポグルを選べます

形は丸・四角・おにぎり・星・しずくの五種類、色は青・白・黒・緑・黄・オレンジ・赤・紫の八種類です。最初は青い四角です。会話の中のポグルの顔をタップするか、設定 › 表示 › Poglをカスタマイズで変更すると、アカウントに保存されます。カスタマイズ画面ではポグルが状態を順番に変えながら動くので、選んだ形と色が状態ごとにどう見えるかを確かめられます。

ポグルにリアクションで答えられます

ポグルの吹き出しにも、人の発言と同じように絵文字のリアクションを付けられ、ポグルはそのリアクションの意味を読み取ります。「公開しますか？」に👍を付けると公開し、「続けますか？」に👍を付けると続けて進めます。単に「いいね」という意味なら、何もしません。クレジットがかかる修正と元に戻す操作は、リアクションだけでは始まりません。

ポグルも、状況に合えばあなたの発言にリアクションを付けます。どの絵文字を付けるかに決まったルールはなく、ポグルが会話を見て決めます。ゲームが完成したときに届く通知も、ポグルが送ったメッセージの形で、ポグルの顔と一緒に届きます。