WigglyPaint（ウィグリーペイント）を使えば、パラパラマンガのように絵を何枚か描くだけで、オリジナルの動くイラストが作れます。「フレーム（コマ）」と呼ばれる1枚1枚の絵を少しずつ変えて描き、それを順番に再生することで絵が動いて見える仕組みです。
このツールでは、AIが自動で絵を動かしたり、写真や動画をアニメーションに変換したりすることはありません。すべての絵を自分の手で描いていきます。このガイドでは、最初の線を描くところから、完成したGIFアニメを保存するまでの手順を、初めての人にもわかりやすく説明します。
クイックスタート：1分でアニメーションを作ってみよう
1. WigglyPaintを開き、Click to start drawing（ここをクリックして描き始める）を押します。
2. 画面の下にある Animation（アニメーション）パネルを開きます。
3. 最初の絵を描きます。
4. フレームをコピーして、絵のほんの一部だけを描き変えます。
5. 再生ボタン（Play）を押して、ループアニメーションの動きを確認します。
6. Export（書き出し）を押して、動くイラストをGIFアニメとして保存します。
コマ撮り（フレームバイフレーム）アニメーションとは？
「フレーム」とは、1枚の絵のことです。コマ撮りアニメーションは、何枚もの絵をパラパラマンガのように連続して見せることで、動きを作り出すテクニックです。
たとえば、最初のフレームで「目を開けた顔」を描き、次のフレームで「目を閉じた顔」を描きます。この2枚を順番に再生すると、顔がまばたきしているように見えます。
WigglyPaintでは、2つの方法でイラストに動きを加えます：
- 描いた線そのものが、自動的にブルブルと震えて動きます。
- アニメーションパネルを使って、描いた複数の絵を順番に再生します。
この機能を使えば、キャラクターが手を振ったり、花が咲いたり、ボールが跳ねたりする、手描きならではの温かいアニメーションを作ることができます。
WigglyPaintでどんな「動くイラスト」が作れるの？
WigglyPaintは、Webブラウザ上でそのまま使える無料のアニメーション作成ツールです。パソコンに専用のソフトをインストールする必要はありません。
できることは以下の通りです：
- 新しいフレームを追加する
- フレームをコピー（複製）する
- フレームを削除する
- 1つ前の絵を薄いグレーで透かして表示する（オニオンスキン）
- 描いた絵をループアニメーションとして再生する
- 完成したループをGIFアニメとして保存する
- 作ったGIFをWigglyPaintのCommunity（コミュニティ）にシェアする
ちょっとした動く落書き、SNS用のスタンプ、リアクション画像などを作るのにぴったりです。長い映画や、複雑な編集が必要な大きなアニメーション作りには向いていません。
始める前に準備すること
- このガイドを読むときは、パソコンのブラウザを使ってください。画面が大きい方が、ボタンやツールが操作しやすくなります。
- まずは「まばたきする顔」や「跳ねるボール」など、1つのものをシンプルに動かすことから始めましょう。
- 使う色は2〜3色に絞るのがおすすめです。シンプルな絵の方が、アニメーションを作るのが簡単です。
- 完璧な絵を描く必要はありません。きれいな線を引くことよりも、動きがわかりやすいことの方が大切です。
動くイラストの作り方：ステップバイステップガイド
1. 新しいキャンバスを開く
- 押すところ: WigglyPaint を開き、Click to start drawing（ここをクリックして描き始める）を選びます。
- どうなる？: お絵かき用の広いキャンバスと、ペンなどのツールが出てきます。
- 次にやること: 好きなブラシと色を選びます。
まずは、大きくてシンプルなものを描いてみましょう。顔、星、花などが最初の作品にぴったりです。
2. Animation（アニメーション）パネルを開く
- 押すところ: 画面の下にある Animation というバーをクリックします。
- どうなる？: 小さな絵（フレーム）が並ぶ場所や、再生ボタン、おばけのマーク（オニオンスキン）、大きなプラスボタンが出てきます。
- 次にやること: 最初のフレームが枠で囲まれて、選ばれていることを確認します。
枠で囲まれているのが、今あなたが描いているフレームです。別のフレームを直したいときは、その小さな絵をクリックします。
3. 最初のフレームを描く
- やること: キャラクターや物の、最初のポーズを描きます。
- どうなる？: キャンバスの上と、下の小さなフレームの中に、あなたの描いた絵が表示されます。
- 次にやること: 次のフレームを追加する前に、メインとなる形を最後まで描ききりましょう。
まばたきする顔なら、両目を開けた顔を描きます。跳ねるボールなら、キャンバスの上のほうにボールを描きます。
4. フレームをコピーするか、空のフレームを追加する
次の絵が今の絵とほとんど同じなら、フレームを「コピー」するのがおすすめです。動かしたい部分だけを消しゴムで消して描き直せば、簡単に次のコマが作れます。
- 押すところ: フレームの絵の横にあるコピーボタン（四角が重なったマーク）を押します。
- どうなる？: 同じ絵が描かれた2つ目のフレームができます。
- 次にやること: 目、手、ボールの位置など、動かしたい部分だけを描き変えます。
まったく新しい絵を描きたいときは、大きな プラス ボタンを使って空のフレームを追加します。場面が大きく変わるときに便利です。
5. オニオンスキンをオンにする
オニオンスキンとは、1つ前の絵を薄いグレーで透かして表示する便利な機能です。前の絵がどこにあったかを確認しながら描けるので、動きが作りやすくなります。このグレーの線は、完成したGIFアニメには表示されません。
- 押すところ: おばけの形をしたオニオンスキンボタンを押します。
- どうなる？: 今描いているキャンバスの後ろに、1つ前の絵がグレーで表示されます。
- 次にやること: スムーズな動きになるように、グレーの線を参考にしながら少しだけずらして新しい絵を描きます。
絵をずらす幅を小さくすると、動きがなめらかになります。動きを速く見せたいときは、大きくずらして描きます。
6. アニメーションを再生する
- 押すところ: 三角形の再生ボタン（Play）を押します。
- どうなる？: 描いたフレームが順番に再生され、繰り返されます。
- 次にやること: 最後の絵から最初の絵に戻るときの動きが、不自然になっていないかよく観察します。
もしアニメーションがカクカク飛んで見える場合は、最後の絵と最初の絵を見比べてください。最後の絵を最初の絵に近づけるか、間に別のフレームをもう1枚追加するとスムーズになります。
7. 1つの絵を長く表示させる
WigglyPaintには、再生スピード（FPS）を細かく設定したり、1枚ごとに表示時間を変えたりする機能はまだありません。1つの絵を画面に長く表示させたいときは、そのフレームをコピーして枚数を増やします。
- やること: 長く見せたいフレームを選び、コピーボタンを1回または数回押します。
- どうなる？: 同じ絵のフレームが2つ以上並びます。
- 次にやること: 再生ボタンを押して、止まっている時間がちょうどいいか確認します。
たとえば、「目を開けた顔」のフレームを2〜3回コピーして増やします。「目を閉じた顔」のフレームは1枚だけにします。すると、顔は目を開けたまま少し止まり、一瞬だけパチッとまばたきするようになります。
これは、難しい設定を覚えなくてもタイミングをコントロールできる、とても簡単な方法です。
8. 動くイラストを書き出す
- 押すところ: アニメーションの動きに満足したら、Export（書き出し）をクリックします。
- どうなる？: 完成した作品を保存したり、シェアしたりするメニューが開きます。
- 次にやること: 動くイラストをGIFアニメとして保存するか、WigglyPaint Community にシェアしてみましょう！
保存したGIFアニメを一度開いてみましょう。絵がはっきりと見え、ループのつなぎ目が不自然に飛んでいないか確認します。
手描きアニメーションの例：まばたきする顔を作ろう
まばたきする顔は、絵の大部分が動かないため、初めてのプロジェクトにぴったりです。
- 両目を開けた顔を描きます。
- そのフレームをコピーします。
- 新しいフレームで、目を「半開き」に描き直します。
- そのフレームをコピーして、今度は目を「完全に閉じた」状態に描きます。
- 「半開き」のフレームをコピーして、「完全に閉じた」フレームの後ろに置きます。
- 再生ボタン（Play）を押します。順番は「開く」「半開き」「閉じる」「半開き」になっているはずです。
- もしまばたきが多すぎると感じたら、「開く」のフレームをいくつかコピーして増やしましょう。
このアイデアは、開く花、チカチカ光る星、息をするキャラクターなどにも応用できます。
スムーズなループアニメーションを作るための簡単なヒント
- 一度に大きく動かすのは、1つのパーツだけにしましょう。
- 動かさない部分は、同じ場所からずれないように描きます。
- 次のフレームを描く前に、オニオンスキン（おばけのマーク）をオンにしましょう。
- 2〜3枚フレームを作ったら、こまめに再生ボタン（Play）を押して動きを確認しましょう。最後まで待つ必要はありません。
- 動きを止めたいときは、フレームをコピーして増やします。
- スマホなどの小さな画面で見てもわかりやすいように、シンプルな形を使いましょう。
うまくいかないときは？
Animationパネルが見つからない
まず Click to start drawing を押してキャンバスを開いてください。その後、画面の下にある Animation というバーを探してクリックすると、フレームの操作パネルが開きます。
アニメーションが速すぎる
長く見せたいフレームをコピーして増やしてください。同じ絵を2〜3枚並べると、そこで少し動きが止まって見えます。
フレームとフレームの間で絵が動きすぎている
オニオンスキンをオンにしてください。グレーで表示される前の絵をガイドにして、新しい絵を少しだけずらした位置に描きます。
ループの最後で動きが飛んでしまう
最後のフレームと最初のフレームを見比べてください。2つの絵をもっと似た形にするか、その間に中間の動きを描いたフレームを1枚追加します。
再生ボタンを押しても1枚の絵しか見えない
新しいフレームを追加するかコピーして、その新しいフレームの絵を少し描き変えてください。動きを見せるには、少なくとも2枚の違う絵が必要です。
現在WigglyPaintがサポートしている機能
| 機能 | 今できる？ |
|---|---|
| すべてのフレームを手描きする | はい |
| フレームの追加、コピー、削除 | はい |
| 前のフレームを薄いグレーで透かして表示（オニオンスキン） | はい |
| 繰り返すループアニメーションの再生 | はい |
| GIFアニメとしての保存（書き出し） | はい |
| Community（コミュニティ）へのシェア | はい |
| AIによるアニメーションの自動作成 | いいえ |
| 写真や動画からアニメーションへの自動変換 | いいえ |
| 1枚ごとに表示時間を変える | いいえ（代わりにフレームをコピーして増やします） |
| 再生スピード（FPS）の変更 | いいえ |
| 動画（MP4など）での保存 | いいえ |
| スマホアプリでのフレーム編集 | いいえ（このガイドはWebブラウザ版向けです） |
動くイラストに関するよくある質問（FAQ）
動くイラストはどうやって作るのですか？
最初の絵を描き、フレームをコピーまたは追加して、新しい絵の一部を描き変えます。必要に応じてフレームを増やします。再生ボタン（Play）を押して動きを確認し、完成したらGIFアニメとして保存します。
WigglyPaintは無料のコマ撮りアニメーションツールですか？
はい。WigglyPaintは、Webブラウザ上で動く無料のお絵かき・アニメーションツールです。パソコンにアプリをインストールしなくても、短い手描きアニメーションを作ることができます。
アニメーション作成ソフトをダウンロードする必要がありますか？
いいえ。WigglyPaintのWebサイト上で直接絵を描いてアニメーションを作れます。完成したら、GIFアニメとしてダウンロードできます。
アニメーションを描くときにガイド（下敷き）は使えますか？
はい。オニオンスキン機能を使うと、1つ前のフレームが薄いグレーで表示されます。次のフレームを描くときは、このグレーの絵をガイドとして使ってください。
WigglyPaintはAIを使ってアニメーションを作りますか？
いいえ。すべての絵を自分の手で描きます。WigglyPaintは、ブルブル震える線、フレーム操作、オニオンスキン、ループのプレビュー、GIF保存機能を提供して、あなたの手描きをサポートします。
初心者は何枚くらいのフレームを使うべきですか？
まずは3〜5枚の違うフレームから始めてみましょう。まばたきや小さなジャンプなど、シンプルなループアニメーションを作るにはそれで十分です。
アニメーションのスピードは変えられますか？
現在、FPSやフレームごとの時間設定機能はありません。特定の絵を長く画面に表示させたい場合は、そのフレームをコピーして枚数を増やしてください。
アニメーションは繰り返されますか？
はい。プレビューではフレームが繰り返し再生されるので、最後のフレームから最初のフレームに戻るときの動きをしっかり確認できます。
どんなファイル形式で保存できますか？
WigglyPaintでは、動くイラストをGIFアニメとして書き出します。現在の機能では、動画ファイル（MP4など）としての書き出しはできません。
初めての動くイラストを描いてみよう
まずは3枚のフレームと、1つの小さな変化から始めてみましょう。顔を描き、それをコピーして目を描き変え、再生ボタンを押します。それがうまくいったら、フレームを追加したりコピーしたりして、タイミングを調整してみてください。