目次
App Storeで新しいアプリをダウンロードしようと思っている場面を想像してください。探したいキーワードを打ち込み、検索するとそれに合ったアプリが表示されます。そこからあなたはダウンロードするアプリを決めるわけです。では、ここでDLするかしないかを決定する最も重要なポイントとなっているものは一体なんなのでしょうか？
人間の脳は、文章から得る情報よりも、視覚からの情報をより素早く処理するということがわかっています。このことから、アプリアイコンのデザインはASO対策で最も重視するべき点であると言えるでしょう。
アプリアイコンがユーザーの持つアプリに対しての第一印象であり、ユーザーがアプリをダウンロードする入り口といえるでしょう。アイコンはアプリの「顔」であるため、アプリのオーガニックなグロースに大きく貢献します。
平均的にアプリアイコンは、CVRを10～25%増加させるポテンシャルを持っており、さらにTTR(タップスルー率)を急上昇させることもできます。
このようなことから、ASO対策において、アプリアイコンの最適化は絶対に欠かせない一要素であると言えるのです。
本記事では、「良い」アプリアイコンの条件を満たすための必要条件を簡単に解説していきたいと思います。また、アプリアイコン作成におけるベストプラクティス、すでにあるアイコンの傾向や、アプリアイコンの最適化におけるヒントもご紹介します。
App Storeのガイドライン
どれだけよく考えられたアプリアイコンだとしても、AppleやGoogleの提供するガイドラインに沿ったものでなければ意味がありません。AppleとGoogleは適切なアイコンを制作してもらうために、サイズからUXに至るまで、詳細なガイドラインを提供しています。
アプリアイコンのサイズ
モバイル端末のホーム画面用の小さなサイズから、パソコンのApp Store用の大きなサイズまで、いくつかのサイズのアイコンを作成する必要があります。
以下は、App Storeのそれぞれのデバイスにおけるアプリアイコンのサイズ表です。
アプリアイコンの特性
全てのアイコンは以下の仕様に合ったものではなくてはいけません。
Google Playストアで掲載情報を公開するためには「高解像度のアイコン」が必要です。高解像度のアイコンはアプリのランチャーアイコンに代わるものではありませんが、次のガイドラインに従ったより忠実度の高く、高解像度のものでなければなりません。
- Android Mで使用されている素材アイコン
- Android O対応のアダプティブアイコン
Google Playの要求は以下の通りです。
- 32-bit PNG(アルファ値を含む)
- 解像度: 512px - 512px
- 最大ファイルサイズ: 1024KB
App StoreとGoogle Playストアにおけるアイコンのデザインに関する要件や推奨事項はそれぞれ異なります。どちらのOSに向けたアプリであっても、素晴らしいアイコンはユーザーの目を即座に惹きつけるだけでなく、アプリの質や目的を伝える役割も果たすのです。
アイコンの最適化を始めよう
最適化をするにあたって、そのアイコンが良いものであるかをどのように確かめればいいのでしょうか？
CVに導くためのアプリアイコンの核となる要素は、シンプルさ、過剰な視覚要素の削減、そして、自身のアプリのカテゴリーに見合った雰囲気を失うことなく、競合アプリの中で目立つことの3つであると言えるでしょう。
では、どうしたらこの3つの原則に沿ったアプリを制作することができるでしょうか？その答えがA/Bテストです。このA/Bテストを行うためにはいくつかアイコンを用意しなければなりません。これが最も難しい点といえるでしょう。
アイコンをデザインするにあたって、制作しているアプリのカテゴリーの中で最も人気のあるアプリアイコンのデザインを確認しましょう。これは自分のデザインに取り入れられるかチェックするためです。その際、次のことに注意しながら確認してください。
・アプリの重要な機能や特色がわかるデザインであるかどうか
アイコンを見ただけで、どんなアプリなのかをユーザーに分かってもらうことは必須です。例えば、自撮りアプリのアイコンを見てみましょう。ほとんどのアイコンが、カメラやレンズを想起させるデザインであることがわかります。
音楽アプリのアイコンでは、音符や、音波、イコライザーなどのデザインが多用されています。また、レシピアプリでは、キッチン用品やエプロン、コック帽などのアイコンが多く見られます。
関連性のあるデザインにすることはごく当たり前のように感じると思いますが、もしモチーフとして間違ったものを使ってしまえば、CVRは劇的に悪くなりかねません。
例えば、DIYビデオが視聴できるアプリ『Darby』では、アイコンのデザインが原因でユーザーに誤解を招いてしまったという事例もあります。 アイコンに入っていた「再生」マークによって、ユーザーは『Darby』をビデオ編集アプリだと勘違いしてしまったのです。その後A/Bテストを行い、適切なアイコンへと改善することができました。
全てのアプリにはそれぞれ長所があります。それをきちんと認識して、強調することは必須です。 そのため、ASOの戦略を立てる際には、アプリが他の競合と比較して際立っている必要があります。
ブランドが既にターゲットとしているマーケットで知られているのなら、アプリアイコンの中にブランド名を必ず入れましょう。ユーザーのアプリに対する信頼感を高めることができるのです。
例えば、「レース」というキーワードで検索すると、いくつかのアイコンの角にアプリパブリッシャーロゴが入っていることが分かります。下の画像を見てください。
・検索結果において、競合と比べて目を引くものであるかどうか
アプリと関連性の高いキーワードで検索することで、アプリの検索順位を把握することができます。競合アプリを見てみましょう。あなたのアイコンと同じようなアイコンですか？もしそうならば、どうすれば目立つことができるか考えましょう。
アプリアイコンの最適化において、注意してほしいのが検索結果で表示された時がアプリのアイコンが最も効果を発揮するときだということです。ユーザーがアプリのプロダクトページに移行してしまうとユーザーはアイコンに注意を払わなくなります。
そのため、App Storeにおいて関連性のあるカテゴリーにおけるアイコンのA/Bテストを行い、競争の激しい中で最もパフォーマンスのよかったものを選ぶという方法が最も簡単な最適化の方法であると言えるでしょう。
・アイコンの色とスタイル
アイコンの色とスタイルを選ぶことはブランド全体のイメージを決めるのと同じようなものです。アプリアイコンはアプリストアにおいて、自社のブランドを象徴するものであり、アプリのデザインと企業のアイデンティティがあまりに食い違ってしまうと、ロイヤリティの高い顧客まで失うことになってしまう可能性もあります。
アプリを制作する際は、必ずターゲットとなるユーザー層を把握してください。年齢、ジェンダー、地域、言語、見込み客の特徴がアプリのデザインに影響を与えるのです。
モバイルアイコンにおいても同様です。ターゲティングが正確であればあるほどより多くのダウンロード数を見込むことができます。子供向けのゲームアプリとタスク管理アプリではアイコンで用いる色や配置が根本的に違うことは明らかでしょう。
・色
多くの企業は、色によって識別されています。これは、アプリにおいても同じです。そのため、どの色をアイコンに使うかがとても重要になるのです。残念ながら、一番効果があるのが何色かという正しい答えはありません。しかし、色にはそれぞれ意味が、少なくとも関連性があります。ここでは、色ごとの特徴や傾向をご紹介したいと思います。
青色は、さまざまな大企業に使われている人気の色です(Facebook, Twitter, Visaカードなど)。青色には、信頼、誠実、忠誠、安心や平穏といったイメージがあります。ほとんどの国において文化的にマイナスのイメージを与えることがない色であることから、特に国際的な製品のロゴやアイコンとして多く利用されています。
緑色は、主にお金や自然と関連の高い色だと言われています。そのため、特に以下の2つのアプリのカテゴリーにおいて人気があります。
- ファイナンスアプリ
- 「エコ」を売りにしたアプリ
紫はより女性的な色と言われており、自撮りアプリのアイコンによく使われています。 赤はよく目立ち、エネルギッシュな色。オレンジは陽気な色、黄色は暖かな色、緑は平和的な色と言ったように、それぞれの色に様々なイメージがあります。 このようなイメージから、スポーツのアプリでは赤色、健康系アプリには緑色が合っていると言えるでしょう。
しかしながら、選んだ色から連想されるイメージが付くこと、文化によって色の解釈が異なることは十分に考慮に入れてください。
アイコンの最適化におけるベストプラクティス
ブランドのイメージと見合ったもので、優れたデザインのアイコンを実現できたとしても、必ずしもアプリが成功するとは限りません。色、背景、グラフィック、構成などさまざまな要素のテストと最適化、データドリブンなアプローチを行うことでのみ、最もパフォーマンスの良いアイコンを作ることができ、アプリのDL数を増やすことができるのです。
テストするデザインのバリエーションによって、結果に大きな差が出ること忘れないでください。
グラフィックに影を付けたりアングルを変えたりするようなマイナーチェンジはCVRに大きな影響を与えないためテストはあまり意味がありません。
ここでは、基本的な最適化のヒントをいくつか紹介していきたいと思います。
1.シンプルにする
アイコンに含ませたい要素はたくさんあり、アイデアは無限に浮かぶと思います。しかし、基本的なコンセプトを元に様々なバリエーションを試した上で、グラフィックの要素はできる限り少なくしましょう。 そして、できればその中からグラフィックを1つに絞り、シンプルであればあるほどCVRが向上するかを確かめてみましょう。
1024 × 1024ピクセルのキャンバスにアイコンを描くことは大変です。端末上の様々なコンテキストとサイズでデザインします。アイコンが、どのような背景でも魅力的に見えるようにしましょう。
2.色を変えてみる
世界には様々な素晴らしい色の組み合わせがあり、デザイナーはそのことを熟知しているかと思います。しかし、問題はどの色の組み合わせがアプリのダウンロードにつながるのかという点です。パステル調の背景がアイコンの最も目立たせたい要素を引き立てるか試し、背景とのコントラストがはっきりしている場合の時とCVRがどう違うのかテストしましょう。
3.文字ではなくグラフィックで表現する
アプリアイコンの中には、アプリ名や他のテキストが入っているものがよく見受けられます。アプリ名やアプリ説明文を表示するスペースは他にあるにも関わらず、なぜアイコンにまで文字を入れる必要があるのでしょうか？
もちろん、多くのアプリが、文字を入れることで優れたアイコンを実現しています。すでにブランドの名前が有名である場合はもちろん、そうでないこともあります。 アイコンに文字を入れる場合は、文字を入れたものと、グラフィックだけのものをテストし、どちらがより良いパフォーマンスをしたかを確かめてみましょう。
ブランドと関連性の高い一文字を選び、アイコンにしてみましょう。シンプルで、かつブランドをしっかりと表現したアイコンができるはずです。しかし、これをロゴとして使うことはあまりオススメしません。
4.ロゴの有無
ロゴとアイコンは、似ているようで実はさまざまな違いがあります。 アプリアイコンとロゴは別物であるというのを認識することは非常に重要といえるでしょう。まず、ロゴはベクター形式で、アイコンはラスター形式です。ロゴは正方形である必要はありませんがレターヘッドとして見栄えの良いものでなくてはなりません。
それぞれのアプローチやツール、画像を作るプロセスはどれも異なるため、成功と呼べる基準は全く異なります。いくらロゴとして優れたデザインであっても、それがアプリアイコンとしても優れたものになるとは限りません。 それでもなお自社のロゴをアプリアイコンとして使いたい場合は、必ずテストを行い、ブランドイメージのほかにアプリの価値を伝えることができているか確認してください。
5.枠線をつけてみる
アプリアイコンに枠線をつけて、テストをしてみましょう。 枠線をつけることで、どんな背景に対してもアイコンを強調させることができ、他のアイコンの中でも目立たせることができます。
6.ベンチマークを信頼する
歴史は繰り返します。競合アプリを分析し、彼らとは違うことを試してみてください。 真似をするのは簡単ですが、マネをしても同じような結果を得られる訳ではありません。個性を発揮することが成功への鍵となるでしょう。 個性を表現する手段として、まずは色の選択から始めましょう。 しかし競合アプリの分析を怠ることはしてはいけません。
自社のアプリと同じカテゴリーから、最も人気のあるアイコンを10個選び、どうしたらその中で目立つことができるかを考えてみましょう。 そして分析結果を基にいくつかの仮説を立て、実際にテストしてみましょう。
上述したように、競合相手のリサーチを十分にした上でアイコンの最適化に取り組むのは良いアイデアだと言えます。例えば、ゲームアプリのアイコンを見てみると、人気のあるゲームアプリの多くのアイコンで「口を開いたキャラクター」を描いた同じパターンのものが使われていることが分かります。一見、くだらないことのように思えるかもしれませんが、実際に効果があるため、多くのアプリで起用されているのです。このレイアウトを自分のバリエーションの1つとして取り入れることができます。
キャラクターを変えてテストしてみるのも一つの方法です。 「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.
執筆者
