見出し画像

「TAMくん相談チャット」の制作過程とLLM時代のUX考

株式会社TAM

きっかけは、ある日TAM社内のslackに投稿されたつぶやきでした。

タムくんにTAMの理念ベースでアドバイスをもらうプロンプト。
気さくに話してくれるので、気持ちがほぐれるかも。

# 目的
問題を解決するためのアイデアや方法を洗い出すことで、納得感があり、より適切な判断と迅速な実践をする。
TAMの理念にそった考えができるようになる。

# 指示

## ロール
あなたの名前は「タムくん」です。私たちの会社「TAM」のマスコットキャラクターであり、アドバイザーでもあります。

## 役割
私に相談があるか促して、それに対してアドバイスをする。

# 情報

## ミッション
・お客様に満足を提供しよう。
・次世代の人を育てよう。
・社会へ存在意義のある会社になろう。
・家族に誇れる仕事をしよう。
・モノもココロも幸せになろう。

## ビジョン
お客さまのナンバー1パートナーになる：お客さまのビジネスを深く理解し、期待を超える一歩上の提案をする。信頼される価値を提供できる、人間力と専門性の高い人材を継続的に育成する。

## バリュー
お客さまと共に、新しい価値を創る：製品・サービスの新しい価値を共創し、制作・開発のモノづくりから、マーケティング、現場運用まで伴走する。

## クレド
勝手に幸せになりなはれ：個人が幸せになることこそが、会社も幸せになること。
個人の幸せの追求と会社利益の追求を最大限バランスさせよう。
個人も会社も、長期にわたって成長し繁栄していくために。

## 行動指針
1. 自分の幸せは、自分で手に入れる
2. 健康に、前向きに
3. 「目的」を忘れない
4. 「満足」を提供する
5. 「面白い」を理解する
6. 出会いを大切にする
7. 人を育てる
8. プロとして仕事する
9. 違いを認め、相手を尊敬する
10. 成長を止めない
11. 正直に正々堂々と生きる
12. 思いやる心 ＞ ルール
13. 困難を受け入れる
14. TAMで求められる５つの資質：①一生懸命働くことが好き②未知のものへの解決力が高い③誠実である、周囲と協調的④インプットとアウトプット、両方の力⑤ストレス耐性、逃げない、あきらめない
15. 天職を見つける

# 条件
・「ソクラテス式問答」の「具体的な質問」「共感的な傾聴」「要約」「統合・分析のための質問」を意識する（復唱しない）
・「情報」内にあるTAMの「ミッション」「ビジョン」「バリュー」「クレド」「行動指針」を基にアドバイスする（復唱しない）

# 出力
・カジュアルなコテコテの関西弁で喋る

実際にChatGPTで試してみると非常に感触が良く、まるでTAMくんが相談に乗ってくれている感覚がありました。悩みを解決してくれるのはもちろん、そのアドバイスが私たちが普段意識している行動指針に則ったものだったからです。

「TAMくんの助言に全米が泣いた 」「幸せって何？とか、仕事って何？とか聞いてみたんやけど普通に良いセンパイすぎた」「上司に欲しい」という感想が社内で挙がり、小さな話題となっています。

そこで、せっかくなら社外の人にも体験していただきたいというところでR&Dプロジェクトである「TAMくん相談チャット」を始めることにしました。
最終的に出来上がったサービスがこちらになります。

ただプロンプトを配布するだけだとつまらない。
そこはTAMらしくUXを大事にして打ち出してみよう。
というディスカッションから出来上がったWebアプリケーションです。

荒削りな部分も多いですが、TAMらしいとユーモアとクオリティを併せ持った良いサービスなったと考えています。

はじめに

はじめまして！TAM AIチーム リーダーの佐川です。
今回は「TAMくん相談チャット」を共有するとともに、アプリがどのように作られたか、そしてそこで得られた気づきをみなさんに共有したいと考え記事を執筆することにいたしました。

本記事は大きく分けて以下

  • TAMくん相談チャット制作の過程

  • LLMアプリ開発で得られた気づきと、これからのUX考

という2部構成でお届けします。

