見出し画像

LINE Flex Messageでリッチなメッセージが送れる!実例をもとに解説

こんにちは!on株式会社、広報担当のデミです!

onではLINEを活用したアプリ開発を行なっています。

「LINEアプリ開発」と聞くとすごく複雑そうに聞こえますが、実はすでにみなさんが利用されているものもたくさんあるんですよ?

例えばLINE公式アカウント

よく使う店舗や有名人のアカウントなど、登録されている方も多いのではないでしょうか。

定期的にメッセージが送られてきたり、ユーザーが送ったメッセージに対して内容に沿ったメッセージが返ってきたり…。

これらはMessaging APIを利用しています。そのMessaging APIの機能の中にFlex Messageというものがあります。このFlex Messageを使えば、とてもリッチなメッセージを送ることができるのです!

さらに最近、Flex Message Simulatorにテストメッセージを送信できる機能が追加になったと話題になりましたね。

ますます気になるFlex Message。今回は、実例も踏まえてFlex Messageについて詳しくご紹介したいと思います。

そもそもMessaging APIとは

Messaging APIは、チャットボットを作成できるAPIのことです。

チャットボットとは、ユーザーからのメッセージにロボットが返信するプログラムのこと。

これによってメッセージを配信したり、ユーザーからのメッセージに合ったを返信することができます。

(Messaging APIについて詳しく書いた記事はこちら↓↓)

Flex Messageでできること

Flex Messageは2018年にリリースされた機能です。これが登場したことによってLINEのメッセージでできる幅がぐんと広がりました。

文字のサイズや色を変更したり、メッセージの途中やヘッダー部分に画像を入れることができるなど、自由にレイアウトが組めるようになったんです。

見た目が良いということはもちろんですが、操作性が上がることはユーザーにとっても嬉しい機能です。

Flex Messageは自由にレイアウトを組むことができるのですが、いくつかテンプレートも用意されています。

どのようなテンプレートがあるのか見てみましょう。

Flex Messageのテンプレート

Flex Messageには現在12種類のテンプレートが用意されています。

テンプレート1

テンプレート2

出典:Flex Message Simulatorより引用

もちろんゼロから作ることも可能ですが、テンプレートを元にしてカスタマイズするという方法でも十分オリジナリティーのあるメッセージが作れます。

HTMLやCSSと似た感覚で、文字の大きさ・色だけではなく、配置やボタンの場所など細かく変えることができ、非常に自由度の高いデザインが可能です!

Flex Messageを利用した事例

こちらでは目黒区の図書館蔵書を検索でき、図書館利用者カードの貸出券番号とパスワードを登録しておくことで実際に本を予約することができます。

いつでも、どこでも借りたい本を探せて、予約できるなんて画期的!

この本や予約一覧にFlex Messageを利用しています。

ただ文字の羅列が表示されるだけだとわかりにくいですが、写真を組み込んだり、文字のレイアウトやボタンがあることで非常にわかりやすく、操作性があがります。

参照:HTMLに近い感覚で自由なレイアウトが可能になった新しいメッセージタイプ「Flex Message」が追加!サンプルを交えてご紹介します

画像1

出典:Using Flex Message to create World Cup LINE Bot より引用

次はタイのディベロッパーが開発したFIFA World Cup2018のボットです。Flex Messageを活用して、操作性・デザイン性に優れたコンテンツが配信されました。

これ本当にLINEで?と疑いたくなりますよね。対戦表や勝敗表も含めて、すべてLINE上で配信されています。

ここまでFlex Messageは柔軟性に優れたリッチなメッセージを作ることができます。

画像6

こちらのホテルアジア会館では、LINE上で予約をすることができます。写真もついているので、部屋の様子がよくわかりますよね。

Webサイト上で予約するのと変わらない、リッチな見た目にすることが可能です。

画像4

これは美容化粧品ETVOSのLINE公式アカウントです。

一番上の「おすすめの商品をご紹介します!」というメッセージはFlex Messageを使っていない、普通のメッセージ。

その下がFlex Messageを利用したメッセージです。ん?何なに?と思わずスワイプしてしまいますね。

単に全てのメッセージをFlex Messageにすれば良いというわけではありません。適材適所で使うことによって、より効果を発揮してくれます!

画像4

ロペピクニックのクーポンメッセージ。これもFlex Messageを活用したものなんですよ!

Flex Messageの機能がなければ、画像もなく、ただ文章とリンクが貼られたメッセージが送られるだけ。

きっと他のメッセージに紛れて、お得なクーポンメッセージだと気づかれないまま…なんてことになっていたはず!

文字だけのメッセージと区別することで、よりユーザーの目に止まりやすくなりますよね。

Flex Messageを試してみたい!

ここまで読んで、Flex Messageを試してみたい!と思った方もいるのではないでしょうか?

冒頭で少し触れましたが、LINEにはFlex Message Simulatorという便利な機能があります。

こちらはLINEが無償で提供しているサービスで、難しいコードを書かなくても画面を見ながらFlex Messageを作ることができます。

今までは作成することまでしかできなかったのですが、こちらに新しい機能が追加になりました!

テストメッセージが送れるようになったのです!

Flex Message Simulator上でレイアウトを確認することもできるのですが、実際にどのようにLINE上で見ることができるのか、操作性はどうなのかなどは送ってみないとわからないですからね。

やはり実物を見ると違います。

これだったら自社でも開発できるのでは?そう思った方もいるかもしれません。

しかし、LINEのアプリ開発には専門の知識が必要になります。専門のスキルがないと、金銭的・時間的にコストが膨らみやすくなってしまうのです。

その点、onには経験豊富なエンジニアを始め、ユーザー中心のデザイン設計を得意とするデザイナーが揃っているので、ユーザーにとって使いやすいLINEアプリ開発が可能です!

さいごに

いくつか事例を交えながらFlex Messageについてご紹介させていただきました。

LINEでこんなこともできるんだ!と思った方や、あれはFlex Messageという機能を使っていたのか…と思った方もいると思います。

LINEアプリ開発ではこの他にもできることがたくさんあります。

こんなことはできないの?と疑問に思った方もぜひご相談ください!実績豊富なonは、技術面だけではなくビジネス面までしっかりご提案します。

コスト面が心配だなぁ…と思ったあなた!onではサブスクリプション型開発というプランを提供しています。

資料請求もできるので、ぜひ気軽にお問い合わせください。

また、ツイッターでも情報を発信していきますのでフォローお願いします!


この記事が気に入ったらサポートをしてみませんか?