アニメーションPNGを使った表現 tashi design

https://tashi.design/

フリーランスのデザイナーさんのサイトです

マネしたいポイント

パラパラ漫画のようなイラストがメインビジュアルに使わている落ち着いた雰囲気のサイトです。パラパラ漫画部分は動画ではなく、アニメーションPNG(APNG)で実装されています。GIFアニメーションよりも軽量でアルファチャンネル(透過)などの利点があります。

応用できそうな場面

動画と違い、パラパラ漫画はレトロな、柔らかい印象を与えてくれます。手書きイラストなども利用できます。動画と違い、透過が使えるので要素の一部としても使うことができます。背景の静止画像と組み合わせてメインビジュアルとして使うこともできるでしょう。

懸念点

アニメーションPNGはIE11と古いEdge(非Chromium版)で対応していません。大きなウェイト占めるブラウザシェア率ではないですが、要件に含まれる場合には注意してください。

  • Twitter Share
  • Facebook Share
  • Line Share