29
12

More than 3 years have passed since last update.

LINEのチャットボットでできるUXデザイン

Posted at

07d726be-9792-42e6-acbb-dc77c0d20d5c.png

皆さんこんにちは!
ZEALSでコミュニケーションデザイナーをやっている森です。

ZEALSはチャットを通して商品の購入等を行う「チャットコマース」の会社なのですが、
現在、私はチャットのシナリオ設計を主に行っています!シナリオ設計といわれると難しいかもしれないのですが、
このチャットボットを使うユーザーのペルソナやその人がもつ課題を考え、それを解決するための会話を考えていて、
ざっくりいうと、ユーザーの課題解決、が仕事だと思っています!

さて、今日は、LINEでチャットボットを作る際にできるUXについてご紹介したいと思います。

クイックリプライ

クイックリプライは、特定のメッセージに対して最大13個のアクションを「クイックリプライボタン」として表示させることが可能です!
下の画像のように、ボタンを表示することができます。ちなみに、ボタンの中には絵文字や画像(小さめのアイコン)もいれることが可能です。選択肢が13個まで用意することができるので、たくさん選択肢がある場合などは、クイックリプライを使うことが多いです!
503af62d-b8d3-472e-8a23-0bc193322cee.png

リッチメニュー

リッチメニューとは、トーク内の画面下部に表示される固定のメニューのことです。
分割されたリンク付きの画像を貼り合わせて構成されており、画像をタップすると、次のシナリオへの移行や
外部サイトへの誘導が可能になります。
様々なサイズがあり、画像は2500×1686ですが、ZEALSでは30パターンの画像サイズに適応しています。
先ほどお伝えしたクイックリプライでは、文字が小さくなってしまうのですが、リッチメニューだと視認性がよく、ボタンとしてのおしやすいので誰でも使いやすいのがポイントです。
8de85781-6715-449a-b2db-ec107182c433.png

イメージマップ

イメージマップメッセージでは、異なるアクションに結びつく複数のタップ領域が指定された画像を送信することができます。
画像内のタップ領域には、リダイレクトするリンクのURLや、ユーザーからbotに送られるテキストメッセージを指定することができます。
このタイプは様々な企業のLINEアカウントで送られているので、見たことがある方もいるのではないでしょうか。
1枚の画像が送られて、商品のリンクに遷移することができるタイプのものがよくあるのですが、シナリオを指定することもできます。
リッチメニューよりもサイズが大きいため(1040×1040)情報が多いときなどに使ったり、商材の画像を表示するときに使うのがおすすめです!
28adb040-e2b1-41a6-af2e-6f83836ed642.png

フレックスメッセージ

Flex Messageは、CSS Flexible Box(CSS Flexbox)の基礎知識を使って、レイアウトを自由にカスタマイズできるメッセージです。
FlexコンテナがFlex Messageのボックスに対応し、FlexアイテムがFlex Messageのコンポーネントに対応しています。
ボタンの色や、テキストの色、画像サイズをなどを変更することができ、LINE Bot Designerを使うと、
プログラミンの知識がなくても簡単にかつ短時間で見た目のいいものを作ることができるのでおすすめです!
f14b9570-0468-43dd-81ff-1e2dd81c34bd.png

このように並べると、左から右に情報を流す形で情報提供が可能になります。
74d86342-4f27-49cd-85c3-bf2767bce392.png

最後に

いかがでしたでしょうか?他にもLINEでの表現はいろいろあるのですが、今回は普段私がよくつかうもので紹介させていただきました!
いろいろあるのですが、コミュニケーションデザイナーは、ユーザーに対してどのような見せ方が最適か、日々考えながらシナリオを作っています!
そんなZEALSでは、”日本をぶち上げる”というVISIONに向かって、コミュニケーションをつきつめて考える仲間を募集しております!
興味があればぜひ、ご連絡くださいませー!

29
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
12