白い背景で選んだ灰色を、暗い画面の中に置くと、急に明るく見える。色の数値は変えていないのに、何が変わったのでしょうか?
色の見え方は、周囲の色によっても変わります。 絵を描いたり、配色や構図を考えたりするとき、早いうちに身につけておきたい観察の習慣です。
これは「視覚表現の基礎」の第1回です。絵が描けなくても、数式を知らなくても大丈夫です。読み終えて練習をしたら、「色の数値が同じ」と「同じように見える」を区別し、背景を変えることで形の明暗の役割を変えられるようになることを目指します。
まず観察:どちらの灰色が明るく見える?
まずは自分の見え方を確かめてください。教材が期待する答えを当てようとする必要はありません。元の図を見たら、背景を覆ってもう一度比較し、最後に背景を入れ替えてみましょう。
図を準備しています
まず見比べてから、背景を覆って確かめる左右の小さな正方形は、常に同じ灰色 RGB(128,128,128) です。最初は A が暗い背景、B が明るい背景にあり、A のほうが明るく見えることが多くあります。背景を覆うと両方が同じ明るい灰色の上に並びます。背景を入れ替えても、正方形の色は変わりません。
{"id":"gray-context-observe","title":"まず見比べてから、背景を覆って確かめる","summary":"左右の小さな正方形は、常に同じ灰色 RGB(128,128,128) です。最初は A が暗い背景、B が明るい背景にあり、A のほうが明るく見えることが多くあります。背景を覆うと両方が同じ明るい灰色の上に並びます。背景を入れ替えても、正方形の色は変わりません。","height":520,"html":"<h2 data-i18n=\"heading\"></h2>\n<p class=\"intro\" data-i18n=\"intro\"></p>\n<div class=\"labels\" aria-hidden=\"true\"><span>A</span><span>B</span></div>\n<svg class=\"scene\" viewBox=\"0 0 640 280\" role=\"img\" data-i18n-label=\"scene\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"640\" height=\"280\" fill=\"#b0b0b0\"/>\n <rect id=\"surround-a\" width=\"320\" height=\"280\" fill=\"#202020\"/>\n <rect id=\"surround-b\" x=\"320\" width=\"320\" height=\"280\" fill=\"#e0e0e0\"/>\n <rect class=\"target\" x=\"112\" y=\"92\" width=\"96\" height=\"96\" fill=\"#808080\"/>\n <rect class=\"target\" x=\"432\" y=\"92\" width=\"96\" height=\"96\" fill=\"#808080\"/>\n</svg>\n<div class=\"actions\" role=\"group\" data-i18n-label=\"modes\">\n <button type=\"button\" data-mode=\"original\" aria-pressed=\"true\" data-i18n=\"original\"></button>\n <button type=\"button\" data-mode=\"masked\" aria-pressed=\"false\" data-i18n=\"masked\"></button>\n <button type=\"button\" data-mode=\"swapped\" aria-pressed=\"false\" data-i18n=\"swapped\"></button>\n</div>\n<div class=\"status-stack\"><p id=\"observation\" role=\"status\" aria-live=\"polite\"></p></div>\n<p class=\"hint\" data-i18n=\"fixed\"></p>","css":"\nbody { padding:24px; }\n.intro { color:var(--muted); margin:8px 0 20px; font-size:16px; }\nbutton, label, .hint { font-size:16px; }\nbutton { min-height:44px; }\n.scene { display:block; width:100%; height:auto; overflow:hidden; border-radius:2px; }\n.scene * { transition:none !important; }\n.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }\n.actions button { flex:1 1 auto; }\n.status-stack { display:grid; margin-top:16px; padding-top:14px; border-top:1px solid var(--rule); }\n.status-stack > * { grid-area:1/1; margin:0; font-size:16px; line-height:1.65; }\n.status-stack > [aria-hidden=true] { visibility:hidden; }\n@media(max-width:480px) { body { padding:18px 14px; } .actions { gap:6px; } }\n\n.labels { display:grid; grid-template-columns:1fr 1fr; text-align:center; margin-bottom:8px; color:var(--muted); font-size:16px; }\n","js":"const backgrounds={original:['#202020','#e0e0e0'],masked:['#b0b0b0','#b0b0b0'],swapped:['#e0e0e0','#202020']};\nconst status=document.querySelector('#observation');\nfor(const mode of Object.keys(backgrounds)) {\n const reserve=document.createElement('p'); reserve.textContent=viz.t('status_'+mode);\n reserve.setAttribute('aria-hidden','true'); status.parentElement.append(reserve);\n}\nfunction render(mode) {\n document.querySelector('#surround-a').setAttribute('fill',backgrounds[mode][0]);\n document.querySelector('#surround-b').setAttribute('fill',backgrounds[mode][1]);\n document.querySelectorAll('button[data-mode]').forEach(button=>button.setAttribute('aria-pressed',String(button.dataset.mode===mode)));\n document.querySelector('.scene').setAttribute('aria-label',viz.t('scene_'+mode));\n status.textContent=viz.t('status_'+mode);\n document.body.dataset.mode=mode;\n}\ndocument.querySelectorAll('button[data-mode]').forEach(button=>button.addEventListener('click',()=>render(button.dataset.mode)));\nrender('original');","audio":false,"strings":{"fixed":"確認:A も B も常に RGB(128, 128, 128)、別の表記では #808080 です。","heading":"A と B、どちらが明るく見えますか?","intro":"中央の小さな正方形を見比べましょう。印象を覚えてから「背景を覆う」を押してください。","masked":"背景を覆う","modes":"背景の見せ方を選ぶ","original":"元の背景","scene":"暗い灰色と明るい灰色の背景に、小さな灰色の正方形が一つずつあります。","scene_masked":"正方形の塗り色は変わりません。周囲の背景はどちらも RGB 176、176、176 になっています。","scene_original":"A は暗い灰色の背景、B は明るい灰色の背景の上にあります。正方形はどちらも RGB 128、128、128 です。","scene_swapped":"A は明るい灰色の背景、B は暗い灰色の背景の上にあります。正方形の塗り色は引き続き同じです。","status_masked":"両方の背景を同じ明るい灰色で覆いました。正方形の位置、大きさ、塗り色はそのままです。もう一度 A と B を比べましょう。","status_original":"まず観察しましょう。A は暗い灰色、B は明るい灰色の上にあります。同じ明るさに見えますか?はっきりした違いがなくても、そのまま確かめてみてください。","status_swapped":"暗い背景と明るい背景だけを入れ替えました。今は B が暗い灰色の上にあります。「明るく見える」側も入れ替わりましたか?","swapped":"背景を入れ替える"}}
よくある見え方は、暗い背景の正方形が明るく、明るい背景の正方形が暗く感じられる、というものです。けれども、二つの正方形の塗り色は最初から最後まで同じです。変わったのは周囲のほうです。
このような現象を明るさの同時対比と呼びます。同じ画面の中で、周囲の明暗がある領域の明るさの見え方に影響する現象です。「同時」とは、一緒に視野に入っているという意味です。長く見つめたり、別の画像を先に見て残像を生じさせたりする必要はありません。現象と比較の例
背景を覆う操作は、確かめる方法として役立ちます。正方形の位置、大きさ、色の値を保ったまま、周囲だけを同じ灰色にするからです。「実は同じ色です」と説明されるだけでなく、背景が異なる場合と同じ場合を自分で比較できます。
違いがはっきりしなくても、無理に見ようとしなくてかまいません。見る距離、図の大きさ、周囲の環境、表示条件によって体験は変わります。感じる違いの強さで、この練習の正解・不正解が決まるわけではありません。
数値が同じことと、同じに見えることを分ける
次の二つの問いを分けて考えてみましょう。
| 確かめたいこと | 確かめ方 | この例での結果 |
| 二つの色の数値は同じか? | 塗り色を確認するか、同じスクリーンショットで色を採取する | どちらも RGB(128, 128, 128) で同じ |
| 二つの色は同じ明るさに見えるか? | 今の背景に置かれた状態で見比べる | 同じとは限らず、暗い背景のほうが明るく見えることが多い |
RGB は、画面の色を数値で指定する方法の一つです。ここでは三つのチャンネルを同じ値にして灰色を表しています。128 は 0〜255 の範囲の符号化された値で、#808080 はこの灰色の別の書き方です。物理的な輝度が半分という意味でも、感覚的にちょうど半分の明るさという意味でもありません。 この教材で「同じ灰色」と言うときは、図形の塗り色に同じ数値を使っているという意味です。ディスプレイが実際に出す光の量を測定しているわけではありません。
絵を描くときの「明暗関係」で考えるのは、この部分が隣より明るいか暗いか、その差が大きいか小さいか、ということです。一部分だけを取り出して「何番の灰色か」と考えるより、まず周囲との関係を見るほうが役立つことがあります。
なぜ周囲の色も判断に関わるのか?
視覚系は隣り合う領域の違いを処理し、局所的な情報を画像全体の構造の中でまとめています。私たちが感じる明るさは、画素ごとの数値をそのまま読み取ったものではありません。
観察するときは、その部分と、周囲との関係を一緒に見ると覚えておくと役立ちます。ただし、「目は対象の値から背景の値を引き算している」と理解しないでください。引き算で画像の差の一部を表すことはできても、人がどう感じるかを直接計算できるわけではありません。
ここで示した古典的な明るさの対比については、初期の視覚処理が重要な役割を果たすことを支持する実験研究があります。そのため、「脳が左側を影だと考え、明るいはずだと推測するから」とだけ説明するのも適切ではありません。この図には影を描いていませんが、それでも見え方の違いは生じます。Sinha ほか、2020年:明るさの同時対比の研究
この入門実験で確かめられるのは、周囲が見え方に影響するということです。これだけで神経の仕組みをすべて説明できるわけではありません。また、「周囲が暗ければ、中央は必ず明るく見える」という一般則にもなりません。縞模様や境界、まとまり方が複雑になると、異なる方向の効果が生じることがあります。同時対比と Munker–White 効果の比較
試してみよう:同じ花瓶を明るい形にも暗い形にもする
次の図は、花瓶のシルエットと背景だけでできた平面の絵です。花瓶には常に同じ灰色を使い、ハイライト、落ちる影、質感は加えていません。
具体的な課題に取り組んでみましょう。花瓶はそのままで、「明るい背景の中の暗い形」から「暗い背景の中の明るい形」に変えてください。 背景のスライダーを動かす途中で、花瓶の輪郭がほとんど見えなくなる位置がないかも観察しましょう。
図を準備しています
背景だけを変えて、同じ花瓶を明るい形にも暗い形にもする花瓶のシルエットは常に RGB(128,128,128) です。スライダーで変わるのは均一な背景の値だけです。背景が 128 より小さければ花瓶は背景より明るく、大きければ背景より暗くなります。128 では塗り色が一致し、輪郭が見えなくなります。照明や材質を再現するものではなく、平面上の明暗関係を確かめる練習です。
{"id":"gray-context-compose","title":"背景だけを変えて、同じ花瓶を明るい形にも暗い形にもする","summary":"花瓶のシルエットは常に RGB(128,128,128) です。スライダーで変わるのは均一な背景の値だけです。背景が 128 より小さければ花瓶は背景より明るく、大きければ背景より暗くなります。128 では塗り色が一致し、輪郭が見えなくなります。照明や材質を再現するものではなく、平面上の明暗関係を確かめる練習です。","height":630,"html":"<h2 data-i18n=\"heading\"></h2>\n<p class=\"intro\" data-i18n=\"intro\"></p>\n<svg class=\"scene\" viewBox=\"0 0 640 340\" role=\"img\" data-i18n-label=\"scene\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect id=\"backdrop\" width=\"640\" height=\"340\" fill=\"#e0e0e0\"/>\n <path id=\"vase\" fill=\"#808080\" d=\"M287 66 H353 V120 C353 139 366 150 381 170 C397 192 400 215 394 241 L384 282 H256 L246 241 C240 215 243 192 259 170 C274 150 287 139 287 120 Z\"/>\n</svg>\n<div class=\"control-label\"><label for=\"background\" data-i18n=\"background\"></label><output id=\"background-value\" for=\"background\">224</output></div>\n<input id=\"background\" type=\"range\" min=\"32\" max=\"224\" step=\"1\" value=\"224\" aria-describedby=\"scale-note\"/>\n<div class=\"scale\" aria-hidden=\"true\"><span data-i18n=\"darker\"></span><span data-i18n=\"lighter\"></span></div>\n<div class=\"actions\" role=\"group\" data-i18n-label=\"presets\">\n <button type=\"button\" data-value=\"32\" aria-pressed=\"false\" data-i18n=\"dark\"></button>\n <button type=\"button\" data-value=\"128\" aria-pressed=\"false\" data-i18n=\"same\"></button>\n <button type=\"button\" data-value=\"224\" aria-pressed=\"true\" data-i18n=\"light\"></button>\n</div>\n<div class=\"status-stack\"><p id=\"relation\" role=\"status\" aria-live=\"polite\"></p></div>\n<p id=\"scale-note\" class=\"hint\" data-i18n=\"note\"></p>","css":"\nbody { padding:24px; }\n.intro { color:var(--muted); margin:8px 0 20px; font-size:16px; }\nbutton, label, .hint { font-size:16px; }\nbutton { min-height:44px; }\n.scene { display:block; width:100%; height:auto; overflow:hidden; border-radius:2px; }\n.scene * { transition:none !important; }\n.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }\n.actions button { flex:1 1 auto; }\n.status-stack { display:grid; margin-top:16px; padding-top:14px; border-top:1px solid var(--rule); }\n.status-stack > * { grid-area:1/1; margin:0; font-size:16px; line-height:1.65; }\n.status-stack > [aria-hidden=true] { visibility:hidden; }\n@media(max-width:480px) { body { padding:18px 14px; } .actions { gap:6px; } }\n\n.control-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; }\n.control-label output { min-width:3ch; font-size:18px; }\n.scale { display:flex; justify-content:space-between; color:var(--muted); font-size:14px; }\n","js":"const slider=document.querySelector('#background'), status=document.querySelector('#relation');\nfor(const key of ['status_dark','status_same','status_light']) {\n const reserve=document.createElement('p'); reserve.textContent=viz.t(key);\n reserve.setAttribute('aria-hidden','true'); status.parentElement.append(reserve);\n}\nfunction render() {\n const value=Number(slider.value), key=value<128?'dark':value>128?'light':'same';\n document.querySelector('#backdrop').setAttribute('fill',`rgb(${value}, ${value}, ${value})`);\n document.querySelector('#background-value').textContent=viz.number(value,0);\n document.querySelectorAll('[data-value]').forEach(button=>button.setAttribute('aria-pressed',String(Number(button.dataset.value)===value)));\n status.textContent=viz.t('status_'+key);\n slider.setAttribute('aria-valuetext',`${viz.number(value,0)} / ${viz.t('value_'+key)}`);\n document.querySelector('.scene').setAttribute('aria-label',viz.t('scene_'+key));\n document.body.dataset.relation=key;\n}\nslider.addEventListener('input',render);\ndocument.querySelectorAll('[data-value]').forEach(button=>button.addEventListener('click',()=>{slider.value=button.dataset.value;slider.dispatchEvent(new Event('input',{bubbles:true}));}));\nrender();","audio":false,"strings":{"background":"背景の灰色の値","dark":"暗い背景","darker":"32 · 暗い","heading":"同じ花瓶を、明るい形にも暗い形にも","intro":"花瓶を画面の中の明るい形にしてみましょう。背景のスライダーだけを動かし、輪郭の変化を観察してください。","light":"明るい背景","lighter":"224 · 明るい","note":"花瓶の値は 128 に固定されています。スライダーは RGB の各チャンネルに共通の符号化された値です。明るさの百分率でも、見た目の明るさを測る目盛りでもありません。","presets":"背景のプリセット","same":"花瓶と同じ灰色","scene":"明るい灰色の背景に、中間の灰色で描いた花瓶のシルエットがあります。","scene_dark":"中間の灰色の花瓶が、それより暗い均一な背景に置かれ、明るい形として見えます。","scene_light":"中間の灰色の花瓶が、それより明るい均一な背景に置かれ、暗い形として見えます。","scene_same":"花瓶と背景の灰色の値が一致しています。形は元の位置にありますが、輪郭は見えません。","status_dark":"花瓶は背景より明るく、明るい形として見えます。128 に近づけると背景との差が小さくなり、背景をさらに暗くすると境界の明暗差が大きくなります。","status_light":"花瓶は背景より暗く、暗い形として見えます。128 に近づけると背景との差が小さくなり、背景をさらに明るくすると境界の明暗差が大きくなります。","status_same":"背景も花瓶も 128 になりました。形は同じ場所にありますが、塗り色が一致して輪郭が見えません。スライダーをどちらかに動かすと、輪郭が再び現れます。","value_dark":"背景が花瓶より暗い","value_light":"背景が花瓶より明るい","value_same":"背景と花瓶が同じ灰色"}}
ここでは、関連しているけれど区別しておきたい二つの変化が起こります。
- 明暗の役割が変わります。 明るい背景では花瓶が周囲より暗く、暗い背景では周囲より明るくなります。これはまず、対象と背景の数値の実際の関係です。
- 花瓶の見え方も変わることがあります。 塗り色が同じでも、異なる明暗の背景に置くと、花瓶自体が明るく感じられたり暗く感じられたりします。これは最初の観察と関係しています。
背景も花瓶も 128 になると輪郭が消えるのは、境界の両側に色の違いがなくなるからです。この結果を説明するのに、錯視を持ち出す必要はありません。
三つの関係を、いつでも比較できる図にまとめました。中央の形の塗り色は同じで、変わるのは背景です。
絵を描くとき、対象を明るく見せたいなら、対象だけでなく周囲の明暗を調整する方法もあります。 その変更が合っているかどうかは、画面全体の中で判断しましょう。強い対比が生きる表現もあれば、近い明暗の穏やかな差が生きる表現もあります。対比が強いほどよい、という採点基準はありません。
手順で学ぶ:小屋が「灰色のかたまり」に埋もれたら
前の実験は、境界の近くにある背景の影響を示しました。今度は、空、山、小屋、草地を描いたのに、小さくすると何があるか分からない場面を考えます。屋根の瓦を増やしても、この問題は解決しにくいでしょう。
A:暗くする前に、原因を探します。 空、山、地面、小屋の灰色が近く、細かな線が各所に散っています。小屋と周囲の違いが弱いため、描く量を増やしても読み取りやすくなっていません。切手ほどの大きさに縮めると、問題が見えやすくなります。
B:まず三つの大きな明暗の群に分けます。 明るい空、中間の山、暗めの地面を使い、小屋が周囲と区別できるようにします。一つの群を必ず一色にする必要はありません。群の内部の細かな変化より、群同士の大きな違いを優先するということです。草に質感を加えても、一本ずつが小屋と競わないようにします。
C:最も強い対比を置く場所を選びます。 夕暮れの灯りを見せるなら、建物を暗くして小さな窓を明るく残せます。面積は小さくても、すぐ隣の壁が暗いので目印になります。一方、建物の外観を説明したいなら B のほうが役立つかもしれません。C は壁の情報を減らしているからです。
遠くからは大きな明暗の群を、近くからは特定の境界の両側を調べます。ヒストグラムに白と黒があるかだけでは、どちらも確認できません。同じ量の灰色でも、置く場所が変われば別の画面になります。
ハイキー、ローキー、対比を分けて考える
ハイキーは主に明るい範囲、ローキーは主に暗い範囲に大きな面積を配する考え方です。反対側の色を禁止するものではありません。明るい雪原に暗い木を置けますし、暗い夜景にも灯りがあります。
対比は領域間の違いです。ハイキーの雪原でも黒い木は強く対比し、ローキーの暗い壁と服の違いは小さい場合があります。「ハイキーだから黒を使わない」「ローキーだから何も見せない」では具体的な判断になりません。
| 伝えたいこと | 試す出発点 | 変更後に確かめること |
| 明るさ、空気、軽さ | 大きな面を明るくし、暗い目印を少数残す | 淡い対象の境界は読めるか |
| 夜や隠れた空間 | 大部分を暗くし、明部を限定する | 大切な対象が一つの黒い塊になっていないか |
| 情報の階層 | 重要な対象と隣接部に明確な差をつける | 無関係な隅にも同じ強さの差がないか |
これは試せる方策で、感情の決まった公式ではありません。明るい場面が不穏な場合も、暗い場面が穏やかな場合もあります。題材や形、配置も表現に関わります。
繰り返し使える確認の順序
まず読ませたい対象を言葉にします。画像を縮小するか目を細め、最も大きな三領域を明・中・暗で説明します。区別しにくければ細部より先に大きな配分を変えます。次に対象の弱い境界を二か所探し、明確にするか、意図的に背景へ溶け込ませるかを選びます。細部は最後に戻します。
この灰色の図は平面上の関係を組み立てる例です。実際の照明の再現ではありません。次の篇では、表面になぜ明暗が生まれるかを扱います。
別の図で判断:看板のどこを変える?
OPEN の灰色は変えず、看板の背景から見分けやすくする課題です。A が現状、B と C が修正案。条件に合うのはどちらでしょう。文字色を固定しなければ、もう一方も使えるでしょうか。
先に判断してから解説を開く
B は背景だけを暗くし、文字の灰色を保ちます。C は文字を暗くして区別を強めますが、固定条件に反します。どちらも条件次第で使えます。目的と変更できる範囲を述べてから効果を比べると、背景の実験を実際の図案に応用できます。
教材の外でも試してみよう
画面を使わない観察の練習
同じ灰色の紙から小さな紙片を二枚切り取り、似た照明条件で、一枚を白い紙、もう一枚を黒い紙の上に置きます。見え方を比べたら、両方を同じ背景紙の上に移してみましょう。灰色の紙がなければ、描画ソフトで同じ灰色の正方形を複製し、明るい背景と暗い背景に置いてもかまいません。
「変えずに保ったのは……」「変えたのは……」の二文だけを書き留めてください。紙で試すときは、紙の位置、反射、照明も同時に変わっていないかに注意しましょう。
場面を変えて考える二つの問い
1.ポスターの灰色の文字を暗い表紙に置いたら、明るすぎるように見えました。これだけで、デザインソフトが文字色を変えたと断定できますか?どう確かめますか?
考え方の例を見る
見え方だけでは断定できません。まず文字の色の値や不透明度などを確認し、両方の文字を同じ背景に置いて比較します。数値が同じなのに背景によって見え方が変わるなら、背景との関係も判断に含めましょう。色の採取は数値を確かめる助けになりますが、最終的な背景で読みやすさを確認する作業の代わりにはなりません。
2.中間の灰色の花瓶が、同じ灰色の背景にほとんど溶け込んでいます。花瓶の色を変えずに輪郭を見えるようにするには、背景を暗くするしかありませんか?
考え方の例を見る
背景を暗くしても明るくしてもかまいません。花瓶との違いが十分に見えるようになれば、輪郭が現れます。暗くすると花瓶は明るい形に、明るくすると暗い形になります。「背景を暗くする」という操作だけを覚えるのではなく、二つの領域の明暗関係を使えるかを確かめる問いです。
練習が終わったら、好きな絵、写真、ポスターを一つ選んでください。一部分に注目し、周囲より明るいか暗いかを言葉にして、その関係が目立ち方にどう影響しているかを観察しましょう。まず見えた関係を説明し、その後で変更が必要かを考えます。
次は何を観察できるだろう?
今回は、平面の中で明暗を比較しました。この先には、物体の明るい部分、暗い部分、落ちる影が、どのように立体感を生むのかという問いがあります。そこでは、物体表面の色と、照明によって生じる変化をさらに区別する必要があります。
参考資料とさらに読むために
正方形、花瓶、比較図は、この教材のために作成しました。操作できる図は観察と練習のためのもので、視覚の測定やディスプレイの校正を行うものではありません。