AIパワーチャットボットを構築する

Sep 11, 2025

操作方法

An illustration showing an android with an electronic brain in front of a globe marked with symbols indicated technological advancement, such as binary code, molecules and communications relays.

人工知能（AI）を使用すると、環境戦略を再考することから、既存の問題を見直す新しい方法を作成できます。あなたのプロジェクト - アプリ、Webサイト、ゲームかどうか - AIを活用することができ、それらをより魅力的にし、使いやすく使いやすく、より価値のある結果が得られます。そのような方法の1つは、ユーザーがあなたのサイトと対話するのを助けるために自然言語チャットボットを作成することを含みます。

最初のチャットボットを作成するには、Googleの新しいDialogFlowツールセットを使用します。それはスピーチツーテキストだけでなく強力な機械学習を利用しています。それはあなたのウェブサイトにウィジェットとしてあなたのニーズに合わせて組み込むことができます。

新しいサイトを計画する過程にある場合は、理想からすべてのものにアドバイスが必要です。 ウェブサイトビルダー これに ウェブホスティング 選択するサービス、それで私たちのガイドをチェックしてください。新しいデザインシステムの作成安全に保存してください クラウドストレージ だからあなたのチーム全体にアクセス可能です。チャットボットを作成する方法に今...

01.口座を作成します

go DialogFlow.com そしてあなたのアカウントを作成してください。ダイアログフローをアカウントにアクセスできるようにする権限と同意します。

02.エージェントを作成します

DialogFlowは、「Agent」という用語を使用してAIのインスタンスを表します。作業している仮想インテリジェンスとしてエージェントを考えてください。あなたはそれぞれ独自の性格と目的を持つ多くのエージェントがあなたのために働くことができます。

[エージェントの作成]ボタンをクリックして、エージェントの名前を入力します。 'HAL 9000'。

03.意図を作成します

まず、あなたは意図を作成する必要があります。ユーザーの入力の「意図」を定義しています。 [インテントを作成する]をクリックして、それに「オープンドア」を名前に付けます。「保存」を押します。

04.この目的のためにAIを訓練します

An image showing the Google Dialogflow interface – in the box that's marked 'USER SAYS', it reads 'open the door hal' and in the box marked 'DEFAULT RESPONSE', it reads 'Sorry Dave. I can't do that now'. — ユーザーが使用できるフレーズを提供することで、AIを訓練する

ユーザーが使用できるフレーズを提供することで、この意図のためにAIを訓練してください。 NLP AIはこれらと導出されたバリエーションを使用してエージェントを訓練します。「トレーニングフレーズ」ウィンドウに次のトレーニングフレーズを追加し、あなたが好きなだけあなた自身のものを追加します。

「ポッドベイのドアを開く、HAL」
「ドアを開く」
「私を私にしましょう、HAL！」

05.応答を追加します

次に、エージェントが返信する応答をいくつか追加する必要があります。「応答」ウィンドウでこれらを入力してください。このようにいくつかを試してみてください。

「私はそれをすることができないのを恐れています、Dave」
「今はできません」

次に「応答を追加」を押して、もう一度上部に「保存」します。エージェントが訓練されている通知が表示され、その後準備ができています。

06.チャットボットをテストします

画面の右側にはテストツールがあります。チャットボットは、それを試してみると、Googleのスピーチツーテキストサービスを使用して音声をテキストに変換します。あなたの要求の結果と応答が選択された結果を見るべきです。とてもかっこいい！

07.エンティティを作成して使用する

エンティティは、エージェントの応答で変数として定義および再利用できる概念です。ユーザーが感情を表現しているときに認識するようにAIを訓練しましょう。

