Wobble GIFがカクカク、破れて見える、変に見える理由（そして直す方法）

画像をアップロードし、強度を選び、エクスポートを押したら、結果がおかしく見える — なめらかに揺れるのではなく目に見えてひび割れて見えたり、端で破れて見えたり、あるいはただ「生きている」ではなく「壊れている」と読める動き方をしていたりする。これは、Wobble Makerが実際にどうモーションをレンダリングするかに結びついた、特定の修正可能な理由で起きる。仕組みを理解すれば、修正は迅速だ。

---

まず、揺れが実際どう生成されているか

Wobble Makerは布の物理演算やボーンをシミュレーションしていない。画像を24×24のグリッドのタイルに分割し、選んだ強度で決まる振幅で、すべてのタイルをサイン波に沿って変位させる — 画像全体が自動的に動き、描いたり塗ったりする工程は一切ない。隣接する2つのタイルは独立してアニメーションする — それぞれがグリッド位置に基づいて独自の位相オフセットを持つため、隣接するタイルは意図的に少しずつずれて動く（これが、1つの硬い塊がスライドしているように見えるのではなく、揺れに有機的で弾力のある感触を与えるものだ）。

その独立性こそが、うまくいかない原因でもある。画像内のすべてのタイルが同じ振幅で変位しているので、ディテールの多い画像やハイコントラストな画像では、1フレーム内で多くのタイルが十分に離れてしまい、タイル間の継ぎ目が見えるようになる可能性がある — タイルの境界でメッシュが文字通り引き裂かれる薄い隙間や二重の縁だ。これはバグではなく、グリッドがグリッドであることの直接的な結果だ。タイルの端をつなぐ補間はなく、独立したタイルごとの変位があるだけだ。

これを踏まえて、悪いエクスポートの最もよくある原因を見ていこう。

---

原因1：画像のディテール量に対して強度が高すぎる

Wobble Makerには3つの強度プリセットがあり、これらは単に「少し多い」「少し少ない」ではない。実際のピクセル変位量にマッピングされている。ソフトは5px、ミディアムは10px、ストロングは18pxで、これはタイルごと、フレームごとに、あなたの作業用キャンバス（最大480px）に適用される。ストロングはソフトの変位量のほぼ4倍であり、画像全体が同時に動くので、その変位はフレーム内のすべてのタイルで独立して同時に起きる。

シンプルでクリーンな画像 — 背景が無地の大胆なイラスト — なら、タイルごとの18pxの揺れはキビキビして弾力的に見える。それがまさにストロングプリセットの狙いだ。しかし、ごちゃごちゃした画像やディテールの非常に多い画像（雑多な背景、細かいテクスチャ、独立した小さな形が多数）では、その同じ18pxの揺れがすべてのタイルで一斉に起きることになり、隣接タイル同士が「どこにいるべきか」で目に見えて食い違う。これが動きではなく破れや粉砕として読まれる。

修正：フレームの情報量に強度を合わせよう。ストロングは、競合するディテールの少ないシンプルでハイコントラストなアートのために取っておこう。より情報量の多い画像 — 細かい背景、写真、緻密な線画 — にはミディアムかソフトを使おう。ミディアムの10pxの揺れは「明らかに生きているがまとまりを保っている」ためのスイートスポットであることが多く、ソフトの5pxは個別ではほとんど気づかないが、ディテールの多いフレーム全体では素敵な微妙な揺れとして読める。

---

原因2：元画像の中の硬いエッジや鋭い境界線

画像のどこかに鋭い境界線 — 無地の背景に対する顔の輪郭、固いオブジェクトのアウトライン、硬い色の遷移 — があると、画像内のすべてのタイルが同じように動いているにもかかわらず、その境界のタイルがお互いから剥がれているように見えてしまうことがある。鋭い視覚的境界があると、隣接タイル同士のわずかな食い違いが、なめらかなグラデーションやテクスチャ上の同じ食い違いよりもはるかに目に捉えられやすくなるのだ。

これは顔や直線的なオブジェクトの周りで特に目立つ。あご線、写真の枠、コマの境界線などだ。揺れが毎フレームそのエッジを目に見えて引っ張ることになり、ソフト強度でも不自然に見える。

修正：いまは画像全体が均一に揺れる — 特定の領域だけを除外する方法はない — ので、手強い継ぎ目を抑える主なレバーは強度だ。特に鋭い直線的な境界線が問題を起こしているなら、強度を1段階下げよう。振幅が小さくなれば、同じ継ぎ目はずっと目立たなくなる。

---

あまり明らかでない原因：元画像そのもの

