インストール不要。ブラウザだけで本格的な2Dアニメーションが作れるスタジオです。 レイヤー管理・キーフレームアニメーション・画像取込みに対応しています。
アニメーション制作に必要な5つの機能がそろっています。
ブラシ・ペン・矩形・楕円・直線・テキストなど10種類のツールで自由に描けます。
フレームごとにキーフレームを打ち、アニメーションの流れを直感的に管理できます。
複数のレイヤーを重ねて管理。追加・削除・複製・結合ができます。表示/非表示の切り替えも可能。
PNG・JPG・GIFなどの画像をドラッグ＆ドロップで取込み、アニメーションに使えます。
2つのキーフレームの間を自動補間。なめらかな動きを一瞬で作れます。
左のツールバーに並んでいるツールの説明です。
| アイコン | ツール名 | できること | ショートカット |
|---|---|---|---|
| ↖ | 選択 | オブジェクトをクリックして選択。プロパティを編集できます。 | V |
| ✥ | 移動 | オブジェクトをドラッグして位置を動かします。 | M |
| ▭ | 矩形 | ドラッグで四角形を描きます。 | R |
| ○ | 楕円 | ドラッグで楕円・円を描きます。 | E |
| ／ | 直線 | ドラッグで直線を引きます。 | L |
| ✒ | ペン | ドラッグでフリーハンドの線を描きます（パス）。 | — |
| 🖌 | ブラシ | なめらかなブラシで自由に描けます。 | B |
| T | テキスト | クリックした場所にテキストを配置します。 | T |
| ◻ | 消しゴム | クリックしたオブジェクトを削除します。 | X |
| 🪣 | 塗りつぶし | クリックしたオブジェクトの塗り色を変更します。 | F |
5ステップで最初のアニメーションを作りましょう。
タイムライン（下部）で作業したいフレームをクリックします。フレームは ← → キーでも移動できます。
右パネルのレイヤーを選択し、ツールを使ってキャンバスに描きます。描いた内容は自動的にキーフレームとして登録されます。
別のフレームに移動し、オブジェクトの位置や形を変えます。これがアニメーションの「終点」になります。
2つのキーフレームの間にいる状態でタイムラインの「トゥイーン」ボタンを押すと、動きが自動補間されます。なめらかなアニメーションが一瞬で完成！
ヘッダーの ▶ ボタン（またはSpaceキー）で再生確認。「エクスポート」ボタンで現在のフレームをPNGとして保存できます。
ヘッダーの「🖼 画像取込」ボタンから、写真やイラストをキャンバスに配置できます。
ヘッダーの「画像取込」ボタンをクリック
ファイルをドラッグ＆ドロップするか、クリックして選択（PNG / JPG / GIF / SVG）
現在フレームだけ・全フレームに一括・新規レイヤー作成から選ぶ
キャンバス中央に画像が配置される。選択ツールで位置やサイズを調整可能
| モード | 説明 | おすすめシーン |
|---|---|---|
| 現在フレームのみ | いま選んでいるフレームだけに画像を配置 | 特定フレームだけに素材を使いたいとき |
| 全フレームに配置 | 全フレームに同じ画像を一括で配置 | 背景画像・ロゴなどを全フレームに表示したいとき |
| 新規レイヤーに配置 | 新しいレイヤーを作成して全フレームに配置 | 背景やスプライトを別レイヤーで管理したいとき |
キーボードを使いこなすと作業がとてもはやくなります。
アプリの画面は5つのエリアに分かれています。
再生・停止ボタン、FPS設定、ループ切替、オニオンスキン、画像取込み、エクスポートボタンがあります。
描画ツールが並んでいます。クリックで選択。現在のツールはハイライト表示されます。
実際に描画するエリアです。ズームイン・アウト、フィット表示が上部バーから操作できます。
レイヤー管理・選択オブジェクトのプロパティ（位置・サイズ・回転・不透明度）・カラーパレットがあります。
フレームの一覧です。青いひし形がキーフレーム。黄色い縦線が現在のフレームを示します。