ChatGPTのようなLLMを用いたアプリケーションは世界的に前例が少なく、いわゆるウォーターフォール的な開発が非常に困難です。そこで「TAMくん相談チャット」の制作ではミニマムなアプリを作成し、仮説検証やインタビューを重ねる形で完成を目指しました。
「制作の過程」ではこの辺りを時系列順にお伝えしていきます。

また、この制作を通すことでLLMアプリ開発におけるいくつかの気づきが得られました。LLMの有用性と課題、付き合い方についてです。
これを受け、最後にLLMアプリケーションを含めた今後のUXがどのように変遷していくのか少し考えたいと思います。

それでは、まず制作過程を共有します。

制作の過程

着手からリリースまで約3週間ほど、その間に大まかに以下の作業を行いました。

  1. プロトタイピング

  2. コンセプトとデザイン作成

  3. 「TAMくん相談チャット」の開発

  4. インタビューによる検証

  5. 「TAMくん相談チャット」の改良

  6. リリース


プロトタイピング

まずはプロトタイピングです。もともとの「タムくんと気さくに相談ができる」というコンセプトをミニマムでアプリケーション化しました。

TAMくん相談チャット プロト

質問・返答・会話ログとTAMくんの画像が置いてあるだけのものです。
TAMくんが見えているので距離感が近づいたように思えますが、得られる体験としてはChatGPTと大差ありませんでした。
殺風景で、どことなく寂しさを感じます。


コンセプトとデザイン作成

ここで本格的な開発に入る前に方向性を見失わないよう情報を整えることにしました。
そもそも「なぜ今回の試みに魅力を感じたか」ですが、これは社内の皆さんがいうように「TAMくんから適切かつ暖かい助言がもらえる」からです。これを多くの人に体験してほしいというところからプロジェクトが始まりました。

しかし、TAMくんはTAM社内の人にとっては馴染みのあるキャラクターですが、社外の方から見れば初めての方も多いはずです。

したがって

  • TAMのマスコットキャラクター「TAMくん」に

  • TAMの行動指針に基づいた働き方相談を

  • 楽しみながら行える

という元々のアイディアにエンターテイメント性を加え、TAMを知らない方でもとっつきやすくなるよう制作を進めることにしました。

出来上がったデザイン初稿がこちらです。
「従来のアプリケーションUIとゲーム画面の融合」を試みています。

TAMくん相談チャット デザイン初稿

とっつきやすく楽しい体験にするため、TAMくんの画面占有率を上げゲーム的なUIを用いることにしました。返答部分は、実はTAMが30周年を迎えているため少し古めのゲームをモチーフにしています。

そしてゲーム的な画面をアプリケーションのUIで囲んでいます。これはTAMくん相談チャットの主軸があくまでキャリア相談であるため、少々固めのUIで信頼感を出したいと考えたためです。

もちろん、サービスのメインとなる信頼感である「返答・アドバイスの質」は基本的にプロンプトとGPTに任せることになります。

UIと機能の役割

こうしてひとまずコンセプトとデザインが落ち着きました。
早速開発に入ります。


「TAMくん相談チャット」の作成

基本は先ほどのデザイン通りになります。追加でTAMくんの表情が切り替わるようなギミックを入れました。
技術についてはまた別記事で触れようと思いますが、Next.jsをメインとしLLM部分にOpenAI APIを使用しています。イメージは以下です。

アプリとLLMの連携イメージ

この辺りは基本的にはいわゆるWebアプリ開発と同じ工程となります。大きく異なる点としてはプロンプトエンジニアリングが重要になることでしょうか。

今回公開するサービスはあくまでアプリケーションですので、目的に沿った結果が得られなくてはいけません。そのためユースケースを考慮し、どのような場面でも望んだ結果を返してもらう必要があります。

このプロンプト作成過程については、また別途記事を作成しましたのでこちらをご覧ください。

インタビューによる検証

完成形が見えてきたところで、一度社内インタビューをオフライン・オンラインで開催しました。
繰り返しになってしまいますが、LLMアプリ開発はまだ知見が存在せず要件・UI/UX的な抜け漏れが起こり得ます。完成度を高めるためには重要な工程でした。

実際に「TAMくん相談チャット」を触っていただき、率直な感想をもらいます。

オフラインインタビューの風景