左側のメニューで、[エンティティ]をクリックします。新しいエンティティの名前を「感情」と入力します。「同義語を定義する」をチェックしてください。下の表をクリックして、最初の感情として「怒って」と入力します。次に、その右側にある[MAD '、' upset 'などの同義語を追加します。それから「怖い」のための別のエントリーを追加し、あなたが好きな同義語「恐怖」などを使用してください。完了したら「保存」を押します。

これは、「怒って」、「怖い」がユーザーが通信する可能性があることを理解するためにエージェントを訓練しました。これらの同義語はすべて、発生する可能性があるバリエーションです。 AIも生成します。

08.新しい意図を作成します

今、私たちが作成した「感情」のエンティティを使用するための新しい意図を作成するつもりです。この意図的な「感情」を呼んで「保存」をクリックしてください。

次に「あなたは私を怖がっている」ような新しいトレーニングフレーズを追加し、「あなたは私を怒らせて」、そして「私は非常に怒っています」と怒っているキーワードのバリエーションを使っています。これは、ユーザーがこの感情的な声明を述べることができるさまざまな方法を理解するためにエージェントを訓練します。

システムがあなたのために怖くて怒っている言葉を強調していることに気付くでしょう。それはすでにこれらをエンティティとしてフラッグしています。「アクションとパラメータ」ウィンドウにエントリを追加しました。これにより、これらのエンティティを自分の回答に使用できます。

09.新しい「感情」エンティティを使用して応答を追加する

[応答]ウィンドウで、この新しいエンティティを使用する新しい応答を追加します。 '$ Emotion'エンティティを示す '$'に注意してください。これらの応答を追加してみてください。

'私はあなたが$感情を感じているのが残念ながら、Dave。'
「感情を感じることは人間の反応、Daveです。」

[応答を追加]をクリックし、画面上部の[保存]ボタンを押して、意図全体を保存します。

10.チャットボットをもう一度テストします

テストツールで次のフレーズを言及または入力してみてください。

「あなたは私をとても怒っています。」
「あなたは私を抜け出しています」

それが2番目のものと「怖い」を使って回答した方法に注目してください。それは私たちの同義語を使っていました。とてもかっこいい。

これを無料でプレイしてください。

11. Web統合を有効にします

An image showing Google Dialogflow's pop-up featuring a direct link and embeddable HTML snippet for a created chatbot. — Webデモをクリックすると、ウィジェットを独自のWebサイトにドロップするために使用できるコードスニペットが表示されます。

Webページに追加するには、左側のメニューの[統合]をクリックします。次に[Webデモ]ボックスをクリックしてそのオプションをオンにします。

直接リンクを表示するポップアップが表示され、すぐに統合をテストするために使用できます。ウィジェットを独自のWebサイトにドロップするために使用できるコードスニペットも表示されます。そのスニペットをクリップボードにコピーして、サイトに貼り付けることができます。

12.基本的なWebページを作成してスニペットを追加する

基本的なHMTLページを作成し、そのコードスニペットを次に含めます。次のコードを試してサーバーにアップロードするか、ローカルサーバー上で実行してください。下のスニペットを、ダイアログエージェントからコピーしたものと一緒に置き換えます。

 <！Doctype HTML＆GT;
＆lt; html＆gt;
＆lt;頭＆gt;
＆lt; title＆gt; NET  -  AI Chatbot＆lt; / title＆gt;
＆lt; / gt;
＆lt; body＆gt;
＆lt; iframe.
    allow = "マイクロフォン" width = "350" height = "430" "" 430 "" https://console.dialogflow.com/api-client/demo/embedded/bbd27d04-5546-4b62-85a5- C373575A33aa "＆gt;
＆lt; / iframe＆gt;
＆lt; / body＆gt;
＆lt; / html＆gt;

この記事はもともと、Webデザイナーと開発者向けの世界で最も売れている雑誌であるNetの第312号に掲載されました。 問題312を購入する または ネットを購読する 。

あなたのサイトやアプリにAIを連れて行けることができる方法についてもっと学ぶことができますか？

An image promoting generate New York 2019 from April 24th -25th and speaker Josh Clark's keynote 'AI is your new design material'. — Webデザイナーの受賞歴のある会議は、4月24日から25日にNYCに戻ります。チケットを予約するにはwww.generateconf.comをご覧ください

あなたがあなたのデザインにAIを持つことができる方法についてもっと学びたいですか？大媒体の創設者であるJosh Clarkは、4月25日にニューヨークを生成することにある彼の基調講演であることになるでしょう。あなたの毎日の仕事

4月24日から25日までのニューヨークランを生み出す - 今すぐチケットを入手してください ！

関連記事：

GoogleのCloud Visionのガイド
2019年の巨大な技術トレンドは、デザイナーが知る必要がある
デザイナーはロボットに置き換えられますか？

AIパワーチャットボットを構築する

01.口座を作成します

02.エージェントを作成します

03.意図を作成します

04.この目的のためにAIを訓練します

05.応答を追加します

06.チャットボットをテストします

07.エンティティを作成して使用する

08.新しい意図を作成します

09.新しい「感情」エンティティを使用して応答を追加する

10.チャットボットをもう一度テストします

11. Web統合を有効にします

12.基本的なWebページを作成してスニペットを追加する

あなたのサイトやアプリにAIを連れて行けることができる方法についてもっと学ぶことができますか？

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

デザインの絞り込みのポートフォリオ

より良い文字アニメーションを作成するための10の方法

Twitter Bioのフォントを変更する方法

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

あなた自身のWebGL Physicsゲームを構築する

色のブロックで街並みを描く方法

印象派のような塗料

古いマスターのような肖像画を描く

カテゴリ