大きな格子が、水平・垂直の基準線になります。
CHECKER WAVE LAB
止まっているのに、
ゆらゆら見える。
市松模様と交点の小さな明暗パーツから、波打つように見える静止画を作ります。
LIVE PREVIEW
錯視の強さを調整
中央の点を見たまま周辺を見るか、少しだけ画面へ近づいたり離れたりすると、ゆらぎを確認しやすくなります。
格子とひし形を調整
- 市松模様の交互配置はそのまま維持
- ひし形はすべての交点で同じ設定に連動
- 4色の明るさの関係は色変更時も維持
色を連動して調整
#CC33FF#FF99FF#99FF00#00994C保存サイズ
WHY IT MOVES
ゆらぎを作る3つの要素
境界をまたぐ尖ったパーツが、輪郭の位置をずらして見せます。
交点ごとに色を反転させることで、歪みの方向が連続して波のように見えます。
静止画像です。目が疲れたり気分が悪くなった場合は、画面から目を離してください。
使い方
操作は3つのカードに分かれています。上から順に触っていけば、元画像に近いものから自分好みのものまで作れます。
- 格子とひし形を調整で、模様の細かさと交点パーツの形を決めます。
- 色を連動して調整で、4色をまとめて動かします。色は個別ではなく連動して変わります。
- 保存サイズを選び、「PNGで保存」を押すと画像が端末に保存されます。
迷ったら「元画像の設定に戻す」で初期値まで戻せます。プレビューは操作と同時に描き直されるので、スライダーを動かしながら見え方の変化を確かめてください。
スライダーの効きかた
3つのスライダーは、見え方への影響がそれぞれ違います。
| 項目 | 動かすと変わること | 目安 |
|---|---|---|
| 格子サイズ | 市松模様のマス目の数 | 数を増やすほど細かく、ゆらぎは小刻みになる |
| ひし形の形 | 交点パーツの縦横比 | 細いほど輪郭のずれが鋭くなる |
| ひし形の大きさ | 交点パーツの面積 | 大きすぎると市松模様が埋まって効果が弱まる |
| 明暗差 | 4色の明るさの開き | 開きが小さいとゆらぎが出にくい |
ゆらぎが強く見えるのは、格子が細かすぎず、ひし形が交点からはみ出しすぎない範囲です。極端な値にすると、単なる模様として見えるようになります。
うまくゆらいで見えない時
- 画面から遠い:少し近づく、または画像を大きく表示すると出やすくなります。「大きく確認」ボタンで拡大できます。
- 一点を凝視している:中央を見たまま周辺を意識するか、視線をゆっくり動かすと分かりやすくなります。
- 明暗差が小さい:「明暗差(ゆらぎの強さ)」を上げてみてください。色相や鮮やかさを動かした後は、明暗の関係が保たれていても印象が変わることがあります。
- ひし形が大きすぎる:交点のパーツが市松模様を覆ってしまうと、基準になる格子線が消えて効果が弱まります。
なぜゆらいで見えるのか
この錯視は、明るさの違う市松模様が水平・垂直の基準線を作り、その交点に置かれた小さなひし形が輪郭の位置をわずかにずらして見せることで起きます。ひし形の明暗を交点ごとに反転させると、ずれの向きが規則的に入れ替わり、線が波打っているように感じられます。実際の画像は一切動いていません。
そのため、印刷しても、スクリーンショットを撮っても同じように見えます。動画やアニメーションGIFにする必要はありません。
Xへの投稿に使う時
Xのタイムラインでは画像が縮小表示されるため、格子が細かすぎると効果が伝わりにくくなります。投稿前に、実際の表示サイズでどう見えるかを確認しておくと失敗しにくくなります。表示の確認にはXポスト iPhone専用プレビューが使えます。
錯視画像は人によって見え方が変わります。「見えない」という反応が来ることも前提にしておくと、投稿の書き方を決めやすくなります。目や体調への影響を気にする人もいるため、静止画であることを添えておくと親切です。
ほかの画像系ツールは無料ツール一覧にまとめています。同じ系統では3色補色錯視画像メーカー、タップで画像が現れるトリック画像があります。
画像の生成と保存はすべてブラウザ上で行われ、サーバーへ送信する仕組みは入っていません。作った設定はページを閉じると消えます。
ふくふく文鳥