pageQreate

ANIME

「pageQreate」(https://pageqreate.com)のメインビジュアルで使用しているgifアニメーションです。

一つの大きなgifアニメーションをそのまま配置してしまうと、ファイルサイズが非常に大きくなってしまい、特にメインビジュアルのようなファーストビューに置く場合、ページの読み込み速度にも大きな影響を与えてしまいます。

そのため、今回は1枚のPCイラスト画像をベースに配置し、細かなアニメーションは各パーツごとに分けてgif化し、CSSで位置を調整して重ね合わせる構成にしました。

また、それぞれのgifアニメーションは2〜3秒程度でループするように設計しており、1ファイルあたりのサイズも数十KB〜数百KB程度と軽量です。すべてを合わせても1MB程度に収まるよう最適化しています。

複数の細かい動きを組み合わせることで、印象的で動きのあるビジュアルを実現しています。
Web制作を通して「見る人に楽しさや満足感を届けたい」という思いを、このアニメーションで少しでも感じてもらえたら嬉しいです。

お気に入り

Illustrator & WebDesignerSATOSHI MATSUMOTO