---

Blueでは、常にお客様の生活をより簡単にする方法を模索しています。私たちはすべての機能の詳細なドキュメンテーション、YouTube動画、ヒントとコツ、およびさまざまなサポートチャンネルを提供しています。

私たちは、プロジェクト管理の自動化に非常に注力しているため、AI（人工知能）の発展を注意深く見守ってきました。また、数千人のお客様の作業をより簡単にするために、AI自動分類やAI要約などの機能もリリースしました。

明らかにしていることは、AIはここに留まり、ほとんどの業界に驚くべき影響を与えるということです。プロジェクト管理も例外ではありません。そこで、私たちは、発見、販売前、オンボーディング、さらには継続的な質問に至るまで、顧客のライフサイクル全体を支援するためにAIをさらに活用できる方法を考えました。

答えは非常に明確でした：私たちは、ドキュメンテーションに基づいて訓練されたAIチャットボットが必要でした。

現実を見つめましょう：すべての組織はおそらくチャットボットを持つべきです。チャットボットは、顧客が密なドキュメンテーションやウェブサイトを掘り下げることなく、典型的な質問に即座に答える素晴らしい方法です。現代のマーケティングウェブサイトにおけるチャットボットの重要性は過小評価できません。

特にソフトウェア会社にとって、マーケティングウェブサイトを別の「もの」と考えるべきではありません — それはあなたの製品の一部です。これは、典型的な顧客ライフサイクルに適合するからです：

• 認知（発見）：これは、潜在的な顧客が最初にあなたの素晴らしい製品に出会う場所です。あなたのチャットボットは、重要な機能や利点をすぐに指し示す友好的なガイドとなります。
• 検討（教育）：今、彼らは興味を持ち、もっと知りたいと思っています。あなたのチャットボットは、彼らの特定のニーズや質問に合わせた情報を提供する個人的なチューターになります。
• 購入/転換：これは真実の瞬間です - 見込み客が飛び込んで顧客になることを決定する時です。あなたのチャットボットは、最後の瞬間の問題をスムーズに解決し、「購入前に聞きたい」質問に答え、取引を成立させるためにお得な情報を提供することもできます。
• オンボーディング：彼らは購入しましたが、次は何でしょう？あなたのチャットボットは、役立つサイドキックに変わり、新しいユーザーを設定の手順に導き、製品の世界で迷子にならないようにします。
• 維持：顧客を幸せに保つことがゲームの名前です。あなたのチャットボットは24時間365日待機しており、問題をトラブルシューティングし、ヒントやコツを提供し、顧客が愛されていると感じるようにします。
• 拡張：レベルアップの時です！あなたのチャットボットは、顧客がすでに製品を使用している方法に合わせて、新機能、アップセル、またはクロスセルをさりげなく提案できます。これは、非常に賢く、押し付けがましくない営業担当者が常に待機しているようなものです。
• 支持：幸せな顧客はあなたの最大の応援団になります。あなたのチャットボットは、満足したユーザーに口コミを広めたり、レビューを残したり、紹介プログラムに参加したりするよう促すことができます。これは、製品に組み込まれたハイプマシンのようなものです！

ビルド対バイの決定

AIチャットボットを実装することを決定した後、次の大きな質問は：ビルドするか、バイするか？コア製品に焦点を当てた小さなチームとして、私たちは一般的に「サービスとしての」ソリューションや人気のオープンソースプラットフォームを好みます。結局のところ、私たちはテクノロジースタックのすべての部分で車輪を再発明するビジネスをしているわけではありません。
そこで、私たちは袖をまくり上げ、市場に飛び込み、有料およびオープンソースのAIチャットボットソリューションを探しました。

私たちの要件は明確でしたが、譲れないものでした：

• ブランドなしの体験：このチャットボットは単なる便利なウィジェットではなく、私たちのマーケティングウェブサイトや最終的には製品に組み込まれるものです。他社のブランドを自社のデジタル不動産で宣伝することには興味がありません。
• 優れたUX：多くの潜在顧客にとって、このチャットボットはBlueとの最初の接点になるかもしれません。これは、私たちの会社に対する彼らの認識のトーンを設定します。現実を見つめましょう：ウェブサイトに適切なチャットボットを設置できない場合、顧客が私たちに重要なプロジェクトやプロセスを信頼することを期待できるでしょうか？
• 合理的なコスト：大規模なユーザーベースとチャットボットをコア製品に統合する計画があるため、使用が拡大するにつれて破産しないソリューションが必要でした。理想的には、BYOK（Bring Your Own Key）オプションを希望しました。これにより、自分たちのOpenAIまたは他のAIサービスキーを使用し、第三者ベンダーへのマークアップではなく、直接の変動コストに対して支払うことができます。
• OpenAIアシスタントAPI互換：オープンソースソフトウェアを選ぶ場合、ドキュメントの取り込み、インデックス作成、ベクトルデータベースなどのパイプラインを管理する手間を避けたかったのです。私たちは、すべての複雑さをAPIの背後に抽象化するOpenAIアシスタントAPIを使用したいと考えていました。正直なところ、これは本当に良くできています。
• スケーラビリティ：このチャットボットを複数の場所に配置し、年間数万人のユーザーに使用されることを望んでいます。私たちは大規模な使用を期待しており、ニーズに合わせてスケールできないソリューションにロックインされたくありません。

