Wobble Makerでより良い結果を得るコツ：強度設定と画像の選び方

Wobble Makerは表面上はシンプルだ — 画像をアップロードし、強度を選び、GIFをエクスポートするだけで、マスクを塗る作業はない — しかし、裏側でどうモーションをレンダリングしているかについてのいくつかの点が、「良い設定」が実際に何を意味するかを左右する。ここでは、最初のエクスポートの前に理解しておく価値のある実践的な選択肢を紹介する。

---

画像解像度：なぜ480pxが制限ではなく十分なのか

Wobble Makerは作業解像度を最長辺で480pxに制限している。4000pxのソースをアップロードすると、読み込まれた瞬間に480×480以内に収まるよう縮小される — これは品質のショートカットではなく、サーバーへの往復なしに完全にブラウザ内で動作させるためのものだ。モーションメッシュは画像の上に重ねられた24×24のグリッドであり、480pxでは各グリッドタイルが20px×20pxのブロックをカバーする。これは、この効果が狙う柔らかく弾力のある変位には十分すぎる解像度だ。同じ計算をフル解像度の画像に対して行っても、揺れ自体に目に見える滑らかさは加わらない — グリッドはどちらにせよ24×24のままだ — モーションの品質にとって何の利点もないまま、1フレームあたりより多くのピクセルを押すことになるだけで、これはブラウザ内でライブにレンダリングすることを意図したものにとって間違ったトレードオフだ。

実践的な結論：Wobble Maker専用に巨大な画像を用意する必要はない。クリーンな800〜1000pxの画像は、きれいな480pxの作業用コピーに縮小される。解像度よりも実際に重要なのは線の明瞭さだ（詳しくは下記）— 小さくきれいにレンダリングされた画像は、どのみち480pxで圧縮されてしまう細かいディテールを持つ巨大な画像よりも、よく揺れる。

---

すべてのタイルが動く — だからこそ元画像の選び方がこれまで以上に重要になる

モーションメッシュは、キャンバス全体で合計24×24=576タイルしか持たず、そのすべてのタイルが同じ変位の重みを受け取る。その重みを決めるのは、あなたが選んだ強度（ソフト、ミディアム、ストロング）だけだ。480pxの作業サイズでは、20pxのタイルが画像全体で均一にアニメーションすることになる — ブラシもマスクもなく、画像の一部を固定したまま別の部分だけを動かす方法はない。

これは、シンプルでほぼフラットなイラストで「全体が優しく揺れる」ことが狙いの効果である場合には、正当なスタイルの選択だ（チビのステッカーやシンプルなアイコン風の作品を想像してほしい）。一方で、顔と胴体は静的だが動的な髪を持つキャラクターには、ずっと相性が悪い — 顔と体が髪とまったく同じモーション処理を受けるため、揺れる顔は生きているというより壊れているように読めてしまう（大きな均一な領域が高い強度で目に見えて破れる傾向にある正確な理由については、姉妹記事のトラブルシューティング記事を参照してほしい）。

向いている元画像：均一で穏やかなモーションが狙いの、シンプルでフラットな全体作品 — ステッカー、アイコン、小道具、あるいは髪・布・アクセサリーがすでにフレームの主役になっているポートレート。 扱いが難しい元画像：柔らかい要素に対して静的な顔や体が大きく写っている引きの構図 — 画像全体の揺れが違和感を生むなら、まず髪、耳、アクセサリーの周りにきつくクロップするか、強度を下げよう。

---

フラットな線画がなぜ写実的な画像より説得力を持って揺れるのか

変位の数学は、自分が何を動かしているのか知らない — ただ計算されたオフセット分だけピクセルのブロックをフレームごとにシフトさせているだけだ。そのシフトが「弾力のあるモーション」に見えるか「視覚的ノイズ」に見えるかを決めるのは、その画像がどれだけ正確なピクセルレベルのディテールに頼って正しく読まれるかだ。

フラットでクリーンな線画 — 単色の塗り、太くて一貫した輪郭線、最小限のグラデーション — は、20pxのタイルが5〜18pxシフトしても問題なく耐える。なぜならそのタイル内のコンテンツがシンプルだからだ — ほとんど1色、1つのきれいな線の方向。目は、髪の房を揺らした後でも、ピクセル完璧な位置合わせを必要としない。

写実的または非常に細かい画像は、同じ20pxのタイルにはるかに多くの情報 — 質感、グラデーション、細かい影の作業 — を詰め込んでおり、そのタイルを変位させるとそのすべてのディテールが一度に乱れる。これは、きれいな形が動いているというより、にじみやノイズとして読まれる。すでにモーションブラーや非常に細かい線画が焼き込まれているソース画像にも同じことが言える。変位がきれいに運べる固形のピクセル情報がタイルごとに少ないからだ。

実践的な結論：揺らそうと計画している何かについて、クリーンな線画の漫画・アニメスタイルのエクスポートと写実的なレンダリングのどちらかを選べるなら、フラットなスタイルを選ぼう — これは単なる美的な好みではなく、ツールの変位数学の下で本当によくまとまるのだ。

---

エクスポート前は必ずプレビューを

Wobble Makerのプレビューは、エクスポートされたGIFで得られるのとまったく同じサイン波変位ループをレンダリングする — 低品質な近似ではない。即座でローカルに実行されるので、盲目的にエクスポートする理由はない。画像をアップロードし、プレビューを切り替え、2〜3回のフルループを見て、実際に見たものに基づいて強度を調整してから、エクスポートにコミットしよう。

これは、その強度設定が画像全体に合っているか迷っているときに最も重要になる — 髪とリボンにきつく寄せたクロップでは見事にハマる強度が、静止領域の多い引きの構図では強すぎて見えることがある。それは事前に予測するより、ライブループで目で判断するほうがずっと簡単だ。無駄になったエクスポートは数秒しか失わないが、先にプレビューを確認することで、正しい設定を見つけるための再エクスポートの繰り返しを節約できる。

---

まとめ

• 約1000px以上のソース解像度は何も得られない — グリッドはどのみち24×24であり、480pxで十分だ。
• 画像のすべてのタイルが、選んだ強度で一緒に動く — マスクはないので、静止した顔や体まで一緒に揺れてほしくないなら、柔らかい要素（髪、布、アクセサリー）がフレームの主役になっている元画像を選ぶか、そうクロップしよう。
• フラットでクリーンな線画は、写実的またはすでにぼやけたソース画像よりも説得力を持って揺れる。
• エクスポート前にプレビューしよう — まったく同じレンダリングで、即座で無料だ。

よくある質問

解像度の高い画像をアップロードすれば、Wobble Makerの結果は良くなりますか？

良くならない。Wobble Makerは、アップロードした画像に関係なく作業解像度を最長辺480pxに制限しており、モーションメッシュは常に固定の24×24グリッドだ。きれいな800〜1000pxの画像は精細な480pxの作業コピーにダウンスケールされる——巨大な元画像を用意しても、モーションの滑らかさが増すわけではなく、単に多くのピクセルが縮小の過程で失われるだけだ。

Wobble Makerで一番よく揺れる画像の種類は何ですか？

フラットでクリーンな線画に、しっかりした単色の塗りと太くて一貫したアウトラインを持つものが、写実的またはディテールの多い画像よりはるかにまとまりを保つ。20pxのグリッドタイルが5〜18px動いても、シンプルな色と線の領域はほとんど乱れないが、同じ動きは質感やグラデーションの多いタイルでは動きというより滲みとして読まれるほど乱してしまう。

顔を静止させたまま髪や布だけを揺らすことはできますか？

現状はできない——24×24グリッドのすべてのタイルが、選んだ強さで同じ変位の重みを受け取り、画像の一部を固定するブラシやマスキングはない。顔や体を静止させたい場合は、髪、布、アクセサリーといった柔らかい要素がすでにフレームを支配している元アートを選ぶかクロップしよう。

最初にどの強さの設定から始めるべきですか？

基準として中を試そう。見える動きとタイル同士がまとまりを保つバランスが取れているからだ。強いは、均一な揺れが意図された効果であるスタンプやアイコンのようなシンプルでフラットな全体作品のために取っておき、より忙しい、あるいは詳細な画像や細かい線画があるものには柔らかいに落とそう。

いろいろな強さを比較するために何度も書き出す価値はありますか？

その必要はない——ライブプレビューは最終的な書き出しとまったく同じサイン波のループをレンダリングするので、強さを切り替えながら2〜3回のフルループを見てから決められる。最初の無料分を使った後の無駄な書き出しはトークンを消費するが、先にプレビューで確認するのは即座で無料だ。

---

Wobble Makerを無料で試す → — 初回エクスポート無料、カード登録不要。

続けて読む

• Wobble Makerを試す → — 画像全体が自動で揺れる、初回エクスポート無料
• Wobble Maker — あらゆるアニメアートのための無料ジグル＆バウンスアニメーション
• Wobble GIFがカクカク、破れて見える、変に見える理由（そして直す方法）
• Wobbleでアニメーションさせるベストな要素
• Wobble Maker vs メッシュリギング