App Storeの適切なアイコンサイズは? アイコンに何を描くべきですか？ どのような違いがあるのでしょうか。 このアプリのアイコンのガイドでは、これらの重要な質問に答え、ヒントを提供し、リソースにリンクします。 スマートフォンの画面に表示されるアイコンは、それぞれ親指の幅ほどの大きさです。 しかし、Apple App StoreやGoogle Play Storeでは、この小さなアプリストアのアイコンサイズに詰め込むデザインがすべてなのです。
書籍の表紙やAmazonの商品リストの画像と同様に、モバイルアプリのアイコンは、潜在顧客が一瞬で判断するのに役立ちます。
彼らはアプリのタイトルや説明を読む前に、アイコンを見ることになります。 モバイル アプリのアイコンは、魅力的な方法でアプリについて説明し、詳細を知るように仕向ける必要があります。 アイコンをクリックした人は、アプリをインストールする可能性が高くなります。 それが、あなたが望むことです。 基本的に、アプリのアイコンはインストールへの入り口なのです。
そのため、正しく設定することが非常に重要です。
アプリアイコンはロゴではない
ブランド ロゴをアプリアイコンに転送して終了するのが最も簡単そうに思えるかもしれません。 しかし、そうではありません。 アプリのアイコンはロゴではありません。 ロゴはアプリケーションの背後にあるブランドを表しますが、アプリアイコンはアプリそのものを表します。
Amazonのリスティングで商品画像の代わりにロゴを使用しないのと同様に、アプリ ストアのアイコン サイズの要件にロゴをはめ込んでアイコンと呼ぶべきではありません。 これをやってのけるのは、スターバックスやターゲットのようなメガブランドだけです。
ただし、十分に確立された有名なブランドであれば、何らかの方法でアプリのアイコンにロゴを追加してもかまいませんが、それを中心に据えないようにします。
以下の例では、有名な旅行本の出版社である Lonely Planet が、Guides by Lonely Planet のアプリのアイコンにロゴを含めています。 しかし、ロゴはアプリのデザインの一部分に過ぎません。 落ち着いたブルーの縁取りが、温かみのあるイエロートーンの街並みをポップにし、見る人を次の冒険へと誘ってくれます。
このアプリは「curated city guides」の集大成であるとキャッチフレーズにありますが、アプリアイコンはその機能を示唆しています。
新しい街を探索することが好きで、「旅行ガイド」と店頭で検索した人は、この暖かい、しかし刺激的なアプリアイコンに引き込まれることでしょう。
Lonely Planet のアプリを、同じ検索で見つかる別の旅行ガイド アプリと比べてみてください。
mTrip はロゴから M を取り、緑の背景を加え、親指を立てて App Store にそのアイコンを投稿しました。
しかし、アイコンはユーザーが何を得られるかについて何も語らず、mTrip は 1 文字で認識できるほど有名ではありません。 下のNetflixも、ロゴの最初の文字をアプリのアイコンとして使用していますが、このブランドは、Netflixが何であり、何をしているのかを誰もが知っているので、それをやり遂げることができます。
ロゴとアプリアイコンの違いが分かったところで、デザインを始める前に自問自答すべき重要な質問を見ていきましょう。
App Store のアイコン サイズ: アプリのアイコンを作成する前に尋ねるべき 4 つの質問
アプリのアイコンができるだけ多くの目を引く必要があることは確かです。 周囲のすべてのアプリアイコンから目立つようにする必要がありますが、アプリが飽和状態の世界では、それは簡単なことではありません。
しかし、ここで秘密があります。それは、アプリのアイコンを世界中のすべての人にアピールする必要はない、ということです。 その代わり、ターゲットとするユーザーにアピールすることに重点を置いてください。
そこで、考慮すべき最初の質問をします。
質問1：このアプリのターゲット層は誰か？
あなたのアプリは、料理好きな人たち向けでしょうか？ 小さな子供を持つ親ですか？ キャンディクラッシュやアングリーバードのようなゲームの愛好家ですか？ 旅行者ですか？ ミュージシャンを目指している方ですか？
すでにアプリを構築しているので、この質問に対する答えはわかっているはずです。 しかし、アプリのアイコン デザインの焦点はそこにもあります。
ターゲット層を定義する簡単なフレーズを検索してください。
たとえば、あなたのアプリがピアノの弾き方を教えるとします。 Google Play ストアで「ピアノを習う」と検索すると、これらの上位アプリが表示されます。
この 4 つのアプリのアイコンのうち、詳細を知るためにクリックするのはどれですか?
元ピアニストで、かつて知っていたことをもう一度学びたいと思っている私にとっては、このアプリが勝ります。 断トツです。
Flowkey のアプリのアイコンは、ピアノ演奏について何も教えてくれないので、まったく魅力的ではありません。 (繰り返しますが、基本的にロゴであり、それ以上ではありません)。 他の2つはアイコンの中にピアノの鍵盤があるのが特徴で、予想通りかもしれませんが、まったく問題ありません。
私にとっては、「Real Piano Teacher」が勝ります。これは、演奏している人の前に楽譜があり、ラベルの付いた鍵盤でピアノを演奏している手が描かれているからです。
音符を学ばずにピアノを弾くことはできませんし、音符の読み方を学ぶことは、書き言葉を読むことを学ぶのと同じくらい困難なことかもしれません。 このアプリは、そのアイコンのみで、ユーザーが音符を読むことを学び、美しい曲を自分で演奏するという夢の実現に近づくことを約束します。
さて、ここで、アプリ制作者として、あなたは、どうすれば私が最も気に入っているもの（Real Piano Teacher’s） よりさらに良いアプリアイコンにできるのか、自問しなければなりません。
Question #2: 現在のデザイン標準に従うべきですか
デザインのトレンドは常に変化しています。 私は、2011年に行われた最新のスターバックスのロゴの変更を覚えているほど長い付き合いをしています。 サイレンが移り変わることに少し寂しさを感じましたが、最終的にこのデザインは再び私のお気に入りのコーヒーショップの代名詞となり、以前のデザインに戻ることは想像もつきません。
もちろん、一部の人は新しいロゴをあまりにも惜しいと思っており、最終的には緑の点だけになるだろうと冗談を言っています。
冗談はさておき、現在のデザイン トレンドとアプリ デザインとの関連性を追跡することは重要です。 Google Play ストアと App Store の両方が最新のガイドラインを公開しており、それに従うことができます (従うべきです)。
これらのガイドラインは、最も現代的でアクセスしやすい感じのするアプリのアイコンを作成するのに役立ちます。
Google の Material Design では、以下のトピックを網羅したガイドラインを提供しています:
- Design principles, including brand expression and design approach
- Grid and keyline shapes
- Specs – app icon anatomy and lighting specificationsの詳しい内訳
- Icon treats: アプリの色、レイヤー、スコアリング、オーバーラップ、アコーディオン、および歪みに関する情報
Material Design は、ピクセルという媒体を通じて触感のあるアプリのアイコンを作成することを支援することを目的としています。 複雑なものですが、勉強する価値はあります。
Apple のヒューマン インターフェイス ガイドラインは、より親しみやすく、従いやすい方法で書かれています。 シンプルさを受け入れる」、「さまざまな壁紙に対してアイコンをテストする」など 10 のヒントと、それらに従うための手順を説明しています。
- Provide user-selectable icons
- Create spotlight, settings, and notification icons for iOS
Human Interface Guidelines は Google の Material Design ガイドラインより短く、多くの点でシンプルですが、後者ではデザインのヒントがより多く提供されています。
Question #3: アプリの目的を示唆するには？
ピアノ学習アプリのケースで見たように、視聴者にアプリの目的を伝えることは、非常に重要です。
別の例を見てみましょう。 作家が自分の考えやアイデアを整理するのに役立つアプリのアイコンをデザインしているとします。 このアプリでは、単語数の目標を設定し、ユーザーが毎日の執筆時間を追跡できるようにすることもできます。 その上、そのアプリは、作家が執筆するための刺激的な引用を提供するかもしれません。
では、どのような読者を想定していますか？ このような場合、「痒いところに手が届く」という言葉がぴったりです。 小説家。 フリーランサー。 ジャーナリスト。 すべての作家があなたのアプリを使うことができます！
では、競合他社をみてみましょう。
App Storeで「作家向けアプリ」と検索すると、整理整頓アプリがずらりと出てきます。
ここで、アプリアイコンに注目してください。 まず、赤を基調としたヒゲがあります。 タイトルを見なければ、このアプリがライター向けであることすら分からないだろう。 7284>
次のアプリアイコンは、白い背景に赤い……紙飛行機？ ペン先？ サーモンの頭？
最後のアプリアイコンは、黒い背景に電球色のペンが描かれています。 このアイコンを見るだけで、このアプリは作家がアイデアを形成し、本、記事、または詩に変わるまで、そのインスピレーションを流し続けるのを助けるものであることが感じられます。 アプリが提供する機能をヒントにしてください。
機能を示唆することは、さまざまな種類のアプリで異なって見えることに注意してください。
たとえば、チップ計算機や懐中電灯などのユーティリティ アプリを作成した場合、アイコンをクリックする前に、閲覧者がすでにアプリを使っているように感じられるようなアプリにします。
下のアプリのアイコンはこの目標を達成しておらず、さらに、混雑して読みにくいです。
対照的に、下のアプリのアイコンは、このチップ計算機が実質的にすでに開いているので、すぐにアクセスできたように感じさせます。 ゲーム アプリのアイコンの目標は、見る人がすでにゲームの世界に入り込んでいるような気分にさせることです。 7284>
これを達成したアプリアイコンの素晴らしい例を挙げます。 ゲームをやりたくなるような、おいしいスリルですが。
イマイチな例？
まるで…バスケットボールを見つめているような気分になる。 ゲームをしてるんじゃない。 退屈だ！
Question #4: 私のアプリのルック アンド フィールは？
App アイコンをデザインするときに創造性を発揮するのは良いアイデアですが、アプリのインターフェイスとアプリのアイコンが異なる質感を持つことは避けたいものです。 7284>
ここで、アイコンが表現しているゲームのルック アンド フィールに一致する2つのワードブロックゲームを紹介します。
Word Stacks のアイコンは、ゲームと同じ夕焼け色とずんぐりした単語ブロックが特徴です。
Woody Block Puzzle のアプリのアイコンもゲームと同様にウッディな感じです。
自分のアプリがウッディ ブロックのタイプのゲームであると視聴者を誘導しておきながら、代わりに夕焼け色の泡だらけのワード ブロック ゲームが現れるようなことは避けたいものです。 一貫性のないブランディングは、貧しいデザインです。
あるブロガーが99designsで書いているように、「アプリのデザインがフラットであれば、アイコンもフラットであるべきです。 もしあなたのアプリがスキューモーフィズムを含んでいるなら、あなたのアイコンも少なくとも何らかのスキューモーフィズムの要素を持つべきです。” と書いています。
アプリのアイコンは、できるだけアプリの色、テクスチャ、感触を反映させるようにしましょう。
アプリアイコンをデザインする際に留意すべき点
アプリデザインに関する 4 つの重要な質問に答えたところで、アプリアイコンのいくつかのバリエーションやデザイン案の作成に取り掛かりましょう。 基本的なデザインのアウトラインから始めて、さまざまな色、境界線、およびグラフィックを試してみてください。
Here are a few tips to guide you:
- 2、3色だけに頼りましょう。 3色以上だと、アプリのアイコンが忙しすぎるように見えます。
- 実際の写真の使用は避けてください。 しかし、写真をイラストやベクター画像にすることはいつでも可能です。 アプリのアイコンは、デザインしているときは大きく見えるかもしれませんが、iPhoneやAndroidの画面では小さなものです。 アイコンを小さくしても、各要素が明確になるようにしましょう。
- タイトルとキャッチフレーズのために言葉を節約する。 アプリアイコンは、視覚的なインパクトを与えるためのものです。 タイトル、タグライン、およびアプリの説明で、必要なことを言葉で伝えることができます。
- AppleとGoogleのアプリストアのアイコンサイズの要件とガイドラインに常に従います。 Google Play のサイズ要件はこちら、Apple App Store のサイズ要件はこちらで確認できます。 各ストア用に、複数のバージョンのアプリアイコンを作成する必要があることに留意してください。 また、iPhoneのApp Storeは角が丸くなっていますが、アプリのファイルはすべて正方形で提出する必要があることに注意してください。 Appleのシステムが角を丸くしてくれます。
2つか3つの候補からアプリのアイコンを選んだら、アプリのアイコン作成で最も重要なステップである、ターゲットユーザーがどう思うかを調べるためのスプリットテストの出番です。
Beyond App Store icon size: Split-testing app icons on PickFu
ターゲットユーザーがあなたのアプリのアイコンをどう思うかを知る最善の方法は、Google Play Store や App Store でアプリのリストを実際に公開する前に PickFu で分割テストを実施することです。 もちろん、アプリ内で A/B テストを行い、ストア自体でいくつかのバリエーションを実行することもできますが、これは時間とお金を浪費する遅いプロセスです。
アプリのアイコンを公開する前に PickFu で回答者のプールに分割テストを行うことにより、プロセスでお金を失うことなく、必要なフィードバックを得ることができます。
PickFuで投票を設定するには、ほんの数分しかかかりません。 オーディエンスターゲティングが重要であると言ったのを覚えていますか？ PickFuは、それを簡単に実現します。 iOS や Android のデバイス、モバイル ゲーマーかどうか、App Store でいくら使ったか、など多くの便利な特徴の中から視聴者をターゲットにできます。
あるアプリ開発者は最近、PickFu を利用して、デート アプリ用の 2 つのアイコンの間でテストを行いました。
最初のアイコンは、電話を持つ女性のピンクの横顔、2色のアプリのタイトル、赤系とオレンジ系の背景が表示されています。 7284>
2つ目は、女性を排除し、より合理的なオレンジと赤の背景、そして文字を残して、白で、小さなハートをMの字に挟み込んだもので、3色だけのアイコンです。
回答者は圧倒的にシンプルでクリーンなオプション B を支持しました。従来のライブ A/B テストとは異なり、PickFu の回答者は詳細なフィードバックを書面で送ってくれます。 ですから、私たちは、オプションBが勝った理由を正確に理解することができます。
まず、回答者はオプション B のよりシンプルでプロフェッショナルな外観を高く評価しており、「このシンプルさが好きで、1 つの性別に限定して使用しない」、「オプション A の明るい紫やピンクのカラーリングが本当に嫌いで、目に悪い」等と述べています。
