見出し画像

新卒 1 か月目でアプリ掲載画像を作り直したらダウンロード率が 11.8%アップした話 #Zaim

はじめに

こんにちは、初めまして。Zaim デザイナーの @otoyan です。私は 6 月に新卒社員として Zaim に入りました。当初はイラストの書き起こしや UI 遷移図などを作成していましたが、1 か月が経過した頃、初めてまるっと任せてもらえたのが 「Google Play ストアと App Store に掲載する画像(スクリーンショット)の改善」という業務です。

AB テストを実施したところ、アプリのダウンロード率が 最大 11.8%アップする、という結果になりました。今日は、この業務中に考察したことや、制作のうえで気をつけた点などを共有したいと思います。

ミッションは「ダウンロード率を 5%以上アップ」

この業務を任されたとき、上司から言われた目標は「アプリ紹介ページに来た人のうち、ダウンロードする人の割合を今より 5%以上アップしたい」というものでした。

Zaim のアプリを使って家計簿を記録するには、事前に

App Store や Google Play ストアのアプリ紹介ページに来る

アプリ本体をダウンロードする

アプリを起動してユーザー登録する

というステップが必要です。しかし、必ずしもアプリ紹介ページに来た全員がユーザー登録までこぎつけるわけではなく、それぞれの過程において、一定割合のユーザーが脱落してしまいます。

アプリ紹介ページを見て実際にダウンロードするかどうかは、そこにどんな画像を掲載するかが大きく影響します。スクリーンショットはしばらく更新していなかったので、「改善したら効果が大きいのではないか」という判断があり、作り直すことになりました。

スクリーンショットの改善ステップ

とはいえ、いきなりスクリーンショットそのものを作り始めても、良いものはできません。まずはリリースまでに、どのようなことをやらなくてはいけないのかを事前に把握するようにしました。

それぞれのステップについて、何をしたのかを順に説明します。

レイアウトの考察

はじめに、ストア内のさまざまなジャンルのストアのスクリーンショットを集め、レイアウトの違いに注目しました。すると、大きく分けて以下の 3 パターンがあることがわかりました。

パターン A:体験系

対象のユーザー層や利用シーンを一瞬でイメージさせたいときに有効。以下は「ソフトバンクカード」の例です。女性の笑顔、円グラフと金額が入ったアプリのキャプチャ、そしてクレジットカードの画像で「クレジットカードの残高がいつでも・どこでも確認できそう」というメリットをわかりやすく想起させています。

パターン B:メッセージ系

複雑なあしらいはせず、平面モックとキャッチコピーだけで伝えたいメッセージを明確に表現します。以下は「ナースフル 疾患別シリーズ 循環器疾患」のスクリーンショットです。「誰が=看護師さんが」「何が=看護のポイント」というように、対象としたいユーザー像と、そのベネフィットが明らかで、必要としている人が迷わずダウンロードできそうに思いました。

パターン C:図解系

以下は「Yahoo! 乗換案内」です。右側にウィジェットの画面キャプチャはあるものの、一番目立つのは「何ができるのか」という左側の説明文です。アプリの中身が画像や写真、メッセージだけでは伝わりづらかったり、UI や細かな機能の魅力で差別化させたいときに有効だと考えました。

Zaim のアプリは、かゆいところに手が届くような機能性に価値を感じてほしいので、基本路線としては、その魅力が一番伝わるであろうパターン C とすることにしました。また、図解がなくても伝わるような箇所は、臨機応変にパターン B を選択しようと決めました。

要素の考察

レイアウトの次は、その中で表現する要素を決定します。まずは、Zaim に近しいサービス(具体的には Fintech 系のアプリ)は、どのような内容をスクリーンショットに入れ込んでいるのかを調査しました。

Fintech 系アプリに共通している点
多様な機能を説明している
UI をしっかり見せている

機能が魅力的に見えるよう、スクリーンショットの中に入れる画像を適切に選ぶことが肝になりそうと感じました。

デザインの制作

以上により大枠の方向性は決まったのですが、もっとも重要なのは「Zaim をどう差別化し、どんなメッセージを強調してユーザーに届けるのか」です。

