ハクソク

世界を動かす技術を、日本語で。

CSSの視覚的錯覚

123日前原文(alvaromontoro.com)

概要

  • CodePenで公開されている 光学的錯視コレクション の紹介
  • CSSやHTMLで実装された 代表的な錯視デモ の解説
  • 視覚効果の仕組み や脳の錯覚メカニズムを解説
  • マウスオーバーで 効果の変化や真実の色 が確認できるデモが多数
  • 静止画でも 動いて見える錯視 や、実際に動く錯視も含む

光学的錯視コレクションの紹介

  • CodePenで公開されている 光学的錯視のデモ集
    • 多くのデモはマウスオーバーで 効果の変化やアニメーションの停止 が可能
    • 各錯視の 原理や実装方法 の解説

Poggendorff錯視

  • 斜め線が 垂直な棒 で遮られることで、線が ずれて見える錯視
    • CSSの::beforeと::after疑似要素で 斜め線と棒 を作成
    • 複数の斜め線と棒を使った 応用バージョン も紹介
    • 70度傾けたCSSグラデーションと縦列グラデーションで再現
    • Münsterberg Poggendorff Arch：アーチの両端が ずれて見えるバージョン

誘導グラデーション錯視

  • グラデーションの上に置かれた 灰色バー が、実際は単色なのに グラデーションに見える錯視
    • 背景のグラデーションが 脳を錯覚させる仕組み
    • 中央の線が繰り返しグラデーションに見えるが、実際は 単色

Cornsweet錯視

  • 両端が同じ灰色でも、 隣接する色の違い で 明るさが異なって見える錯視
    • 白の隣は明るく、黒の隣は暗く見える
    • マウスオーバーで 同じ色であることが判明

Whiteの錯視

  • 白黒グリッド内の 灰色カラム が、 周囲の色 で明るさが異なって見える錯視
    • mix-blend-modeを利用したCSS実装
    • 色付きバージョンもあり、 青色の濃淡が錯覚される

Wertheimer-Koffkaリング錯視

  • リングの片側が白、もう片側が黒の上にあり、 色が異なって見える錯視
    • 実際は 全周同じ色 のリング
    • マウスオーバーで 補助線が消え、錯視が明確に

Adelsonの錯視

  • チェッカーボード上の AとBのタイル が、 同じ灰色 にもかかわらず違って見える錯視
    • 影や周囲のコントラストが 錯覚を生む要因

Asahi錯視

  • 花型の中央の円が、 ページの白と同じ色 なのに より明るく輝いて見える錯視

Color Spheres錯視

  • 赤・青・緑に見える円（球体）は、 実際は全て同じ灰色
    • 上に重なるラインによって 脳が色を補完

Colors from Contour錯視

  • 黄色内の線が青、青内の線が赤に見えるが、 全て黒（または濃灰色）
    • 白い輪郭線が 色の錯覚を生む要因

Curvature Blindness錯視

  • 上段の線は直線的、下段は曲線的に見えるが、 どちらも同じ曲率
    • 頂点や変曲点での 色の切り替え が錯覚を生む

Cafe Wall錯視

  • 平行な横線が 斜めに見える 古典的錯視
    • CSSのグラデーション3つで 簡単に再現

Penrose Triangle錯視

  • 前後関係や向きが 矛盾して見える不可能図形
    • 2024 Divtoberイベント用に作成

Ebbinghaus錯視

  • オレンジの円の大きさが 周囲の形状で異なって見える錯視
    • 両方同じ大きさ
    • アニメーションや異形バージョンも紹介

Kanizsa Square錯視

  • 白い四角が 存在しない のに、Pac-Man型の図形で 四角が浮かび上がる錯視
    • 脳が 欠けた情報を補完

Ehrenstein錯視

  • 実際は 線だけ なのに、 円盤が存在するように見える錯視
    • 垂直・水平線の交差で発生

Neon-Color-Spreading錯視

  • 緑と黒のパターンで構成された同心円が、 中央に色が広がって見える錯視
    • CSSでグリーンの円を重ねて実装

Hering・Wundt錯視

  • Hering錯視：赤い直線が 外側に曲がって見える
  • Wundt錯視：直線が 内側に曲がって見える（効果はやや弱い）
    • どちらも 遠近感の錯覚 が原因

