いいね風エフェクトアニメジェネレータ

某 SNS のいいねボタンを押した時のようなエフェクトを好きな画像に適用し GIF アニメを生成出来る Web アプリです。
バックエンドはなく、画像の読み込みからフレームの生成、GIF エンコードまで全てブラウザ上で行っています。

某 SNS のいいねボタンの仕様変更(以前はお気に入りボタンでした)に伴いエフェクトが可愛くなっていたのを見て、勢いで作りました。

また、その後某 SNS が10周年を迎えた時にごく短い期間だけエフェクトの仕様が変化し、そちらも面白かったので勢いでジェネレータの追加を行いました。その際にフレーム生成用のパーティクルシステムを自前で制作しました。

(スクリーンショット内キャラクター画像はプロ生ちゃんをお借りしています(© 2019 合同会社プロ生))

機能

• 任意の入力画像に某 SNS のいいねボタン風のエフェクトを合成して GIF/フレーム毎PNG で出力
• 出力サイズやエフェクトの色などのカスタマイズ
• 通常仕様・10周年仕様に対応

工夫・改善点

• GIF エンコード処理は Web Worker で実行できるように切り出しを行い、ブラウザが応答なしになることを防止
• GIF 内の各フレームで色が揺れるのを防ぐため、 jsgif のコードをフレーム全体で1つのパレットを生成するように変更

反響

• イラストレータや VTuber の方など多くの方から利用されています
• 反響の一例として、2020年6月19日(UTCによる)にハッシュタグ「いいね風エフェクトアニメジェネレータ」付きのおよそ 500 件のツイートを観測

関連