アプリのアイコンデザインを作るポイントとは？参考サイトもご紹介します

アプリのアイコンデザインにはいくつかのパターンがある

メジャーなアプリのアイコンデザインを並べていくと、いくつかのパターンがあることに気づかされます。これらのデザインパターンを比較することで、新しいアプリアイコンのヒントを得ることができるのではないでしょうか。

アプリ名をそのまま使う

アプリアイコンのデザインに、アプリの名前・サービス名をそのまま文字として使っているものは多いです。

「H&M」「GU」「ZARA」「UNIQLO」などのアプリは、ブランド名を文字でそのまま表してアイコンデザインに適用しています。もちろん、ただ漠然と文字が並んでいるわけではありません。「H&M」の斜めに傾けた書体や「GU」の青地に黄色の配色などを見れば、文字をグラフィカルな要素として巧みに扱っていることが分かります。

サービスのブランドロゴを使う

メジャーなサービスは、既に知名度の高いブランドロゴを持っていることが多いです。広く普及しているSNSのアプリアイコンを見てみれば、サービスのロゴをそのままアプリに使用していることが分かるはずです。Twitterの鳥、FacebookのFの文字などはアプリアイコンにそのまま使われています。

アプリが持つ機能を表している

インストールされているアプリの数が多ければ多いほど、目的のアプリを見つけるのは難しくなります。アプリアイコンは、アプリを起動させるための目印となる存在です。一体何のアプリなのか、アプリの機能が一目でわかるデザインのアプリアイコンはたくさんあります。

例えば＋や－が並んでいるアイコンなら、電卓アプリだということが一目でわかります。

過去のアップデート事例を参考にしよう

アプリがアップデートされる時、アプリアイコンのデザインもまた新たに変化することがあります。

現在のInstagramアイコンは夕焼けを思わせるグラデーションカラーが印象的ですが、これは2016年にアップデートされたものです。昔はブラウンのレトロカメラ風アイコンを用いていました。また、Gmailのアイコンは赤いフチの白地の封筒から、赤・緑・黄・青を配色したカラフルなものにアップデートされています。

ここで、アプリアイコンデザイン流行の歴史を簡単に紹介します。

1990年代後半は、立体的で実物に近い形をしたリッチデザイン（スキュアモーフィズム）型のアイコンが主流でした。インスタグラム初期のレトロカメラ風アイコンも非常に立体感があり、レンズの透明感まで再現されていました 。

その反動からか、次に流行ったのはフラットデザインと言われる平面的なデザインです。グラデーションやシャドウなどの立体表現を捨てたシンプルなデザインが特徴です。Windows 8に採用されたこともあり、一時期大流行しました。スッキリした見た目は洗練された印象を与えますが、その一方でシンプルすぎるがゆえに、アイコンやボタンと地の画面や画像の区別がつきにくいという問題点もありました。

そのような問題点を解消するのが、次に流行ったマテリアルデザインです。フラットデザインに簡単なシャドウや色の強弱をつけることで、シンプルな見た目にもかかわらず立体的な表現を可能にしています。

アイコンデザインは目まぐるしく流行が変化しており、時流に乗り遅れると「時代遅れ」なイメージになってしまうので気を付けたいところです。逆にトレンドにあった物を作れば、モダンな印象をユーザーに与えることができるでしょう。

アプリのアイコンデザインを作るときのポイント

アプリアイコンをデザインするときのポイントをまとめてご紹介します。

欲張りすぎず、シンプルに

アプリアイコンは、非常に小さい存在です。欲張ってたくさんの情報を詰め込んでしまうと、ごちゃごちゃした見た目になり、結局何のアイコンなのか分からなくなってしまうでしょう。

アプリアイコンを作るときは、極力シンプルなデザインが望ましいです。Facebookのアイコンを思い出してみましょう。Fの白文字しかデザインに含まれていないシンプルさが、とても分かりやすく感じられるはずです。

ゲームアプリは特別

