制作の話

「Movable Type.netでウェブチャットを実装した話」12/16 ADVENTERの記事


1。ウェブチャットとは?

最近特にウェブサイトに設置してあるケースが増えてきたウェブチャット。この記事でも右横に実物のタブを表示するようにしました。(※「CHAT」と書かれたタブがウェブチャットです)

自動応答のウェブチャットは大きく分けて、AIが入力内容に合わせて機械学習をして最適解を答えるようになっていくAI搭載型と、事前に応答文を用意する事で来訪者のサポートをする非AIの応答型ウェブチャットがあります。

今回は、弊社で10 月末にリリースした、非AIの自動応答チャットボット「作れるWEBCHAT」についてお話しします。

ウェブサイトに来訪したユーザーの目的を個別応答でサポートするツールとなります。



2。ウェブチャット開発のきっかけ

私(藤まなみです)が会社のウェブサイトにウェブチャット設置したい!と思ったのがきっかけで、プログラマーである次男(ファミリー系列会社です)にこんなの欲しいから作れないかと相談を持ちかけました。

メインのjs開発+DATA APIに関しては丸投げですが、私の注文は、応答型のものはMovableType.netの機能を使って作りたいという事でした。そこで設計、MT関連、デザインに関しては共同開発となりました。

3。なんでMovableType.netをベースとするのか

常々感じている事として、MovableType.netの大きな利点の1つは、誰にとっても扱いやすく、わかりやすく、更新しやすいという点です。

今まで多くのお客様にMovable Type.netで構築したサイトをご提供させていただいてきて、これは最大の利点であると考えています。90歳近いご年配の方も楽しみながら定期的にサイトを更新しています。

ウェブチャットの応答文は導入なさったお客様にお作りいただくため、学習コストがかからず、どなたにもわかりやすく作成できる事が必要です。

そしてさらなるメリットとしては、ウェブチャットの為だけにMovableType.netのライトプラン を1つ契約して使ったとしても運用費がとても安い事、セキュリティが高い事です。

現在提供されているあらゆるウェブチャットのサービスの中でもダントツに、「作れるWEBCHAT」はとても自由度が高く、破格に低価格です。なんといってもご自分たちでドットネットの管理ができれば、買取版をご購入いただけるという点で業界初ではないかと思います。

このウェブチャットはMovableType.netをコンテンツを管理する役割だけのCMSとして利用しています。

また、MovableType.netの1つの配下ブログを利用できれば良いので、MovableType.netをすでにご利用のお客様は、買取版をご利用いただけるので、メリットが大変大きいと思います。




4。どんな風に作られているのか

4-1 本体の置き場所と利用場所

 MovableType.netの配下ブログをウェブチャット用に1つ利用します。ウェブチャットの画面を置くウェブサイトは、同MovableType.net内でもご利用いただけますし、別ドメインのサイト(どのようなシステムで作られていても)1つです。

MovableType.netの本体データとウェブチャット画面はDATA APIでやりとりを行います。


4-2 定型文

ウェブチャットで定型として必要になる4つの文章は「ウェブページ」で作成します。

「通知」・・・ウエブチャットのアイコンが表示された際に表示される最初の文です。

「自己紹介」・・・ウェブチャットの画面が開いて最初に表示される文章です。

「該当なし」・・・自由入力された際、該当する応答文が無い時に表示します。
(※自由入力の応答文は入力された文字と同じタグが付いているものを拾います。)

「準備中」・・・まだ選択肢付属の応答文の準備が整っていない際に表示します。


4-2 応答文

応答は選択肢+それが選ばれた際の付属応答文で構成されています。

選択肢はカテゴリ名称で作成し、付属応答文はそのカテゴリに属する1つの記事で作成します。

1つの選択肢=カテゴリ名+属する記事

という形で構成されています。現在、右に表示している実際のウェブチャットのカテゴリは以下のようになっています。(途中から表示)

・ウェブチャットが立ち上がって最初に表示される選択肢は、カテゴリの第一階層のカテゴリ名が表示されます。