商業用AIチャットボット

私たちがレビューしたものは、オープンソースソリューションよりも優れたUXを持つ傾向がありました — 残念ながら、これはしばしば見られることです。多くのオープンソースソリューションがUXの重要性を無視または過小評価している理由については、別の議論が必要かもしれません。

ここに、いくつかの優れた商業用オファリングのリストを提供します：

• Chatbase: Chatbaseは、あなたの知識ベースに基づいて訓練されたカスタムAIチャットボットを構築し、それをウェブサイトに追加したり、APIを通じて対話したりできます。信頼できる回答、リード生成、高度な分析、複数のデータソースへの接続機能などを提供します。私たちにとって、これは最も洗練された商業用オファリングの一つに感じました。
• DocsBot AI: DocsBot AIは、サポート、販売前、リサーチなどのために、あなたのドキュメンテーションやコンテンツに基づいて訓練されたカスタムChatGPTボットを作成します。ウェブサイトにチャットボットを簡単に追加できる埋め込みウィジェット、自動的にサポートチケットに返信する機能、統合のための強力なAPIを提供します。
• CustomGPT.ai: CustomGPT.aiは、ウェブサイトのコンテンツ、ヘルプデスク、ナレッジベース、ドキュメントなどを含むビジネスデータを取り込むことによって、個人的なチャットボット体験を作成します。リードが質問をし、コンテンツに基づいて即座に回答を得ることができ、検索する必要がありません。興味深いことに、彼らはOpenAIをRAG（Retrieval Augmented Generation）で打ち負かすと主張しています！
• OpenAssistantGPT: これは興味深い商業用オファリングですが、オープンソースソフトウェアでもあります。 まだ少し初期段階のようで、価格も現実的ではないと感じました（無制限のメッセージで$27/月は商業的には成立しません）。

私たちはまた、InterCom Finも検討しましたが、これは彼らのカスタマーサポートソフトウェアの一部です。これは、私たちがBlueを始めて以来使用しているHelpScoutから切り替えることを意味しました。これは可能だったかもしれませんが、InterCom Finには非常に高額な価格設定があり、考慮から除外されました。

そして、これは実際に多くの商業用オファリングの問題です。InterCom Finは、処理された顧客サポートリクエストごとに$0.99を請求し、ChatBaseは40,000メッセージで$399/月を請求します。これは、シンプルなチャットウィジェットに対して年間ほぼ$5,000です。

AI推論の価格が急落していることを考慮すると、OpenAIは価格をかなり劇的に引き下げました：

• 元のGPT-4（8kコンテキスト）は、1Kプロンプトトークンあたり$0.03で販売されていました。
• GPT-4 Turbo（128kコンテキスト）は、1Kプロンプトトークンあたり$0.01で、元のGPT-4から50%の削減です。
• GPT-4oモデルは、1Kトークンあたり$0.005で、GPT-4 Turboの価格からさらに50%の削減です。

これはコストの83%の削減であり、私たちはそれが停滞するとは期待していません。

年間数万人のユーザーによって使用され、かなりのメッセージが送信されるスケーラブルなソリューションを探していることを考えると、直接ソースに行き、APIコストを直接支払う方が理にかなっています。商業版を使用してコストをマークアップするのではなく。

オープンソースAIチャットボット

前述のように、私たちがレビューしたオープンソースオプションは、主に「優れたUX」要件に関して失望させるものでした。

私たちは次のものを見ました：

• Deepchat: これはAIサービスのためのフレームワークに依存しないチャットコンポーネントで、OpenAIを含むさまざまなAI APIに接続します。また、ユーザーがブラウザ内で直接実行されるAIモデルをダウンロードできる機能もあります。これを試してみましたが、OpenAIアシスタントAPIの実装はかなりバグが多く、いくつかの問題がありました。しかし、これは非常に有望なプロジェクトであり、彼らのプレイグラウンドは本当に良くできています。
• OpenAssistantGPT: オープンソースの観点から再度見ると、これにはかなりのインフラを構築する必要がありましたが、私たちはOpenAIのアシスタントAPIにできるだけ依存したかったため、これは望んでいませんでした。

