**CSS の光学的錯覚**

Japanese Translation:

（すべての主要なポイントを統合したもの）

記事は、マウスホバーに応じて反応するインタラクティブな CSS ベースの錯視デモの CodePen ギャラリーを提示しています。
各デモは、Poggendorff の歪んだ線（傾いた 2 つのグラデーションと
::before
/
::after
を使用）、誘導グラデーション効果、Cornsweet & White の色コントラストトリック（黒白格子に
mix-blend-mode
を適用）、リングおよびチェッカーボードパターン、重なり合う線の色球体、曲率盲点、Café Wall イルлю（3 本のグラデーションで平行線を斜めにする）、ペノース三角形やエビングハウス円、カニッツァ四角形など、古典的な視覚現象を示しています。
ギャラリーには、エビングハウス錯視のアニメーション版、回転する「タワー」、色のファン、逆スピーク、モーションバインディング、メンツラインズ、ウォッリングカラーなども含まれ、ドット線の動きやコントラスト非同期、息を吸う四角形、トロックラー消失といった静的に動きを示唆するパターンも掲載されています。
すべての効果は CSS グラデーション、疑似要素、
mix-blend-mode
、およびキーフレームアニメーションで実現され、微妙な背景やホバー変更がどれほど印象的な視覚トリックを生み出せるかを示しています。
コレクションは Patrick Pester の「35 optical…」リストと Michael Bach の「154 Visual Phenomena & Optical Illusions」に触発されています。
Medium と DEV に公開されており、著者は将来の追加や改良の可能性について読者にコメントを残すよう呼びかけています。

この改訂された要約は、すべての主要なポイントを完全に反映し、推測を加えず、明確で簡潔に保っています。

光学錯覚コレクション

以下は記事で紹介されている光学錯覚デモの一覧です。
各項目には番号を付け、サブリストがある場合は適切にインデントしています。

ポゲンドーフ現象（Poggendorff Illusions）
- クラシックなポゲンドーフ効果：斜め線が縦棒で途切れるとずれたように見える。
- シンプルなデモは
```
::before
```
  と
```
::after
```
  擬似要素を使って斜め線と棒を作る。
- 洗練された版では 70°傾斜のグラデーションと垂直列を組み合わせ、複数の斜め線と棒を生成。
- ミュンツベルク・ポゲンドーフアーチは上部でずれたように見える二つの弧側がホバーすると実際には接触する。
誘導グラデーション（Induced Gradients）
- 実際のグラデーションとフラットカラーを組み合わせ、存在しないはずのグラデーションを脳に見せる。
- 例：背景グラデーション上に三本の灰色バーが重なり、濃淡の錯覚を生む。
- バリエーション：中央線が暗い／明るい灰色を繰り返すように見えるが実際はフラットで、ホバーするとグラデーションがないことが判明。
コーニスウィート錯覚（Cornsweet Illusion）
- 同じ色が周囲の対比によって異なるように見える。
- デモ：左右端は同一の灰色だが、一方は白っぽく、もう一方は黒っぽいように見え、ホバーで等しいことを確認。
ワイト錯覚（White’s Illusion）
- 黒白格子上の二つのグレー列。周囲によって同色でも異なるように見える。
- ```
mix-blend-mode
```
  で実装。
- カラー版では二つの青い四角がホバーまで見た目が違う。
ヴァルトハイマー–コフカリング（Wertheimer‑Koffka Ring）
- 均一色の輪が白／黒背景で分割されているように見える。ホバーすると赤帯が消え、均一性が明らかになる。
アデルソン錯覚（Adelson’s Illusion）
- チェッカーボードと影付きオブジェクト：A と B のタイルは同じグレーであるにも関わらず見た目が異なる。
朝日亮度錯覚（Asahi Illusion of Brightness）
- 花形要素の中央に白い円があり、光を放っているように明るく見える。
カラー・スフィア（Color Spheres）
- 円は赤／青／緑に見えるが、実際は同一の灰色。ホバーで統一性が確認できる。
輪郭からの色彩（Colors from Contour）
- 黄色内側の線が青く、青内側の線が赤く見える――実際には全て黒／暗いグレー。白い輪郭を除去すると真相が分かる。
曲率盲点（Curvature Blindness）
- 二組の波形ライン：一方はまっすぐに、もう一方はより曲線的に見えるが、実際には同じ波形。ピークや折れ目で色が変わると知覚が影響される。
カフェウォール（Cafe Wall）
- 三つのグラデーションが水平線を斜めに見せるが、実際は平行。
ペンローズ三角形（Penrose Triangle）
- 前後関係が矛盾する不可能な図形。前面と思われる部分が実際には背面になるように見える。
エビングハウス錯覚（Ebbinghaus Illusion）
- 同じ大きさのオレンジ円二つ。周囲の要素によって一方が大きく見える。アニメーション版も存在。
カニッサ四角形（Kanizsa Square）
- 「パックマン」型の形状で、黒い円上に白い四角形を錯覚させる。実際には描かれていない。
エーレンシュタイン錯覚（Ehrenstein’s Illusion）
- 垂直／水平線が十字を形成し、存在しない円盤を脳が認識する。
ネオンサラウンド拡散錯覚（Neon‑Color‑Spreading Illusion）
- 緑と黒のパターンがある同心円で、緑色リング下に中央にパターン化された円があるように見える。
ヘリング＆ウンタット錯覚（Hering and Wundt Illusions）
- ヘリング：赤線が外側へ曲がっているように見える。ウンタット：赤線が内側へ曲がり、中心へ向かうときに拡大して見える。
ポンゾ錯覚（Ponzo Illusion）
- 同じ長さの黄線二つ。上方の線は奥行きと遠近法（3D回転をCSSで実装）が働いて長く見える。
T形錯覚（T Illusion）
- 垂直線と水平線が同じ長さでも、垂直線がより長く見える。
ミュラー–リヤー錯覚（Müller‑Lyer Illusion）
- 内向き／外向きの矢印付き横線で長さ感覚を変化。各線はグラデーションで同一に作成されている。
傾いたテーブル錯覚（Tilted Table Illusion）
- 上部の四角形が左へ傾いて見えるが、実際には下部と平行。対角「色」線がトリックを演出。
平行線（Parallel Lines）
- 黒い線は平行だが、交差する棒の方向により見え方が変わる。黒赤版・オリジナル版の二つがある。