ゲームアプリの場合はシンプルさに特別こだわる必要はありません。ゲームアプリアイコンの多くは、ゲームに登場するキャラクターが登場していたり、カラフルな見た目をしていたりと、他のアプリアイコンとは印象がまったく異なります。

ゲームアプリには他のアプリのような機能性は求められていませんので、アイコンデザインによって「何ができるか」を表す必要はありません。代わりに、ゲームの世界観や雰囲気が伝わるアイコンデザインで、ユーザーの興味を引いているのが分かります。

アプリの機能をデザインで表現する

「アプリアイコンのデザインパターン」で見てきたように、アプリアイコンでアプリの機能を表現することは重要です。

しかし、機能性重視のアイコンデザインは、同じような機能を持つアプリと似てしまうという問題があります。色やアプリのシンボルロゴを生かして、オリジナリティを出す工夫が必要になるでしょう。

例えば、メールアプリは封筒のイメージを用いるアイコンが多いですが、同じ封筒でも配色や見せ方を変えることで各メールサービスならではの特徴を演出しています。GmailアプリアイコンはGoogleのテーマカラーを用いて封筒をカラフルに彩りつつ、Mの文字を強調するデザインです。一方の￥、Yahoo Mailアプリアイコンは「Yahoo！」のサービス名をアイコンデザインに含みつつ、封筒はシンプルな白地で表現しています。

色の持つイメージを考えながら配色する

アプリアイコンに使う色は、アプリのイメージに合うものを使いましょう。例えば、赤には力強さ・愛・パワフル・生命力、青には信頼・安心・誠実、緑には自然・健康などのイメージがあります。そのため「医療アプリ」のアイコンを作る場合は青を、「食育アプリ」のアイコンを作る場合は赤を使った方がアプリのイメージに合ったものになるでしょう。

また、アプリアイコンに2色以上の色を使うときは、配色バランスに注意しましょう。色には相性があり、コントラストが引き立つ組み合わせもあれば、お互いの色のよさを殺してしまう配色もあります。そんなときは、色相環を使うときれいな配色を選ぶことができます。

色の持つイメージや配色の理論は、デザインの本やWebサイトで調べることができます。また、配色ジェネレーターというサービスを使えば、きれいに見える色の組み合わせを何パターンも自動作成することができます。

アプリのアイコンデザインを作るときの注意点

アプリアイコンをデザインする前に、気を付けたい注意点をご紹介します。

アプリストアの基準を確認する

アプリを登録するアプリストアには、ストア独自の基準があります。せっかく素敵なアプリアイコンを作っても、アプリストアに登録できなければ日の目を見ません。アプリストアにはAndroid端末向けのGoogle Play、iOS端末向けのApp Storeなどがあります。それぞれ登録できるアプリアイコンのサイズ・ファイル形式・形が異なる点に注意してください。

アプリアイコンデザインを始める前に、アプリをどのストアに登録するのか決めて、アプリストアのアイコンデザイン仕様を確認しておきましょう。

必要ない文字は入れない

メジャーなアプリアイコンのデザインパターン例では「H&M」などブランド名をそのままアプリアイコンに使っている事例をご紹介しました。

しかし、アプリの名前以外で文字をアプリに盛り込もうとすると、途端に煩雑なイメージになります。もともと狭いアプリアイコンのキャンバスですから、無理に文字を入れると小さくて読んでもらえない可能性が高いのです。必要のない文字は極力アプリアイコンデザインの中に含まないようにしましょう。

ホーム画面との相性を考える

アプリアイコンが表示されるのは、スマートフォンやタブレットのホーム画面です。ホーム画面に自分好みの壁紙を設定して、楽しんでいる人はたくさんいます。

どんな色・模様の壁紙でも、アプリアイコンが見えづらくないかを検討することが重要です。壁紙の色と混じってしまい、アプリアイコンが目立たなくなってしまうことはないでしょうか。アプリアイコンができたら、様々な背景画像と合わせて確認してみましょう。

アプリのアイコンデザインの参考になるサイト10選

アイコンデザインのアイディアを練るために、参考になるサイトを10個ご紹介します。

iOS Icon Gallery