独自のチャットボットを構築する

そして、すべての要件に合致するものを見つけられなかったため、私たちはOpenAIアシスタントAPIとインターフェースできる独自のAIチャットボットを構築することに決めました。結果的に、これは比較的簡単な作業となりました！

私たちのウェブサイトはNuxt3、Vue3（Blueプラットフォームと同じフレームワーク）、およびTailwindUIを使用しています。

最初のステップは、OpenAIアシスタントAPIと「話す」ことができるAPI（アプリケーションプログラミングインターフェース）をNuxt3で作成することでした。これは、すべてをフロントエンドで行うと、私たちのOpenAI APIキーが世界に露出し、悪用される可能性があるため、必要でした。

私たちのバックエンドAPIは、ユーザーのブラウザとOpenAIの間の安全な仲介者として機能します。以下がその機能です：

• 会話管理：各会話の「スレッド」を作成し、管理します。スレッドは、あなたが言ったことをすべて記憶するユニークなチャットセッションだと考えてください。
• メッセージ処理：メッセージを送信すると、私たちのAPIはそれを適切なスレッドに追加し、OpenAIのアシスタントに応答を作成するように依頼します。
• スマート待機：ローディング画面を見つめさせるのではなく、私たちのAPIは毎秒OpenAIにチェックインして、応答が準備できているかどうかを確認します。これは、シェフに毎2秒ごとに邪魔をすることなく、あなたの注文を見守るウェイターのようなものです。
• セキュリティ第一：すべてをサーバーで処理することにより、あなたのデータと私たちのAPIキーを安全に保ちます。

次に、フロントエンドとユーザーエクスペリエンスがありました。前述のように、これは非常に重要であり、私たちは第一印象を作る機会を二度と得られません！

チャットボットを設計する際、私たちはユーザーエクスペリエンスに細心の注意を払い、すべてのインタラクションがスムーズで直感的で、Blueの品質へのコミットメントを反映するようにしました。チャットボットのインターフェースは、シンプルでエレガントなBlueの円から始まり、HeroIconsをアイコンとして使用し（Blueウェブサイト全体で使用しています）、チャットボットのオープニングウィジェットとして機能します。このデザインの選択は、視覚的一貫性と即時のブランド認識を保証します。

私たちは、ユーザーが追加のサポートやより詳細な情報を必要とする場合があることを理解しています。だからこそ、チャットボットインターフェース内に便利なリンクを含めました。サポート用のメールリンクがすぐに利用できるため、ユーザーはより個別の支援が必要な場合に直接私たちのチームに連絡できます。さらに、ドキュメンテーションへのリンクも組み込まれており、Blueの提供内容をより深く掘り下げたい人々にとって、より包括的なリソースへのアクセスを提供します。

ユーザーエクスペリエンスは、チャットボットウィンドウを開く際の洗練されたフェードインおよびフェードアップアニメーションによってさらに向上します。これらの微妙なアニメーションは、インターフェースに洗練さを加え、インタラクションをよりダイナミックで魅力的に感じさせます。また、ユーザーがチャットボットがクエリを処理し、応答を作成していることを知るための重要な機能であるタイピングインジケーターも実装しました。この視覚的な合図は、ユーザーの期待を管理し、アクティブなコミュニケーションの感覚を維持します。

いくつかの会話がより多くの画面スペースを必要とする場合があることを認識し、会話をより大きなウィンドウで開く機能を追加しました。この機能は、長いやり取りや詳細な情報を確認する際に特に便利で、ユーザーがチャットボットを自分のニーズに合わせて調整する柔軟性を提供します。

裏で、私たちはチャットボットの応答を最適化するためにいくつかのインテリジェントな処理を実装しました。私たちのシステムは、AIの返信を自動的に解析して、内部ドキュメントへの参照を削除し、提示される情報がクリーンで関連性があり、ユーザーのクエリに対処することに焦点を当てていることを保証します。
可読性を高め、より微妙なコミュニケーションを可能にするために、'marked'ライブラリを使用してマークダウンサポートを組み込みました。この機能により、私たちのAIは、太字や斜体の強調、構造化されたリスト、必要に応じてコードスニペットを含むリッチにフォーマットされたテキストを提供できます。これは、あなたの質問に対するよくフォーマットされた、カスタマイズされたミニドキュメントを受け取るようなものです。

最後に、私たちは実装においてセキュリティを優先しました。DOMPurifyライブラリを使用して、マークダウン解析から生成されたHTMLをサニタイズします。この重要なステップにより、表示される前に潜在的に有害なスクリプトやコードが削除されます。これは、あなたが受け取る有益な情報が、情報的であるだけでなく、安全に消費できることを保証する私たちの方法です。

