アプリアイコンを考えれば、デザインを知ることができる！ 初心者のためのアイコンリサーチ

皆さんはアプリのアイコンをデザインする時、

• まずどうやって作ればいいの？
• ロゴを作るべき？
• アプリ名は入れたほうがいいの？

こんな疑問を持ったことはありませんか。

今回は、デザインに慣れていない人ならきっと一度はぶつかる課題を解決するべく、アイコンデザインについてリサーチ、その最適解を探してみました！

この記事を読んで、「UI/UXやデザインについて学んでいるけれど、アイコンデザインでよくつまづく…」という人が、デザインをする時のヒントを見つけていただけると嬉しいです。

アイコンのデザインからわかること

Appleが公開している開発者向けのガイドライン『Human Interface Guidelines』には、アプリアイコンのデザインをする際に気をつけるべきルールが明示されています。

• シンプルであること
• 単一の焦点を提供すること
• 機能をすぐに認識可能であること
• 背景がシンプルで、透明でないこと
• 不可欠なものかロゴ以外で文字を使用しないこと
• 画像やスクリーンショットを使用しないこと
• Appleハードウェア製品の複製は使用しないこと
• インターフェイス全体にアプリアイコンを配置しないこと
• どんな壁紙の上にあってもデザインが保たれること
• アイコンコーナーを四角に保つこと

（参考：https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/）

このように、アイコンにはサイズが小さいというだけでなく、多くの制限があります。
そのデザインについて考えることは、デザインを学んでいる人がさらに理解を深めるきっかけになると思います。理由としては次の2つが挙げられます。

情報の伝え方

アプリをダウンロードするとき、皆さんはどうやってそのアプリにたどり着きますか？

多くの人は、ストアで「カメラ」「ダイエット」などと検索し、表示されたランキングからアプリを探し、気に入ったものを選ぶことでしょう。
アプリは今やたくさんの種類が出ており、機能や見た目、価格帯が近いものがいくつもあります。そんな中でユーザーの目に止まり、選ばれるためには、ユーザーが最初に触れるアイコンが魅力的でわかりやすいものであることが大切です。

また、アイコンのサイズは非常に小さいですよね。
親指で隠れるほどの小さな正方形の枠組みの中で、「アプリの顔」として何かを伝える。その表現方法から、デザインの大事な考え方を見つけることができるのではないでしょうか。

トレンドの読み取り方

常にランキング上位にあるようなアプリでも、アイコンのデザインがしばしばアップデートされます。
その履歴を辿っていくと、どんなカテゴリのアプリも、ある程度デザインのトレンドに則ってアップデートされていることがわかります。
このアップデートを分析すれば、デザインのトレンドを読み取ることができるのではないでしょうか。

それでは、ここからAppStoreにあるiPhone向けアプリアイコンのデザインをベースに、デザインの考え方に触れていきたいと思います。ぜひ制作中のデザインや、自分のホーム画面と照らしつつ考えてみてください。

多様なパターンから考えよう

アイコンのデザインにはそのアプリが持つ特徴や機能によって様々なパターンがあります。ランキング上位に並んでいるアプリを大まかなデザインパターン別に分類、特徴をまとめました。

パターン1：知名度が高いシンボルロゴを生かす

AppStoreやスマートフォンのホーム画面を見ると、シンプルなアイコンが目立つことに気づきます。
例えば、Facebook、Twitter、LINE、Tumblr、Spotify、Pinterest、Snapchat、YouTubeなどは、そのサービス自体が知名度の高いシンボルロゴを持っているのものが多いです。そのため多くは語らず、ただシンボルロゴだけがキーカラーの上に置かれています。

これらは、アプリアイコンを見ただけでどこが出しているアプリなのか、どんなサービスなのかをすぐに想像し、認識することができます。
直感的に機能を認識してもらうことがアイコンの役割です。すでに多くの人に知られているロゴがあるのであれば、それを真ん中に置くだけでデザインの9割が完成したと言えるかもしれません。

パターン2：文字を削る。シンプルイズベスト

