チャットボットインタフェースの構築方法

Sep 15, 2025

操作方法

2000年半ばには、仮想エージェントとカスタマーサービスのチャットボットがあまり会話をしていなくても、それらが単にWebサーバーとのデータ交換で構成されていました。

今日では、「弱いAI」の膨大な数の例が存在していても（Siri、Alexa、Web検索エンジン、自動翻訳者、顔の認識を含む）などの他のトピック レスポンシブウェブデザイン 脚光を覚えているので、チャットボットは依然としてかき混ぜる。大企業からの大きな投資では、未来の会話界面をハックする機会がたくさんあり続けています。

チャットボット体験をデザインする方法

時には彼らは悪い評判を得ますが、チャットボットは役に立ちます。ユーザーが入力フィールドに記入し、検証を待つ標準のWebフォームの基本的な交換のように感じる必要はありません - 会話経験を提供することができます。

基本的に私たちは強化しています ユーザー体験 Webブラウザのポイントアンドクリックまたはモバイルジェスチャの代わりに、エキスパートや友人と会話するように、もっと自然に感じること。目的は、共感的で文脈的な回答を提供することによって、この技術は人々の生活に直接埋め込まれるようになることです。

サービスデザイン練習における実際のプロジェクト摂取量に基づいて、チャットボットを設計して構築するための実用的な方法を発見するために、下のビデオを見てください。

01.人格を設定します

It’s important to ensure the chatbot’s personality reflects the company it’s representing — チャットボットの個性がそれが代表する会社を反映していることを確認することは重要です。

この慣行は世界的に11万人を超えるメンバーに役立つので、目標は、混乱している形態を記入しなければならない代わりに、内部ステークホルダーが効果的なデジタルサービスを要求することができる迅速で便利で自然のインターフェースを提供することでした。

最初のステップはChatbotの性格を確立することでした。これは、サービス設計チームのステークホルダーへの声を表すでしょう。私たちはアーロンウォルターの精留学作業を築きましたペルソナデザイン。これは、私たちのチームがBotの個性形質を開発し、それからグリーティング、エラー、およびユーザーフィードバックのメッセージを決定しました。

これは、組織がどのように認識されるかに影響を与えるため、これは繊細な段階です。できるだけ多くの情報があることを確認するために、私たちはすぐに、ボットに従事するときに適切な個性、色、タイポグラフィ、画像とユーザーの流れを釘付けにするためにステークホルダーワークショップを設定しました。

私たちが必要な承認をすべて得た後 - 弁護士を求めることを含めて - 私たちは、関係者の要求フォームをステークホルダーと私たちのデザインサービスチームの代表者との間の会話を模倣した一連の事前往復の質問に出版されました。

02. riveScriptを使用してください

This simple scripting language provides everything you need to design and build a chatbot POC — この単純なスクリプト言語はあなたがあなたがあなたが必要なものを設計して建設するために必要なものをすべて提供します

処理部のためにAIマークアップ言語に深くなりたくないことを知っていました - 私たちは経験をジャンプし始めるのに十分必要でした。

ライブスクリプトは、私たちのニーズのために学び、そして十分な簡単な簡単なチャットボットAPIです。数日以内に、ボットからプロジェクト要求を摂取するためのロジックがあり、それを検証して分類するのに十分なビジネスロジックでそれを解析しました。

この基本的なChatbotが働くために、ライブスクリプトリポ、それを複製し、すべての標準ノード依存関係を取り付けます。レポでは、さまざまな例のスニペットで追加できる相互作用の味を取得することもできます。

次に、Basic Grunt Serverを実行してボットをWebページに変えるWebクライアントフォルダを実行します。この時点であなたはあなたのニーズに合った経験を強化することができます。

03.ボットの脳を生成します

次のステップは私たちのボットの「脳」を生成することです。これは.Rive拡張機能を持つファイルで指定されています。ありがたいことに、riveScriptはすでにボックスからの基本的なインタラクションが付いています（たとえば、「名前は何ですか？」、「何歳ですか？」、「何ですか」好きな色？'）。

適切なノードコマンドを使用してWebクライアントアプリを開始すると、HTMLファイルはこれらをロードするように指示されます。 .rive. ファイル

次に、私たちはプロジェクト要求を扱う私たちのChatbotの脳の部分を生成する必要があります。私たちの主な目標は、プロジェクトの選択をTasking Taskingの質問を通常の会話に変換することです。

それで、例えば：

こんにちは、私たちはどのように助けますか？
素晴らしい、どのくらい早く始める必要がありますか？
あなたは私にあなたの予算の大まかな考えを与えますか？
あなたのプロジェクトについてもっと教えてください...
私たちのことをどこで知りましたか？

典型的なアクセス可能なWebフォームは次のようになります。

