(編集部注* 本記事は2016年11月14日に公開したものを再編集したものです。)

先週公開した「Let’s talk about white app icons」(ちょっとお説教じみた記事でしたが…)が大きな反響を読んだので、今回は素晴らしいアプリのアイコンを作るためのより建設的で実践的なアプローチを改めて伝える必要性があると感じました。

この記事は初心者・プロを問わず、すべての人に向けたアイコンが持つ魔法の力とどうしたらもっと良いアイコンが作れるのか解説する記事です。

上にある約10分間のビデオでは、アプリのアイコンデザインにおける5つの重要な要素について解説しており、実際に私がこれらの要素をどのようにアイコンのデザイン過程で取り入れているのか説明しています。

多くのアドバイスや細かい説明を含んでいるので、初めてアイコンをデザインする方からベテランの方まで、すべての人に何かしらのヒントになれば幸いです。

より詳細に知りたいのなら、私が親しみを込めて呼ぶ「アプリのアイコンデザインにおける5つの要素」を下に噛み砕いて解説しているので読んでみてください。得られるものがきっとあるはずです。

はじめに

プロダクトとユーザーとの最初の接点であるグラフィックデザインを考えることは大変な作業です。美しく、きわ立ち、記憶に残るようなアイコンはアプリの人気と成功に大きな影響を与えます。

しかし、一体どうやって「良い」アイコンを作れるのでしょうか?さらに言えば、「良い」アイコンとは何を指すのでしょうか? 安心してください、これらの質問に対するアドバイスの準備はできています。本稿では素晴らしいアイコンデザインを作る方法をご紹介します。

apppro

「アイコン」とは何か?

アイコンを作るにあたってまず最初に理解すべきなのは、アイコンとは何か、アプリにおいてどのような役割が求められているのかについてです。アプリのアイコンはいわばプロダクトの記憶装置になります。

従って、単に魅力的で目を引くものであるだけでなく、アプリのコアとなる要素を体現し、ブランディングの一部を担うようなものであるべきなのです。

最近では「ロゴ」という言葉があまり深く意識されることなくあちこちで使われています。アプリのアイコンはロゴではありません。確かにアイコンはブランディングとしての側面もありますが、もっと多くの制約のもとに成立しているものなのです。

ロゴとアイコンの違いを認識することはデザイナーにとって、とても重要なので改めて説明しましょう。ロゴとはレターヘッドや広告用にデザインされたサイズ変更可能なブランディングツールです。

一方でアイコンは多くの場合、正方形のキャンバス、特定のサイズ、特定のコンテクストの中で見栄えがいいように作り込まれたラスタ画像です。

したがって、素晴らしいアイコンを作るためのアプローチ方法やツール、制作方法、条件などはロゴとは全く異なります。

apppro

様々なサイズから構成されているアプリアイコンのパッケージ。appicontemplate.comからこのテンプレートをダウンロードできます

実践的な視点から考えると、アイコン制作では様々なサイズのPNGファイルが必要になります。例えば、29×29ピクセルといった小さいものから1,024×1,024といった大きいものまで考えられますし、これらのサイズはアプリとセットで考えなければいけません。

こうして制作されたデザインはApp StoreやGoogle Play、設定パネルや検索結果、ホームスクリーンなどを含む様々なOSにおけるユーザーとアプリの最初のタッチポイントとして使用されるのです。

アプリのアイコンはラスタ画像を読み込むことができるアプリで制作することはできますが、『Photoshop』、『Illustrator』、『Skech』などがよく選ばれています。appicontemplate.comのような無料ツールは、簡単に制作に取りかかることのできるPSDのテンプレートを提供しています。

appicontemplate.comのテンプレートをどうやって使うか説明したショートビデオ

5つの重要な要素

ここからはアプリのアイコンデザインの見本となる事例を見ていきましょう。アプリのアイコンデザインにおける「5つの重要な要素」、そしてそれらをどのように改善することができるのか、実際に私がどのように取り組んでいるかなど、いくつか事例を紹介していきたいと思います。

事例の多くは私自身が取り組んだものです。それは私のアイコンが一番いいからというわけではなく、制作過程でどんなことを考えたのか自分の作品のほうがよくわかっているからです。

各要素についての説明を読む際、是非自分の好きなアプリのアイコンを思い浮かべてください。あなたのスマホのホーム画面にあるアプリはこれらの要素を取り入れているでしょうか。それでは始めましょう。

1 スケーラブルであること

apppro

アプリのアイコンは大きさが変化してもコンセプトの明瞭さを保つために多面的な分析が必要とされます。

アプリのアイコンにおいてもっとも重要な要素の一つがスケーラビリティです。アイコンはOSのプラットフォーム上の様々な場所で表示されることになるので、大きさが変化してもその認識のしやすさやユニークさを保つことが非常に大切になります。

