
どうも、まさとらん(@0310lan)です!
今回は、Web上で誰でも簡単に高機能なチャットボットを作成して、そのまま公開まで可能になるサービスのご紹介です!
登録フォーム、FAQ、アンケート…などを簡単にチャットボット化することが可能で、Webページとして公開できるのでブラウザさえあれば誰でも利用できます。
高度なプログラミングにも対応していますが、初心者の方でもブロックをつなげていくだけであっという間に完成するので、ぜひ挑戦してみてください!
【 Landbot.io 】

■「Landbot」の使い方
それでは、「Landbot」がどのようなサービスなのか実際に使いながら解説をしていきます。
まずはユーザー登録をしておきたいので、トップ画面右上にあるボタンをクリックします。

すると、「ユーザー名」を尋ねられるのでフォームへ入力しましょう。

その後、「プロジェクト名」「メールアドレス」も聞かれるので同じように入力をしておきます。
入力が終わったら、大きなボタンが表示されるのでクリック!

最後に、パスワードを入力して完了です。

すると、自分専用の「ダッシュボード」が表示されます!

あとは、この画面から新規のチャットボットを作成したり、ユーザーからの回答やボットのアナリティクス画面などを確認することができるようになります。
利用プランはいくつか用意されていますが、今回ご紹介する内容はすべて「無料プラン」で利用できることばかりなので、ぜひみなさんも気軽に試してみてください!
■チャットボットの作り方!
それでは、早速ですが「チャットボット」を作ってみたいと思います!
簡単なサンプルデモとして、ユーザーのメールアドレスを尋ねるだけの簡易的なチャットボットを作ってみましょう。
まずは、「ダッシュボード」から「+」アイコンをクリックして新規作成します!

チャットボットの開発用エディタが表示されます!

この画面上で、ブロック化されたボットの機能を線でつなぎながら、自分だけのチャットボットを作成していきます!
まず最初に、ユーザーが「チャットボット」にアクセスした時に表示するメッセージを作ることから始めます。
「WELCOME MESSAGE」と書かれたブロックをクリックしましょう!

入力フォームが表示されるので、ボットが話す言葉を入力していきます。

「(1)最初に表示する言葉」を入力し、そのあとにユーザーがクリックする「(2)ボタンのテキスト」も入力しておきましょう!
入力が完了したら画面上にある「SAVE」ボタンをクリックして保存します。
ついでに、すでに作成されているもう1つのブロックは不要なので削除しておきましょう。

今度は、ユーザーの「メールアドレス」を尋ねたいので、新しいブロックを追加します。
画面左のメニューから「ASK A QUESTION」をクリック!

候補の中から「EMAIL」を選びましょう!

先ほどと同じような入力フォームが表示されます!

「(1)ボットが話す言葉」を入力し、「(2)Email」が選択されていることを確認しましょう!(「Email」を選択することでメールアドレス以外が入力されないように設定できます)
あとは、最初に作ったブロックと「線」でつなげるだけでOK!

マウスのドラッグ&ドロップで簡単につなぐことができます。
最後に、ユーザーが「メールアドレス」を入力したあとに簡単なメッセージを表示するようにしましょう!
画面左のメニューから「SEND A MESSAGE」をクリック!

入力フォームに簡単なメッセージを入力して保存しておきましょう!

最終的に、以下のようなブロック構成になると思います。

たったこれだけで、メールアドレスを尋ねるチャットボットの完成です!
もっと複雑な条件分岐を作成したり多彩な機能を活用することもできますが、まずはシンプルなボット作成から始めてみるといいでしょう。
■ボットを公開してみよう!
チャットボットがだいたい完成したら、プレビュー機能でテストをしてみましょう!
画面右上にある「保存ボタン」をクリックします。

すると「PREVIEW」ボタンを利用できるようになるのでクリックしましょう。

プレビュー画面が表示され、作成したチャットボットを実際に使ってみることができます!

もちろん、スマホでの表示状態も確認できます。

プレビューで問題なければ、エディタ画面の上にある「Design」タブに切り替えましょう!

ここでは、チャットボットの表示を細かく調整したり、ボットのアバターを変更したりなど多彩なカスタマイズができるようになっています。
カラー、背景、アバターなどを変更するとこんな感じになります!

また「Settings」タブでは、各種ボタンやエラーメッセージなどを日本語に変更することも可能です!

他にも、SEO設定やGoogleアナリティクスの登録も可能なので便利です。
最後に「Share」タブに切り替えると、専用のURLが表示されています!

あとは、このURLをSNSやメールなどでシェアすれば、誰でもチャットボットを利用することが出来るようになるわけです。
今回の簡単なサンプルを実際に動かすと以下のような感じになります!
■「Landbot」の便利な機能紹介!
「Landbot」はチャットボットを作成するために便利な機能をいろいろ搭載しているのですが、なかでも特に活用したい機能をピックアップしてご紹介します!
例えば、ブロックに入力するメッセージは「HTML」での記述が可能です。

「HTMLボタン」をクリックして、そこへ通常のHTMLを書いていけばOKです。
次のように、外部リンクをメッセージ内に挿入することも簡単です。

もちろん、埋め込みタグ(iframe)なども使えるのでYouTube動画を挿入しても面白いですね。

HTML内に「scriptタグ」を挿入すればJavaScriptを記述することも可能なので非常に便利です。
また、条件分岐などで利用できる「ボタン」はリストからアイコンを追加することもできます。

アイコンを追加すると非常に分かりやすくなりますね。
アイコンは100種類以上から選択できるようになっているので、わざわざ画像を作る必要もありません。
ユニークな機能としては、ユーザーが入力した文字列を一時的に保存できる「変数」のような機能も用意されています。
例えば、ユーザーの名前を訪ねた時に「@name」という変数に保存しておきます。

すると、以降は「@name」をメッセージ内で使うことで、ユーザーが入力した名前を再利用することができるのです!
つまり、ユーザーが「①名前を入力」したら、その「②名前が表示される」ようになるというわけです!

会話している雰囲気がより強くなるのでオススメです!
さらに、「メール通知」機能もあります。
これは、あらかじめ指定したメールアドレス宛に通知を送信することができます。

メールアドレスは複数登録可能で、「通知ブロック」を繋げるだけでそのブロックを通過した時点で送信されるようになります。(Slack通知も可能)
これにより、任意のユーザー情報を受信したり、チャットをどのあたりまで持続したかをチェックする…など、さまざまな使い方ができるようになります。
他にも、Webhookを使って多彩なサービスと連携することもできるので、無限の可能性を秘めているといえるでしょう!
■PythonやJavaScriptなどの講座が完全無料!動画でプログラミングが学べるレッスン

paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニング」を公開しています。
Landbotのようなサービスを使いつつ、自分でチャットボットなどを開発できるようになりたい方にもおすすめです。
JavaScript、HTML/CSS、SQL、Python、Java、C言語、PHP、Rubyなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。
また、今まで有料だった「Python入門編」・「ITエンジニアの就活準備編」(※就活生じゃなくても受講できて転職活動にも役立ちます!)が、今月から【全編無料】となりましたのでぜひごらんください!
詳しくはこちら

■まとめ
今回は、「Landbot」について駆け足でご紹介しました!
使い方はブロックを繋げるだけなので、初心者でも簡単にオリジナルのチャットボットを作ってそのまま公開することが可能です。
また、プログラミングができる方は「Landbot」専用のAPIも提供されているので、さらに複雑な処理をおこなうボットを開発して楽しむこともできます。
ぜひ、みなさんも多彩なチャットボットを作って遊んでみてはいかがでしょうか!
<参考>

「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
