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

2018年1月24日

現在は 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を気軽に「 CSS CO」

人気のインスタグラマーのほとんどは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 で再現「 CSS gram」

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以上のバージョンで利用することができます。

まとめ

日本で大きく人気を博しているインスタグラム。今回ご紹介した CSS フィルターを利用すれば、アプリを立ち上げなくとも、誰でも簡単に「インスタ映え」する写真をあっという間にアップロードすることができます。

もとの写真を傷つけることなく、写真を加工できるという点でも、とても簡単に設置できるという点でも、オススメです。ぜひ自分のニーズにあったフィルターを利用してみましょう。