App Storeでも、Retinaディスプレイ上でも、スマホの設定画面上であってもわかりやすいアイコンである必要があるのです。 キャンバスにいろいろと詰め込みすぎた複雑すぎるアイコンは、スケーラビリティに欠けているものが多い傾向にあります。

従って、アプリのアイコンのコンセプトを考える段階で、サイズを変更してもクオリティを保つことのデザインかどうか十分検討すべきです。

  • 1,024×1,024ピクセルでアイコンをデザインする場合は気をつけましょう。デバイス上の複数の場所、サイズでちゃんとデザインが表示されるか確認してください
  • シンプルなデザインを心掛け、一つのオブジェクトにフォーカスしましょう、そしてできれば大きさが変化してもその輪郭や質感が変わらないユニークな形や要素を取り入れてください
  • どんな背景にも映えるアイコンにしましょう

apppro

私が制作したスケーラビリティを持つアイコンのいくつか

2. 認識されやすいこと

apppro

アイコンは細かすぎずたり、シンプル過ぎてしまうこともあるので、クリエイティブに面白いもの、そしてあなたの意図がきちんと伝わるように意識しましょう。

アプリのアイコンは音楽と似たところがあり、アプリストアやホームスクリーン上において他のアイコンと容易に区別がつくことは素晴らしいアイコンデザインには欠かせない要素です。音楽の歌詞がリスナーに共感してもらえる必要があるのと同様に、アイコンの形や色、アイデアもユーザーに共感してもらわなくてはいけません。つまり、デザインとは記憶に残り、機能面と感情面の両方でつながりを持てるようなものを作る必要があるのです。

あなたが作ったアイコンは他の数千ものアイコンと競うことになります。すべてのアイコンが平等に1,024ピクセルのキャンバスを用いてインパクトを与え、ユーザーとのエンゲージメントを深めようとしているのです。

スケーラビリティは、認識のされやすさにおいても非常に大切な要素になってきますが、斬新なデザインのアイコンであることも同時に重要になります。そしてこれら二つのバランスを追求したデザインを作ることが最も重要なポイントなのです。

  • 当たり障りのない、複雑すぎるアイコンデザインは認識されにくいです。コンセプトが通じるギリギリまでデザインをシンプルにしましょう。そして本当に認識しやすくなっているのかどうか確認しましょう。
  • いくつかデザイン候補を考えましょう。そしてそれらを一旦並べて眺めてみて、どれが目を引くデザインなのか考えましょう。
  • 自分が気に入っているアイコンを分析して、なぜいいと思ったのか、どんな手法を使っているのか考えてみましょう。

3 一貫性があること

apppro

アイコンとインターフェースの一貫性はアイコンの印象を強めるのに重要です

アプリのアイコンとアプリそれ自体との間に一貫性があるデザインを考えるべきです。私の考える良いアイコンデザインとは、「そのアプリがなんなのか」を体現したようなものです。アイコンとアプリが互いに引き立てあうことで、より記憶に残る印象をユーザーに与えることができるしょう。

ユーザーの頭の中にあなたのアプリの一貫した洗練されたイメージを作ることで、プロダクトの満足度や継続率が高まり、口コミで広がっていくでしょう。

まとめると、アプリの根本的要素や機能、デザインをアイコンにも落とし込むことが非常に大切であるということです。

  • アイコンとアプリの一貫性を保つための一つの方法として、アイコンとインターフェースのカラーパレットを合わせて、共通のデザイン言語を用いることがあげられます。例えばインターフェースが緑であるならば、緑色のアイコンを作ることで一貫性を強化することができます。
  • 全てのアプリに当てはまるわけではありませんが、アプリとアイコンの結びつきを強めるためにアイコンのシンボルをアプリの機能と関係したものにするという方法もあります。

 

apppro

シリーズもののアプリにおいても一貫性を持つことができます

4 ユニークであること

1hq3e-rzks5fu859whctjpqアプリストアの仕事効率化カテゴリーでは、アイコンのデザイン過程でどれほど独自性が考慮されていないか見ることができます

これはあえて言うまでもないと思いますが、アイコンはユニークである方が望ましいです。あるスタイルやトレンドをまねるのは一向に構いませんが、ユニークさを忘れてしまってはいけません。あなたが作ったアイコンはユーザーの視線をめぐって常に他のアイコンと競い合うことになります。そうした中で際立つデザインであることは有効な武器になるでしょう。

