WebツールのPhotopeaで現状はPhotoshopでも作成できないWebPアニメーションを簡単に作成することが出来ます。作成の流れは昔Illustratorで_flash アニメを作成出来たときのような感じです。
Photopea（フォトピア）は、チェコ共和国に住んでいるウクライナ人のIvan Kutskir（イワン・クーツキール）さんが開発したプログラムです。
ブラウザで「Photopea」と検索すれば直ぐに見つかります。Photopeaに入ったら、「新規プロジェクト」をクリックし、720×480ピクセル（SDサイズ※1）の新規ファイルを指定しました。深い意味はありません。なお、右端に広告（※2）が表示されるので、ここではその部分をカットして解説しています。
※1: SDサイズとは、アスペクト比 4:3で地上波アナログテレビ放送時代で使用された解像度に近い動画サイズで、日本のDVDビデオ製品規格。NTSCスクイーズ方式はこのサイズ。DVテープで録画できるサイズも同じ。
※2: Photopeaは一部のオプションの処理は有料の用ですが基本的に広告収入で成り立っているツールです。
予め用意している800×600ピクセル画像をドラッグ配置します。配置すると受け手のファイルサイズの天地または左右の合致した時点で配置されます。つまり、ここでは720×480の受け手に対して800×600の画像を配置しているので、800×600の画像は640×480で配置されたことになります。
図解するとこんな感じです。
Photopea側で設定したファイルサイズ → 白い塗りの四角形
事前に用意したファイルサイズ → 黄色い線の四角形事前に用意したファイルの配置・サイズ調整 → 青い線の四角形
作成したファイルよりも用意した画像の方が大きいので、編集メニューの［自由変形］でサイズ調整します。
続けて用意した魚のイラストのpng画像をドラッグ配置します。png画像は透明データを持つことが出来るので都合がいいです。ファイルメニューの［オープン＆プレイス］で読み込むことも出来ます。
魚のイラストを配置したらサイズを編集メニューの［自由変形］で適当にサイズ調整します。続けてレイヤーメニューの［複製］にて魚のレイヤーの複製を作成します。
レイヤーの複製のショートカットキーはPhotoshopと同様で、
Windowsの場合はcontrol J
macOSの場合は command J
macOSの場合は command J
ここでは魚のレイヤーは5つにしました。それぞれの魚の位置は任意調整しますが、最初と最後の魚は画面から消える様に配置します。
構造としてはこんな感じです。見えない初めと終わりがあるので。画面の右端から現れて左端に消えるイメージが成り立つわけです。
なお、アニメーションしたいデータのレイヤー（ここでは魚のレイヤー）のレイヤー名の頭に半角でアンダースコア、エー、アンダースコア _a_ を必ず付けることを忘れないでください。
ここで、ファイルメニュー［別名で保存］＞［GIF］を選びます。WebPで書き出したい場合は［別名で保存］＞［その他］からWebPを選びます。
これで画面で再生イメージを確認できるので、問題なければ［保存］でアニメーションが書き出されます。Speedで再生スピードの調整、reverse framesで逆走、boomerangで行ったり来たりが設定できます。
webp形式で書き出したサンプル
