App Storeで、新しいアプリを探しているときを想像してみて下さい。探したいキーワードを打ち込み、検索したとします。 検索結果を一通り見て、どのアプリをDLするかを決めるかと思います。では、ここでDLするかしないかを決定する最も重要なポイントとなっているものは一体なんなのでしょうか?

人間の脳は、文章から得る情報よりも、視覚からの情報をより素早く処理するということがわかっています。このことからも、アプリアイコンのデザインはASOで最も重視するべき点であると言えるでしょう。 この記事では、「良い」アプリアイコンの条件を満たすための必要条件を簡単に解説していきたいと思います。また、アプリアイコン作成におけるベストプラクティスや、すでにあるアイコンの傾向、さらに、アプリアイコンの最適化におけるヒントもご紹介します。

アプリの第一印象は、アイコンによって決まると言っても過言ではありません。アプリの「顔」とも言えるこのアイコンは、アプリの個性を引き立たせるだけでなく、DL率の向上に大いに貢献します。

平均的にアプリアイコンは、CVRを10〜25%増加させるポテンシャルを持っており、さらにTTR(タップスルー率)を急上昇させることもできます。

このようなことから、ASOにおいて、アプリアイコンの最適化は絶対に欠かせない一要素であると言えるのです。

App Storeのガイドライン

どれだけ優れたアプリアイコンを考えたとしても、AppleやGoogleの提供するガイドラインに沿ったものでなければ意味がありません。 AppleとGoogleは、サイズからUXに至るまでを考慮した上で、適切なアイコンに関する詳細な記述を明記しています。

アプリアイコンのサイズ

モバイル端末のホーム画面用の小さなサイズから、パソコンのApp Store用の大きなサイズまで、いくつかのサイズのアイコンを作成する必要があります。

以下は、それぞれのデバイスにおけるアイコンのサイズ表です。

アプリアイコンの特性

すべてのアイコンは、以下の仕様に沿ったものでなければなりません。

Google Playストアでアプリをリリースするためには高解像度のアイコンが必要となりますが、高解像度のアイコンは、アプリのリリース時のアイコンとして再使用することはできません。アプリアイコンの仕様は、次のデザインガイドラインに従う必要があります。

・Android Mで使用されている素材アイコン ・Android O適応のアイコン

Google Playの要求は以下の通りです。

・32-bit PNG(アルファ値を含む) ・解像度: 512px – 512px

・最小ファイルサイズ: 1024KB

App StoreとGoogle Playストアにおけるアイコンのデザインに関する要求や推奨はそれぞれ異なります。 どちらのOSを利用するかに関わらず、良いアイコンは、アプリストアを訪れたユーザーに好印象を与えるだけでなく、アプリの質や目的を瞬時に伝える役割も果たしてくれるのです。

アイコンの最適化を始めよう

では、最適化をするにあたって、そのアイコンが良いものであるかをどのように確かめればいいのでしょうか?

CVに導くためのアプリアイコンの核となる要素は、シンプルさ、過剰な視覚要素の削減、そして、自身のアプリのカテゴリーに見合った雰囲気を失うことなく、競合アプリの中で目立つことの3つであると言えるでしょう。

これらを実現するための方法の一つとして、A/Bテストがあります。A/Bテストを行う上で一番難しいのは、比較するためのいくつかのアイコンのバリエーションを作成しなければならないことです。

まずは、どのようなアイコンを作成するべきかを知るために、それぞれのカテゴリーにおいて最も人気のあるアプリのアイコンを見てみましょう。 そして、アイコン作成にあたって考慮すべきポイントが押さえられているかを確認しましょう。

・アプリの重要な機能や特色がわかるデザインであるかどうか

アイコンを見ただけで、どんなアプリなのかをユーザーに分かってもらうことは必須です。例えば、自撮りアプリのアイコンを見てみましょう。ほとんどのアイコンが、カメラやレンズを想起させるデザインであることがわかります。

音楽アプリのアイコンでは、音符や、音波などのデザインが多用されています。また、レシピアプリでは、キッチン用品やエプロン、コック帽などのアイコンが多く見られます。

