ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

アプリのモックアップ作成に使いたい。フラット&単色のアイコンセットまとめ

アプリの画面は小さいので文字ではなく、アイコンを上手に使って説明していくのが基本です。そこでアプリの企画をする際にもアイコンの配置を考えて行っていかなければなりません。

そこで使ってみたいのがフリーのアイコン集です。今回は特にトレンドに合わせて単色、フラットかつ無料なアイコン集を揃えてみました。


Vector Ecommerce Icons

ショップ系アプリでよく使いそうな15種類のアイコンがダウンロードできます。フォーマットはAI、EPS、PSD、SVGとなっています。

Vector Ecommerce Icons : Medialoot

WPZOOM Developer Icon Set

154個のアイコンがダウンロードできます。フォーマットはPNG、AI、PSDです。

New Freebie: WPZOOM Developer Icon Set (154 free icons) - WPZOOM

Default Icon

653アイコンがダウンロードできます。フォーマットはPNGまたはEPSとなっています。画像は16/32/48/64/128/256と各種サイズ揃っています。

www.defaulticon.com

Reflection

汎用的に使える208アイコンがダウンロードできます。

200+ Exclusive Free Icons: “Reflection” | Webdesigner Depot

120 free new icons

68/48のサイズの他、AI/EPSフォーマットで配布されています。

120 free new icons! | pinkmoustache.net | vector stories

The Go Green! Icon Set

2色ですが、こちらはちょっと珍しい緑のアイコンです。108アイコン入っています。

Free Icon Set for Designers - The Go Green! Icon Set (108 Icons) - Speckyboy Design Magazine

Iconic

オープンソースで公開されているアイコンセットです。223アイコンがSVGやWeb Fontでダウンロードできます。

Open Iconic, a free and open icon set

Dortmund

2010年に作ったアイコンなのでアプリ用という訳ではないですが、2色カラーで提供されています。16/32の2サイズ、PNGとPSDのフォーマットが提供されています。

PC.DE - Download Free Icons for Windows and Macintosh @ pc.de

NounProject

細いラインで描かれたアイコンがダウンロードできます。有料サービスですが、無料アカウントも用意されています。

NounProject

gCons

32x32のアイコンが100個入っています。フォーマットはPSD、PNG、JPG、GIFとなっています。カラーは白黒の2パターンが用意されています。

gCons: Free All-Purpose Icons for Designers and Developers (100 icons + PSD) | Smashing Magazine

Monochrome Symbols Icon Set 4

15種類のアイコンセットです。汎用的ではありませんが、目的がぴったり合うケースがありそうです。

Monochrome Symbols Icon Set 4 : Medialoot

Retina Display Icon Set

約150種類のアイコンがRetina対応版も合わせて3パターンのサイズでダウンロードできます。

Retina Display Icon Set | Blog | The Working Group

APP-BITS Mobile App Icon

300アイコン版は有料ですが、こちらは70種類のアイコンが無料でダウンロードできます。とはいえRetinaも考慮された高品質なアイコンになっています。

Free Icons - APP-BITS Mobile App Icon and User Interface Design

iPhone Common Icon Set

特にステータスバー、タブバーで使えるアイコンが5つダウンロードできます。

glyFX : icons, toolbar images, splash screens, logos for software developers | iPhone Common

Android Common

Android用のアイコンが24個提供されています。サイズは16/24/32/48の4種類になります。

glyFX : icons, toolbar images, splash screens, logos for software developers | Android Common

Android Common II

上記のバージョンアップ版(10種類)です。フラットなUIにマッチするデザインになっています。

glyFX : icons, toolbar images, splash screens, logos for software developers | Android Common II

Free iPhone Toolbar Icons

iPhoneのツールバーに適したアイコンが60種類ダウンロードできます。

PixelPressIcons » Icons: Free iPhone Toolbar Icons

30 Free Vector Icons

PSDで30種類のベクターアイコンが提供されています。汎用的で使い勝手が良さそうです。

30 Free Vector Icons | Dezinerfolio

Token

128種類のアイコンがダウンロードできます。最大サイズは256x256となっています。ダーク、ライトの2パターンが提供されています。

Token by brsev on deviantART

iconSweets

60のベクターアイコンがダウンロードできます。よく使いそうなアイコンが揃っています。

iconSweets — Yummygum

handset icon by Ava1219 on deviantART