妥当な強度であっても、元画像があなたに不利に働くことがある。Wobble Makerは、レンダリングの前にあなたのソースを最大480pxの作業寸法にリサンプルする。もしあなたの元アートがすでにモーションブラー、強いアンチエイリアシング、または非常に細かい線画（1ピクセルの細い髪の一房、繊細なクロスハッチング）を持っている場合、そのディテールは480pxで非常に少ないピクセルに圧縮される。すでに柔らかい、あるいはすでに細いディテールを、タイルごとに10〜18pxで変位させると、そもそもそこにあまりピクセル情報がなかったため、元の見た目よりもぼやけて汚く見えてしまうことがある。

修正：あなたのソースが細かい線画やブラーを持っている場合はソフト強度に下げ、細いディテール（単一の髪の毛、細いジュエリーのチェーン）は静止時よりも動いているときに少し柔らかく読めることを想定しておこう。フラットでクリーンな線画で、はっきりした太い輪郭線を持つ画像は、写実的または重くぼやけた元画像よりも、変位のもとでずっとよく持ちこたえる — タイルごとに動かすための固形のピクセルデータが単純に多いからだ。

---

クイック診断チェックリスト

• 画像のかたまりの間に隙間や二重の縁が見えるか？フレームのディテール量に対して強度が高すぎる — 1段階下げよう。
• 画像全体が粉砕しているように見えるか？ストロングからミディアムかソフトに下げよう。
• 顔や硬い輪郭の近くで何かが剥がれているように見えるか？強度を下げよう — 画像全体が均一に揺れるので、そこだけ除外することはできない。
• ソフト強度でもすべてが少しぼやけて見えるか？あなたのソースが細かい線画やブラーを持っている — ソフトに徹し、細いディテールが柔らかくなることを想定しよう。

良いニュースは、これらのどれも何かを再アップロードする必要がないということだ。Wobble Makerのプレビューはライブで即座に反映されるので、強度を1段階下げてすぐに結果を確認できる — エクスポートは無駄にならず、プレビューはトークンがかからないので、実際にエクスポートする前に好きなだけ調整できる。

よくある質問

Wobble Makerの書き出しで、画像の一部の間に隙間や裂けた継ぎ目が見えるのはなぜですか？

Wobble Makerは画像を24×24のグリッドに分割し、各タイルを独立したサイン波と位相のオフセットで変位させている。細部の多いハイコントラストな画像では、1フレームの中でタイル同士が離れすぎてしまい、タイルの端をつなぐ補間がないため継ぎ目が見えてしまうことがある。強さのプリセットを1段階下げよう——柔らかいは5px、中は10px、強いは18pxの変位だ——継ぎ目を目立ちにくくできる。

画像全体が滑らかに揺れるのではなく、ばらばらに砕けているように見えるのはなぜですか？

これはほぼ間違いなく、忙しい、あるいは非常に詳細な元画像に強いプリセット（1タイルあたり18pxの変位）を適用したケースだ。強いは、競合するディテールの少ないシンプルでハイコントラストなアート向けだ。ごちゃごちゃした背景、写実的な画像、緻密な線画には中か柔らかいに切り替えよう——中の10pxの振れは大抵「明らかに生きている」と「まとまりを保つ」の間のちょうど良いところに収まる。

顔や硬いエッジの近くで、揺れが特に裂けて見えるのはなぜですか？

あご先、写真の枠、コマの境界線のようなはっきりした視覚的な境界線があると、隣接するタイル同士のわずかな不一致でも、滑らかなグラデーション上の同じ不一致よりずっと目に付きやすくなる。画像全体が均一に揺れ、特定の領域だけを除外することはできないので、硬いエッジでの手強い継ぎ目を抑える主な方法は強さを一段下げることだ。

元画像にすでに細かい線画やモーションブラーがあると、揺らした後に滲んで見えるのはなぜですか？

Wobble Makerはレンダリング前に元画像を最大480pxの作業サイズにリサンプルする。元の画像がすでに1ピクセル幅の細い髪の毛や強いアンチエイリアスを持っていた場合、そのディテールは非常に少ないピクセルに圧縮されており、それを1タイルあたり10〜18px変位させるとさらに滲んでしまうことがある。細い線画や既存のブラーがある元アートには柔らかい強さを使い、細部が動きの中で少し柔らかく見えることを想定しておこう。

異なる強さを試すたびに毎回書き出す必要がありますか？

必要ない——Wobble Makerのプレビューは、書き出しで得られるのとまったく同じサイン波の変位ループをブラウザ内でライブにレンダリングしており、プレビューにはトークンがかからない。それぞれの強さで2〜3回のフルループを見てから書き出しを決めよう。手当たり次第に書き出して、おかしければ再書き出しするより効率的だ。

---

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

続けて読む

• Wobble Makerを試す → — 画像全体が自動で揺れる、初回エクスポート無料
• Wobble Maker — あらゆるアニメアートのための無料ジグル＆バウンスアニメーション
• Wobbleでアニメーションさせるベストな要素
• Wobble Maker vs メッシュリギング
• プルプル効果を解説