ユニークさというのはデザインにおけるトリッキーな側面と言えるでしょう。なぜならユニークさの担保はあなたのスキルやセンスだけでなく、似たようなアプリのデザインに取り組む競合の存在にもかかっているからです。

  • 他のアイコンがどんなデザインをするのか考慮し、違う方向性のデザインにしましょう。そのためには常にリサーチを怠らないことです。(もはやチェックマークのアイコンは作る意味がありません)
  • 単色の背景に一文字というデザインはユニークさを求めるのであれば避けた方がいいでしょう。なるべくいろんな色や配置を試してみて、斬新で巧みなメタファーを見つけ出しましょう。
  • 忘れられがちですが、色はアプリのコンセプトを表現するのに有効な手段です。

apppro

好きなデザインがどんなものかに関わらず、ユニークさを追求することで斬新なアイディアを出す練習になります

apppro

ゲームアプリのアイコンデザインは多くの場合いろんなアイディアが用いられ、みんなが同じことがないのでインスピレーションを得るのにちょうどいいです

5 言葉で説明しようとしないこと

これは特に私をイライラさせる要素の一つです。アプリのアイコンに文字を使ってもいいケースはめったにありません。もしあなたがもう一つの抽象芸術のツールである「手書きの文字」を使わなければならないなら、それはイラストの持つ力を最大限に生かしきれていないと言えます。

文字とイラストは別々の表現ツールであり、両方を掛け合わせたものがグラフィック表現と呼ばれるものになります。しかしこのグラフィック表現は多くの場合何を伝えたいのかわかりにくい散漫したデザインに陥りがちです。単に文字を利用する以外の手段でアプリをビジュアライズする方法は必ずあります。文字をアイコンに取り入れているアプリを見るたびに、デザイナーがもっと明確に意図を伝えるための方法はあっただろうと思うのです。

  • アイコンにアプリ名を含める必要など全くありません。それよりもイケてる絵のコンセプトを考え出す方に時間を割きましょう。
  • 「でも、Facebookはアイコンに”F”を使ってるじゃん」という声が聞こえてきそうですね。もしあなたが考えた一文字がアイコンにぴったりだと感じるのなら(ユニークさも)、その一文字は「文字」としての要素がなくなり、それ自体にアイコンとしての要素が生まれたのだと言えるでしょう。しかし、これはあくまで例外です。
  • アイコンの四角の中に会社のロゴや名前を入れるのはナンセンスです。その四角の中にフィットするようなマークや文字がありますか?もしないのであれば、それは何か新しいものを考えられるチャンスです。覚えておいてください。アイコンとロゴは決して同じものではありませんし、同じコンテクストの中で用いられるべきではありません。

 

自分のマークを作ろう

App StoreやGoogle Play上では、多くの面白みもなく、主張のないアイコンデザインの例が見受けられます。あなたの作ったアイコンはユーザーとのつながりを深めるもっとも強力なツールです。それはApp Storeでユーザーが目にする最初のものであり、ユーザーがアプリを使うたびに見られるものです。

そしてユーザーがアプリのことを考えるたびに彼らの頭の中に浮かんでくるものです。アイコンのフィット感、魅力などの十分な検討ができてなくては、デザインの資産を生かしきれていないことになります。アイコンは思いつきで作られるものではなく、アプリの制作過程の一つとしてとらえるべきです。

アプリのアイコンは凝縮された小さなデザインであり、その制作を通じてセンスのあるアイコノグラフィを身につけるという普遍的な価値が身につきます。スケーラビリティがあり、認識されやすく、一貫性があり、ユニークなデザインを作るということはアプリのアイコンだけにとどまらず、他のデザイン分野ににも必要とされる汎用的なスキルです。つまり、アイコンのデザインをマスターする事であなたはもっといいデザイナーになる事ができます。

アイコンデザインがシンプルか複雑か、ありきたりか独創的かに関係なく、すべてのアイコンデザインはある一つの特性を持ち合わせています。それは非常に競争が激しく、制限された同じスペースの中でユーザーの視線をつかむという事です。これはある意味特殊なチャレンジであり、答えはいつも同じピクセルの中にあるのです。

アプリのアイコンというグラフィックデザインの工夫のみでアプリのランキングを上位にすることはもちろん簡単な事はではありませんが、これまでお伝えしてきたアドバイスによってあなたがもっと自信を持ってランキング競争に取り組むことにつながれば幸いです。それでは素晴らしいアイコン作りの旅へ出発しましょう!

この記事は、Medium上の記事”Designing better app icons“を著者の了解を得て日本語に抄訳し掲載するものです。Repro published the Japanese translation of this original article on Medium in English under the permission from the author.

「3つのポイントで解説!効果的な CTAの作り方」の資料にご興味がある方はこちらからダウンロードください。

有名企業やサービス6事例を厳選!KPIツリーとKPI、KGI設定に関する資料を以下からダウンロードできます。

アプリのDL数を今すぐ2倍に!ASOノウハウが詰まった資料は以下からダウンロードできます。