追加の静的光学錯覚効果は以下に続く…

拡大孔（Expanding Hole）
- 静止した錯覚で、中央の黒い穴が拡大しているように見える。二つの放射状グラデーションとぼかし擬似要素を使用。
回転サーペント（Rotating Snakes）
- CSSだけではなく HTML 要素を使うことで、周辺円が実際には動かないにも関わらず回転しているように見える。
現れる点（Appearing Dots）
- 白い点が隣接する点とともに黒くなる錯覚。線の交差と小さな円で動きを演出。
消える点（Disappearing Dots）
- 黒／白のドットパターンを連続表示し、焦点を合わせると他が時間経過とともに消えていく。数秒後にホバーすると効果が現れる。
オウチ錯覚（Ouchi Illusion）
- 静止画像で円内に横方向の動きを感じさせ、無意識の眼球運動を利用した錯覚。
直交ドットライン揺れ（Orthogonal Dotted Lines Sway）
- 中央領域が滑ったり揺れたりしているように見え、長時間観察するとめまいを引き起こす。
エニグマ（Enigma）
- ピンク色の円と同心リング。中央を見るとリングが回転したり輝いたりする錯覚だが、実際には何も動かない。
波（Waves）
- 多数の放射状グラデーションで構成される静止画像に波模様の動きを与える。負荷は大きいが静的錯覚を示す。

アニメーション光学錯覚効果は以下に続く…

アニメーションエビングハウス錯覚（Animated Ebbinghaus Illusion）
- オレンジ円はサイズ変更せず、周囲の図形が動いて変化しているように見える。
サイコキネティックタワー（Psychokinematic Tower）
- 平面上の塔が3Dで回転しているように見える。ホバーすると回転停止し深さ錯覚が消える。
カラー・ファン（Color Fan）
- 放射状コンイックグラデーションと円盤を組み合わせ、点を焦点にすると色が追加されるように見えて実際は変わらない。
逆スピーク錯覚（Reverse Spoke Illusion）
- 背景の車輪が回転しながらも spokes は固定。反対方向に回転しているように見える。
モーションバインディング（Motion Binding）
- 二つの線セットが水平・垂直で別々に動くと知覚されるが、実際は一つの形状が均等に移動。
マイナーズラインズ錯覚（Mainz‑Linez Illusion）
- 赤い点が上下に直進し、黒い十字が焦点時にジグザグ走行を示す。
ワドリングカラーズ（Waddling Colors）
- ボックスが異なる速度で歩くように見えるが、実際は一緒に動いている。ホバーすると真の運動が明らかになる。
点線モーション（Dotted‑Line Motion）
- 赤い点が横方向へ移動し、破線が周囲視覚で近距離／遠距離に見えるよう変化。
コントラスト非同期性（Contrast Asynchrony）
- 点は一定の色を保ちつつ、交互背景があることで跳ねたり同期しないように見える。ホバーで背景が消え静止状態になる。
ブリージングスクエア（Breathing Square）
- 青い四角が呼吸するように拡大縮小しながら回転。ホバーで緑の箱を除去し実際の回転を確認。
トロクラー消失（Troxler Fading）
- ピンク色の点円に欠けた点が、十字へ焦点を合わせるとカラー化され「食べられている」ような錯覚。灰色の回転円で同様のフェード効果もある。
ピナ・ブレルスタフ錯覚（Pinna‑Brelstaff Illusion）
- 青みがかった点が前後に動き、背景は移動しているように見える。実際には点だけが動く。コンイックグラデーションとクリッピングで構成。
パリサード（Palisade）
- 車輪半径がパリサードを通過すると曲線的に見え、ホバーでパリサードを除去して直線を確認。
代替モーション（Alternative Motion）
- 二つの青い点が異なるパターンで動いているように感じる。アニメーション側面が覆われているか否かによって知覚が変わり、推測された動きが示される。
モーション逆転（Motion Inversion）
- 同一形状／アニメーションだが CSS タイミング関数を変更することで滑らかな動きとギクシャクした動きを作り、焦点時に逆転して見える場合もある。

参考文献

35 optical Illusions and why they trick your brain – Patrick Pester
154 Visual Phenomena & Optical Illusions – Michael Bach

記事全文はこちらでご覧いただけます：

Medium
DEV（オープン）

ご質問やコメントはそれぞれのプラットフォームに残してください。お返事いたします。

Japanese Translation:

参考文献

同じ日のほかのニュース

CSS の光学的錯覚