エビングハウス錯視webシミュレーション-中央の円は同じ大きさ？

エビングハウス錯視をブラウザ上で実装し、円の大きさが同一であることを観察できるサイトツールです。

上の埋め込み内でも使えますが、うまく動かない・大きなページで使いたいというときは、元のエビングハウス錯視シミュレーションページへ（新しいタブで開きます）。

エビングハウス錯視とは

エビングハウス錯視（Ebbinghaus illusion、またはティチナー錯視）は、中央の円の大きさが同じでも、周囲の円の大きさによって見え方が変わる錯覚です。

• 大きな円に囲まれた中央の円 → 小さく見える
• 小さな円に囲まれた中央の円 → 大きく見える

実際には中央の円の直径はまったく同じなのに、相対的な比較によって脳が大きさを誤認識してしまいます。
この錯視は、心理学・デザイン・認知科学の分野で広く研究されており、「人の知覚が環境に依存している」ことを示す代表的な例です。

🧭 ツールの使い方

このツールは、HTMLとJavaScriptだけで動作するシンプルな体験型プログラムです。

1. 起動方法
   提供されたHTMLファイルをブラウザで開くだけで実行できます（追加のライブラリ不要）。
2. 画面構成
   白いキャンバスの中に2組の円が表示されます。
   - 左側：大きな青い円に囲まれた中央のオレンジ円
   - 右側：小さな緑の円に囲まれた中央のオレンジ円
3. 操作方法
   どちらのオレンジ色の円もドラッグ可能です。
   片方をドラッグしてもう一方の上に重ねてみましょう。
   すると、どちらの中央円も同じ大きさであることが確認できます。
4. 仕組みのポイント
   周囲の円はplaceSurroundingCircles()関数で放射状に配置され、
   中央円にはmakeDraggable()関数でマウスドラッグ機能が付与されています。
   これにより、視覚的な比較と操作体験が1つのキャンバス上でシームレスに行えるようになっています。

🧩 まとめ

このエビングハウス錯視ツールは、「見える」という行為がどれほど文脈と相対性に左右されるかを実感できる教材です。
視覚心理学のデモンストレーションとしてはもちろん、デザイン教育やプレゼン資料にも応用できます。

• エビングハウス錯視は、周囲の円の大きさによって中央の円が大きくも小さくも見える現象。
• 本ツールはHTML＋JavaScriptで作られた体験型錯視シミュレーター。
• オレンジの中央円をドラッグして重ねることで、実際には同じサイズであることを確認できる。
• 視覚認知や錯覚の理解、教育用途に最適な軽量ブラウザツール。

人間の目は、単なるカメラではなく「文脈を読む知覚装置」です。
このツールで、あなたの“見る”という感覚の不思議さをぜひ体験してみてください。