チャットボット(chatbot)サイトのデザイン・コンテンツを解説!
この記事を書いた人 :


「競合に負けない魅力的なホームページを作りたい!」
「親しみやすくユーザーに選ばれるホームページに変えたい!」
「サイトをリニューアルして集客できるように改善したい!」
新しい事業としてサービスを展開する人、サイトをリニューアルしようと考えている人などで、上記のような悩みを抱えていませんか?
この記事では、チャットボットのサイトを調査し、そのデータを元に、デザインやUI、コンテンツなどの傾向について解説しています。
チャットボットのオーナーやWebサイト担当者、デザイナーやマーケターなどで、サイト制作についてお悩みの方、成果を上げたいとお考えの方は、このまま読み進めてください。
Webサイトを訪れたユーザーが「ここに調査をお願いしたい!」と思うような魅力的なサイトを一緒に作っていきましょう。
data maisonは、圧倒的な
低価格で同業サイトを徹底分析

Webサイト調査を手軽に簡単に
※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。
※ 対象となる業界やWebサイトによって月額が異なります。
※ 価格は全て税込です。
- ビッグデータ
- 業界データ
- 個別データ
- 最新データ
- 過去データ

目次
AI・チャットボットのWebデザイン・UI
AI・チャットボットサイトのファーストビュー傾向は?
チャットボット(5サイト)を中心にサイトを確認し、ファーストビュー(スクロールせずに画面に表示される部分)には以下のようなメインビジュアルが設定されていました。