これらの関連性はごく当たり前に思えるかもしれませんが、もし間違ったものを使ってしまえば、CVRは劇的に悪くなりかねません。例えば、DIYビデオが視聴できるアプリ『Darby』では、アイコンのデザインが原因でユーザーに誤解を招いてしまったという事例もあります。 アイコンに入っていた「Play」マークによって、ユーザーは『Darby』をビデオ編集アプリだと勘違いしてしまいました。その後A/Bテストを行い、適切なアイコンへと改善することができました。

アプリにはそれぞれの特徴があると思いますが、それをきちんと認識して、強調することが重要です。 そのため、ASOの戦略を立てる際には、アプリが他の競合と比べて突出したものであるように見せる必要があります。

アプリのブランドがすでにターゲットとしているマーケットにおいて公開されている場合、アプリアイコンでもブランドを示すことは必須です。そうすることで、アプリに対してユーザーがより信頼感を持つことができるためです。

例えば、「レース」というキーワードで検索してみると、いくつかのアイコンに、大きくパブリッシャーのロゴが入っていることがわかります。

・検索結果において、競合と比べて目を引くものであるかどうか

アプリと関連性の高いキーワードで検索することで、競合と比べて自分のアプリが検索結果のどの位置に表示されているかを確認することができます。どんな競合がいるのかをきちんと把握しておきましょう。そして、アプリアイコンが似ているものであれば、どうしたらその中で目立つことができるのかを考えてみましょう。

最適化において知っておくべきことは、アイコンが最も効果を発揮するのは、検索結果のページで最初に表示されたタイミングであるということです。 一度アプリの製品ページに移動すれば、ユーザーはそこまでアイコンに注目しなくなるのです。

そのため、App Storeにおいて関連性のあるカテゴリーにおけるアイコンのA/Bテストを行い、競争の激しい中で最もパフォーマンスのよかったものを選ぶという方法が最も簡単な最適化の方法であると言えるでしょう。

アイコンの色とスタイル

アイコンの色とスタイルは、ブランド全体のイメージを決める重要な要素です。アプリアイコンはアプリストアにおける企業の象徴となるものであるため、実際の企業のイメージとアプリアイコンのデザインがあまりにかけ離れたものである場合、ロイヤルユーザーまで失ってしまう可能性があります。 アプリを開発するにあたって、必ずターゲットとするユーザー層がいると思います。年齢、性別、地域、言語など、あらゆる要素がアプリのデザインに影響を与えます。 これは、アイコンにおいても同様です。そして、ターゲットユーザー層が明確であればあるほど、多くのDL率が見込めるでしょう。当然ながら、子供向けゲームアプリのアイコンと、タスク管理アプリのアイコンでは、色や配置など、全く異なるデザインであることがわかります。

多くの企業は、色によって見分けられることがあります。これは、アプリにおいても同じです。そのため、どの色をアイコンに使うかがとても重要になるのです。残念ながら、何色が一番適切かという正しい答えはありませんが、それぞれの色には意味があり、関連性を持っています。ここでは、色ごとの特徴や傾向をご紹介したいと思います。

青色は、さまざまな大企業に使われている人気の色です(Facebook, Twitter, Visaカードなど)。青色には、信頼、誠実、忠誠、安心や平穏といったイメージがあります。ほとんどの国において文化的にマイナスのイメージを与えることがない色であることから、特に国際的な製品のロゴやアイコンとして多く利用されています。

緑色は、主にお金や自然と関連の高い色だと言われています。そのため、特に以下の2つのアプリのカテゴリーにおいて人気があります。 – ファイナンスアプリ – 「エコ」を売りにしたアプリ

紫はより女性的な色と言われており、自撮りアプリのアイコンによく使われています。 赤はよく目立ち、エネルギッシュな色。オレンジは陽気な色、黄色は暖かな色、緑は平和的な色と言ったように、それぞれの色に様々なイメージがあります。 このようなイメージから、スポーツのアプリでは赤色、健康系アプリには緑色が合っていると言えるでしょう。

色を選ぶ際には、その色から想起される可能性のある文化的な解釈なども十分に考慮する必要があります。

アイコンの最適化におけるベストプラクティス

