Filtersとはボカシや色調整などグラフィカルな効果が得られるCSSの機能です。Filtersが便利」ということを紹介します。Filtersの使い方は簡単。CSSのfilterプロパティに適用したい種類の指定を行うだけです。次のような指定をすると、HTML要素にエフェクトがかかった状態で表示されます。Filtersは実はアニメーションにも利用可能。今回紹介するサンプルは、マウスオーバーでエフェクトを適用するシンプルなもの。次のビデオをご覧ください。明るさ調整のbrightness()メソッドを利用してみましょう。Transitionでアニメーションを付与するだけ。Transitionを工夫するだけで、さまざまなバリエーションを作れます。マウスオーバーしたときに一瞬ピカッと光る表現を入れることで、キビキビ動作する雰囲気の印象を与えることができます。光る演出はcubic-bezier()メソッドでオーバー気味に加減速を設定するので、通常時とホバー時で異なるtransitionプロパティを指定するのが演出のコツです。ease-outは使いみちがないくらい微妙なイージングなので、cubic-bezier()メソッドを使うのがオススメです。早見表」が参考になります。Flashクリエイター御用達のeaseOutQuadやeaseOutCubicのパラメーターも掲載されてます。Gallery」があります。通常状態をモノクロにしておき、マウスオーバーしたときにモノクロを解除するテクニック。モノクロにすることで全体的に上品なデザインの表現に使えます。化粧品や服飾などブランド広告のウェブサイトとかに役立ちそうな表現です。*/}デモを別ウインドウで開くソースコードを開く明るさを使った表現(ボタンに最適)brightness()を使った表現は、ポリモーフィズムなデザインのボタンに最適。光沢感のあるデザインは明度の変化は相性がよく、一枚のボタン画像だけでいい感じに仕上がります。デザイナーが通常状態のボタン画像しか用意してくれなかったとしても、簡単に設定できるので重宝します。brightness(0.85);}デモを別ウインドウで開くソースコードを開くこの方法は、8年前の筆者の記事「Flashで一枚の画像を超シンプルにボタンにする方法」で紹介していた方法と同じ原理。「手を抜いて作ってる割にはそれっぽい」かつ「使いまわしがきく」ようなボタンです。ボカシを使った表現マウスオーバーしたときに追加の情報を表示するテクニック。サンプルとして、マウスオーバーしたときにSNSのシェアカウントを表示するというサンプルを用意しました。オウンドメディアなどのサイトで「記事がどれだけバズったか」を表現するのにひと味効かせたテクニックになります。コードが複雑になるので、ここではポイントとなる箇所に焦点を絞って紹介します。詳しくはソースコードをご覧ください。Filtersの動作環境について紹介します。Edge、Chrome、Firefox、Safari)は標準対応しています。4.4の標準ブラウザまではベンダープレフィックスが必要になるので、-webkit-だけ付与したほうがいいかもしれません(-moz-や-ms-は必要ありません)。Filtersのurl()メソッド(svgに定義したフィルターを参照する機能)のみが使えません。url()メソッドはフィルター効果をカスタマイズする上級者向けの機能なので、あまり意識しなくてもいいでしょう。Filterは重たいのではないか、という意見もよく耳にします。そこで負荷を計測できるデモを作って試しました。比較的重たいと言われるblur効果も含めて適用したところ、2014年モデルのiOS端末で60fpsで表示することができました。滑らかにアニメーションしています。ブラウザーやOSによってフィルターのレンダリングが異なるので、気になる方は次のデモを試してください。filterプロパティ使い方まとめ!彩度・明度の調整からぼかし、グレースケール化まで」によると「説明してきたフィルターはどれもすごいパフォーマンスを発揮します(ハードウェアアクセラレーションを使用しないブラウザでぼかしフィルターが遅くなる場合があることを除けば)」と説明されています。Filtersを試したときは「フィルター効果は重たくアニメーションに不向き」という印象がありましたが、ブラウザーの進化によって状況は変わってきたように思います。Filtersに類似のフィルター効果が普及していたので、昨今の性能が向上したパソコン/スマートフォンではそんなに気にする必要はないかもしれません。まとめお手軽にエフェクトを適用できるので、ウェブサイトのUIにアクセントを入れるのに最適です。記事「CSS3のブレンドモードmix-blend-modeを使いこなそう」でも紹介したように、最近のブラウザではCSSの機能が増え、グラフィカルな表現が手軽にできるようになってきました。Filtersに未対応のためプロジェクトによっては使いづらい一面があると思いますが、選択肢の1つとして演出の引き出しに入れてみてはいかがでしょうか。平成30年5月31日に内容をメンテナンスしています。