こんにちは、株式会社Antway システムアーキテクト部のy-sasakiです。
この記事では私たちが開発している「つくりおき.jp」の注文システムの改善についてお話したいと思います。小さなネタですが、私たちがどのようなアーキテクチャで開発を進め、どのようなスタイルで日々の業務に取り組んでいるのかをご紹介できればと思います。
同意画面の多重表示問題
「つくりおき.jp」の注文システムは、LINEのLIFF（LINE Front-end Framework）上で動作するNuxtアプリケーションとして構築されています。バックエンドにはGCPやFirebaseといったクラウドを利用しています。
公式から参照
ユーザーからの認可が必要な場合に「許可が必要な項目」の同意画面が表示されます。
同意画面では、ユーザーがLIFFアプリに必要な権限を与えることを許可します。
LIFFアプリを構築する際はLINE Developersより「チャネル」というものを作成するのですが、実は過去の技術的負債によりお客様のUXに直結する問題を抱えていました。
下の画像がBeforeとAfterです。
今回の取り組みではこの「同意画面」を、3回から1回に変更しました。
元々LPなどからLINEの「つくりおき.jp」公式アカウントの友だち登録をする際に、この同意画面が2回開いてしまい、さらに注文サイトに遷移する際にももう一度開くため、合計3回もの同意画面が表示されるという非常に煩雑な体験になっていました。登録までの画面数が増えれば増えるほど離脱リスクが高まりますし、なんだか怪しさも出てしまいますよね。
- LP → LINE友だち登録: 2回の同意画面
- LINEともだち登録後のトーク画面 → つくりおき.jp 注文サイト 1回の同意画面
このフローにおいて画面数を減らせばお客さまが登録完了するコンバージョン率を大きく改善出来る、という仮説を立てました。
原因
LINEアプリを作る際にメッセージングやログインといった機能別に「チャネル」というものを作成します。原因はこのチャネルの利用の仕方と、求める権限スコープの設定にありました。
LP → LINE友だち登録: 2回の同意画面
このフローは「LINEログインチャネル」とその配下に作られた「LIFF」アプリによって実現されます
この多重認証の原因は、LINEログインチャネルが求める権限と、外部サービスとの連携のために個別に設定していたLIFFアプリが求める権限が、それぞれ独立して要求されていたことにありました。
詳細は伏せますが、プロフィールアクセスやユーザー識別子の利用許可設定にズレがあったため、複数回の同意画面が出ていた、というものです。こちらは権限をあわせることで1回のみにすることができました。
LINEともだち登録後のトーク画面 → つくりおき.jp 注文サイト 1回の同意画面
以前、つくりおき.jp発足当時は、LINEアプリを作る際に「LINEログイン」チャネルと「Messaging API」チャネル両方へのLIFFアプリの作成が必要だったようです。
当時のなごりで、「つくりおき.jp」のLIFFアプリはMessaging APIチャネルを介して起動するようになっていました。ともだち追加とアプリ起動で異なるチャネルを利用していたことで、それぞれ別に同意画面が開かれていました。
Messaging APIのチャネルにはLIFFアプリを追加できなくなります のアナウンスにもあるとおり、現在ではMessaging APIチャネルにLIFFを作成することは非推奨となっているため、この機会にチャネルをLINEログインへ統一することでこの問題を解決しました。
改善後の成果と考察
今回の改修により、お客様は認証画面にわずらわされることなく、スムーズにお友達追加とサービスの利用を開始できるようになりました。
「よし、これで離脱率も減り、新規のお客様の登録数が増えるぞぃ！！」とワクワクしていたのですが、結果は...
定量的な評価としては、残念ながら本施策による目立った改善効果は見られませんでした。
LP → LINE友だち登録と、LINEともだち登録後のトーク画面 → つくりおき.jp 注文サイトに至る割合を定量的に見ていましたが、広告運用等でも変動する差異のみで、目立った変化はありませんでした。
今回の結果は、私たちにとって大きな学びとなりました。
一般的に、注文フローの画面数を減らすことはコンバージョン率の改善に有効とされますが、「つくりおき.jp」においては、必ずしもその定石が当てはまらないようです。
これらの経験を踏まえ、私たちは「つくりおき.jp」のような、お客様にとって購入単価が高い商材では「小手先のテクニック」よりも、お客様の納得感を醸成することが重要であるという点を改めて感じました。
お客様が抱える不安や疑問を解消し、購入への納得感を高めるような情報設計や機能追加にも、今後より力を入れていきたいと思わされます。
定量的な結果は振るわなかったですが、今回の取り組みは、技術的負債を解消しただけでなく、お客様の行動や心理を深く理解する貴重な機会となりました。
では。
Discussion