1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="t9NQJ3Ghr3"><a href="https://uxdaystokyo.com/articles/glossary/muller%e2%80%90lyer-illusion/">ミュラー・リヤー錯視</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/glossary/muller%e2%80%90lyer-illusion/embed/#?secret=t9NQJ3Ghr3" width="600" height="338" title="“ミュラー・リヤー錯視” — UX TIMES" data-secret="t9NQJ3Ghr3" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2025/06/ミュラーリヤー-錯視アイキャッチ.png10801080内向きの矢印（〈―〉）では短く、外向き（―〉〈）では長く見えるという性質を持ち、視覚的文脈が判断に影響を与える例として知られている。 起源と提唱者 本錯視はドイツの心理学者フランツ・カール・ミュラー・リヤー（Franz Carl Müller-Lyer, 1857–1916）が1889年に発表したものである。彼は生理学の学術誌にて錯視現象を報告し、その後も複数のバリエーションを提案した。 デザイン上での利用方法と事例 ① UIやグラフィックデザイン 活用：目の錯覚を利用して、要素を大きく見せたり小さく見せたりする視覚的錯視効果を与える。 具体例：区切り線に外向きの矢羽根を加えて「この幅は広い」と感じさせ、スペースを広く感じさせる。 ② レイアウトと空間演出 活用：画面内のブロックの境界に錯視的要素を埋め込み、コンテンツを読みやすく整理する。 具体例：カードUIの上下に内向き矢羽根を配置し、コンパクトにまとまっている印象を与える。 ③ 教育・トレーニングコンテンツ 活用：錯視の仕組みを体験しながら学べるコンテンツに取り入れる。 具体例：デザイナー向け教材で、錯視を体験させて視覚バイアスへの意識を高める。 「この場面に使えるかな？」実践シーン 場面：Webサイトの比較表や料金プランページ 適用例：異なるプランの料金を比べる際、主要プランのボックスの上下に外向き矢羽根を入れ、「他よりお得そう」「大きく見える」効果を狙う視覚的強調を行う。 デザイン観点でのチェックポイント 視覚のバイアスを意図的に活用：錯視を使って要素を強調・抑制する効果を設計に組み込む。 過度な錯覚に注意：ユーザーが「見た目通りか判断できない」と不快にならないよう、誤解しない程度に調整する。 コンテキストに応じて使う：教育目的や装飾的演出には有効だが、数値の誤認を招く画面では避ける。 ミュラー・リヤー錯視は、視覚文脈が認識をどう歪めるかを示す古典的な錯覚であり、デザイン分野では空間演出や強調表現のための技巧的要素として応用されることもある。意図的に性能や見た目に影響を与えたい場面で、適切に使うことで効果的な視覚体験を提供できるである。