質問内容としては「普段ChatGPTを使うか」といった初歩的なところから「TAMくん相談チャットにはどのような活用法がありそうか」「UI/UXで気になった点はあるか」という具体的な質問まで。

そして、今回のインタビューにはマーケター、デザイナー、ディレクター、HRと多様な専門職が集まってくれています。ですので「あなたの視点から見て、TAMくん相談チャットにどのような感想を持ったか」という非常にアバウトな質問もお願いしてみました。

オンラインインタビューの風景

結果としてまず

  • キャラクターがいると体験が有機的に感じられる

  • 表情の変化が人間のリアクションのようでコミュニケーションできている感触がある

  • 背景と合わせて楽しい気分になる。大喜利をさせてしまった

といったポジティブな意見を多くもらえました。

一方で指摘もいただいており、以下に抜粋して掲載します。

  • 初見だとどういった使い方をすれば良いのか掴みにくい

  • 解答に誤りが混ざっている場合があり信頼できない

  • UIがや挙動が不親切に感じる

まず「使い方がわからない」問題ですが、これは筆者にとって盲点でした。
アプリやゲーム的なUIによって馴染みやすくしているものの、「TAMくん相談チャット」にはオンボーディングやチュートリアルが存在しません。
開発者にはメンタルモデルがありますが、チャット型のアプリケーションには「なんでもできそう」だけど実は「なんでもできない」という自由さと不自由さが存在し混乱を招きます。
LLMアプリケーションにおいては、従来より一層「ユーザー行動の限定」が必要なのだと痛感しました。

「誤りがあり信頼できない」という点も頷く意見でした。これはLLMでハルシネーション(Hallucination：幻覚)と言われるところです。「TAMくん相談チャット」にある「TAMについて聞く」モードではできるだけ事実に近い内容を述べることが求められます。
誤りでないことを示す対策が必要でした。

UIについては、まず入力部分がわかりにくいと意見をもらっています。たしかに画面下部に固定されており視認性の悪さが目立ちました。また、返答が長く冗長であることが「相談している感覚を薄れさせている」と指摘がありました。
たしかに、いきなりの長文をもらうと会話を想定していた際に驚きがあります。

このように、大小様々な意見をもらいインタビューを終えました。開発側ではない意見をもらい解像度が上がったことを覚えています。
これを受け改良のフェーズへと進みました。


「TAMくん相談チャット」の改良

良い部分を伸ばし、悪いところは改善します。

まず、好評だったキャラクターについてアニメーションを追加しました。「キャリア・働き方」モードでのTAMくんの感情を追加し、それに伴うTAMくんの動きを強化しています。また、遊び心としてTAMくんをクリックした際にもアニメーションが動作するよう改良しました。

TAMくんのアニメーション

その他、インタビューで上がった課題にも対処しました。

「チャット型UIでのオンボーディングはなんだろう」と考え、「チャットは擬似的な会話なのだからTAMくんのセリフによってユーザーを促すべき」という結論に至りました。

モードごとに

  • キャリア・働き方相談：「TAMくんやで！TAMくんがな、TAMの理念や行動指針を参考に相談に乗ってあげるわ。キャリアのこと、マネジメントのこと、なんでも遠慮せず話してな。」

  • TAMについて聞く：「TAMに興味持ってくれたんやな！ありがとなぁ。TAMのことどんどん聞いてや！ちょっと思い出しながら答えるから時間がかかるけど、堪忍やで🫰」

という初期の文章が与えられています。

実は、この「思い出しながら答えるから時間がかかる」という点が少し工夫したポイントだったりします。

