適用するだけでインスタ映え？クールで便利な画像フィルター系CSSライブラリ5選

現在はFacebook傘下にある、大人気の無料の写真共有サービスInstagram(以下、インスタグラム)。日本では「インスタ」とも呼ばれ、フォトジェニックな写真をアップロードして人気を博しているユーザーは「インスタグラマー」として注目を集めています。

クールでフォトジェニックな写真は「インスタ映え」とも形容され、一方で2018年1月頃から、真逆の価値観として「インスタ萎え」という言葉もプチ流行しています。インスタグラムには標準でも多数のフィルターが用意されており、こうしたフィルターで画像処理を行いながら撮られたかっこいい写真は、ホームページやブログで引用されることもあります。

しかし、わざわざインスタグラム経由でフィルターを使わなくとも、少しの手間で簡単に「インスタ映え」する方法があればどうでしょう？しかもその手間が10分未満だったら？

そこで今回は、そうした短時間であっという間に「インスタ映え」する、クールで便利な画像フィルター系CSSライブラリー5選をご紹介します。

クールで便利な画像フィルター系CSSライブラリ5選

CSSは文字の大きさや色を変えたり、ホームページの段組のルールを決めたりと、主にホームページの「見た目」の部分にフォーカスを当てた言語で、ホームページ制作には必須です。しかし、CSSはどんどんと進化してその役割は現在では広範に渡っており、「CSSイメージフィルター」と呼ばれる、画像に簡単にエフェクトをかけられるプロパティも登場しています。

参考：
Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選

現在では、この機能を活用して、さらにクールなテーマを実現することのできる画像フィルター系CSSライブラリが次々と登場しています。この中には、本家インスタグラムも顔負けの、表現豊かなライブラリもたくさん揃っています。

さらに、「CSSイメージフィルター」は、元の画像を編集することなく、ブラウザ上でエフェクトを適用するので、WordPressなどのCMSで少し設定をすれば、簡単に新規画像にも、元の画像を痛めることなくエフェクトをかけることが可能です。

ここでは、特に人気のあるクールで便利な画像フィルター系CSSライブラリを見てみましょう。

1. 使うだけでフォトジェニック「Instagram.css」

Instagram.cssは、インスタグラムのアプリ内にプリセットとして用意されているフィルターを中心に、40種類以上のフィルターを備えた画像フィルター系CSSライブラリです。

40種類ものフィルターが用意されているということは、1枚の写真だけで40枚に相当する多彩な表現ができることを意味しています。使い方は非常に簡単で、画像をfilterタグでくくって、利用したいフィルターのクラスを指定するだけです。

<figure class="filter-1977”>
　　<img src="image.jpg">
</figure>

ほとんどのモダンブラウザで利用可能で、ライブラリを読み込むだけですぐに利用できます。インスタグラムから埋め込みで写真を使うことが多い人には、特におすすめできます。

2. クールなデュオトーンを短いコードだけで生成「colorfilter.css」

colofilter.cssは、短いコードで簡単にモダンな画像フィルターを利用することができる画像フィルター系CSSライブラリです。

フィルターの数は30種類ほどですが、特にcolorfilter.cssの持つ強みは、デュオトーン系のフィルターにあります。デュオトーンとは、2016年に流行を見せた、グレースケールでプリントしたような写真に別の1色をオーバーレイで重ねたような写真の加工方法です。

参考：
あなたはいくつ知っていますか？2016年に最も話題になったWebデザイントレンド17選

こちらも使い方は非常にシンプル。以下のようにフィルターを適用したい画像をフィルター指定のクラス名がついたDIVタグで囲むだけです。

<div class="blend-blue">
　　<img src="image.jpg”/>
</div>

こちらはモダンブラウザのほとんどで利用できますが、iOSを含むSafariやOpera miniでは利用ができないことに注意してください。

3. 超人気画像編集アプリVSCOを気軽に「CSSCO」

人気のインスタグラマーのほとんどはVSCOを使っていると言っても過言ではないくらい、インスタグラマーの圧倒的な支持を集めているのがVSCOです。特に、インスタグラマーのおしゃれな写真を見ると、VSCOの中でもほとんどがこのアプリに収録されている「C1」というフィルターが使われています。

なんとこの「C1」を、iPhoneやAndroidを開かなくとも利用できてしまうのが、CSSベースでVSCOを模した画像フィルター系ライブラリのCSSCOです。

必ず「インスタ映え」すると人気の「C1」はもちろん、どこか懐かしい雰囲気を醸し出す「A6」や、ノスタルジックで哀愁感漂う「KK2」、爽やかな「F2」など、VSCO定番のフィルターが満載です。

こちらも以下のようにフィルターを適用したい画像をフィルター指定のクラス名がついたDIVタグで囲むだけで利用することができます。

<div class="cssco cssco--c1"> 
　　<img src="image.jpg”/>
</div> 

こちらもモダンブラウザのほとんで利用できますが、iOSを含むSafariやOpera miniでは残念ながら利用ができませんので注意してください。

4. インスタグラムのフィルターをCSSで再現「CSSgram」

CSSGramはInstagram.cssと同じようなコンセプトで作られた、インスタグラムのプリセットエフェクトからインスパイアされた画像フィルター系CSSライブラリです。

Instagram.cssと被っているエフェクトもありますが、収録されているエフェクトが若干異なっており、26種類のフィルターを利用することができます。コードも以下のようにフィルター名を指定するだけとシンプルです。

  <figure class="aden">
  　　<img src="image.jpg">
  </figure>

Sassを使える方は、Sassのmixinなどを使ってカスタマイズをすることも可能です。複数のフィルターを組み合わせて、オリジナルのフィルターを作ってみましょう。

こちらはありがたいことにOperaやSafariでも作動するようです。実際に利用して見栄えを確かめてから公開するようにしましょう。

5. イケてる画像エフェクトのプリセット集「Filters.css」

最後にご紹介するFilters.cssは他のフィルターよりもたくさん用意されている、気軽に使うことのできる画像フィルター系CSSライブラリです。

フィルタークラスは50種類ほどで、IMGタグに直接クラス名を付与することができます。

<img class="tint" src="mage.jpg">

DIVタグでくくることもできます。対応ブラウザは多く、Internet Explorerでも9以上のバージョンで利用することができます。