調査したサイトの中で最も多かったのが、キャッチコピーを大きく表示させつつAIロボットをイメージしたようなイラストをメインビジュアルとして設定しているパターンです。上記に載せている、「zendesk」は、イメージとなるチャットボットの画面とキャッチコピーのメインビジュアルを使っています。「Chat Plus」はオフィスの中を映し出すような動画をファーストビューの背景とキャッチコピーを設定しています。チャットボットというBtoB向けのサービスとなっていることもあり、「ビジネス」をイメージしたメインビジュアルを採用していることが多いのです。
AI・チャットボットのサイトカラー
チャットボットのサイトカラーを調べて見ると、以下のような結果になりました。
5サイトのサイトカラー
サイト | ベース (背景色) | ロゴ・メインカラー | アクセントカラー |
---|---|---|---|
A | ホワイト | オレンジ | グリーン |
B | ホワイト | ブルー | ブルー |
C | ホワイト | グレー | ブルー |
D | ホワイト | グリーン | ブルー |
E | ホワイト | ブルー | グレー |
調査した5サイト中で最も多いベースの色は「ホワイト」です。ロゴ・メインカラーとして「ブルー」や「ネイビー」が多く使われています。ブルーやネイビーといったカラーは、「知的」「クール」「信頼感」などの印象があります。ブルー系を使うことで「このサイトは信頼感がある」ことを伝える演出が、できるためロゴやサイトカラーによく使われるのです。一方、AI・チャットボットのフレッシュな新しい技術をカラーで伝えるために、「オレンジ」や「グリーン」といった爽やかで暖かみのあるイメージのカラーを使うサイトもありました。
また、アクセントカラーはサイトによって様々ですが、オレンジがやや多い傾向です。
全体的にブルー系のロゴ・メインカラーを採用しているためサイトが多くクールな印象の中に、オレンジのような中間色があることで、ユーザーに見て欲しいポイントが分かりやすくなっています。サイトによってユーザーにイメージさせたいテイストがあるはずなので、それに合ったサイトカラーを選択しましょう。
フォントサイズとフォントファミリー
チャットボットサイトのフォントサイズ・フォントファミリーを調べてみました。
5サイトのフォント
サイト | フォントサイズ | フォントファミリー① | フォントファミリー② | フォントファミリー③ |
---|---|---|---|---|
A | 20px | Noto Sans JP | ヒラギノ角ゴ Pro W3 | メイリオ |
B | 14px | Noto Sans CJK JP | ヒラギノ角ゴ Pro W3 | メイリオ |
C | 18px | 游ゴシック | メイリオ | ヒラギノ角ゴ Pro W3 |
D | 16px | メイリオ | ヒラギノ角ゴ Pro W3 | MS Pゴシック |
E | 16px | 游ゴシック | メイリオ | ヒラギノ角ゴ Pro W3 |
TOPページ内の本文フォントサイズを調査したところ、平均サイズは15pxでした。5サイトの中で、最も小さいサイズで13px、最も大きいサイズで16pxです。全体的には、そこまで大きな違いもなく、標準的なフォントサイズを採用しているのがわかります。
また、フォントファミリーについては「Helvetica Neue」を採用しているサイトが多い傾向にあります。次点で「メイリオ」が多く、「ヒラギノ角ゴシリーズ」という順で設定されているのが確認できます。ちなみに「Helvetica Neue」は、世界でも様々な企業が使っているフォントファミリーです。チャットボット以外でも良く使われるフォントファミリーとなっていて、「Helvetica」の種類は「Neue」以外にもあり、どれを使うか迷う人も少なくありません。同じ「Helvetica」でも種類によってウェイトやサイズの違いがありますので、色々試しながら自社サイトのテイストに合うものを選びましょう。
これはあくまでもたった5サイトの傾向値でしかありません。
良質なWebサイトを作るためのヒントは、競合他社のサイトの中に、もっとたくさんあります。
そのためにも多くのサイトデータを集めて分析することが、自社サイトを成功に導くセオリーのひとつです。
とはいえ、集めなければならないデータ、そして同じ分量だけ分析しなければならないとなると、時間も労力もかかってしまいます。
競合他社サイトの情報収集を魔法のようにワンクリックでできたら良いですよね?
…実は、data maisonなら、あなたのその願いを叶えられます!
data maisonは、気になる競合サイト、新勢力企業のサイト、業界全体のサイトなどのデータをワンクリックで手軽に手に入れられるツールです。あなたがベンチマークしているサイトについて、今回紹介しているような「サイトカラー」や「フォントサイズ」などの情報も手に入りますし、チャットボット業界全体のファーストビューの傾向、コンテンツの傾向なども確認できます。
本来はWeb担当者やデザイナーなどが、自分でサイトを抽出して苦労しながら調査していたことを、data maisonならたった165円~※という圧倒的な低価格で、最新の業界データを一瞬で手に入れることができます。
ぜひ、今までの煩わしい調査から解放される魔法のような調査体験を経験してみてください。
絶対に欠かせないサイトコンテンツ
「初めての方へ」のページコンテンツ
今回調査した5サイトで必ず掲載されていたのが「初めての方へのページ」です。
●初めての方へのページ例
上記のように、自社の特徴・強み、今までの実績内容などが必ず掲載されています。
これはチャットボットからユーザーに向けた「強み・売り」を伝えるページとなっており、サイト内で欠かせないコンテンツのひとつです。なぜなら、アンケート調査・市場調査などを依頼したいと考えチャットボットを探しているユーザーの中には、一体どこに依頼をしたら良いのかと迷っている人もいます。
そんな、どのチャットボットを選んだらいいのか迷っている人は色々と比較をしていることが多いため、他の会社と比較した際に、思い出してもらえるような「特徴」や「実績」がなければ印象にも残らず選ばれません。また、特徴があったとしてもサイト内でしっかりアピールできていなければ、ユーザーもわからないままで意味がありません。そのため、ユーザーに知ってほしい、「特徴」「強み」「売り」などを伝えるために、「自社サービスの特徴・実績」ページは欠かせないコンテンツとなっているのです。
「機能や価格」に関するページのコンテンツ
ユーザーがチャットボットを決める際に気にするのが「どんなサービスプランがあるのか?」「料金はいくらなのか?」といった「商品や料金」に関することです。
例えば、「zendesk」では、どんなプランがあるのか一目でわかるので、ユーザーも「ほしい機能があるか、どうか」が判断しやすくなります。チャットボットの場合、サービス一覧の内容が独自名を付けていることも多いため、初めて見る人からするとわかりにくい場合もあります。わかりにくさをなくすためにも、補助的に「どんな機能があるのか」「どんなことに役立つのか」といったことを一覧でも記載するようにしましょう。その上で、それぞれのサービス紹介ページを作成し、より具体的な「特徴」「活用事例」「料金」を明記してください。
「導入事例」のページコンテンツ
チャットボットを探す上で、実際にどんな調査を今まで行ってきたのかがわかる「事例」や「口コミ」があると、ユーザーもイメージが湧きやすくなります。
● 導入事例のページ
具体的な内容を記載できれば、同業他社も「ここで調査を依頼した」ということがわかり参考になります。
また、同業他社との差別化やユーザーへのアピールにもつながります。さらに、個人顧客だけではなく、メディア関係者などの法人顧客向けにもアピールできるのです。一時的な効果だけで終わらせてしまってはもったいないので、実績を活用してよりPR効果を高めていきましょう。
特典・キャンペーン特集に関するページコンテンツ
チャットボットサイトで良くあるコンテンツとして、お得なチャットボットについてユーザーに知らせる「キャンペーン案内」があります。
●キャンペーン案内ページ例
少し前まではチャットボットを提供するサービスは多くありませんでしたが、近年は様々なベンチャー企業がAI・チャットボット事業に参入。それによりチャットボットそのものは、他社サイトでも取り扱っている商材となりました。そのため、ただ機能を伝えるだけでは差別化を図るのが難しくなってきているのです。
そのことから、プランの組み合わせや内容、料金などを変えることで、他のチャットボットサービスとの差別化を図っているサイトもありました。取り扱う商材が同じになるチャットボットサイトでは、こうしたプランや料金といった面で差別化を図ることで、いかにユーザーに選ばれるかどうかを常に工夫をしているのです。
チャットボットの集客やプロモーション方法
チャットボットの主な集客方法として、テレビCM、雑誌広告、電車広告などが挙げられます。様々な番組のスポンサーとなっていることも多く、テレビCMなどで広告を見たことがある人も少なくないでしょう。基本的には、アナログ的なプロモーション方法が中心となりますが、最近はインターネットを活用した集客も欠かせない存在となっており、特に、リスティング広告やYouTube広告、タクシー動画広告はチャットボットでも、よく活用されている方法です。
また、チャットボットの運用SNSを見てみると、以下の通りでした。
●5サイトの運用SNS
サイト | 運用SNS | ||||
LINE | YouTube | ||||
A | ● | ● | ● | ● | |
B | ● | ● | ● | ||
C | ● | ● | |||
D | ● | ● | |||
E | ● | ● |
TwitterとFacebookを運用しているサイトが多く、次いでYouTubeとなっています。
すべてのサイトで利用されているTwitterの投稿内容の傾向は、次々に打ち出されるキャンペーン案内やイベントシーズンのお得な情報などです。Twitterの利用者は幅広い層がいるため、キャンペーンを打ち出す際にも広報しやすく非常に使いやすいSNSとなっています。
最近は、YouTube広告に格安SIM・スマホの広告が出ることも増えています。新規契約につながるターゲットが多く利用するSNSだからこそ、各社アカウントを運用したり、チャンネルを開設したりしているのです。
また、SNSはユーザーともコミュニケーションを取りやすいツールです。すぐに効果が出るわけではありませんが、潜在顧客やファンの育成にもつながります。定期的に利用してくれるユーザーが増えたり、自発的に友人や知人に紹介してくれたりするなど、様々な良い効果が期待できますので、SNS運用およびソーシャルメディアのプロモーションを試してみてはいかがでしょうか。
チャットボット業界の現状と今後について
1990年代に、アメリカでは簡易のチャットボットが登場していました。しかし、この時点では一般ユーザーに広く普及することはなく、その後iPhoneが発売され、それに搭載された「Siri」によりAIやチャットボットの便利さ、新しさを一般ユーザーも知ることになります。
さらに、チャットボットに関連したサービスや製品を続々発表されました。そして、AmazonやGoogleからもAIスピーカーが発売され、チャットボットを広く普及させる土壌が完成したと言えます。
チャットボットはWebサイト、アプリなど簡単に実装できます。日本でもアメリカのブームから遅れること1〜2年後にチャットボットブームが到来し、普及を続けています。
近年のWebサイトのほとんどに、チャットボットが導入されていますよね。チャットボットと市場は今後も右肩上がりの成長を続けることが期待されています。とくにカスタマーサポート業務については、チャットボットを導入すればカスタマーサポート業務は自動化され、より少ない人員で運営することができます。
そうしたことら、さらなる拡大が見込まれるため、競争も激しくなっていくことが予想されるでしょう。
いかに他サービスとの差別化を図れるかが、今後の焦点となりますし、魅力を伝えることがなによりも大事になってくるかもしれませんね。
サイトをオープン、リューアルする際には今回紹介したことなどを加味して、ユーザーに選ばれるサイト制作をしましょう。
そして、より良いサイトで売上に効果をもたらすためにも…。
ぜひ、あなたも他社サイトの情報を調査して「人の心を動かす」魅力的なサイト制作をしてくださいね。
BtoBマーケティングを戦略的に進めるならこちらのサイトもおすすめ!
サイト良くして委員会
data maisonは、圧倒的な
低価格で同業サイトを徹底分析

Webサイト調査を手軽に簡単に
※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。
※ 対象となる業界やWebサイトによって月額が異なります。
※ 価格は全て税込です。
- ビッグデータ
- 業界データ
- 個別データ
- 最新データ
- 過去データ
