先週公開した「Let’s talk about white app icons」(ちょっとお説教じみた記事でしたが..)が大きな反響を読んだので、もっと建設的で実践的な私の考える素晴らしいアプリのアイコンを作るためのアプローチを改めて伝える必要性があると感じました。アイコンが持つ魔法の力と、どうしたらもっといいアイコンが作れるのかについて初心者・プロ問わず、すべての人に向けた記事が必要だろうと思いました。

上の約10分間のビデオでは、アプリのアイコンデザインにおける5つの重要な要素について解説しています。そして、私が実際にどのようにこれらの要素をアイコンのデザイン過程で取り入れているのか説明しています。多くのアドバイス、細かなデザインの説明も含んでいるので、初めてアイコンをデザインする人やベテランの人にかかわらず、すべての人に何かしらヒントになるものがあれば幸いです。

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

はじめに

あなたのプロダクトとユーザーとの最初の接点となるグラフィックデザインを考えるのは大変な作業かと思います。美しく、きわ立ち、記憶に残るようなアイコンはアプリの人気と成功に大きな影響を与えます。しかし、一体どうやって「良い」アイコンを作れるのでしょうか?さらに言えば、「良い」アイコンとは何を指すのでしょうか?

安心してください、これらの質問に答えるためのアドバイスの準備はできています。本稿で素晴らしいアイコンデザインを作る方法をご紹介します。

 

1texh_v2zcl6-qvixacn0ta

「アイコン」とは何か?

アイコンを作るにあたってまず最初に理解すべきなのは、アイコンとは一体何なのか、そしてアプリにおいてどんな役割が求められるのかについてです。アプリのアイコンはいわばプロダクトの記憶装置です。したがって、魅力的で目を引くものであるだけでなく、あなたのアプリのコアとなる要素を体現し、ブランディングの一部を担うようなものであるべきなのです。

最近では「ロゴ」という言葉があまり深く意識されることなくあちこちで使われています。アプリのアイコンはロゴではありません。確かにアイコンはブランディングとしての側面もありますが、それとは異なるもっと多くの制約のもとに成立しているものなのです。ロゴとアイコンの違いを意識しておくことはデザイナーにとって重要なので改めて説明すると、ロゴとはレターヘッドや広告用にデザインされたサイズ変更可能なブランディングツールです。

一方でアイコンとは多くの場合四角いキャンバス、特定のサイズ、特定のコンテクストの中でよく見えるように作り込まれたラスタ画像です。したがって、素晴らしいアイコンを作るためのアプローチ方法やツール、制作方法、条件などはロゴと異なるのです。

 

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

 

 

実践的な視点から考えると、あなたがアイコンを制作している時に作っているものとは様々なサイズのPNGファイルなのです。例えば、29*29ピクセルといった小さいものから1,024*1,024といった大きいものまで考えられますし、これらのサイズはアプリとセットで考えなければいけません。そしてこれらの制作されたデザインはユーザーがあなたのアプリと対面することになる様々なOSで使用されます。App StoreやGoogle Play、設定パネルや検索結果、ホームスクリーンなどが挙げられるでしょう。

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

 

 


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

 

5つの重要な要素

それでは以下でアプリのアイコンデザインのお手本となる事例を見ていきましょう。アプリのアイコンデザインにおける「5つの重要な要素」、そしてそれらをどのように改善することができるのか、実際に私がどのように取り組んでいるかなどいくつか事例を紹介していきたいと思います。事例の多くは私自身が取り組んだものです。それは私のアイコンが一番いいからというわけではなく、制作過程でどんなことを考えたのか自分の作品のほうがよくわかっているからです。各要素について説明する際に、ぜひ自分が好きなアイコンを思い浮かべてみてください。そして各要素がホームスクリーン上のアイコンの形成にどう関わっていくのか考えてみてください。それでは始めましょう。

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

16d-5ilqbm2f4mzvowvwuba

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

 

 

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

キャンバスにいろいろと詰め込みすぎた複雑すぎるアイコンは、スケーラビリティに欠けているものが多いです。

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

 

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

 

1tmjtsgwbpvcdh-vb-ckhxw

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

 

2. 認識されやすいこと

17_ta3rxh0lrcda7bd-gllg

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

 

 

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

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

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

 

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

3 一貫性があること

19jfqri5syfzcyrsl3yg2kq

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

 

 

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

ユーザーの頭の中にあなたのアプリの統一されたイメージを作ることで、プロダクトの満足度や継続率、人気を高めてくれるでしょう。

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

 

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

1j3kqkkjvsxxcbpe-1kdg6q

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

4 ユニークであること

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

 

 

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

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

 

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

 

1ic6bkwz2tihq6ylcnjs0wq

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

 

1dx-uzfmdsakz551yauuosq

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

 

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.