ライトとダークテーマでアイコンがダウンロードできます。

handset icon by Ava1219 on deviantART

Gentleface

300種類近くのアイコンをダウンロードできます。ワイヤフレームや個人用途では無料で使えます。

Free toolbar icons for interface or gui designer. Download free black & white toolbar icon set

Tab Bar Icons iOS 7 Vol6

タブバーで使えそうなiOS 7用アイコンを配布しています。ボリューム6まであって、1つにつき32アイコンあるようです(つまり192種類!)。

Tab Bar Icons iOS 7 Vol6 | Media Icons | Pixeden

Modern UI Icons

なんと1200種類を越えるアイコンが提供されています。デザインも多種多様で色々なアプリに使えそうです。

Modern UI Icons

350 pixel perfect icons

数字や天気など豊富なカテゴリでアイコンが提供されています。350種類以上あります。

Free Icons Set designed by Brankic1979 - Free psd

80 Mini Icons

80種類の小さなアイコンです。PSDとアイコンフォントで提供されています。

80 Mini Icons (PSD + Icon Font)

Free Vector Icons

100種類近くのアイコンです。AIファイルで提供されています。

Free Vector Icons | Roam Design Blog

Free Flat Icons

色付きですが基本2色ということで。24種類のアイコンです。ソーシャル系やメールなどバラエティに富んでいます。

Dribbble - Free Flat Icons by Jan Dvořák

108 Mono Icons

108種類のモノクロアイコンが配布されています。PSDファイルなのでカラーリング変更も容易とのことです。

108 Mono Icons: Huge Set of Minimal Icons | Tutorial9

Metrize Icons

丸で囲んだアイコンが特徴です。300種類揃っています。

Metrize Icons • 300 Icons for Designers & Developers

Tab Bar Icons iOS 7 | Media Icons | Pixeden

iOS 7のタブバーに適したデザインのアイコンセットです。

Tab Bar Icons iOS 7 | Media Icons | Pixeden

Chunky Pika Icon Set

ちょっと丸みを帯びた形なのが特徴のアイコンセットです。PNGとAIフォーマットで提供されています。

Chunky Pika Icon Set (42 Icons, PNG, AI) | Smashing Magazine

44 Shades of Free Icons

PSDファイルで44種類のアイコンを配布しています。

Dribbble - 44 Shades of Free Icons by Victor Erixon

Free 16px Broccoli dry icons

正式な名前がちょっと分かりませんが…。iOS 7のように背後が透けているアイコン集です。

Dribbble - Free 16px Broccolidryiconsaniconsetitisfullof…icons by Visual Idiot

Vectory 1037 icons mini free

40x40のPNG画像で1,000種類を越えるアイコンが提供されています。塗りつぶしがない、線画になっているのが特徴です。

Blog, Freebies | Icojam - sweetest free & premium royalty-free stock icons | stock icons, stock icon sets, premium icons, royalty-free icons, high-quality icons, vector icons, flat icons, free icons

Eldorado + Stroke 3132 icons mini free

太さが異なるラインで描かれたアイコン集です。直線メインなのが特徴です。

Blog, Freebies | Icojam - sweetest free & premium royalty-free stock icons | stock icons, stock icon sets, premium icons, royalty-free icons, high-quality icons, vector icons, flat icons, free icons

JustVector Social Icons

ソーシャル系サービスのアイコンをベクター化しています。これはこれで使いどころがありそうです。

JustVector Social Icons 1.5 | Alex Peattie

iconmelon

細い線で、手書き風なのが特徴です。数百種類はある中から、選択してダウンロードします。フォーマットはSVGになります。

iconmelon

Social Media Icons

ソーシャルメディアのアイコンだけを集めています。丸で囲んでいるのが特徴です。

Social Media Icons | Fontfabric™


いかがでしたか。アプリのワイヤーフレームを作る際に、手書きでもいいですがちょっとしたアイコンを使うことでより具体的に、分かりやすくなるケースもあると思います。統一感のためには同じアイコンセットを使うのがいいと思いますが、2色のアイコンであれば組み合わせてもそれほど違和感はないと思います。

実際のアプリではそのまま使うのは難しいかも知れませんが、ワイヤーフレーム、モックアップの段階ではどんどん積極的に使って見栄えを確認していくべきでしょう。ぜひダウンロードして使ってみてください!

f:id:mbaasblog:20180927104348p:plain