
MOGILY BLOG
PRODUCT
LINE Front-end Frameworkを使ったサービスのCVを左右するボタンデザイン

Bagsy Me合同会社の小出です。
弊社デジタル整理券サービス「mogily」は
LINEが提供するwebフレームワーク
(LINE Front-End Framework)を利用して
サービスを展開しています。
LINEのフッターからせり上がる
ユーザーインターフェースを
見たことある方は多いと思います。
弊社デジタル整理券のシステムは多くの競合他社と異なり
・(認証も含めて)webブラウザに出ない
・ネイティブアプリ/LINEミニアプリではないのでリリースサイクルを早くまわせる
という特徴があります。
特に「アプリではない」という部分がポイントです。
テスト的に多くのことを試せます。
システムはもちろん、
デザインも細かい部分の変更を
徹底的に加えています。
弊社はエンタメ向けの整理券を
取り扱うことが多いのですが、
エンタメコンテンツは「縦長キービジュアル」
が多かったりします。
LINE Front-End Frameworkで
せり上がってくる部分は
「Full」という全画面を覆うものと
「Tall」という画面の3分の2くらいを
覆うものに分かれます。
https://engineering.linecorp.com/ja/blog/liff-our-latest-product-for-third-party-developers/
「mogily」では、縦長キービジュを
設定すると「Full」ビューにしていても
スクロールしないと申し込みボタンを
認識しずらいという課題がありました。
その課題を解決する仮説として
①下部申し込みボタンをfixedで固定にする
まずはこれを試しました。
最初はわりと良い感じに
なったと思ったのですが、
実際に端末で見たらびっくり。
スタイリッシュさを狙ってmogilyは
黒いボタンにしていたのですが
それをfixedにしてしまった結果、まさかの
「スマホのベゼルとボタンが同化してしまい更に視認性が悪くなる」
という現象が起きました。
想像もしていませんでしたね。
②ボタン色と形状を変更
そんなわけで続いて「申し込みボタンの色と形状を変更する」対応を実施。
かなり視認性が良くなったと思われます。
ボタンぽさを出し、ボタンの周囲は
うっすら透過にしてスクロールできることを
利用者に訴えかけるなど
いくつかの改善をしています
申し込み数は施策のCV値としてかなり重要な数字です。
まだ数字として出てきているわけではないですが、やはりWEBサービスはトライアンドエラーを繰り返さないといけないと改めて学んでいます。
アプリ化したい気持ちはもちろんあるのですが、ユーザーインターフェースがある程度固まるまではwebでできることをやっていくほうが得策であると感じています。