Share

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

1 suki 7 suki
読み込み中...

こんにちは、UIデザイナーの齊藤です。

主にアプリのUIデザイン業務を5年ほど続けてきましたが、最近ネイティブアプリではなく「LINEミニアプリ」を作成する機会が増えてきました。

LINEミニアプリはLINE内で操作するため、UIをデザインできる箇所がないように感じる方が多いのではないでしょうか?

私自身そう感じていたのですが、作成していく中で「ネイティブアプリとは違う視点でUIをデザインする必要がある」ことに気付きました。
今回はその気付きをまとめましたので、LINEミニアプリを作成される際はぜひご参考にしてみてください!

LINEミニアプリとは

端的に表現するなら「LINEのアプリ内で自社のサービスを提供するもの」になります。
ユーザーの操作は、サービスを提供する公式アカウントを [友だち追加] した後に [トークルーム] で行えます。

例えば…デジタル会員証の提示、新商品のお知らせを受け取るなど、みなさん一度は使ったことがあるのではないでしょうか?

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

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

  • トークルームに表示するメッセージ
  • リッチメニュー(画面下部に表示するメニュー)
  • 1. トークルームに表示するメッセージ


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

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

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


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

    Flex Messageの例

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

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

    画像出典:Flex Message Simulatorのスクリーンショット(2023/12/8撮影)

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


    リッチメニュー

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

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


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


    リッチメニューの例

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


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


    ゾゾタウンLINE公式アカウントのリッチメニュー

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

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

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

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


    トークルームのファースビュー

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

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

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

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

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


    1つの画像にまとめる例

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


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


    [カルーセルテンプレート]を活用する例

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

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


    ボタンが非活性にできない例

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

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


    フローの例

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

  • 「1回目のタップ」と「2回目以降のタップ」でフローを変える
  • 時間制限を設けて「時間内にタップ」と「時間外にタップ」でフローを変える
  • ある操作の途中であっても、後からタップしたボタンのアクションに上書きする

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

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


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

    LIFFブラウザの例

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

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


    Flex Messageで使えるボタンのテンプレート

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

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

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


    [link]を代用した例

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

      • 1. トークルームのファーストビューが狭いため、可能な限り端的なメッセージにする。難しい場合は、画像に置き換えたり、カルーセルテンプレートを活用する。
      • 2. 一度送ったメッセージ内のボタンは非活性にできないため、いつでも何度もタップできてしまうことを見越したフローを用意する。フローが煩雑になる場合は、[LIFFブラウザ]を取り入れる。
      • 3. サービスのトンマナを崩さない [Flex Message] を作るには、[secondary] ボタンを無理に使わない。[primary] と [link] のみを使えばボタンの色を1色にまとめられる。

    まとめ

    LINEミニアプリのUIデザインについて「ネイティブアプリと異なる箇所」をまとめました。

    今回はUIデザインという視点に絞っていますが、ブランディングの視点を取り入れるなら、チャットならではの文言ルールや語り口調をどうするかなども考慮すべきポイントとして挙げられます。
    チャットベースのUIだからこそ、上記の配慮が生きてくると思います。ぜひこちらも取り入れてみてくださいね。

    ここまで読んでくださり、ありがとうございました。
    少しでもお役に立てると嬉しいです!

    Monstarlabで一緒に働きませんか。

    採用情報を見る

    UI/UXデザインに関するご相談や、
    案件のご依頼はこちら

    お問い合わせ

    by Yusa Saito

    大学ではプロダクトデザイン専攻するが、福祉(ユニバーサルデザイン)・建築も学び、デザインの考え方自体が好きになる。卒業後モンスターラボに入社し、主にUIデザイナーとして情報設計、UI作成、デザインシステムの構築を担当。UIデザインを軸にしつつUXデザインも勉強中。

    View articles

    • Share this article:

    How can we help?

    お悩みのことがあれば、お気軽にお問い合わせください。

    お問い合わせ