英会話アプリ「Chatty」のUIデザイナーが語る、リニューアルで会員登録率を2倍に上昇させた改善ポイント

by ゲストライター ゲストライター on 2015.6.17

Mai-Takahashi本稿は、カナダ、アメリカを拠点に活動している26歳フリーのUIデザイナーである高橋麻衣さんによる寄稿記事です。

日本の広告代理店で広告営業とプロデューサーを経験した後、昨年にはシリコンバレーでゲーム開発のブートキャンプ「MAKE SCHOOL」を卒業。現在は、カナダに在住し、フリーランスとして仕事をしています。


ユーザーの大半がビジネスマンであるレアジョブ英会話。一方の英会話アプリ「Chatty(チャッティ)」のコアユーザーは、意外にも女性が7割、それも10代がメインでした。以前女性向けサービスの運営に携わった経験があり、個人的にも英語に興味があったことから、この若い女性というコアユーザー向けにリニューアルデザインを担当させてもらうことになりました。

結果として、Chattyのデザインリニューアルは上手くいき、それは各種数値にも表れています。まずダウンロード数に関してはデイリーで20倍、月間でも10倍に伸びました。また、アプリダウンロード後の会員登録率も2倍に上昇。今回のリニューアルに際して、効果的だった4つのポイントを振り返ってご紹介します。

アプリのファーストビューで女性の心をつかむ

ウェブもそうですが、モバイルアプリのデザインにおいては特に、ファーストビューが大きな役割を持ちます。ファーストビューはアプリの世界観を表現し、ユーザーの信頼を一発勝負で得る画面だからです。またユーザーの期待に答えるという点だけでなく、属性が合っているターゲットをしっかりとサービスに集めるという点でも非常に重要になります。

ですので、Chattyのリデザインにあたって、まずターゲットとなるユーザーのインサイトを一気にノートに書き出し、どんな世界観を作り出すかをイメージしました。Chattyの場合、ターゲットユーザーは10〜20代の女性なので周囲の女友達などにヒアリング。すると、彼女たちの英語学習には「海外旅行で使いたいから」「いつか英語を使って仕事するため」「スキルアップするため」という目的があることが判明しました。

旧デザインもアプリを使った際のイメージが湧くデザインでしたが、もっとユーザーの想像力を膨らませるために、外国の街並みを歩いているユーザー目線のイメージに差し替えました。最近の若い女性はスマホのアプリに対しても、ファッションと同じような感覚、欧米風のお洒落なデザインを好む傾向があります。アイコンも同様にデザイン性の高いものが好まれるようになってきています。

スタート画面のBefore(左)&After(右)
スタート画面のBefore(左)&After(右)

車内やキャンパス内で、友達のスマホを覗き込んで「その可愛いアイコン、なんのアプリ?」と聞いてダウンロードすることは日常的にあります。そんな時、「人に見せても恥ずかしくないアプリのアイコン」であることは女性にとって、とても大切なことなのです。具体的に若い女性の間でどんなテイストが流行っているかを知るには、女性誌を見るような気分で、PinterestやTumblrなどで人気の高そうな写真を常にチェックするようにしています。

アカウント登録前に、出し惜しみせずサービスを見せる

講師一覧画面のBefore(左)&After(右)
講師一覧画面のBefore(左)&After(右)

上記のスクリーンショットにある【Chattyの先生を見る】ボタンを見るとわかるように、実はアプリを開始する前に実際に講師を一覧で見る機能があります。日本人は英語に臆する一面があるため、このように登録前に先生の情報が見えることで安心して英語学習をする心の準備が出来るようにしました。

さらにリニューアル後は、授業の講師を選べたり、講師がオンラインなのかオフラインなのかが確認できたり、より講師が身近に感じられるようにしました。先生のスクエア型の顔写真もサークル型に変更し、まるで友達とメッセージを交わし合う時のような親しみやすさを狙っています。

講師プロフィール画面のBefore(左)&After(右)
講師プロフィール画面のBefore(左)&After(右)

実際にサービスを使う前にどんな体験ができるのかを先に見せてあげるというのは、他のサービスでも同じことが言えます。動画サービス「Hulu」や、デザイナー向けツール「Sketch」のように期間限定のお試しプランなどを用意し、その先にどんな体験が待っているのかをしっかり見せること。こうすることで、ユーザーは大事なメールアドレスとパスワードを喜んで登録してくれるかもしれません。

文字で伝えるよりも、視覚的にストーリーをデザインする

モバイルのスクリーンは、PCのそれよりも遥かに小さいために、デザインをする時にどうしても制約が出てしまいます。でもその制約は、時としてより洗練されたUIを生み出すことがあります。

私がシリコンバレーでゲーム開発をしていた時に学んだのは、良いモバイルゲームやアプリにはチュートリアルというものがほとんど存在しないということでした。初めてアプリを操作するユーザーが、その画面で何ができるのかをすぐに理解できる必要があります。それを大量の文字で「説明」するのではなく、パッと視覚的に認知できるようにデザインすることが大切です。

下の画面は、英語学習に勇気を出して会員登録した直後にユーザーが見る画面です。以前のシンプルなイラストだっただけのものに比べて、チャットのスクリーンを見せた新しいデザインでは講師とチャットするイメージを掴み、アプリの使い方を感覚的に理解します。

登録後に出てくる一番最初の画面 Before(左)&After(右)
登録後に出てくる一番最初の画面 Before(左)&After(右)

小さなスクリーンで表現に制限があるからこそ、アプリのダウンロードから英会話終了までの一連の流れをひとつのストーリーとして伝えてあげる。どんなストーリーがユーザーにとって魅力的なのかを考え尽くすことで、洗練された最高の一画面が出来上がると思います。

温度感やちょっとした遊び心を忘れない

最後のポイントは、ユーザーが英語学習を開始してから、ある程度の時間が経った時の話です。Chattyのアプリには、もっと英会話を楽しみたい人向けに、先生とのチャット時間を購入出来る「チケット(課金)制」があります。無料のチャットだけでは物足りないというユーザーの気持ちに応えるものです。

ただ、私はこの購入画面のリニューアル前のデザインを見せてもらった時に、「購入」というボタンが少し気になりました。購入ボタンの横には値段のラベルがあり、この2つがセットになって商用的な印象を受けたからです。

この違和感に対して、Chattyのリニューアル版では、ゲームでポイントを獲得したり、一面をクリアした時に出てきそうなダイヤモンドのモチーフを取り入れてみました。「このダイヤを集めたら何か起こりそう」とユーザーの想像力を掻き立てるような遊び心を取り入れることで、ただ時間を買うだけでなくワクワクした体験に繫がります。

チケット購入の画面 Before(左)& After(右)
チケット購入の画面 Before(左)& After(右)

当然のことですが、10〜20代の女の子をターゲットに見据えて、彼女たちの親近感が湧くような色やイメージ、フォントのスタイルなど細部にまでこだわってデザインすることが求められます。それは単にアプリの色をまっピンクにするといったことではなく、女性により好まれやすい色のパターンを知ることから始めました。

アプリのデザインは、会員登録数、継続率、アクティブ率などフェーズごとに解決すべき課題が異なるので、デザイン前には必ず各アクションごと、画面ごとに仮のKPIをディレクターと話し合ってから取り組むよう気をつける必要があると思います。皆さんのアプリデザインのリニューアルのヒントになりますように。

ニュースレターの購読について

毎日掲載される記事の更新情報やイベントに関する情報をお届けします!




----------[AD]----------