シンボルロゴが無い場合、アプリの名称を入れるか、入れないか悩むことはありませんか？
アプリ名が入っているアイコンを探してみると、RETRIP、DELISH KICHEN、ZOZOTOWN、huluなどを見つけることができました。

Appleのガイドラインには「不必要な文字を使用しないこと」とあります。
「無料！」「新しいカメラアプリ」「ダウンロード数100万突破！」こういった文字情報は、アイコンにとって不必要なものと言えるでしょう。
アイコンの小さな正方形の中に文字を書くと、潰れてしまい、はっきりと読むことが難しくなってしまいます。せっかく伝えたいことを詰め込んだのに、正しく伝わらず、マイナスな印象を与えてしまうかもしれません。
また最近では無料版と有料版どちらもあるアプリであっても、たすき掛けのように「FREE」といった表記のあるアイコンはアップルストアにリリース申請した際に通らないようなので、注意が必要ですね。

では、アプリ名の文字はどうでしょうか。
基本的に、iPhoneのホーム画面でも、AppStoreでも、アプリの名称はアイコンのすぐ近くに表示されています。アイコン内でも繰り返す必要はありませんね。

伝えたいことがたくさんあったとしても、潔く文字を削って1つのイラストアイコンでシンプルに表現する方が、ユーザーに対し「しっかりとデザインされている」という印象を与え、愛着を持って日常的に使ってもらえるアプリになるのではないでしょうか。

はじめにご紹介したアプリアイコンに使われているのは、文字と言ってもデザインされたロゴタイプです。
これらはロゴタイプがそのサービスやブランド、アプリのロゴマークとなっているので、文字であってもシンボルロゴと同じ役割を果たしていると考えられます。

パターン3：記号として文字を使う

企業やサービスのロゴ以外にも、いくつか工夫されたシンボルロゴを用いたアイコンを見つけました。Tumblr、minne、Prott、さんちの手帖などが該当します。

アプリやサービスの名称の頭文字をロゴタイプ、ロゴマーク化してデザインしているものはしばしば見られます。

アプリの機能をわかりやすいイラストで表現することが難しいとき、アプリの目的が多様であるとき、このパターンに挑戦してみるのもいいかもしれません。

パターン4： 効果的な画像の使用

今回AppStoreで探してみたところ、写真を使っているアイコンは少ないということがわかりました。使っているものとしては、AWAが挙げられます。

AWAは、アプリのデザイン自体にも多くの画像が使われています。アプリのインターフェースとアイコンの雰囲気が一致していて、アプリの雰囲気が伝わってきます。
しかし、画像は多色であったり、人物や多くのものが写っていたりと、情報が非常に多いですよね。
それを全て小さなアイコン内に入れると、

• ごちゃごちゃする
• 他に見せたいものがぼやける

というリスクがあり、使いこなすのは難しそうです。
前述のAppleのガイドラインにも、背景に関しては「単純である」こと、「アイコン全体をコンテンツで埋める必要はない」ということが書かれています。

AWAのアイコンは画像を使ってはいますが、その色数は少なく、ほぼグラデーションの背景と同じような扱いですね。3文字のサービス名がぱっと目に入ってくるデザインです。
このように効果的に使うことができれば印象に残るアイコンになると思いますが、使うときは慎重に、色味の調整やレイアウトを行うべきではないでしょうか。

パターン5：デザインで差別化する

文字や画像以外の手段でアプリの機能を直感的に理解してもらうためには、イラストがとても効果的です。

アプリの機能を表現するベストなイラスト（アイコン）は、1つであることが多いため、同じカテゴリのアプリアイコンは似ていることが多いです。

例えば、「写真 / ビデオ」カテゴリの、「カメラによる撮影」がメイン機能であるアプリのアイコンは、丸が中心にあるものがほとんどではないでしょうか。

他にも、メールアプリであれば「封筒」、タスク管理アプリは「チェックマーク」などのアイコンが使われています。ぱっと見たときに何ができるかわからないアプリアイコンは、ユーザーに考えさせるストレスを与えてしまいます。そのことによって興味を引く効果もあるかもしれませんが、日常的に使ってもらうことを目的に置くアプリであれば、まず機能に結びつけられるアイコンを使用するべきでしょう。
しかし似通ったアイコンを使用するので、そのアプリ特有の機能、配色を生かしてデザインすることにより、多くのアプリとの差別化を図ることが必要ですね。

