「LINEミニアプリ」のUIデザイン

LINEミニアプリでUIをデザインする箇所は？

デザインできる箇所は大きく２つとなります。

トークルームに表示するメッセージ

リッチメニュー（画面下部に表示するメニュー）

1. トークルームに表示するメッセージ

画像出典（左のクーポン画像）：LINEキャンパス | 無料でもらえるテンプレート画像まとめ

メッセージと聞くとテキストを想像しますが、それだけでなく「ボタンが組み込まれたもの」や「画像を表示するもの」など、9種類のメッセージタイプがあります。

中でも、下の画像の[Flex Message]はレイアウトの自由度が高く、マージンの調整や簡単な図形を描くことができます。

画像出典：LINE Developers | メッセージタイプ | Flex Message

どれくらい表現できそうか気になる！という方は、シュミレーターがありますので試してみてください。

画像出典：Flex Message Simulatorのスクリーンショット（2023/12/8撮影）

2. リッチメニュー（画面下部に表示するメニュー）

画像出典（リッチメニューの画像）：LINEキャンパス | 無料でもらえるテンプレート画像まとめ

アプリのタブバーに該当するパーツです。
1枚の画像になっていて、領域ごとにタップした時のアクション（特定のメッセージを送信、webサイトへ遷移…など）を指定できます。

サイズの制約はありますが、画像なのでビジュアル的工夫ができるパーツです！
通常のタブバーと同様に機能的な役割を果たすだけでなく、写真やイラストを用いて広告的な表現もよく取り入れられています。

画像出典：すべてLINE公式アカウントのスクリーンショット（2023/12/8撮影）｜左からヤマト運輸、スターバックス、ディオール、NEWT（ニュート）、無印良品

メニューを切り替える、タブのような表現もできます。

画像出典：ゾゾタウンLINE公式アカウントのスクリーンショット（2023/12/8撮影）

ネイティブアプリとは違う視点で、UIをデザインする必要がある箇所

実際に作成していてつまずいたものを 3つに絞ってご紹介します。

1. トークルームのファーストビューが狭いため、可能な限り端的なメッセージにする

画像出典（クーポン、リッチメニューの画像）：LINEキャンパス | 無料でもらえるテンプレート画像まとめ

リッチメニューがあるため、通常のファーストビューよりも表示範囲が狭くなります。
リッチメニューは開閉可能ですが、閉じる操作に気付かないユーザーもいるため、開いた状態を考慮しておく方が良いと思っています。

開いた状態だと、長すぎるメッセージは上部が見切れてしまったり、一度にたくさんのメッセージを送ると1送目に気付きにくいので注意が必要です。
縦幅を意識して可能な限り端的なメッセージにしましょう！

どうしても短くできない場合…

方法1. 1枚の画像にまとめる
画像にすることでテキストメッセージでは冗長になりやすい情報も、デザイン次第でコンパクトにまとめることができます。

画像出典：すべてLINE公式アカウントのスクリーンショット（2023/12/8撮影）｜左からスターバックス、無地良品

方法2. [カルーセルテンプレート]を活用する
メッセージを横スクロールで閲覧できるメッセージタイプの1つです。2枚目以降はファーストビューに収まりませんが、メッセージの見落としを軽減できます。

画像出典：ゾゾタウンLINE公式アカウントのスクリーンショット（2023/12/8撮影）

2. 一度送ったメッセージ内のボタンは非活性にできないため、いつでも何度もタップできてしまうことを見越したフローを用意する

メッセージ内のボタンは活性/非活性の制御ができません。

いつでも何度もタップできてしまうことを見越したフローを用意しておきましょう！

実際にプロジェクトでは、ボタンのアクションに応じて下記のようなフローを用意しました。

「1回目のタップ」と「2回目以降のタップ」でフローを変える

時間制限を設けて「時間内にタップ」と「時間外にタップ」でフローを変える

ある操作の途中であっても、後からタップしたボタンのアクションに上書きする

「強く制限したい操作」や「フローを用意すると複雑になってしまう場合」は、無理にトークルーム上で実装せずにLINE専用のブラウザ [LIFFブラウザ] へ遷移させる方法もあります。

一般的なwebサイトと同様のUIが実装できるため、こちらではボタンの制御ができます！
またLINE内で動作するため、毎回ログインすることなくトークルームでの操作履歴などにアクセスできるのも良い点です。

ヤマト運輸 公式LINEアカウントの例

画像出典：ヤマト運輸LINE公式アカウントのスクリーンショット（2023/12/8撮影）

3. サービスのトンマナを崩さない [Flex Message] を作るには、[secondary] ボタンを無理に使わない

前述の通り [Flex Message] は表現の自由度が高いですが、変更できない箇所もあります。

例えば、ボタンは3種類 [primary], [secondary], [link] が用意されていますが、[primary], [secondary] はテキスト色が固定されており、ボタンの背景色のみ変更できる仕様です。

トンマナ的にアクションに使う色を1つにまとめたい場合、[secondary] を無理に使わず [link] を代用するのがおすすめです！