将来の開発

これは始まりに過ぎません。この機能のためにいくつかのエキサイティングなことがロードマップにあります。

私たちの今後の機能の一つは、リアルタイムでの応答ストリーミング能力です。すぐに、チャットボットの返信が文字ごとに表示され、会話がより自然でダイナミックに感じられるようになります。これは、AIが考えるのを見ているようなもので、あなたを常に情報の流れに保つ、より魅力的でインタラクティブな体験を生み出します。

私たちの大切なBlueユーザーのために、パーソナライズを進めています。チャットボットは、あなたがログインしているときにそれを認識し、アカウント情報、使用履歴、好みに基づいて応答を調整します。あなたの質問に答えるだけでなく、Blueエコシステム内での特定のコンテキストを理解し、より関連性のあるパーソナライズされた支援を提供するチャットボットを想像してみてください。

あなたが複数のプロジェクトに取り組んでいるか、さまざまな質問を持っているかもしれないことを理解しています。だからこそ、私たちはチャットボットとの間でいくつかの異なる会話スレッドを維持する機能を開発しています。この機能により、異なるトピック間をシームレスに切り替えることができ、コンテキストを失うことなく、まるでブラウザで複数のタブを開いているかのようにします。

あなたのインタラクションをさらに生産的にするために、現在の会話に基づいて提案されたフォローアップ質問を提供する機能を作成しています。これにより、トピックをより深く探求し、あなたが尋ねることを考えなかったかもしれない関連情報を発見する手助けをし、各チャットセッションをより包括的で価値のあるものにします。

私たちはまた、特定のニーズに合わせた専門的なAIアシスタントのスイートを作成することに興奮しています。販売前の質問に答えたり、新しいプロジェクトを設定したり、高度な機能をトラブルシューティングしたりする場合、あなたは現在のニーズに最も適したアシスタントを選ぶことができます。これは、Blueの専門家チームが指先にいるようなものです。それぞれが私たちのプラットフォームの異なる側面に特化しています。

最後に、チャットに直接スクリーンショットをアップロードできるようにすることに取り組んでいます。AIは画像を分析し、見たものに基づいて説明やトラブルシューティング手順を提供します。この機能により、Blueを使用している際に遭遇する特定の問題に対して、これまで以上に簡単に支援を受けることができ、視覚情報とテキスト支援のギャップを埋めます。

結論

私たちのAIチャットボット開発プロセスへの深い考察が、Blueでの製品開発の考え方に関する貴重な洞察を提供できたことを願っています。チャットボットの必要性を特定することから独自のソリューションを構築するまでの私たちの旅は、意思決定と革新に対する私たちのアプローチを示しています。

Blueでは、ビルド対バイの選択肢を慎重に検討し、常にユーザーに最も適したものを提供し、長期的な目標に沿ったものを選びます。この場合、私たちはコスト効果が高く、視覚的に魅力的なチャットボットの市場における重要なギャップを特定しました。一般的に、私たちは既存のソリューションを活用することを推奨していますが、時にはユニークな要件に合わせたものを作成するのが最良の道であることもあります。

独自のチャットボットを構築するという決定は軽視されるべきではありませんでした。これは、徹底的な市場調査、私たちのニーズの明確な理解、そしてユーザーに最良の体験を提供するというコミットメントの結果でした。社内で開発することにより、私たちは現在のニーズを満たすだけでなく、将来の強化や統合のための基盤を築くことができました。

このプロジェクトは、Blueでの私たちのアプローチを体現しています：私たちは、製品とユーザーにとって正しい選択である場合、何かをゼロから構築することを恐れません。この追加の努力を惜しまない姿勢が、顧客のニーズを真に満たす革新的なソリューションを提供できる理由です。
私たちは、AIチャットボットの未来と、それが潜在的なBlueユーザーと既存のユーザーの両方にもたらす価値に興奮しています。機能を洗練し、拡張し続ける中で、プロジェクト管理と顧客とのインタラクションにおいて可能な限界を押し広げることに引き続きコミットしています。

私たちの開発プロセスを通じてこの旅に参加していただき、ありがとうございます。これが、Blueのすべての側面に対して私たちが取る思慮深くユーザー中心のアプローチを垣間見る手助けになれば幸いです。私たちのプラットフォームをより良くするために進化し続ける中で、さらなる更新をお待ちください。

もし興味があれば、このプロジェクトのソースコードへのリンクをこちらで見つけることができます：

• ChatWidget: これはチャットウィジェット自体を駆動するVueコンポーネントです。
• Chat API: これはチャットコンポーネントとOpenAIアシスタントAPIの間で機能するミドルウェアです。