・その選択肢のどれかが選ばれると、その選ばれた選択肢(カテゴリ名)が表示され、続けてそのカテゴリに属する記事がフォロー文として表示されます。

・続けてそのカテゴリに第二階層がある場合は、第二階層のカテゴリ名が選択肢として表示される。という形で進みます。

MovableType.netの管理画面のカテゴリ表示は、ツリー構造でわかりやすいので、応答文も大変作りやすいのです。


カテゴリに属する記事(フォロー文)が存在する理由は、

①選んでくれた選択肢に対してまるで有人で「お話している」感じに応対するためです。おもてなしの応答文としていかに上手に作るかで、AIを超える心あるやりとりに近くなれると思います。

②その記事にキーワードを設置しておくと、同じ単語で入力してきたユーザーにその記事が表示され、続けてそのカテゴリ配下の選択肢が表示されます。



4-3 自由応答文

ユーザーが選択肢を選ぶだけの応答ではなく、単語を入力してきた際に、その単語に対する独自の返答文を用意しておく事ができます。その場合は、どこのカテゴリもチェックしません。

ユーザーが自由入力した単語を「キーワード」として、記事のキーワードを検索し、ヒットしたものを表示するようにしています。

あらかじめ需要の多そうな単語(要望)=キーワードに対して、独自の返答文を用意しておけるという事です。

試しに「アドベントカレンダー」と入力してみてください。表示された文には「アドベントカレンダー」のキーワードを設置しています。記事で作成しているので、写真なども表示させる事ができます。



4-4 デザインの変更とライセンスの話

デザインの変更ですが、色変え・アイコン変更などは比較的簡単に行えるようにCSSファイルの上部にまとめています。

CSSがわかる方にはデザインの全体も自分好みに作り替えていただけます。


一方、ウェブチャットのjsは変更不可能です。こちらは著作権物となりますので、コピー不可です。不正コピー防止というのは現時点では確実にはできないのですが、ご利用のサイトをあらかじめお知らせいただき、そこに紐付ける形にしてコピーして移植しても作動しないようにしています。


5。ウェブチャットの可能性

実店舗で買いたいものがどこかわからないと、店員さんを捕まえて聞きます。自分で探すより一番手っ取り早いからです。

同じ事がウェブサイトにも言えるのではないでしょうか?

・ユーザーを、買いたい商品の質問に答えてもらいながら、商品ページへと導く

・概算を知りたいユーザーに、質問に答えてもらって、およその概算をお伝えする

・ユーザーが探したい情報を見つけやすく誘導する

ウェブチャットは24時間、ユーザーの目的に添ってサポートし、満足感を高めるツールになれると思います。また、自動応答型はAI非搭載ではありますが、応答文をどう作るかで、AIよりも人間らしい会話を感じられる応答もできると思います。


低価格で簡単に導入でき、自由度の高い「作れるWEBCHAT」を今後も広めていきたいと思います。



そして私が考えている今後の大きな利点は、ユーザーの真の生声を拾えるのではないかという事です。

Google Analyticsで拾えるのはページ遷移などの行動です。若干のユーザー背景もわかりますが、ウェブサイトでユーザーの真の目的、生の声はわかりません。

ウェブチャットでユーザーが自由入力してくる文言は、何を求めてウェブサイトを訪れているかの真の声に近いものだと考えます。

その入力された言葉から売れ筋を分析する事もできるだろうし、コンバージョンアップに繋がる施策が打てるだろうし、様々な傾向がわかります。独自の返答文を用意しておいて次回は粋な応答や誘導ができるかもしれません。


将来的に、ウェブチャットの選択肢の集計や自由入力のワードをレポートにまとめられるような機能アップを考えています。



今後も、MovableType.netを優れたCMSとして、データベースのように使うアイディアを考えてみたいと思います。最後までお読みくださり、どうもありがとうございました。最後にぜひ「クリスマス」とウェブチャットにご入力ください。ありがとうございました。



2021.12.16 All Home Page株式会社 藤 まなみ