これを決定するにあたって、社内で共有されている Zaim のブランディング考察の Qiita::team を読んだり、上司とのディスカッションを重ねました。その結果、以下の 2 点を重点的に伝え表現することが、目標の達成につながると考えました。

(1)簡単さを伝える

Zaim の大きなターゲットの一つは、家計簿をライトに使っていきたい方々です。そのためには、「私にもできそう」と思ってもらえることが重要。その身近さを、以下の要素で表しました。

明るく単純な色づかいを採用する
太くて均一な線で統一する
線数の少ないイラストで情報量を減らす
ビジュアルだけで理解できるようにする
文字は「読む」ではなく「見る」
べた塗りを多くし、見づらい要素がないようにする

(2)定番感を伝える

Zaim は「個人の家計管理」という、一人ひとりの暮らしや趣味嗜好に直結するテーマを扱っています。このため、「自分の大事な情報を預けるのにふさわしいのか」という懸念が、ダウンロードを躊躇させる一要因になる可能性があります。多くのユーザーがすでに利用している定番アプリであることを以下のような要素で強調する必要があると考えました。

ダウンロード数、レシート機能、グッドデザイン受賞を強調する
ブランディングカラーを使い、統一感を出す
中性的・ニュートラルな色使いやあしらいを採用する

社内レビューの実施

デザインを制作したら、次に待ち構えているのは社内レビューです。Zaim では社内レビューはデザイナーチーム内だけではなく、全スタッフに向けて共有し、誰でも意見を言えるようにしています。ここで出てきたアイデアを取捨選択し、よりよいアウトプットになるよう調整していきました。

なお、私は制作途中のものを社内でレビューを受ける際、これまで記載したような思考過程は必ず文章化しています。これにより、「狙いに沿ったアプローチができているか?」という基準で判断してもらいやすくなりますし、自分の中でも整合性が取れているかを確認できます。

成果を計測

以上の過程を経て、完成したのが以下のスクリーンショットです。

Google Play Store にて AB テストを行ったところ、次のような結果が出ました。

ABテストの結果
最大で 11.8% ダウンロード率が改善できそう! 

一定の成果が出たということで、App Store にも同じデザインを使ってもらうことになりました!

今後の改善ポイント

今回のスクリーンショットにアップデートしたことで、成果が数字に表れ、私自身、大きなやりがいを感じました。そして入社早々から、このような目に触れられる機会の多い広報物に真剣に向き合えたことは、非常に勉強になりました。デザイン制作をするにあたって、より Zaim というサービスをブランドの視点で考える癖がついたからです。

ただ、まだまだ反省点はあります。一番大きいのは、本来 Zaim が印象づけたいイメージとはややズレた内容になってしまっている点です。

具体的には「やや女性よりの万人」を狙ったつもりが、もっと若者・女性が好みそうなもの偏ったテイストになってしまいました。これは、入社時に抱いていた「私の中の独自の Zaim イメージ」を押し出しすぎてしまったからだと感じています。

また、アンインストール率がやや増加してしまったのも反省点です。これはスクリーンショットのイメージと、実際のアプリの UI がズレていると感じるユーザーの方が一定割合いて、期待値にそぐわなかったためだと考えています。

今後こうした点も調整し、よりダウンロード率を高められるようにしたいと思います。

おわりに

いま現在、Zaim ではまだまだデザイナーが足りておらず、少し寂しく感じることもあります。例えば、学生の頃のように、デザイン案を持ち寄って競り合うというようなこともやっていきたいです。

でも、私以上にデザインに貪欲な上司がアドバイスをくれたり、理解のある周囲のおかげで、プレッシャーや制限を感じずに自由にデザインができて、とても成長できていると実感しています。チャンスを生かして個人の力を最大限に発揮したいデザイナーにとっては、最高の環境だと感じています!


31

otoyan

大学院を中退し、2018年6月 Zaim にデザイナーとして入社。絵本『ものぐさトミー』を見習い、素敵な自動化に囲まれラクして生きたい。

デザインの図書館 by Zaim

Zaim デザインチームによるブログ。 コンセプトは、デザインの知見を蓄積し、すべて公開する。
1つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。