Ponzo錯視

  • 上下の黄色い線が 同じ長さ なのに、上の線が長く見える錯視
    • CSSで 3D回転による遠近表現 を利用

T錯視

  • 垂直線と水平線が 同じ長さ でも、垂直線が長く見える錯視
    • CSSで 簡単に実装可能

Müller-Lyer錯視

  • 両端の矢羽根方向で、 同じ長さの直線 が 長短に見える錯視
    • CSS疑似要素で 端の形状だけを変更

Tilted Table錯視

  • 上の長方形が 傾いて見える が、実際は下の長方形と 平行
    • 斜線の向きが 錯覚の原因

Parallel Lines錯視

  • 黒い線が 平行 なのに、交差するバーの方向で 平行に見えなくなる錯視
    • オリジナルバージョンも紹介

動いて見える静止画錯視

  • Expanding Hole： 中央の黒い穴 が拡大して見える錯視
    • ラジアルグラデーションとぼかしで再現
  • Rotating Snakes： 周辺の円盤 が回転して見える錯視
    • HTML要素も活用
  • Appearing Dots： 白い点 の隣が黒く見える錯視
    • 交差する線と白い円のみ
  • Disappearing Dots： 注視すると他の点が消える錯視
  • Ouchi錯視： 円内のパターンが動いて見える錯視
  • Orthogonal Dotted Lines Sway： 中央部が揺れて見える錯視
  • Enigma： ピンクの円を注視すると周囲のリングが動いて見える錯視
  • Waves： 波のような動き が見える静止画
    • 多数のコニックグラデーションで再現

実際に動く錯視（以降）

  • 以降は 実際に動く錯視 や、 動きによる錯視効果 を紹介
    • 一部は めまいを引き起こす可能性 があるため注意喚起

このように、CodePen上のコレクションでは 視覚の不思議や脳の錯覚 をCSSやHTMLで体感可能。各錯視の 仕組みや実装方法 も丁寧に解説されており、 デザインやプログラミング学習にも最適 なリソース。

Hackerたちの意見

わー、これすごい！いくつかを自分のUIに使いたいな。

└

これが意図せずに自分のUIをめちゃくちゃにすることがよくあるんだよね！

なんか、これ全部めっちゃ暗いね。

└

実際に動かさないと意味ないよね。そうじゃないと、ただの暗いCodePenのプレビューになっちゃう。

これクールだけど、個人的には光の錯覚というより面白いCSSテクニックのデモって感じかな。あと、面白いことに、これらの錯覚のほとんどは「透けて見える」ようにできるんだけど、誘導グラデーションだけは、画面の一部を隠さないと見え続けちゃうんだよね。

33 - カラーファン：ここにも面白い光の錯覚があるよ。ファンを直接見てないときの方が、回ってるのが速く見えるんだ。

「（焦点を）合わせている間だけ現れる点」は「消失錯覚」として知られていて、具体的には「25 - 現れる点」が「マカナニータイプ」[1]、そして「26 - 消える点」が「ニニオタイプ」[2]として、北岡明佳の資料に載ってるよ。（数年前に自分でも再現したことがあるよ[3][4]、ソースにたどり着く前にね。） [1] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text... [2] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text... [3] https://codepen.io/myf/full/XjdmJy (閃光注意) [4] https://codepen.io/myf/full/jMqoMW (閃光注意)

へへ、昔はExcelでこれやってたな。

すごい！私もアメスウィンドウの錯覚を使って似たようなことをやったよ。CSSで再現したやつはこちらだよ： https://brandondong.github.io/blog/ames_window/

一番面白いのは、視覚的錯覚を使って脳の視覚処理がどうなってるかを解読することだと思う。

このコカ・コーラの錯覚が一番好きだな。 https://gagadget.com/en/446542-a-photo-of-a-coca-cola-can-th... コカ・コーラが赤く見えるのに、画像全体には赤色が使われてないんだよね。

これが逆の方向に行くと思ってた。全てを違うグレースケールの色にしようとしたプロジェクトに関わってたんだけど、ある日、誰かが二つのテキストが違う色だって文句を言ってきたんだ。実際は同じ色だったのに。背景色が違ったせいで、錯覚を引き起こしてたんだよね。それで、20回目くらいに「灰色を使いすぎだよ！」って思い出させたんだ。