ブランドのイメージと見合ったもので、優れたデザインのアイコンを実現できたとしても、必ずしもDL数が急上昇するとは限りません。 色、背景、グラフィック、構成などさまざまな要素をテストし最適化する、データ・ドリブンのアプローチを行うことで、初めて最もパフォーマンスの良いアイコンを作ることができ、アプリのDL数を増やすことができるのです。

どのようなデザインのバリエーションをテストするかによって、結果に大きく差が出るということも忘れないようにしましょう。

グラフィックのアングルを変えたり、影をつけたりといった僅かな違いのアイコンをテストしても、CVRに大きな変化を与えることはほとんどないため、あまり意味がありません。

ここでは、基本的な最適化のヒントをいくつか紹介していきたいと思います。

1.シンプルにする

アイコンに含ませたい要素はたくさんあり、アイデアは無限に浮かぶと思います。しかし、基本的なコンセプトを元に様々なバリエーションを試した上で、グラフィックの要素はできる限り少なくしましょう。 そして、できればその中からグラフィックを1つに絞り、シンプルであればあるほどCVRが向上するかを確かめてみましょう。

1024 × 1024ピクセルの大きなサイズでアイコンを作るのは難しいかと思います。そのため、異なるデバイスを使って、さまざまなサイズで試しながら作成することが大切です。そのアイコンが、どのようなサイズや背景でも魅力的に見えるようにしましょう。

2.色を変えてみる

色の組み合わせには様々なものがあり、デザイナーはそのことを熟知しているかと思います。しかし、問題は色の組み合わせがDLの増加につながるのかという点です。 例えば、パステルカラーの背景がアイコンの一番目立たせたいグラフィックを強調するのに役立っているのか、また、背景色がもっとはっきりした色の組み合わせの場合と比べて、CVRが変化しているのかどうかを確認し、さまざまな色でテストを行いましょう。

3.文字ではなくグラフィックで表現する

アプリアイコンの中には、アプリ名や他のテキストが入っているものがよく見受けられます。アプリ名やアプリ説明文を表示するスペースは他にあるにも関わらず、なぜアイコンにまで文字を入れる必要があるのでしょうか?

もちろん、多くのアプリが、文字を入れることで優れたアイコンを実現しています。すでにブランドの名前が有名である場合はもちろん、そうでないこともあります。 アイコンに文字を入れる場合は、文字を入れたものと、グラフィックだけのものをテストし、どちらがより良いパフォーマンスをしたかを確かめてみましょう。

ブランドと関連性の高い一文字を選び、アイコンにしてみましょう。シンプルで、かつブランドをしっかりと表現したアイコンができるはずです。しかし、これをロゴとして使うことはあまりオススメしません。

4.ロゴの有無

ロゴとアイコンは、似ているようで実はさまざまな違いがあります。 アプリアイコンとロゴは別物であるというのを認識することは非常に重要といえるでしょう。まず、ロゴはベクター形式で、アイコンはラスター形式です。そして、アイコンにはサイズの制限がありますが、ロゴは四角形である必要はありません。

それぞれのアプローチやツール、画像を作るプロセスはどれも異なるため、いくらロゴとして優れたデザインであっても、それがアプリアイコンとしても優れたものになるとは限りません。 自社のロゴをアプリアイコンとして使う場合は、ブランドメッセージだけでなく、アプリの価値を伝えることができているかを確認するという意味も含め、必ずテストを行ってください。

5.枠線をつけてみる

アプリアイコンに枠線をつけて、テストをしてみましょう。 枠線をつけることで、どんな背景に対してもアイコンを強調させることができ、他のアイコンの中でも目立たせることができます。

6.ベンチマークを信頼する

競合を分析し、競合とは違うことを試してみてください。 真似をするのは簡単ですが、マネをしても同じような結果を得られる訳ではありません。個性を発揮することが成功への鍵となるでしょう。 個性を表現する手段として、まずは色の選択から始めましょう。 しかし、ここで忘れてはならないのは、しっかりと競合のリサーチを行うことです。

自社のアプリと同じカテゴリーから、最も人気のあるアイコンを10個選び、どうしたらその中で目立つことができるかを考えてみましょう。 そして分析結果を基にいくつかの仮説を立て、実際にテストしてみましょう。