パターン6：世界観をアピール

これまで挙げてきたアイコンデザインのルールをことごとく破っていくアプリがあります。
RPGやアクションなどのゲームアプリです。

全体的にどのアプリもフラットではなく、むしろ立体的なものや、文字とイラストどちらも入っていたり、使われている色が多いと感じませんか？
これらは例外として考えた方がいいかもしれません。
ゲームアプリは、登場するキャラクターをはみ出さんばかりに描くことで、その作画のタッチや雰囲気をアピールしているとも考えられます。
またゲーム内のキャンペーンに合わせてアイコンを変更したり、リリース元で統一している枠やマークがあるなど、ゲームアプリアイコンには独自のルール、文化があるようです。
むしろこういったデザインのアイコンは「ゲームアプリ」という印象が強いので、ゲームアプリ以外でこのようなデザインをするのは避けた方がいいかもしれませんね。

アップデートから考えよう

続いては、アップデートの履歴からデザインのトレンドと、デザインの役割を考えてみたいと思います。

自分がよく使っていたアプリのアイコンが、ある日急に変わって違和感を覚えた経験はありませんか？
アイコンのデザインは、そのアプリの特徴に合わせたものであると同時に、そのときのiOS標準アプリのアイコンデザインと同じルールに則っている場合が多いです。

ここでInstagramのアイコンを見てみましょう。

古い方の、リアルな質感でレトロな印象のアイコン、皆さんは覚えていますか？
今ではもうおなじみのグラデーションも、2016年のアップデート当時はかなり不評だったと言われています。このような変更は、iOSがバージョン6から7へとアップデートした後に多くのアプリにおいて行われました。
（参考：Icon comparison: iOS 6 vs iOS 7）

iOS7以降、インターフェースやアプリアイコンにおいてフラットデザインが採用されています。ホーム画面においてiOSの標準アプリと馴染まない、という理由も考えられますが、フラットなデザインの評価が高まり、多くのアプリが取り入れていますね。

例として、ハンドメイドの商品を売り買いできるショッピングアプリのminneが、そのアイコンやアプリのデザインをガラッと変えたことを、先日の9月14日に発表しています。
minneのアプリアイコンの変更は、ブランド自体のリデザイン、ロゴの変更に伴うもののようです。
（参考：https://minne.com/brand）

アイコンの変更は、直感的に認識されることが大きな役割であるアプリアイコンにとって、リスクを伴います。また同時に、慣れたデザインからの変更にユーザーからの不満の声は必ずといっていいほど挙がっていますよね。
しかし新しくシンプルなアイコンは、アプリのターゲットを広げ、より多様なユーザー、シーンに訴求することができるのではないでしょうか。
このようにフラットでよりシンプル、余白を大きくとったデザインへとアップデートしたアプリは数多くあります。

これらは最初からシンプルなロゴだったわけではなく、アプリやサービスのローンチ直後はイラストアイコンを使用するなど、どんなアプリなのかわかりやすいデザインのアイコンでした。
ユーザーがどれほどそのアプリを認識しているか、そのレベルに合わせて、またアプリ、サービスとして目指す形に沿うものかどうか、ということもデザインするときに考える必要がありますね。

アプリアイコンを考えれば、デザインを知ることができる

アプリアイコンにはデザインの原則、トレンドが詰まっています。小さな正方形、ないし円の中に伝えたいことを詰め込むことは難しく、すでに何通りものデザインが世にある中で、シンプルかつユニークなデザインを目指すことは難しいかもしれません。
しかし、アプリによって異なる、アピールしたい特徴やターゲットをしっかりと理解した上で、アプリに合ったアイコンデザインを考えていくことで、ユーザー視点に立った考え方や、コンセプトに基づくデザインプロセス、マインドが身につくのではないでしょうか。
ぜひ皆さんも、多くの事例に学びつつ、アイコンからデザインを考えてみてください。