＆lt; Form Action = ""
＆lt;フィールドセット＆gt。
＆lt; Legend＆GT; request型：＆lt;＆legend＆gt;
＆lt; INPUT ID = "OPTION-ONE" TYPE = "無線" name = "request-type" value = "option-one"＆gt。
＆lt; = "Option-One"＆Gt;オプション1＆lt;＆lt; br＆gt;
＆lt;入力ID = "オプション2" type = "無線" name = "request-type" value = "option-two"＆gt。
＆lt; = "オプション2"＆gt;オプション2＆lt;＆lt; br＆gt;
＆lt;入力ID = "オプション3" type = "無線" name = "request-type" value = "オプション3"＆gt;
＆lt; = "オプション3"＆gt;オプション3 '/ LABEL＆GT;＆lt; br＆gt;
＆lt; /フィールドセット＆gt。
＆lt;フィールドセット＆gt。
＆lt; Legend＆GT;タイムライン：＆legend＆gt;
＆lt; INPUT ID = "1か月" TYPE = "Radio" name = "request-timeline" value = "1ヶ月"＆gt;
＆lt; = "1ヶ月"＆gt; 1ヶ月＆lt; label＆gt; br＆gt;
＆lt; INPUT ID =「1 3か月」TYPE = "無線" name = "Request- Timeline" value = "1-3月"＆gt。
＆lt; =「1ヶ月」＆gt; 1~3ヶ月

Webフォームでは、特定のパターンに非常に精通しています。[送信]ボタンをクリックすると、すべてのフォームデータが要求が処理される別のページに送信され、ほとんどの可能性がある可能性があります。

チャットボットでは、リクエストを送信し、それをもっと意味のあるものにすることができます。

04.声を設計する

このフォームをRiveScriptのChatbot Webクライアントで提供されている会話型ユーザーインターフェイスに変換するには、情報アーキテクチャを剛性から液体に変換する必要があります。またはフィールドラベルをUI文字列に。

いくつかのアクセス可能なフィールドラベルと関連する質問トーンを検討しましょう。

リクエスト： どのように我々は助けることができます？わからない？私がいくつか質問をするならば、あなたは気にしますか？
タイムライン： どのくらい早く始める必要がありますか？
予算情報： あなたは私にあなたの予算の大まかな考えを与えますか？
プロジェクトの説明： わかりました、解決する問題の要約を教えてください。
参照： また、誰が私たちに言っていますか？

次に、WebフォームのコードをAIスクリプトに変換する必要があります。処理ロジック双方向の会話のために：

- どのように我々は助けることができます？

+ *
％ どのように我々は助けることができます
 -  ;＆gt。あなたの予算の大まかな考えを教えてください。

+ *
％あなたは私にあなたの予算の大まかな考えを与えることができます
 -

05.提出をリクエストする

別のページまたはサービスに送信される標準形式変数とは対照的に、チャットボットは、チャットウィンドウ（または話されている）でユーザによって入力された情報を確定して送信することができます。これは、ユーザーは以前に入力された値を簡単に再検討することもできます。

JSON REST APIを介してChatbot UIに入力されたユーザーの要求を外部プロジェクトのTasking Serverに送信する必要がありました。

に rivecript-js. 私たちはANを利用できます XMLHTTPRequest. データがユーザーによって入力されるため、要求をほぼ同時に送信するオブジェクト：

＆gt。オブジェクトインテークJavaScript
 var http = new XMLHTTPRequest（）;

 VAR A = RS.GETUSERVAR（RS.CurrentUser（）、「エリア」）;
 varb = rs.getUservar（rscurrentUser（）、 "" ""）;
 var c = rs.getUservar（rs.currentUser（）、 "Budget"）;
 var d = rs.getUservar（rs.currentUser（）、プロジェクト "）;
 var e = rs.getUservar（rs.currentUser（）、 "Referal"）。

 var url = "http：// localhost：3000 / send";

 var params = "area =" + a + "＆amp; =" + b + "＆amp; budget =" + c + "＆amp; pro ject =" + d + "＆amp; referal =" + e;
 console.log（params）;

 http.open（ "post"、url、true）;

 http.setRequestHeader（ "content-type"、 "application / x- www  -  org-urlencoded"）;
 http.setRequestHeader（ "connection"、 "閉じる"）;
 http.onreadyStateChange = function（）{//状態が変化したときに関数を呼び出します。
  if（http.readystate == 4＆amp; http.status == 200）{
    alert（http.responseText）;
  }
 }
 http.send（params）;

＆lt;オブジェクト

06.チャットボットを恐れないでください

すぐに、コンピュータと対話するための現在の方法は、Amazon EchoやGoogle Homeなどの技術で見たように、シンプルな音声コマンドを作るだけのチャットボットのようなAIベースのテクノロジを提供します。

Webデザインコミュニティは恐れが必要ではありません - 私たちはすべてこの新しい技術の追加された価値を受け入れるべきです。

それはそれが働く会社のためのゲームチェンジャーかもしれません、完全にスケーラブルなカスタマーサービスを提供し、そして顧客知能を改善しました。

この記事はもともと紹介されました ネットマガジン Webデザイナーや開発者向けの世界で最も売れている雑誌。 ここで購読する 。

関連記事：

チャットボットがどのように学んでいるか - Giles Colborneとのインタビュー
インテリジェントなWebがどのように私たちの対話を変えるか
会話型インタフェースが革新的なバンキング

チャットボットインタフェースの構築方法

01.人格を設定します

02. riveScriptを使用してください

03.ボットの脳を生成します

04.声を設計する

05.提出をリクエストする

06.チャットボットを恐れないでください

操作方法 - 最も人気のある記事

塗装ブラシをきれいにする方法：決定的ガイド

参照画像の使い方：芸術家のための13の主要ヒント

CSSでスマートテキスト効果をコーディングする方法

画像を圧縮する方法：Webデザイナガイド

CSSを含むSVGフィルタを追加する

色収差効果を生み出す

リアルなデジタル人間を作成する

彫刻と塗装済みの移動マップを組み合わせる方法

カテゴリ