前述したように、競合相手のリサーチを十分にした上でアイコンの最適化に取り組むのは良いアイデアだと言えます。例えば、ゲームアプリのアイコンを見てみると、人気のあるゲームアプリの多くのアイコンで「口を開いたキャラクター」を描いた同じパターンのものが使われていることが分かります。一見、くだらないことのように思えるかもしれませんが、実際に効果があるため、多くのアプリで起用されているのです。 このように、人気のあるレイアウトを参考にして一つバリエーションを作り、効果をテストしてみましょう。

キャラクターを変えてテストしてみるのも一つの方法です。 「MyTona」が提供するゲームアプリ『 Seekers Notes: 秘められた謎』では、アプリアイコンのキャラクターを変えていくつかテストを行いました。 パンプキンと人間のキャラクターを使って効果を比較した結果、パンプキンのキャラクターのほうが約9.3%も高いCVRを勝ち取りました。

次に実施したテストでは、トップハットをかぶった男性に対してパンプキンのCVRは3.5%高く、差は縮まりましたが、新たにバリエーションに追加された魔女のキャラクターが、他の2つに比べて9.1%も高いCVRを獲得しました。このテストによって、「キャラクターが口を開けて笑っている」アイコンが効果があることが分かり、A/Bテストの重要性が証明されました。

アイコンの背景の色を変えるなど、ちょっとした変化によって驚くほど効果が見られることがあります。 『Hobnob』というアプリでは、アイコンを変えた後CVRが劇的に減ってしまいましたが、A/Bテストを何度か行うことで、取り戻すことができました。

A/Bテストを行うことで、単純なブランド再構築と比べて64%ほどパフォーマンスの改善がみられると言われています。テストを行なった結果、成功するアプリと失敗するアプリのアイコンの違いは、背景のグラデーションがあるかないかだけだったという例もあるのです。

アイコン最適化のためのチェックリスト

App StoreやGoogleの審査を通ることができ、かつユーザーの関心を引くアイコンを作ることはとても難しく、アプリのリリース前から多くの時間をアイコンの作成に費やす必要があります。 しかし、最適化に必要なポイントをすベて押さえることができれば、多くのユーザーにアプリをDLしてもらうことができるでしょう。

最後に、アイコンの最適化に必要なポイントをまとめます。

・ユーザーは、視覚的な印象によってDLを決定することがあるということを念頭において、アプリとブランドの一貫性を考慮しながらユーザーの求めるスタイルを考えましょう。

・App StoreやGoogle Playストアの推奨に従いましょう。

・テキストやロゴではなく、グラフィックでアプリを表現しましょう。

・アイコンのメインとなる要素を際立たせるために、様々な色や枠線をつけてテストをしてみましょう。

・ベストプラクティスから学び、その上で競合よりも目立つオリジナルなアイコンを作成しましょう。

これらのことを意識し、アイコンがより良いものになっているかを確かめるために全ての要素をテストすることを忘れないでください。そうすることで、優れたアプリアイコンを作ることができ、CVRを大きく向上させることができるはずです。

この記事は、Split Metrics社のブログ”Complete Guide to Mobile Icons: Technical Requirements, Best Practices and Tips “を著者の了解を得て日本語に抄訳し掲載するものです。Repro published the Japanese translation of this original article on Split Metrics in English under the permission from the author.


モバイルアプリの成長支援パートナー「Repro」

「Growth Hack Journal」を運営している「Repro」は、アプリ解析・マーケティングツールの提供からユーザ獲得やユーザ定着のためのマーケティング支援等のソリューションまでワンストップで提供、アプリの成長を支援しています。

提供サービスについて詳細はこちら


【毎月5社 限定】ASO無料診断実施中!

ユーザーがアプリ見つけやすいよう、アプリストア内のコンテンツを最適化することは重要です。ASOの改善余地について、無料で診断します。

お問い合わせはこちら

プッシュ通知許諾率無料診断実施中!

自社アプリのプッシュ通知の許諾率の解析、および許諾率を改善した場合に増加するユーザーの再訪数やコンバージョン数を無料でシミュレーションします。

お問い合わせはこちら