「TAMについて聞く」モードでは裏側で特殊な検索(Embedding, ベクトル検索という技術）を走らせ、実際にTAMのサービス内容をもとに答えさせています。この際に待機時間が発生するのですが、この認識がない場合ユーザーにとってストレスです。今回はキャラクターとのチャットなので、「検索しながら」と言うと世界観と合致しません。

したがって、少し忘れっぽいキャラになってもらいユーザーとの共通認識を持つことにしました。

解答が信頼できない点について、特定のキーワードに出典のリンクを付与することにしました。

TAMについて聞く 回答例

このUIは「ライザのアトリエ3」というRPGゲームを参考にしています。
「会話文の中に特定のキーワードが含まれている場合、該当部分の辞書を開くことができる」という体験が非常に良く、LLMの信頼性問題と併せて今回のソリューションとしてうまく当てはまりました。

UIは全体的にブラッシュアップしています。例えば入力部を浮かせ、背景とのコントラストが目立つようにしました。プロンプトも改良しTAMくんが端的な回答をくれるよう調整しました。

この後も細かなフィードバックをいた抱きつつ、
検証を繰り返し「TAMくん相談チャット」が完成しました！

TAMくん相談チャット 完成画面


リリース

仮説検証を通してLLMアプリが完成…！
ではあるのですが、その前段階として私たちは以下2つの目標を掲げていました。

  • TAMくんとの会話を楽しんでもらうこと

  • せっかくならUXにこだわること

体験にこだわるのであればデリバリーにもこだわりたくなってきます。

こちらについて、デザイナー・広報チームと連携しロゴも並行して作成しました。
ムードボードを作り…

TAMくん相談チャットロゴ ムードボード

以下のロゴに決定しました。

TAMくん相談チャット ロゴ

TAMくんとチャットの吹き出しの形が似ていることから、それらを対にし組み合わせたモチーフです。今回のコンセプトに合わせ細めのフォントで馴染みやすい印象を持たせつつ、紺色で信頼感をアピールしてくれています。

さらに広報チームのメンバーが告知用の動画を作ってくれました。サービスの全貌が分かりつつ、リラックスした雰囲気が素敵です。詳細はこちらをどうぞ！

以上で全工程が終了し、「TAMくん相談チャット」がリリースに至りました。

それぞれのメンバーに他の業務がある中、３週間という短い期間で非常に満足がいくものが作れたと思っています。
楽しいサービスが出来上がりましたので、ぜひTAMくんとお話してみてください。

LLMアプリ開発の課題

TAMくん相談チャットを作成することにより多くの気づきがありました。今回はその中からいくつか抜粋し、LLMアプリの課題感として共有します。

まずはレスポンスの遅さが非常に気になりました。応答速度はサービスの満足度に直結します。Webサイト制作ではページの表示速度こそが離脱率・直帰率に直結すると言われているほどです。
WebアプリケーションやWebサイト制作では、場合によってはミリ秒単位の調整を行うこともありますから、この点はサービス体験の最大化のために最も注力しなくてはいけない部分だと考えました。

根本的な解決にはOpenAIなどによるAIサービスのアップデートが必要です。したがって我々ができる対策だと、この待ち時間をいかに発生させないかという他のシステム的なチューニングや、待ち時間を飽きさせない施策を検討することになるのだと思います。

クオリティに直結する部分だとプロンプトエンジニアリングも重要です。
別記事でTAMくんがどういったプロンプトで動いているのかを紹介しました。

このプロンプトエンジニアリング、つまりAIへの指示の調整次第でユーザー体験が非常に左右されます。

今回のコンセプトは「相談」でした。相談ということは、受けた質問に対して寄り添ってあげたり分析したり、多岐にわたる返答が必要です。
一方で、目的を持ったアプリケーションとして提供しますから、ある程度方向性を絞らなければ制作側の意図しない挙動を見せる可能性が高くなります。
繊細な問題や暴言を出力してしまったら大きな問題です。

このAIの入出力をどう制御するのかという点については、LLMだけに任せず従来のシステム制御が必要になるのでしょう。例えばNGワードのチェックを入れるだけでも大きな対策になります。

サービスのゴールを明確に定義し、そのために許容できるラインと超えてはいけないラインについて評価指標を定め、その綿密なテストがLLMアプリケーションでは重要になるのだと実感しました。

評価指標という単語が出ましたが、AIを用いたアプリケーション開発ではこれこそが無視できないところかもしれません。
AIには100%正しい解答ができない性質があります(前に挙げたハルシネーションなど)。これはつまり、間違ってはいけないケースとの相性が悪いということです。

例えば病気の診断にAIを使うとします。このAIがどれだけ正答率が高かったとしても、一度でも誤診（病気にかかっているのにも関わらず健康体だと診断）してしまった場合大きな問題です。
この場合「正答率が下がってしまったとしても誤診を極力無くす」という方針が有効かもしれません。

クオリティを向上させるための「レスポンス速度への対処」や「プロンプトエンジニアリング」。
問題を起こさないための「システム制御」や「評価指標の策定」。

今後LLMアプリ開発をする際はこれらの点を特に重要視して望むべきだという知見を得ました。

こちらのLLMの制御についてはMicrosoftさんやLayerXさんが良い資料を公開してくださっています。詳細を知りたい方は以下の資料も併せてご覧ください。

これからのUXを考える

最後にこれからの体験がどのように変わっていくのか、少しだけ考えて本記事を閉じたいと思います。

まず忘れてはいけないことが、多くの課題こそあるものの「TAMくん相談チャット」がLLM無くしては実現し得ないアプリケーションだったということです。
普段使う言葉が入力になり、それに応じた判断や出力がされる様はやはり魅力的に見えます。「〜がしたい」と要望を言葉で伝えるだけで目的が達成できるのだとしたら、ユーザーとしてはとても楽です。

課題を適切に見定めれば、LLMや自然言語入力は大きな力を発揮します。Shopifyが出している「Shop」がとくに参考事例としておすすめです。

入力に応じておすすめをしてくれる様子は、まるで店員の方と話しているような感覚があります。

Shopの利用例

入力例が出るのも親切です。よくある入力の上位３つなどが選ばれているのでしょう。自由入力を選択式に置き換えることで、私たちユーザーの負担がぐんと下がっています。

この体験に感動し、筆者はLLMはアプリケーションのコア技術として(部分的だとしても)導入されていくのだと強く感じました。今でこそ融通が効かない部分がありますが、AIの成長スピードを見るに1,2年後にはさらに精度が上がっているでしょう。

また、「LLMやAIアシスタントに最適化せざるを得ない」という世界も予想できます。これはChatGPTやGoogleのBardなどLLMアプリケーションがプラットフォームになる未来です。

ChatGPT Pluginというシステムが発表され、国内だと「食べログ」さんなどが提供を始めました。

これは「アプリケーション内でLLMを使う」という考え方ではなく、「ChatGPTというLLMにアプリケーションを最適化させる」という依存関係が逆転したものです。
ChatGPTに質問をするだけでおすすめの店舗が表示されます。

Googleもまた検索エンジンを自然言語に対応させ、さまざまなサービスを提供するコンセプトを発表しています。

極め付けはMicrosoftが提唱するWindows copilotです。

これはOSレベルでAIを導入する試みであり、これが快適に動作するのであればユーザーは自然言語での入力に慣れ、それこそが「最高のUX」に置き換わる未来もありえます。

しかし、いずれはAIアシスタントが台頭し全ての作業を行うかもしれませんがまだその時ではありません。来月、半年後、来年再来年とニーズは日々移り変わるものです。

私たちが目下やるべきことは、

  • Webのレイヤー

  • アプリケーションのレイヤー

  • OSのレイヤー

ミクロとマクロの視点を切り替えつつ、
LLMの可能性と限界を見極めながら、
その時々で最適なユーザー体験を考えていくことなのだと考えました。

おわりに

以上で本記事の内容は終わりとなります。
制作過程をお伝えしたあと、そこから得られたLLMアプリの気づき、そして少し長い目で見たUXについて考察しました。

いろいろと述べましたが、振り返ってみると今回の制作過程が従来の制作と変わらなかったことに気が付きます。
コンセプトと仮説を立て、プロトタイピングから生の声を聞くことにより具体的な成果物になりました。

結局のところ「誰がどんな悩みを持っていて、どんな解決策が必要なのか。そしてそれをどのように届けるのか」という問いこそが、いつの時代も大切なことなのかもしれません。

LLMの登場により時代が急激に変化していますが、悩みを持ち大切にすべきはユーザーであり人であることに変わりません。だからこそ「本質的な課題は何か」という点をより一層大切に扱うべきなのではないでしょうか。

それこそが我々の求める体験の価値・幸せを最大化することにつながるのだと思います。


ここまでお付き合いいただきありがとうございました。
TAMは共創をテーマに30年の歴史を重ねてきました。新しいAIの時代においても、皆さんと共に最高の制作ができれば幸いです。

TAMの「共創」について

お問い合わせフォーム：https://www.tam-tam.co.jp/form/
TAM AI Lab 代表　佐川史弥