1. ホーム
  2. 無料ツール一覧
  3. ゆらゆら市松錯視メーカー

CHECKER WAVE LAB

止まっているのに、
ゆらゆら見える。

市松模様と交点の小さな明暗パーツから、波打つように見える静止画を作ります。

01

LIVE PREVIEW

錯視の強さを調整

生成プレビュー 画像自体は動いていません
17 × 17 / ひし形 100%

中央の点を見たまま周辺を見るか、少しだけ画面へ近づいたり離れたりすると、ゆらぎを確認しやすくなります。

STRUCTURE

格子とひし形を調整

EDITABLE
17 × 17 ひし形:標準 / 100%
  • 市松模様の交互配置はそのまま維持
  • ひし形はすべての交点で同じ設定に連動
  • 4色の明るさの関係は色変更時も維持
LINKED COLOR

色を連動して調整

市松 A#CC33FF
市松 B#FF99FF
交点 A#99FF00
交点 B#00994C
錯視構造を保持中 4色の明るさの関係を自動調整しています。
OUTPUT

保存サイズ

WHY IT MOVES

ゆらぎを作る3つの要素

01明るさの違う市松模様

大きな格子が、水平・垂直の基準線になります。

02交点の4枚の菱形

境界をまたぐ尖ったパーツが、輪郭の位置をずらして見せます。

03明暗の交互反転

交点ごとに色を反転させることで、歪みの方向が連続して波のように見えます。

静止画像です。目が疲れたり気分が悪くなった場合は、画面から目を離してください。

使い方

操作は3つのカードに分かれています。上から順に触っていけば、元画像に近いものから自分好みのものまで作れます。

  1. 格子とひし形を調整で、模様の細かさと交点パーツの形を決めます。
  2. 色を連動して調整で、4色をまとめて動かします。色は個別ではなく連動して変わります。
  3. 保存サイズを選び、「PNGで保存」を押すと画像が端末に保存されます。

迷ったら「元画像の設定に戻す」で初期値まで戻せます。プレビューは操作と同時に描き直されるので、スライダーを動かしながら見え方の変化を確かめてください。

スライダーの効きかた

3つのスライダーは、見え方への影響がそれぞれ違います。

項目動かすと変わること目安
格子サイズ市松模様のマス目の数数を増やすほど細かく、ゆらぎは小刻みになる
ひし形の形交点パーツの縦横比細いほど輪郭のずれが鋭くなる
ひし形の大きさ交点パーツの面積大きすぎると市松模様が埋まって効果が弱まる
明暗差4色の明るさの開き開きが小さいとゆらぎが出にくい

ゆらぎが強く見えるのは、格子が細かすぎず、ひし形が交点からはみ出しすぎない範囲です。極端な値にすると、単なる模様として見えるようになります。

うまくゆらいで見えない時

なぜゆらいで見えるのか

この錯視は、明るさの違う市松模様が水平・垂直の基準線を作り、その交点に置かれた小さなひし形が輪郭の位置をわずかにずらして見せることで起きます。ひし形の明暗を交点ごとに反転させると、ずれの向きが規則的に入れ替わり、線が波打っているように感じられます。実際の画像は一切動いていません。

そのため、印刷しても、スクリーンショットを撮っても同じように見えます。動画やアニメーションGIFにする必要はありません。

Xへの投稿に使う時

Xのタイムラインでは画像が縮小表示されるため、格子が細かすぎると効果が伝わりにくくなります。投稿前に、実際の表示サイズでどう見えるかを確認しておくと失敗しにくくなります。表示の確認にはXポスト iPhone専用プレビューが使えます。

錯視画像は人によって見え方が変わります。「見えない」という反応が来ることも前提にしておくと、投稿の書き方を決めやすくなります。目や体調への影響を気にする人もいるため、静止画であることを添えておくと親切です。

ほかの画像系ツールは無料ツール一覧にまとめています。同じ系統では3色補色錯視画像メーカータップで画像が現れるトリック画像があります。

画像の生成と保存はすべてブラウザ上で行われ、サーバーへ送信する仕組みは入っていません。作った設定はページを閉じると消えます。

中央付近を見ながら、周辺の格子を観察してください。