オンラインでドット絵をアニメ化する

アニメ制作の流れ

1. キャンバスサイズを選びます — プリセットでもW×Hカスタムでも、作画ツールと同様です。
2. フレーム1を描きます 組み込みエディターで（ツールもレイヤーもパレットも同じです）。
3. フレームを追加します ＋ フレームで追加するか、複製で現フレームをコピーして動く部分だけ変えます。
4. 速さを設定します FPSスライダー（1〜24）で設定し、再生を押します。ループはフレーム番号表示付きで連続再生されます。
5. 書き出します GIF、スプライトシート、または現フレームのPNG・SVG・PDFに書き出せます。

フレームとタイムライン

フレームはキャンバス下の番号付きタイムライン（コマ一覧）に並びます。クリックで移動、◀ ▶ボタンでドラッグなしに並べ替え、← →キーでコマ送りできます。削除は現フレームを除去し（最後の1枚は消去になります）、クリアは現フレームのロック外レイヤーを消去します。編集前に複製するのが動きを安定させる近道です。

オニオンスキンとタイミング

オニオンスキンは前フレームを赤、次のフレームを青で薄く重ねて表示し、ゴーストのスライダーで濃度を調整します。弧や間隔の確認に最適な定番手法です。タイミングはFPS（1秒あたりのフレーム数）で調整し、4〜6 FPSはレトロなカクカク感、8〜12 FPSは多くのループの甘味、24 FPSは滑らかなエフェクト向きです。技法はドット絵アニメの作り方で詳しく解説します。

背景をチラつかせないコツ

任意のレイヤーの🔗を押すと全フレームで共有され、背景や接地影に使えます。共有レイヤーは1回だけ保存され、すべてのフレームの下に自動合成されるので、静止部分がぶれません。通常レイヤーは動く部分用のフレーム別レイヤーのままです。

静止画からアニメへ

両エディターの「ドット絵アニメ」ボタンで、現在の合成結果をキャンバスごとアニメツールに送れ、プロジェクト名も引き継がれます。歩行は作画ツールで描き起こすか、写真を変換してから動かせます。想定フローは変換→編集→アニメ→書き出しです。

書き出し：GIFとスプライトシート

• GIF — 無限ループし、透明を維持し、長辺512 px以上で描画するので小さなスプライトも共有時にくっきり見えます。
• スプライトシート — 全フレームを横並びにした1枚PNGで、ゲームエンジン用です。
• 単独フレーム — 現フレームは作画と同様に書き出せます。PNGはネイティブサイズ（1×）、ベクターSVG、ベクターPDFに対応します。

あわせて読みたい

• ドット絵アニメの作り方
• ドット絵の歩行
• ドット絵アニメGIF
• スプライトシート解説
• 動画をドット絵に変換する
• オンラインでドット絵を作成する