円を灰色で塗ると、円盤にも球にも見えます。輪郭だけでは、すべては分かりません。円の内側に明暗の関係をつくると、向きを変えながら続く面として読み取れるようになります。
面の明暗は立体感の手がかりになり、別の面に落ちる影は物体と周囲の関係を示します。 この二つから始め、カップの段階図で接触、縁、反射光を区別します。描画の熟練よりも、図の手がかりに基づく判断を練習します。
輪郭、面の明暗、落ちる影を分ける
下の三つの図を比べてください。A は輪郭と平塗りだけ、B は面の明暗を加え、C は床に落ちる影も加えています。それぞれ、どんな情報が増えたでしょうか。
A 平塗りの円、B 明暗のある球の模式図、C 床の影も加えた図。
A
B
C
A 平塗りの円、B 明暗のある球の模式図、C 床の影も加えた図。
A
B
C
円の輪郭は平面的な形です。B の内部の明暗の移り変わりによって、丸い面を読み取りやすくなります。C の影は、床との接触や光の向きを示します。輪郭、面の明暗、投影は別々の手がかりです。 静止図は関係を示す模式図で、次の実験では同じ幾何モデルで変化を確かめます。
同じ表面に明暗が生まれる理由
白い紙をランプに正面から向け、ゆっくり傾けるところを想像してください。紙の色は同じでも、面の向きが変わります。単純なつや消し面では、光に向いた部分ほど直接の光を受けやすく、横を向くほど受けにくくなります。
球面は、少しずつ向きの異なる小さな面の集まりと考えられます。面の向きも受ける光も連続して変わるため、丸みのある明暗の変化が生まれます。箱では面の境界で向きが急に変わり、明暗もはっきり変わる場合があります。
これは材質が同じで、照明条件が分かっているときの比較 です。暗い色の物体の明部が、明るい色の物体の暗部より明るいとは限りません。異なる物体を含む画像の最も明るい画素だけで、光源の位置を判断することはできません。
光を動かして予想を確かめる
光を左から右へ動かすと、どんな二つの変化が起きるでしょうか。「受光を追加」と「投影を追加」を切り替え、球面と床を分けて観察します。
図を準備しています 再読み込み
同じ球の明暗を段階ごとに見る 球、床、カメラ、材質は固定。平塗りは輪郭だけを残し、受光表示では面の向きで明暗が変わり、投影表示では床への光を球が遮るかも計算します。スライダーは遠方の光源の左右方向だけを変えます。
{"id":"light-and-volume","title":"同じ球の明暗を段階ごとに見る","summary":"球、床、カメラ、材質は固定。平塗りは輪郭だけを残し、受光表示では面の向きで明暗が変わり、投影表示では床への光を球が遮るかも計算します。スライダーは遠方の光源の左右方向だけを変えます。","height":680,"html":"<h2 data-i18n=\"heading\"></h2><p data-i18n=\"intro\"></p><canvas class=\"scene\" id=\"light-scene\" width=\"480\" height=\"320\" role=\"img\" data-i18n-label=\"scene\"></canvas><div class=\"controls\" role=\"group\" data-i18n-label=\"choices\"><button type=\"button\" data-mode=\"flat\" aria-pressed=\"false\" data-i18n=\"flat\"></button><button type=\"button\" data-mode=\"form\" aria-pressed=\"false\" data-i18n=\"form\"></button><button type=\"button\" data-mode=\"shadow\" aria-pressed=\"false\" data-i18n=\"shadow\"></button></div><label for=\"angle\" data-i18n=\"angle_label\"></label><input id=\"angle\" type=\"range\" min=\"-70\" max=\"70\" value=\"-45\" step=\"1\"><output id=\"angle-value\" for=\"angle\" class=\"readout\"></output><div class=\"status\"><p id=\"status\" role=\"status\" aria-live=\"polite\"></p></div><p class=\"readout\" data-i18n=\"note\"></p>","css":"\nbody { padding:22px; }\nh2 { font-size:20px; line-height:1.4; }\np { font-size:16px; line-height:1.65; }\n.scene { display:block; width:100%; height:auto; overflow:hidden; border-radius:4px; background:#e8e4dc; }\n.scene * { transition:none!important; }\n.controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px 0; }\n.controls button { flex:1 1 auto; min-height:44px; font-size:16px; }\nlabel { display:block; font-size:16px; margin:14px 0 4px; }\ninput[type=range] { width:100%; min-height:28px; }\n.readout { font-size:16px; color:var(--muted); }\n.status { display:grid; border-top:1px solid var(--rule); padding-top:12px; margin-top:16px; }\n.status p { grid-area:1/1; margin:0; }\n.status [aria-hidden=true] { visibility:hidden; }\n@media(max-width:480px) { body {padding:16px 12px;} h2 {font-size:19px;} }\n","js":"const $=s=>document.querySelector(s); const $$=s=>Array.from(document.querySelectorAll(s));\nfunction say(key){$('#status').textContent=viz.t(key);document.body.dataset.state=key;}\nfunction reserve(keys){keys.forEach(k=>{const p=document.createElement('p');p.textContent=viz.t(k);p.setAttribute('aria-hidden','true');$('.status').append(p);});}\nfunction selected(attr,value){$$('button['+attr+']').forEach(b=>b.setAttribute('aria-pressed',String(b.getAttribute(attr)===value)));}\n\nconst canvas=$('#light-scene'),ctx=canvas.getContext('2d'); let mode='shadow';\nconst norm=a=>{const s=Math.hypot(...a);return a.map(v=>v/s);}, dot=(a,b)=>a.reduce((v,x,i)=>v+x*b[i],0);\nconst ray=norm([0,-.35,-1]),up=[0,-ray[2],ray[1]];\nfunction hit(o,d){const b=dot(o,d),c=dot(o,o)-1,disc=b*b-c;if(disc<0)return Infinity;const t=-b-Math.sqrt(disc);return t>1e-4?t:Infinity;}\nfunction render(){\n const angle=Number($('#angle').value),a=angle*Math.PI/180,L=norm([Math.sin(a),.8,Math.cos(a)]);\n const out=ctx.createImageData(480,320);\n for(let y=0;y<320;y++)for(let x=0;x<480;x++){\n const sx=(x-240)/91,sy=(160-y)/91,o=[sx,up[1]*sy-ray[1]*6,up[2]*sy-ray[2]*6];\n const ts=hit(o,ray),tg=(-1-o[1])/ray[1];let val=.72;\n if(ts<tg && ts!==Infinity){const p=o.map((v,i)=>v+ray[i]*ts);val=mode==='flat'?.4:.06+.60*Math.max(0,dot(p,L));}\n else if(tg>0){const p=o.map((v,i)=>v+ray[i]*tg);p[1]+=.001;const blocked=mode==='shadow'&&hit(p,L)!==Infinity;val=.11+(blocked?0:.57*L[1]);}\n const c=Math.round(255*(val<=.0031308?12.92*val:1.055*Math.pow(val,1/2.4)-.055)),i=(y*480+x)*4;\n out.data[i]=out.data[i+1]=out.data[i+2]=c;out.data[i+3]=255;\n }\n ctx.putImageData(out,0,0);\n const lx=240+L[0]*150,ly=135-dot(L,up)*130;ctx.strokeStyle='#b5790f';ctx.fillStyle='#b5790f';ctx.lineWidth=4;\n ctx.beginPath();ctx.arc(lx,ly,8,0,Math.PI*2);ctx.fill();ctx.beginPath();ctx.moveTo(lx,ly);ctx.lineTo(lx-L[0]*36,ly+dot(L,up)*36);ctx.stroke();\n selected('data-mode',mode);say('s_'+mode);$('#angle-value').textContent=viz.number(angle,0)+'°';\n $('#angle').disabled=mode==='flat';document.body.dataset.angle=angle;document.body.dataset.lightX=L[0];\n}\nreserve(['s_flat','s_form','s_shadow']);$$('button[data-mode]').forEach(b=>b.onclick=()=>{mode=b.dataset.mode;render();});$('#angle').oninput=render;render();\n","audio":false,"strings":{"angle_label":"光源の左右方向","choices":"表示する情報","flat":"輪郭を平塗り","form":"受光を追加","heading":"光の向きを変えると、どこが変わる?","intro":"まず予想しましょう。光を右へ動かすと、明るい面と床の影はそれぞれどちらへ移るでしょうか。スライダーで確かめます。","note":"単純化したモデル:遠方の単一方向光、理想的なつや消し球、一定の弱い環境光。方向光なので影の縁は硬くなります。ハイライト、多重反射、窓光の柔らかい影は再現していません。","s_flat":"円形の輪郭は同じです。均一な灰色だけでは、立体を判断する手がかりは少なくなります。","s_form":"光に向いた面は明るく、光から背を向ける面は暗くなります。床の影を消し、面の明暗だけを観察しています。","s_shadow":"球は床へ届くはずの光も遮ります。左からの光なら影は右へ、右からならその逆に伸びます。","scene":"固定カメラから見た灰色の球と床。黄色の印は光の方向です。","shadow":"投影を追加"}}
理想的なつや消し球と、遠方からの方向光を使ったモデルです。面の向きから直接の受光を計算し、光源への経路を球が遮るかを調べます。背光側も見えるよう、一定の弱い環境光を加えています。室内照明全体を再現するものではありません。
物体自身の暗い側は、その表面の一部です。投影は、物体が光を遮って別の面を暗くした領域です。 球の横に固定の黒い楕円を貼るようなものではなく、光の向きが変われば位置も変わります。
明るい部分、暗い部分を全部同じように扱わない
同じ球の模式図で、位置、縁、表面の性質を分けて比べます。これらは構造を説明する図です。光の向きを変えたときの厳密な関係は、前の操作できるモデルで確認します。
A 硬い投影、B 投影の縁を柔らかく、C 局所的なハイライト、D 輪郭の縁を確認。構造の模式図。
A
B
C
D
A 硬い投影、B 投影の縁を柔らかく、C 局所的なハイライト、D 輪郭の縁を確認。構造の模式図。
A
B
C
D
A と B:まず投影の縁を見ます。 見かけの角度の大きさが小さい光源は、硬い影をつくることが多く、窓や広い発光面では半影が生まれます。B は投影の縁を柔らかくして、「どこに影があるか」と「縁がどれほど硬いか」を分けています。実際の柔らかさは遮る物体と影を受ける面の距離でも変わります。絵全体をぼかすだけでは柔らかい照明になりません。
C:小さく強い明部はハイライトかもしれません。 ハイライトには見る方向、光源、表面の反射特性が関わります。普通の明部に白を足すだけのものではありません。広い受光面と局所的なハイライトには別の役割があり、つや消しの土器、釉薬のある陶器、金属に同じ描き方を当てはめられません。
D:外側の縁と、面の内部の変化を分けます。 球の輪郭は背景との明確な境界になっても、球面内部の明暗は連続して変わります。箱の稜では面の向きが急に変わり、明暗の区切りも明確になり得ます。「丸い物は縁を全部ぼかす」という指示では、この違いが失われます。
手順で学ぶ:淡色のカップに明暗をつくる
左側の窓の近くに、基本的につや消しのカップがあり、机に立っていることを伝えたいとします。画像を読む場合も描く場合も、次の順序で確認できます。
形、視点、左上の主光を固定します。A は輪郭と材質の地色、B は面の向きを二つの明暗に整理、C は底につながって右へ延びる投影と接触の暗さ、D で円柱面の移り変わり、内側、口縁、暗部への控えめな反射光を表します。
同じカップで各段階を見る
A
B
C
D
同じカップで各段階を見る
A
B
C
D
照明が順に変わる図ではなく、描き進める段階です。B の硬い境界は一時的な整理で、残すと折れた面に見えます。D は面の連続を示しつつ輪郭を保ち、反射光は主な明部を超えません。柔らかさで構造の問題を隠す前に、B と C で方向と接触を確認します。
材質と照明を決めます。 カップは淡色で、主光は左からです。右側が暗くても、そこだけ材質の色が変わったわけではありません。
明部と暗部を大きく分けます。 円柱状の胴が光から向きを変える様子を追います。何十段階ものぼかしを磨く前に、大きな転換を少数の群で示します。
接触と投影をつなげます。 影の始まりはカップと机の接触付近に対応し、光向きとも整合する必要があります。明らかな隙間があると浮いて見えることがあります。持ち手も光を遮るので、胴の下に無関係な楕円を置くだけでは足りません。
反射光と縁を調べます。 机から反射した光で暗側が少し明るくなることがあります。ただしこの単純な場面では、大きな暗部のまとまりに従わせ、主光の明部と競う無関係な明点にしないようにします。
細かな変化を最後に加えます。 口の厚み、持ち手の内側、局所的なハイライトや質感は材質を伝えます。大きな光向きの誤りを埋め合わせるものではありません。
これは確認の順序で、決まった灰色の配合ではありません。黒いカップ、逆光、複数のランプなら条件が変わります。
気になる見え方 最初の確認 優先する変更
紙のように平たい 面の向きに応じた明暗があるか 質感より大きな面の転換をつくる
浮いて見える 接触と投影が連続しているか 接触部と影の始点を直す
土器のつもりが光沢材に見える ハイライトが強すぎないか 局所光と広い明部の関係を比べる
濁って見える 小さな黒点や勾配が散っていないか 明暗をまとめ、構造に必要な変化を残す
次の観察画像では、面の向きの変化、他の物体による遮光、材質自体の暗さを別々に探してください。三つが同時にあっても、説明は異なります。
静物の画像に戻って見る
観察素材 · AI で生成した静物。形、明暗、色、空間を比べるためのもので、物理的な測定の根拠には使いません。
白い球の左上は明るく、右へ回ると暗くなっています。次に、卓上を右へ伸びる影を見ます。二つの手がかりは、主な光が左上から来るという読み取りを支えます。箱の上面、正面、側面も、それぞれ向きと明暗が異なります。
花瓶は外側の輪郭だけでなく、内部の明暗の移り変わりでも丸みを示しています。一方、葉の暗さには材質の色も照明も関わります。物体間の明暗差をすべて光だけで説明しないようにしましょう。
この生成画像は、手がかりを指摘するための観察素材です。光の数値を検証する用途には使いません。受光と遮蔽の一定の関係は、上の幾何実験で確かめます。
別の物体で確認:缶が机に接するのは?
左上の矢印が主光の方向で、三つの缶の材質は同じです。浮いて見える A に対し、B と C は投影を動かしています。接触を改善し、受光方向も保つ案を選び、もう一方に増えた問題を指摘してください。
別の物体で確認:缶が机に接するのは?
↘
A
↘
B
↘
C
別の物体で確認:缶が机に接するのは?
↘
A
↘
B
↘
C
先に判断してから解説を開く
B です。投影が底につながり、接触部が暗くなり、左が明るく右が暗い関係も保たれます。C は接触を直す一方で左右の明暗を逆転させました。同材質で左上に主光が一つという条件では、別の説明が必要です。一つの手がかりを直しても、他の矛盾は残ります。
別の状況で確認する
状況一: つや消しの箱を右上から照らしています。別の光源や反射の条件を示さず、左を向いた面を最も明るく描きました。何から確認しますか。
考え方の例を開く 各面が光に対してどちらを向いているかを調べ、材質の違いと照明の違いを分けます。材質が同じで主光が右上だけなら、左向きの面が特に明るい理由が必要です。「左を暗く、右を明るく」という決まりだけでは不十分で、各面の向きが判断の基準です。
状況二: 球面の明暗が同じ二つの画像のうち、一方には床の影がありません。必ず間違いでしょうか。
考え方の例を開く 必ずしもそうではありません。球が浮いていたり、床が画面外にあったり、平面的な表現を選んでいたりする可能性があります。ただし、同じ照明と接触条件を示す二枚なら、影を省いた理由が必要です。何を表す画像かを確認してから、手がかりが整合するかを見ます。
観察のための三つの問い
輪郭はどんな形か。面が向きを変えると明暗はどう変わるか。影は誰の表面に落ちているか。この三つを分けると、決まった灰色を探すよりも立体を読み取りやすくなります。
任意の実践:つやのないカップと卓上ランプを用意し、見る位置を固定してランプだけを動かします。カップ自身の暗部と机の影を別々に追ってください。完成した素描を描く必要はありません。
参考:Getty:明暗で立体を表す 、PBRT:拡散反射 。ハイライト、反射光、柔らかい影は、この基本関係を理解してから学べます。