パーツ分けなしで、1枚の絵が動き出す。
ゆらし絵メーカーは、画像の揺らしたい所を色で塗り、色ごとに揺れ方を選ぶだけで、絵の一部をぷるぷる・ゆらゆら動かせるブラウザ用のツールです。髪や旗のなびき、炎のゆらめき、スライムの弾力、瞳のキョロキョロなど、20種類の揺れ方を組み合わせられます。できた揺れは、ゲームエンジンの Godot 4 にそのまま入れられる素材や、動画・アニメーション PNG に書き出せます。
無料・登録不要。ブラウザだけで動き、読み込んだ画像や作業がどこかへ送信されることはありません。
- 料金
- 無料（登録不要）
- 動作環境
- PC・スマホのブラウザ（WebGL2 が使えるもの）
- 読み込める画像
- PNG・JPEG・WebP（透過 PNG もそのまま）
- 揺れ方
- 20種類（用途別のプリセット31）
- 書き出し
- Godot 4 用の素材・MP4/WebM・APNG・連番 PNG・スプライトシート
- 制作
- MIYADAIKU
夕宮たいだふぁ……みんな〜、今日は絵を揺らす道具の話だよぉ。
立ち絵の髪がふわっと揺れるだけで、絵って急に生きてる感じになるよねぇ。
ゆらし絵メーカーでできること
ひとことで：揺らしたい所を色で塗って、揺れ方を選ぶだけで、1枚の絵が動き出します。
Live2D のように絵をパーツに分けたり、メッシュを組んだりしなくても、1枚の絵のまま一部を揺らせるようにしたツールです。自作のゲームの立ち絵や背景に、手軽に動きを付けるために作りました。
色で塗って、揺れ方を選ぶ
9色のマスクと「固定」で、揺らしたい所を塗ります。色ごとに「はためき」「ぷにぷに」「キョロキョロ」などの揺れ方を選び、揺れ幅・速さ・向きを整えます。
仕上がりを見ながら整える
「マスクを隠す」で色や印を消すと、書き出しと同じ見た目で確かめられます。パーツをつまんで離すと、ぷるんと揺れて収まる物理も試せます。
ゲーム・動画・画像に書き出す
Godot 4 にそのまま入れられる素材のほか、MP4/WebM の動画、透明のまま動くアニメーション PNG、連番 PNG、スプライトシートに書き出せます。
使い方
ひとことで：画像を開いて、色で塗って、揺れ方を選び、書き出すだけです。
- 「ゆらし絵メーカーを開く」でツールを開きます。まず試すなら「サンプル」で、揺らし済みのスライムの絵を開けます。
- 「画像を開く」で絵を読み込みます。画像をドロップしたり、Ctrl+V で貼り付けたりしても開けます。
- 右の「マスクの色」から色を選び、揺らしたい所をブラシで塗ります。投げ縄で囲んだり、絵の色で範囲を選ぶ塗りつぶしを使ったりもできます。
- 「パターン」から揺れ方を選び、揺れ幅・速さ・向きを整えます。動かしたくない所は「固定」で塗ります。
- 左下の「マスクを隠す」で、仕上がりを確かめます。
- 「書き出し」から、Godot 4 用の ZIP・動画・アニメーション PNG などを選んで保存します。
作業はブラウザの中に自動で保存され、次に開いたときに「続きから」で戻れます。ほかのパソコンで続けるときや、確実に残しておきたいときは、「作業を保存」で作業ファイル（.json）に保存してください。
夕宮たいだ塗って、選んで、眺めるだけだから、とっても楽ちんだよぉ。
まずはサンプルのスライムを、つまんでみてねぇ。
揺れ方の種類
ひとことで：20種類の揺れ方を、用途別の31のプリセットから選べます。
| 分類 | 主なプリセット | 向いているもの |
|---|---|---|
| ふるえ・ゆれ | ぷるぷる・ブルブル・ガタガタ・ゆらぎ・ゆらゆら・ふわふわ・くるくる | 寒さやおびえの震え、ぶら下がった物、浮いている物 |
| 弾む・弾力 | ぷるん・ぽよん・ぷにぷに・ぴょんぴょん | スライム、おもち、マスコット |
| 生きている感じ | 呼吸・鼓動・バクバク・キョロキョロ・ぴくっ | 立ち絵の待機、瞳、けもの耳 |
| 髪・布・しっぽ | なびき・そよ風・はためき・ふんわり・振り子・しっぽ・アホ毛 | 髪の毛先、旗、スカート、イヤリング |
| 水・炎・空気 | ぐにゃぐにゃ・陽炎・水中・炎・波紋 | 炎、熱気、水面、夢の中 |
| 回る・その他 | うずまき・回転・揺れなし | 魔法陣、歯車、物理だけで揺らしたい物 |
どの揺れ方も、揺れ幅・速さ・向き・タイミングなどを細かく変えられます。ほかにも、次のような調整ができます。
- 物理：パーツをつまんで離すと、ぷるんと揺れて収まります。Godot では、絵を動かすと慣性で揺れます。
- 視線追従：マウスの方へ、パーツを少しずらします。瞳は大きく、顔は小さく、後ろ髪は逆向きにずらすと、立体感が出ます。
- 親パーツ：瞳を顔の動きにも付いていかせるように、動きを重ねられます。
きれいに揺らすコツ
ひとことで：1枚の絵を引き伸ばして揺らすので、「ぼかし」と「固定」で周りを守ります。
ゆらし絵メーカーは、塗った所の画素をずらして揺らします。動いた所の周りは引き伸ばして埋めるので、次のことに気をつけると、きれいに揺れます。
- 塗った色の「ぼかし」を、揺れ幅より大きくします。揺れが大きすぎるときは注意が出て、「ぼかしを揺れに合わせる」ボタンで直せます。
- 顔や輪郭など、ゆがんでほしくない所は「固定」で塗ります。
- 髪・しっぽ・旗は、支点（十字の印）を根元に置き、「根元を固定」を使うと、根元が止まって先だけ揺れます。グラデーションの道具で、根元から先へ引いても同じことができます。
- 揺れて画像の端からはみ出しそうなときは、「全体の設定」の「余白を足す」で画像を広げます。
夕宮たいだ大きく揺らしすぎると、周りがぐにゃっとしちゃうんだぁ。
そんなときは、ぼかしを広げてあげてねぇ。
Godot 4 で使う
ひとことで：書き出した ZIP を展開して、シーンを置くだけで揺れます。
「書き出し」→「Godot 4 用（ZIP）」で、シェーダー・マテリアル・マスク画像・シーン・物理と視線の補助スクリプトをまとめて書き出せます。
- ZIP を展開したフォルダを、Godot のプロジェクトの中に入れます。
- 中の「（名前）_yurashie.tscn」をシーンに置いて実行すると、そのまま揺れます。
- 自分の Sprite2D や TextureRect に付けるときは、Material に「（名前）_yurashie.tres」を入れます。物理と視線も使うときは、その子に yurashie_controller.gd を付けたノードを置きます。
ブラウザとゲームで同じ計算（シェーダー）を使っているので、ツールで見た揺れが、そのまま Godot でも再現されます。制作時には、Godot 4.7 の Compatibility と Forward+ の両方で、同じ時刻のコマを画素ごとに比べ、ブラウザとほぼ一致することを確かめました。全体の強さや速さ、時間のずらしなどは、インスペクターやコードからも変えられます。くわしい使い方は、ZIP の中の README.txt にまとめています。
Live2D との違い
ひとことで：大きな動きや表情の変化はできませんが、パーツ分けやメッシュの準備は要りません。
ゆらし絵メーカーは、1枚の絵のまま画素をずらして揺らす道具です。絵をパーツに分けて動かす Live2D とは、得意なことが違います。
| ゆらし絵メーカー | Live2D | |
|---|---|---|
| 準備する絵 | 1枚の絵のまま | パーツごとに分けた PSD（隠れる所の描き足しも） |
| 動きの作り方 | 色で塗って、揺れ方を選ぶ | メッシュ・デフォーマ・パラメータを作り込む |
| まばたき・口パク・表情 | できない（差分の画像を切り替える） | できる |
| 顔や体の向きを変える | できない（視線追従で少しだけ） | できる |
| 隠れていた所を見せる | できない（周りを引き伸ばして埋める） | できる |
| ゲームへの組み込み | Godot 4 にシーンを置くだけ | SDK の組み込みが必要 |
| 料金 | 無料 | 有料版あり（無料版は機能に制限あり） |
髪や小物の揺れ、呼吸、背景の炎や水面のような「生きている感じ」は、ゆらし絵メーカーの得意分野です。会話の中のまばたき・口パクや、首を振る動きが必要なら、Live2D が向いています。表情違いの差分の画像を切り替える仕組みと組み合わせれば、ノベルゲームの立ち絵なら、かなりのところまで届きます。
夕宮たいだほよ？ 表情違いの差分の画像でも、同じ大きさなら、塗ったマスクをそのまま使えるんだぁ。
画像を差し替えるだけで、どの表情でも同じように揺れるよぉ。
仕組み（作った人のメモ）
ひとことで：塗った色を「重み」にして、シェーダーで画素を持ってくる位置をずらしています。
塗った色は、パーツ1〜9の「重み」として3枚の画像に入れています。ぼかし・親パーツ・固定は、この重みの画像を作るときに計算しておくので、揺れの計算は重みを読むだけで済みます。
揺れの計算は GPU のシェーダーで行っていて、画面の1画素ごとに「元の絵のどこから色を持ってくるか」をずらしています。ブラウザ（WebGL2）と Godot で同じ計算式の文字列を使っているので、どちらでも同じ揺れになります。物理（つまむ・慣性）も、ブラウザと Godot の補助スクリプトで同じ式にしています。
ツールのプログラムは、AI エージェントの Claude Code と相談しながら作りました。
よくある質問
ひとことで：料金・使えるデータの範囲・スマホでの使い方などをまとめました。
無料で使えますか？
無料です。登録やログインも要りません。
書き出したものは自由に使えますか？
はい。ゆらし絵メーカーで書き出した素材・動画・画像は、商用・非商用を問わず自由に使えます。クレジットの表記も要りません。ただし、元の絵の権利は絵の持ち主にあるので、ほかの人の絵を使うときは、その人の許可を取ってください。
画像はどこかに送られますか？
送られません。読み込み・揺れの計算・書き出しまで、すべてブラウザの中で行っています。作業の自動保存も、そのブラウザの中だけに残ります。
スマホでも使えますか？
使えます。ただ、マスクを細かく塗る作業は、パソコンの方がやりやすいです。スマホでは、2本指で拡大・縮小できます。
Live2D のモデルや PSD は読み込めますか？
読み込めません。読み込めるのは1枚の画像（PNG・JPEG・WebP）です。PSD は、PNG に書き出してから読み込んでください。
Godot 以外のゲームエンジンでも使えますか？
Godot 4 用の素材のほかに、動画・アニメーション PNG・連番 PNG・スプライトシートに書き出せるので、多くのエンジンや動画ソフトで使えます。揺れの数値をまとめたファイル（params.json）も、Godot 用の ZIP に入っています。
揺れると、絵が二重に見えたり、周りがゆがんだりします
揺れ幅に対して、ぼかしが足りていません。パーツの設定に出る注意の「ぼかしを揺れに合わせる」を押すか、揺れ幅を下げてください。
夕宮たいだふぁ……お気に入りの絵を、ちょっとだけ揺らしてみてねぇ。
動き出した絵を見せてくれたら、うれしいなぁ。