iOS Icon Galleryは、iOS端末向けアプリを大量に集めたギャラリーサイトです。MacやApple Watch向けのアイコンギャラリーも用意されています。一覧に表示されるアプリアイコンは大きくて見やすいです。

また「Advanced Search」を使うと、色・カテゴリー・デザイナー・開発者別にアイコンを検索することができます。

iconfeed

iconfeedは、iOSのアプリアイコンギャラリーです。カテゴリーとタグから、アプリアイコンを絞り込むことができます。このサイトの特徴は、アプリアイコンに使われているカラーが一緒に紹介されているところです。カラーにはリンクが貼られおり、クリックすると同じカラーを使ったアイコンが表示されます。

配色アイディアを得るのに便利なサイトといえるでしょう。

iospirations

iospirationsは、iOSのアプリアイコンギャラリーです。

色の名前や形など、さまざまなタグで検索ができます。ギャラリー内のアプリアイコンをクリックすると、スマートフォンのホーム画面に設置された時の画像が現れます。

Behance

Behanceは、Photoshopで有名なAdobe社が運営するクリエイターのためのSNSサービスです。たくさんの投稿作品のなかに、アプリアイコンのデザインも含まれています。「app icon」で検索すると、さまざまなアイコンデザインに出会うことができます。

ほかのデザイナーから刺激を受けたい人は、Behanceを使ってみてください。

Font Awesome

Font Awesomeは、Webサイトにアイコンを埋め込むことができるアイコンフォントサービスの代表格です。Webサイトでよく見かけるアイコンがたくさん掲載されています。Font AwesomeのアイコンをWebサイトで利用する場合はメール登録が必要ですが、アイコンを検索するだけなら登録の必要はありません。

TwitterやAppleなどの有名アイコンも含め、約7800のアイコンからアイディアをもらうことができます。

Material Icons

Google Fontsのサービスの1つに、Material Iconsがあります。

アイコンフォントとして使用もできるほか、PNGやSVG形式でダウンロードして使うこともできます。会員登録なども必要なく、すぐにアイコンの検索が可能です。

Pinterest

写真共有サービスのPinterestには、写真だけでなくアプリアイコンのデザインも投稿されています。「appicon」のタグで検索を行うと、さまざまなアイコンが現れます。ログインすれば、お気に入りの作品をボードに保存して、自分なりのギャラリーを作ることもできます。

Dribbble

Dribbbleはデザイナー向けのSNSサービスで、さまざまなアート作品が投稿されています。世界中で利用されており、GoogleやFacebookの企業アカウントのデザインも見ることが可能です。グローバルな視野でアプリアイコンの研究がしたい人には重宝するサイトといえるでしょう。

なお、閲覧自体は無料で誰でも可能ですが、Dribbbleに作品を登録するには、既に会員になっている人に招待してもらわなければなりません。

シルエットAC

シルエットACは、シルエット（影絵）がダウンロードできる素材サイトです。シルエットならではのシンプルな形で、乗物から人物までかなり広い範囲をカバーしています。アイコンサイトで見つからないテーマがあったら、こちらを参照してみてください。

ここで紹介した多くのサイトが海外製ですが、シルエットACは日本語で利用できるので検索時のストレスがありません。

各アプリストア

Google PlayやApp Storeなど、アプリストアにアップされている競合アプリのデザインを参考にするという方法もあります。アプリアイコンデザインにオリジナリティをだすためには、競合アプリのデザインを知ることから始めなくてはなりません。

これから作ろうとしているアプリカテゴリーの中で、人気のあるアプリはどのようなデザインをしているでしょうか。よく観察してみてください。

まとめ

アプリアイコンデザインの作成ポイントについて、ご紹介しました。

アプリアイコンをデザインするときは、指先程度の小さな画像の中で工夫を凝らさなくてはなりません。シンプルかつインパクトのあるデザインを探っていきましょう。また、アイコンデザインには流行があることも忘れてはいけません。今のアイコントレンドに敏感になり、モダンなデザインのアイコン作成を目指してください 。

WEBでのお問い合わせはこちら