(1/7)チャットデザインを自由にカスタマイズして、お気に入りのチャットを設置しよう

はじめまして。 チャットプラスは、お客様の問い合わせを増やし満足度を高めサポートコストを削減できる、素晴らしいツールです。ほとんど全てのサイトを活性化できる素晴らしいツールですが、うまく設定をしないと、効果を出せないこともあります。 はじめてチャットプラスを見た方は、「なんでこんなに安価なのに、機能が充実しているのだろう」と驚かれるかもしれません。チャットプラスはもともとシンプルなツールでしたが、多くの企業様に導入いただき、皆様のご要望をツールに盛り込むことにより、今では世界最多の機能数を誇るチャットサービスとなりました。 たくさんの機能が追加された一方、はじめてご覧になる方には、多機能すぎてしまい、すべての機能を使いこなせずにトライアルを終えてしまうこともあるかもしれず、それはとても残念なことです。 そこでチャットプラスは、出来るだけ多くの皆様にチャットをうまくご活用いただき、「導入してよかった」と思っていただくために、私たちがいつもチャット構築のお手伝いをするときにご案内しているノウハウを、7つのステップにわけてお届けすることにしました。 第1回目は、チャットのデザインをあなたのお気に入りにカスタマイズする方法です。

チャットのデザインは、お客様の認知に直接関わり、ユーザビリティに影響を与え、問い合わせ数に直接結びつきます。あなたのサービスにぴったりなチャットデザインを作ってみてください。

チャット枠のテーマやカラーを設定しよう

チャットプラスは、テーマや、カラー、テキストを自由にカスタマイズできます。 テーマの変更ページへは、以下の手順ですすんでください。 (1) 管理画面にログインします。 管理画面:https://app.chatplus.jp/login/

login

(2) 管理画面右上にある、歯車ボタン(設定ボタン)をクリックします。

(3) 画面左のメニューから、「チャット」をクリックします。 admin-chat

(4) 「チャット」>「デザイン」>「テンプレート」画面に移動します。 チャットテンプレート

(5) 「テーマを選択」のプルダウンから、お好みのテーマをクリックしてください。 テンプレートテーマは、ベーシック、ミニ、アプリ、モダンの4種類あります。

チャットで効果を上げるためには、アプリやモダンテーマを選択してください。問い合わせ数は30~40%変わります。インサイドセールスでコンバージョンを獲得するためにも、FAQを自己解決させサポートセンターやヘルプデスクの荷電件数を減らすためにも、まずチャットを認知させ利用を増やすことがチャット導線の基本となります。

それぞれのテーマの特徴は、以下のとおりです。

ベーシックテーマ

ベーシックテーマは、チャットプラスのすべてのプランでご利用いただけるテーマです。お客様に堅実な印象を与えることができますが、一昔前の表示形式であり、吹き出し形式で表示するアプリ、モダンなどの吹き出し形式に比べると問い合わせの数は増えません。 ベーシックテーマ ※ベーシックテーマは、すべてのプランでご利用いただけます。(ミニマムプランは、ベーシックテンプレートのみご利用いただけます)

ミニテーマ

ミニテーマは、小さな領域でチャットを行えるテーマです。ビジネスライトプラン以上のプランでご利用いただけます。アプリ、モダンなどの吹き出し形式に比べると、問い合わせの数は増えません。表現できる幅が狭くなるため、選択肢をたくさん並べたり、長文の回答を書くことには不向きですが、小さな領域で画面を占有しないため、文字、有人チャット中心のスタイリッシュなページなどに適しています。 ミニテーマ ※ミニテーマは、ビジネスライトプラン以上でご利用いただけます。
※ミニマムプランではご利用いただけません

アプリテーマ

アプリテーマは、スマホのメッセンジャーアプリのように、吹き出し形式でチャットを行えるテーマです。ビジネスライトプラン以上のプランでご利用いただけます。ベーシックやミニなどに比べ、およそ30%問い合わせの数は増えます。チャットボットの中には、アプリテーマ以上でなければ表現できないアクションもあるため、チャットを積極的に前に出していくのであれば、確実にアプリテーマ以上を利用することをオススメします。 アプリテーマ ※アプリテーマは、ビジネスライトプラン以上でご利用いただけます。
※ミニマムプランではご利用いただけません

モダンテーマ

モダンテーマは、吹き出し形式のスタイリッシュなプランです。ビジネスライトプラン以上のプランでご利用いただけます。アプリテーマに比べ、さらにチャット利用は10%増えます。アニメーションを充実させたり、画面からやや浮かせたオプション指定を可能にするなど、最新のCSSを利用したテーマで、最も利用されています。 モダンテーマ ※モダンテーマは、ビジネスライトプラン以上でご利用いただけます。
※ミニマムプランではご利用いただけません

