2018.01.30

アプリのアイコンデザインの参考にしたいサイト12選

アプリの開発で役に立ちそうなアプリのアイコンデザインのインスピレーションを刺激してくれそうな参考サイトをピックアップしてみました。アプリのメインのアイコンデザインはもちろん、アプリ内で使いそうな様々なアイコンも含んでいます。なお、中にはSVGデータや、アイコンフォントなどとして利用できるものもあるので、アプリの開発やデザインの参考にしてみてください。

iOS Icon Gallery

http://iosicongallery.com/

iOSのアプリのアイコンだけをひたすら集めたサイトで、この記事執筆時点では1100個以上のアプリアイコンが登録されていて、色別に検索することもできます。また、iOSだけではなく、MacやApple Watchのアイコンも登録されています。ページの構成が凄くシンプルなものになっていますので、閲覧がしやすいではないでしょうか。

Iconsfeed

http://www.iconsfeed.com/

こちらのサイトも上記サイト「iOS Icon Gallery」同様にiOSアプリのアイコンを収集したもので、カテゴリ、タグ、色のそれぞれのジャンルで探すことができるようになっています。

Dribbble

https://dribbble.com/tags/app%20icon?s=popular
https://dribbble.com/tags/appicon?s=popular

世界中のデザイナーのハイクオリティな様々なデザインが見れるサイトです。デザインはさることながら、思わず唸ってしまうアイデアのアイコンを観ているだけでワクワクして時間があっという間に過ぎてしまう、そんなサイトです。

アイコンだけではなく、アプリのUIやグラフィックデザイン、イラストレーションに関連する作品も観ることができて、インスピレーションが刺激されます。

Behance

https://www.behance.net/search?field=131&content=projects&sort=appreciations&time=all&search=appicon

こちらも上記のDribbbleと似たようなサイトとなっており、世界中のクリエイターがハイクオリティなデザインを公開しています。同様にアイコンのデザイン以外のグラフィックデザインやイラストレーションなど、様々なクリエイティブに触れることができます。

Material Icons

デモ / ダウンロード

Google製のオープンソースプロジェクトで、Apache License 2.0で配布されているマテリアルアイコンテンプレートです。900個以上のアイコンが登録されており、Web向けのアイコンフォントとして使うことはもちろん、SVGデータを使ってAndroidやiPhone向けのアプリ内のアイコンに使うのもいいでしょう。

Font Awesome

https://fontawesome.com/icons?m=free

Web界隈では有名なアイコンではないでしょうか。様々なアイコンもさることながら、GoogleやAmazon、Twitter、Facebookなどのブランドのロゴも多数揃えられています。

下記リンク先ページにあるダウンロードファイルの中に含まれる「advanced-options/raw-svg」フォルダの中にはSVGデータもありますので、Illustratorなどで開いて参考にするのもいいでしょう。
https://fontawesome.com/get-started/svg-with-js

ICONFINDER

https://www.iconfinder.com/

この記事執筆時点では、商用利用や有料のものも含めて約217万近いSVGのアイコンが登録されているサイトです。デザインの参考にすることはもちろん商用に使えるアイコンも含まれていますので、利便性が高いサイトと言えます。基本的には英単語での検索となります。

FindIcons

https://findicons.com/

上記のICONFINDERとサイト名が被っている感がありますが、こちらは無料のアイコンのみを集めたサイトとなっていて、150,000以上のアイコンが登録されています。日本語での案内がありますが、こちらも基本的には英単語での検索となります。

Open Iconic

https://useiconic.com/open

オープンソースで公開されているアイコンで、SVG、Webフォント、ラスタ形式で223個が登録されています。

Design App UI 200 icons

https://www.flaticon.com/packs/design-app-ui

条件を満たせばフリーで使用することができ、SVG、EPS、PNG、PSD、Iconfontフォーマットで200個登録されています。

IcoMoon App

https://icomoon.io/app/#/select

Web用のアイコンフォントして好きなアイコンだけを選んでダウンロードして使うことはもちろん、さらに自分で作成したSVGのデータをWebフォントやアイコンフォントとして登録して利用することができます。興味のある人は「icomoon　使い方」で検索してみるといいでしょう。

Google画像検索

https://www.google.co.jp/imghp?hl=ja&tab=wi

最強なのは、Googleの画像検索かもしれません。笑。自分もたまにアイコンのデザインをしたい時は、これで手っ取り早く探していることが多かったりします。
「アイコン　カメラ」とかで検索すればズラッと参考になるイメージが出てきますが、ピンとこないのであれば、「icon camera」などのように英単語で検索するとまた違った結果がでてくるのでお薦めです。