mogily 株式会社

MOGILY BLOG

MOGILY BLOG

PRODUCT

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

0

Bagsy Me合同会社の小出です。

弊社デジタル整理券サービス「mogily」は
LINEが提供するwebフレームワーク
(LINE Front-End Framework)を利用して
サービスを展開しています。

LINEのフッターからせり上がる
ユーザーインターフェースを
見たことある方は多いと思います。

弊社デジタル整理券のシステムは多くの競合他社と異なり

・(認証も含めて)webブラウザに出ない
・ネイティブアプリ/LINEミニアプリではないのでリリースサイクルを早くまわせる

という特徴があります。
特に「アプリではない」という部分がポイントです。
テスト的に多くのことを試せます。
システムはもちろん、
デザインも細かい部分の変更を
徹底的に加えています。

弊社はエンタメ向けの整理券を
取り扱うことが多いのですが、
エンタメコンテンツは「縦長キービジュアル」
が多かったりします。

LINE Front-End Frameworkで
せり上がってくる部分は
「Full」という全画面を覆うものと
「Tall」という画面の3分の2くらいを
覆うものに分かれます。

media
https://engineering.linecorp.com/ja/blog/liff-our-latest-product-for-third-party-developers/

「mogily」では、縦長キービジュを
設定すると「Full」ビューにしていても
スクロールしないと申し込みボタンを
認識しずらいという課題がありました。
その課題を解決する仮説として

①下部申し込みボタンをfixedで固定にする

media

まずはこれを試しました。
最初はわりと良い感じに
なったと思ったのですが、
実際に端末で見たらびっくり。

スタイリッシュさを狙ってmogilyは
黒いボタンにしていたのですが
それをfixedにしてしまった結果、まさかの
「スマホのベゼルとボタンが同化してしまい更に視認性が悪くなる」
という現象が起きました。
想像もしていませんでしたね。

②ボタン色と形状を変更
media
そんなわけで続いて「申し込みボタンの色と形状を変更する」対応を実施。
かなり視認性が良くなったと思われます。
ボタンぽさを出し、ボタンの周囲は
うっすら透過にしてスクロールできることを
利用者に訴えかけるなど
いくつかの改善をしています

申し込み数は施策のCV値としてかなり重要な数字です。
まだ数字として出てきているわけではないですが、やはりWEBサービスはトライアンドエラーを繰り返さないといけないと改めて学んでいます。

アプリ化したい気持ちはもちろんあるのですが、ユーザーインターフェースがある程度固まるまではwebでできることをやっていくほうが得策であると感じています。

< INDEX
PAGE TOP