テーマの設定はうまくできましたか?

つづいては、カラーを設定していきましょう。

色設定は、今運用されているサービスの配色を考えながら、何色を使うか選んでいきましょう。チャットプラスでは、すべての色を設定することができるため自由度高くすべての色を設定できます。デザインについては、デザイナーに頼んだり、既存の色見本サイトやカラーパレットを参考にするとよいでしょう。 【color-sample】 https://www.color-sample.com/ 【color hunt】 http://colorhunt.co/

(6) 赤枠部分をクリックし、各項目の色をカラーチャートから選択します。
 


(5)「更新」ボタンをクリックします。


チャットのテーマやカラーは変わりましたか? デモページ:https://app.chatplus.jp/admin/cp/demoから、チャットのデザインを確認することができるので、チェックしながら進めていくのがオススメです。


ベースの配色が決まったら、さらに詳細設定についての説明です。 詳細設定は、ビジネスプラン以上で有効になります。 ①アプリテーマのチャットウィンドウの上部に設置するアイコンを編集できます。(アプリテーマのみ) ②担当者画像の大きさを、小・中・大・特大 の四つのサイズから選択いただけます。(モダン・アプリテーマのみ) ③チャットウィンドウの表示色を変更できます。

チャットプラスでは、チャットウィンドウを半分透過して表示させることもできます。カラーピッカーで色を選びながら、右側にある透過率を選択すると、好みの透過度に調整できます。

④モダンテーマのウィンドウサイズ(高さ)を指定できます。 ⑤モバイル版の表示を設定できます。 ※モバイル版は、ウィンドウを見ながらチャットできるようにした中間表示に出来ます。 ※タイトルバーを太くできます。 ⑥チャットウィンドウの位置を、左下、右下から選べます。 ウィンドウを浮かせることもできます。 ⑦選択肢の文字サイズを、小・中・大・特大 の四つのサイズから選択できます。 ※オプションで太字にもできます。 ⑧モダンテーマ以外の選択肢の枠線の太さを、太い線、細い線、枠線なし から選択できます。 ※オプションで角丸にできます。 ⑨チャットウィンドウの、閉じるボタン、最小化ボタン、オプション、タイトルバー を非表示にできます。

オプションは、通知音を出さなくしたり、表示言語を選択できます。 タイトルバーを非表示にする機能は、スマートフォンアプリにチャットを組み込むときのデザイン性を高めるために利用されます。

アイキャッチャーをオリジナルに変更してみよう

チャットの問い合わせ窓口となる、アイキャッチャーを変えてみましょう。チャットプラスでは、あなたのサービスにあったアイキャッチャーを自由に設置できます。

アイ・キャッチャーとは
アイ・キャッチャーは主にサイトの右下に表示される、受付画像です。
サイトを訪れた訪問者がクリックすると、 気軽にチャットをはじめることができます。

(1) 管理画面にログインします。 管理画面:https://app.chatplus.jp/login/

login

(2) 管理画面右上にある、歯車ボタン(設定ボタン)をクリックします。

(3) 画面左のメニューから、「チャット」をクリックします。 admin-chat

  (4) 画面左のメニューから、「チャット」の「メニュー」をクリックします。

(5) タブから、「待機」をクリックします。

  (6)「アイ・キャッチャーを利用する」左横のチェックボックスにチェックを付け、「変更」ボタンをクリックします。 ※PC用とスマートフォン用それぞれ設定できます。  アイ・キャッチャーを利用しない場合は、チェックが外れた状態にします。

  (7) 使用したいアイ・キャッチャーを選択し、「登録」ボタンをクリックします。 ※画面下「参照」ボタンをクリックすると、オリジナルの画像をアップロードし、設定することもできます。  

アイキャッチャーに利用する画像について アイキャッチャーはチャットの窓口となるため、とても大切です。(チャットのデザイン以上に重要だという方もいるくらい重要です) アイキャッチャーの配色については、基本的にサイトと同系色の色を使うケースが多いです。また、サービスの内容やチャットを設置する目的などにより、アイキャッチャーとの相性があります。海外の商品販売サイトなどでは、出来るだけチャットに誘導してコンバージョンさせることを目的に、アイキャッチャーを画面上でチカチカと動かしたり、お客様をチャットに誘導するようなサイトも見受けられます。日本のサイトのアイキャッチャーは、邪魔にならないようおとなしく右下にいるケースが基本となります。

