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

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

Monacaアプリにも!Web Font/SVG/CSSアイコンまとめ

スマートフォンはどんどん高解像度化しており、画像リソースはどんどん大きくなっています。それだけアプリが肥大化してしまうと利用するユーザもダウンロード待ちに疲れてしまうでしょう。

そこで代替手段になりえるのがWeb FontやSVGアイコン、そしてCSSフォントです。ベクターベースのアイコンであればどれだけ拡大しても綺麗ですし、一種類用意すれば全てのデバイスで使えます。特にWeb技術であればハイブリッドアプリ開発に使えるMonacaとの親和性も高いのでお勧めです。CSSアイコンはCSS3を使うことでアニメーションもサポートしているものもあります。

今回はそんなWeb FontやSVGアイコン、CSSアイコンを配布しているサイトを紹介します。

Material icons guide - Google design

Googleの提唱しているマテリアルデザインに使えるWeb Fontで、SVGフォーマットでも提供されています。単色になっていますので、CSSでカラー指定を行えるようになっています。

Material icons guide - Google design

Icons8

カラフルなアイコンをSVGフォーマットで提供しています。アイコンは実に300種類を越えています。

Flat Color Icons | Icons8

littlebox

CSS3で作られており、アニメーションもサポートしています。旗や決済用のアイコンも提供されています。

littlebox

subway

PNG画像は90pxまでですが、SVGやEPSファイルがありますので自由にサイズを変更してアイコンを出力できます。ただし全てが1ファイルになっていますのでスプライトしたり、別ファイルに切り出す必要がありそうです。

mariuszostrowski/subway

icono

CSSで作られたアイコンです。単色ですが汎用的に色々な場面で使えそうです。ソーシャルサービス系のアイコンも提供されています。

icono | Pure CSS icons

Evil Icons

主にWebサービス、特に各種フレームワークと組み合わせて使うことが想定されているSVGアイコンパックです。線が細いのが特徴です。ローディング系のアニメーションも用意されています。

Evil Icons

Material Design Fonticons

マテリアルデザイン用のWeb Fontで、数百種類のパターンが用意されています。アプリ開発で使うととても捗りそうです。

Material Design Fonticons

Marka

CSSで作られたアイコンです。特徴はアイコンがアニメーションしながら別なアイコンに変化するのをサポートしていることです。ユーザアクションでアイコンを変える時に役立ちそうです。

Marka - Beautiful transformable icons

inuicon

pplogというサービスの中で使われているWeb Fontアイコンになります。使いどころは限定的になるかも知れませんが、こうやってまとめておくことで再利用性が良くなるメリットがありそうです。

inuicon

Loaders Kit

CSSアニメーションによるローディングアイコンだけを提供しています。わざわざアニメーションGIFを用意することなく、簡単にローディングアイコンが実現します。

Loaders Kit - By Viduthalai

iconmelon

とても数多くのSVGアイコンを提供しています。主にWeb向けではありますが、MonacaのようなWebViewを使っている場合にも使えて便利ですね。

iconmelon

Drawic

SVGのアイコンセットを提供しています。ソーシャルサービスもあります。はてなブックマークやGitHub、Gruntのアイコンもあり、主に技術者向けかも知れません。

Drawic

Font Awesome

Bootstrapと親和性の高い有名なWebFontです。最新の4.3.0では519アイコンが提供されています。これだけあれば大抵の用途に事足りそうです。

Font Awesome, the iconic font and CSS toolkit


今はフラットデザインが流行なのでアイコンは強調しすぎずシンプルな1色ないし2色程度のものが使われます。そのためWebFont、SVG、CSSアイコンとはとても相性が良いのではないでしょうか。

主にWebサイト向けに使われますが、ハイブリッドアプリの中、例えばタブバーであったりメニューなどで使うとアプリがとても分かりやすくなるのではないでしょうか。ぜひお使いください!

f:id:mbaasblog:20180927103344p:plain