CSSアニメーションで高級感を出すために “ぼかし” を入れてみた

こんにちは、松本です。はじめて記事を書いてみます。

Webのフロントエンジニアとして仕事をしていて、
最近自分の中で印象的＆こだわって作った表現として「高級感」の演出がありました。

今回は、この「高級感」を演出するためにぼかしを取り入れた件について書いてみます。

「高級感」の要素分解

そもそも高級感って一般的にどんなものなのだろうと気になりまして、
ひとまずChatGPTに「CSSアニメーションで"高級感"を演出するために意識すべきポイント3つ」を聞いてみたところ、以下のように返ってきました。

CSSアニメーションで「高級感」を演出するために意識すべきポイントを3つ挙げます。

1. シンプルで洗練されたデザイン:
   高級感を演出するためには、シンプルで洗練されたデザインを採用しましょう。無駄な装飾を省き、ミニマルでスタイリッシュなデザインを追求することで、高級感を演出することができます。余計な要素を排除し、デザインをシンプルにすることで、高級感を際立たせましょう。
2. 高品質な画像やアイコンの使用:
   高級感を出すためには、高品質な画像やアイコンを使用することが重要です。クオリティの高い画像やベクターアイコンを選び、解像度にもこだわることで、高級感を高めることができます。画像やアイコンはデザインの中で目立つ要素なので、高品質な素材を選ぶことが大切です。
3. 自然で滑らかな動き:
   高級感を演出するためには、自然で滑らかな動きを演出することが必要です。物理的な法則に従った動きやイージングを調整することで、滑らかで高級感のあるアニメーションを実現しましょう。急激な動きや乱れたアニメーションは、高級感を損なう可能性があるので注意が必要です。
   ..............（以下省略）..................

なるほど。

「シンプル」「高品質な素材」「滑らか」というのがポイントだと。たしかにそんな気がします。
特に、あまりごちゃごちゃしていないシンプルな動きというのは高級感の演出において重要ですね。

よく使うプロパティ「位置(transform)」「透明度(opacity)」

要素の表示アニメーションをするとき、よく使うプロパティとして
「位置(transform)」「透明度(opacity)」があります。

こんな感じで、ふわっとフェードインしてくるアニメーション。

1つだけプロパティを加えるなら「ぼかし（blur）」がいい

高級感演出のために「シンプル」を求めると、動かすプロパティは少なくするべきだし、作業も簡単です。
ただ、オリジナリティがなくありきたりなアニメーションになってしまいます。

そこに「ぼかし（blur）」具合の変化を取り入れることで、一見よくあるシンプルなアニメーションに特別感が加えられるのではと考えました。

blurの使い方

filterプロパティでblur()の中に値を入れることで、ぼかし具合を調整できます。
単位はpxで、値が0だとぼかしがない状態です。

わかりづらいかもしれませんが、シンプルながらもリッチな表現が加わっており、ぼかし変化がない時と比べて滑らかな動きになっていると思います。

イージング

また、イージング（加速度具合）については「ease-out」系を使います。
つまり、始めの方は速く動き、完了（動き終わり）に近づくにつれてだんだん加速度が落ちていくような動き方をさせます。
こうすることで、余韻が残るような印象を作ることができます。

最後に

高級感の演出には、乱れた印象がないシンプルな動きはかなり重要ですが、
さらに洗練されている演出を加えるなら「ぼかし」のアニメーションがコスパいいです！
どこでも取り入れやすい、汎用性高めな手段だと思うので、ぜひ取り入れてみてください！