吹き出しアイコン

吹き出しアイコン 吹き出しアイコンは、ユーザビリティを向上させます。 アイキャッチャーは、チャットを利用する人には便利ですが、利用しない人にとってはユーザビリティを損ねる恐れがあります。チャットは補助的な役割として利用し、控えめに表示する場合、吹き出しアイコンを利用するケースが多いです。 吹き出しアイコンの特徴は、以下の通りです。 1.邪魔にならないので、ユーザにもともとのコンテンツをしっかり見てもらえる。 2.落ち着いていて、安心感があり、先進的な印象を与える。 3.問い合わせが必要なユーザの受付に絞り、チャットを受けられる。 4.Webのトレンドである「フラットデザイン」に適している。 5.アイコンで表示しているため、日本語だけでなく、多言語のユーザで認識可能。 6.無人で自動解決を目指したチャットボットや、B to BのFAQなどに置かれることが多い。

オペレーターアイコン

オペレーターアイコン オペレーターアイコンは、親しみを与えます。 アイキャッチャーは、サービスとお客様とを結ぶ窓口です。アイキャッチャーに人の顔(特に女性の顔)を利用すると、クリック率は最も高くなり、問い合わせの数を増やします。オペレーターの顔を大きく利用したアイコンは、親しみを与え、問い合わせを増やすのです。積極的にチャットを活用し、有人でお客様の満足度やコンバージョン率を高めたい時は、オペレーターアイコンを利用するケースが多いです。 オペレーターアイコンの特徴は、以下の通りです。 1.目立ち、チャットの問い合わせ数を上げる。 2.親しみやすく、有人できちんとサポートしてくれる印象を与える。 3.積極的にチャットを活用し満足度を高め、コンバージョンを上げるのに適している。 4.ECサイトや、にぎやかなデザインに適している。 5.有人やハイブリッドでチャットを活用しているサービスに置かれることが多い。

オリジナルアイコン

もしも、サービスのブランドイメージが高かったり、サービスに親しみやすいキャラクターがいる場合は、チャットのアイコンをアイキャッチャーにすると、サイトデザインとの親和性が高くなるだけでなく、コミュニケーションにも良好な効果をもたらします。 ブランドイメージやサービスのクオリティが高い場合、ロゴやキャラクターなどをアイキャッチャーにすると、無人のボットでも満足度が上がります。もしも運用されているサービスがお客様から愛され、多くのファンを持つ場合や、これから愛されるキャラクターを作って行こうとされているような場合は、ロゴやキャラクターをアイキャッチャーに利用するとよいでしょう。 オリジナルアイコンの特徴は、以下の通りです。 1.ブランディングされている場合、満足度や安心感を高める。 2.御社のサイトに親和性が高くなる。 3.完全ボットでも、満足度が上がりやすくなる。

デモページで、すぐにチャットをプレビューできます。

チャットのデザインをカスタマイズしたら、デモ画面でチャットのデザインを確認してみましょう。 (1) 管理画面右上にある、歯車ボタン(設定ボタン)をクリックします。

(2) 管理画面左にある、デモページをクリックします。

(3) デモページを選びます。

(4) チャットの動作を確認しましょう。


どんなデザインのチャットが出来ましたか。

ガッツポーズ いかがでしたか。 サイトにあったデザインのチャットは出来ましたか? アイキャッチャーはサービスに馴染んでいますか。

この記事を読んだあなたは、以下のようなことができるようになったはずです。 ・チャットのテーマを知り、自分のサービスに合ったテーマを選ぶことができる。 ・チャットのカラーを、自分の好きなように変更できるようになる。 ・アイキャッチャーの特性を知り、自分のサービスに合ったアイキャッチャーを選択できるようになる。 アイキャッチャーやチャットのデザインを変更すると、チャットへの問い合わせ数や満足度は大きく変わります。アイキャッチャーを工夫すると、クリックレートは数倍になります。「モダンテーマ」や「アプリテーマ」などの「吹き出し」を使ったチャットは、他のサービスに比べて30%以上、問い合わせが増える傾向にあります。

さぁ、あなたのサービスにあったチャットのデザインにカスタマイズし、サービスを成功に導きましょう。


ChatPlusからのお知らせ

「チャットはよさそうだけど、うまくいくかわからない」とお思いの方。チャットプラスは、皆様にチャットを効果的に使っていただき、結果を出していただくために、チャットや電話、訪問などのサポートはもちろん、セミナーや個別相談会などを行っています。是非お気軽にご相談くださいませ。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする