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のタイルだ。ブラシを非常に小さく設定し、数ピクセル幅のストロークをちょんと塗ると、単一のタイルの中に塗っているか、あるいは1つのタイルを部分的にしかカバーしていない可能性がある — そして部分的にカバーされたタイルは部分的な重みしか受け取らず、振幅を適用してもモーションとしてまったく認識できないほど微妙になることがある。特にソフト強度ではそうだ。

実践的な最小値：ブラシのストロークは、少なくとも2〜3グリッドタイル分の幅 — 480pxの作業キャンバス上でおおよそ40〜50px — を目指そう。そうすれば、あなたの塗りは確実に完全なタイルの境界をまたぎ、メッシュに明確に重み付けされた区域を与えられる。それより大きくするのは問題なく、はっきり読まれるべきもの（ポニーテール、リボン）にはむしろ良いことも多い。それより大幅に小さくすると、最終的なモーションにまったく現れないストロークになるリスクが主に高まる。1本の緩んだ髪の毛や小さなチャームのような、非常に繊細で細かいアクセントを揺らしたいなら、必要以上にわずかに大きいブラシで補い、「繊細さ」の仕事は強度に任せよう — きちんとタイルサイズのストロークでのソフト強度は、ほとんど認識できないほど細いストロークよりも繊細に読める。

---

Fill All vs 的を絞った塗り

Wobble Makerには、手動で塗る代わりにキャンバス全体をモーションの重みで塗りつぶすオプションがある。速いので魅力的だが、的を絞った塗りとはまったく異なる見た目を生む。画像内のすべてのタイルが重み付けされるため、画像全体が1つの緩くつながった表面として揺れる。これは正当なスタイルの選択だ — シンプルでほぼフラットなイラストで「全体が優しく揺れる」ことが狙いの効果である場合には良く見える（チビのステッカーやシンプルなアイコン風の作品を想像してほしい）。

顔と胴体は静的だが動的な髪を持つキャラクターのような、明確な「動くべき」対「静止すべき」の区別があるものには間違った選択だ。そこでキャンバス全体を塗りつぶすと、顔と体が髪と同じモーション処理を受けることになり、揺れる顔は生きているというより壊れているように読める（大きな均一な領域が高い強度で目に見えて破れる傾向にある正確な理由については、姉妹記事のトラブルシューティング記事を参照してほしい）。

Fill Allを使うべき場面：均一で穏やかなモーションが狙いの、シンプルでフラットな全体作品 — ステッカー、アイコン、小道具。 的を絞った塗りを使うべき場面：キャラクターの顔、固い胴体、あるいは他の部分が動く間固定されて読まれるべき部分があるもの全般。

---

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

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

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

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

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

---

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

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

これは、異なる強度で複数の塗られた領域を重ねているとき（例えば、髪の主要な塊にはソフト、単一の垂れ下がるアクセサリーにはストロング）に最も重要になる — それらがどう相互作用するかは、事前に予測するよりもライブループで目で判断するほうがずっと簡単だ。無駄になったエクスポートは数秒しか失わないが、先にプレビューを確認することで、正しい組み合わせを見つけるための再エクスポートの繰り返しを節約できる。

---

まとめ

約1000px以上のソース解像度は何も得られない — グリッドはどのみち24×24であり、480pxで十分だ。
ブラシのストロークは少なくともタイルサイズ（作業キャンバスで約40〜50px）に保ち、塗りが確実にモーションの重みとして登録されるようにしよう。
Fill Allは、シンプルでフラットな全体作品にのみ使い、顔や静止すべき体がある場合は必ず的を絞った塗りを使おう。
フラットでクリーンな線画は、写実的またはすでにぼやけたソース画像よりも説得力を持って揺れる。
エクスポート前にプレビューしよう — まったく同じレンダリングで、即座で無料だ。

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

続けて読む

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

Wobble Makerでより良い結果を得るコツ：ブラシサイズ、強度、画像の選び方