同じ写真でも、切り取り方を変えると主役が変わることがあります。同じ物体を片側に集めたり、周囲に空間を残したりすると、安定感、密度、広がりも変わります。
構図は、画面内の関係を整えて表現の意図を支えることです。 調整する前に、「花瓶の形を強調する」「物体同士の関係を見せる」など、意図を一文にしましょう。
細部より先に全体を見る
画像を小さくすると、細部が減って、大きな明暗、色、空白のまとまりが見えやすくなります。意図した主役はまだ識別できるでしょうか。別の大きな面や強い縁が競合していないでしょうか。
「視覚的な重さ」は、面積、対比、位置、細部などによって、ある部分がどれほど重く感じられるかを表す言葉です。画素を量ることではなく、全員の見る順序を一つの式で計算できるわけでもありません。
A は三つの物体の関係を残し、B は花瓶が画面を大きく占めています。どちらも異なる意図に使えます。残した情報と、失った情報の両方を説明します。
画面の枠も選択の一つ
枠は、画像に入れるものと切り落とすものを決めます。空白を削ると対象が引き締まって見えることがありますが、重要な輪郭の転換点を切ると識別しにくくなる場合もあります。
二つの縁がちょうど接すると、前後関係が曖昧になることがあります。はっきり離すか、重なりを明確にすると改善するかもしれません。ただし「縁は接してはいけない」という禁止ではなく、その接触が表現を妨げているかを見ます。
比率の決まりより、切り取りの比較
実験では素材の形、色、内部の比率を固定します。切り取る範囲を選んだ後、素材全体と画面の枠の位置関係をスライダーで変えます。
図を準備しています
同じ素材で画面の切り取り方を変える素材の色と内部の比率を固定し、全体、近い切り取り、花瓶のアップで見える範囲を変えます。スライダーは素材全体を横に動かし、画面端との距離を比較します。構図の点数は表示しません。
{"id":"composition-and-crop","title":"同じ素材で画面の切り取り方を変える","summary":"素材の色と内部の比率を固定し、全体、近い切り取り、花瓶のアップで見える範囲を変えます。スライダーは素材全体を横に動かし、画面端との距離を比較します。構図の点数は表示しません。","height":680,"html":"<h2 data-i18n=\"heading\"></h2><p data-i18n=\"intro\"></p><svg class=\"scene\" viewBox=\"0 0 480 300\" role=\"img\" data-i18n-label=\"scene\" xmlns=\"http://www.w3.org/2000/svg\"><defs><clipPath id=\"frame\"><rect x=\"0\" y=\"0\" width=\"480\" height=\"300\"/></clipPath></defs><g clip-path=\"url(#frame)\"><g id=\"arrangement\"><rect x=\"-1000\" y=\"-1000\" width=\"2500\" height=\"2500\" fill=\"#d8d3c9\"/><rect x=\"-1000\" y=\"210\" width=\"2500\" height=\"1200\" fill=\"#b4aaa0\"/><path d=\"M150 65 H192 V100 C192 126 232 145 222 191 L211 245 H131 L120 191 C110 145 150 126 150 100 Z\" fill=\"#536a78\"/><rect x=\"273\" y=\"158\" width=\"73\" height=\"75\" fill=\"#b7733e\"/><circle cx=\"364\" cy=\"248\" r=\"30\" fill=\"#eee8dc\"/></g></g><rect id=\"crop-outline\" x=\"95\" y=\"30\" width=\"270\" height=\"250\" fill=\"none\" stroke=\"#342e29\" stroke-width=\"2\" stroke-dasharray=\"7 5\"/></svg><div class=\"controls\" role=\"group\" data-i18n-label=\"choices\"><button type=\"button\" data-mode=\"whole\" aria-pressed=\"false\" data-i18n=\"whole\"></button><button type=\"button\" data-mode=\"crop\" aria-pressed=\"false\" data-i18n=\"crop\"></button><button type=\"button\" data-mode=\"tight\" aria-pressed=\"false\" data-i18n=\"tight\"></button></div><label for=\"shift\" data-i18n=\"shift_label\"></label><input id=\"shift\" type=\"range\" min=\"-45\" max=\"45\" value=\"0\" step=\"1\"><output id=\"shift-value\" for=\"shift\" 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\nlet mode='whole';\nfunction render(){const shift=Number($('#shift').value);let scale=mode==='tight'?1.55:mode==='crop'?1.2:1;\n const x=mode==='whole'?shift:mode==='crop'?-50+shift:-24+shift;\n $('#arrangement').setAttribute('transform',`translate(${x} ${mode==='whole'?0:-18}) scale(${scale})`);\n $('#crop-outline').style.display=mode==='whole'?'':'none';$('#shift-value').textContent=viz.number(shift,0);selected('data-mode',mode);say('s_'+mode);document.body.dataset.shift=shift;document.body.dataset.scale=scale;\n}\nreserve(['s_whole','s_crop','s_tight']);$('#shift').oninput=render;$$('button[data-mode]').forEach(b=>b.onclick=()=>{mode=b.dataset.mode;$('#shift').value=0;render();});render();\n","audio":false,"strings":{"choices":"切り取り方","crop":"少し寄る","heading":"画面の枠が変わると、関係はどう変わる?","intro":"三つの切り取り方を比べます。次に素材全体だけを動かし、端までの距離、余白、切れる物体を観察しましょう。","note":"平面の切り取り実験です。実際のカメラ移動や透視の変化はありません。素材内部の比率と色を固定し、拡大率と移動量で切り取り範囲と位置を変えます。","s_crop":"寄ると対象が大きくなり、周辺の情報が減ります。端の物体を残すか切るかで、伝える内容も変わります。","s_tight":"花瓶に寄ると注目する範囲は狭まりますが、物体同士の関係は一部失われます。大切な形が切り口で分かりにくくならないか確認します。","s_whole":"全体表示は花瓶、箱、球の関係を残します。破線は切り取りの一案で、よりよい構図を保証する枠ではありません。","scene":"花瓶、箱、球の平面的な素材を、異なる切り取りと横移動で表示します。","shift_label":"素材全体を左右へ移動","tight":"花瓶を大きく","whole":"全体を見る"}}
花瓶に寄ると花瓶は大きくなりますが、箱と球の関係は一部失われます。配置を説明する目的なら情報を減らしすぎかもしれません。瓶身の形を強調したいなら、その取捨選択を受け入れられる場合があります。
この実験は平面の拡大と切り取りです。実際にカメラを動かすと透視も変わるため、同じ操作ではありません。
余白、反復、方向が果たす役割
第三篇のネガティブスペースは、構図では意図的に配置できる空間です。対象同士や画面端までの距離に関わります。余白が多ければ洗練され、少なければ窮屈になると決まってはいません。意図を支えているかで判断します。
形の反復はリズムをつくり、反復の中の一つの変化は強調になり得ます。縁や並びの方向は見ていく道筋を示唆しますが、図の矢印は実際の眼球運動の記録ではありません。
三分割、対称、対角線は試せる配置方法です。必ず美しくなる保証はありません。全体を比較してから、その補助線が本当に役立ったかを判断します。
手順で学ぶ:同じ小舟で二つの意図をつくる
AI で生成した観察素材です。画像の手がかりを比較し、厳密な幾何関係は本文の作図で確認してください。
舟は左寄りで、右側に広い水面が残り、遠山の対比は近くの岩より弱くなっています。変更前に意図を選びましょう。「湖の広さ」を示すなら舟が尺度の手がかりとなり、「舟そのもの」を紹介するなら大きさ、材質、輪郭が重要になります。
A:環境にも内容を担わせます。 舟が最大の面積を占める必要はありません。広い水面が舟と環境の尺度を比較させ、色の違いが対象を読み取れる状態に保ちます。ここでの余白は距離を示しており、飾りを埋める空きではありません。
B:寄ると情報が変わります。 舟の画框に対する割合が増え、環境は減ります。舟の説明には役立っても、広がりの表現を弱めるかもしれません。切り取りで新しい細部は生まれず、既存の情報が目立つ大きさになります。
C:向きと画框を比べます。 舟を右端へ寄せると前方の空間が減り、窮屈さが生じる場合があります。向きと空間に関係をつくれるので前方を空けるのは一つの出発点ですが、閉塞や退出を表したければ逆の選択もできます。「必ず左三分の一に置く」では理由になりません。
D:意図しない競争相手を調べます。 左下の暗い前景が大きくなると、舟と競う可能性があります。強い対比の隅、明点、強い斜線、大きな暗面も画面の重さに関わります。岩を一部切る、対比を弱める、または意図的に第二の情報として残す選択ができます。
構図案をつくる五つの手順
- 比較できる意図を書きます。 「もっとよく」より「先に舟、その後に右の広い水面を感じる」なら二案を比較できます。
- 小さな図で大きな群を決めます。 舟、水、山、岸を残し、水紋は後にします。横長、縦長、近い切り取りを比べます。縦横比はファイル寸法だけでなく空間配分を変えます。
- 強調の主な方法を一、二個選びます。 局所の色差と余白、あるいは大きさと位置を組みます。全部を大きく、明るく、鮮やかにすると階層が消えます。
- 端、接触、接線を調べます。 船首が画框に触れそうか、岸線が舟の縁にちょうど接して形を癒着させていないかを見ます。明確に離すか、意図した重なりにして、曖昧な接触を避けます。
- 縮小図へ戻ります。 新案が何を加え、何を失ったかを説明します。意図に必要な情報を失ったなら戻し、規則に合うからという理由だけで変更を残さないようにします。
対称、バランス、リズムには実際の役割がある
対称は左右に明確な対応をつくり、安定、儀式性、正面からの紹介などに使えます。非対称でも、面積、明暗、位置の異なる要素でバランスをつくれます。小さく対比の強い物が、大きく穏やかな領域と関係することもあります。「重さ」は画面を説明する比喩で、面積から直接求める物理的なモーメントではありません。
似た間隔の小舟が並ぶと、形の共通性と間隔がリズムをつくります。その中で一隻だけ向き、色、間隔が変わると、その差が目立ちやすくなります。全部の大きさ、色、向きが違えば共通の基準は弱くなります。強調には、周囲が先に共通条件をつくることも必要です。
紙面でも同じです。一貫した本文、繰り返す余白、関連したカード様式が基準となり、見出しや重要な図の差が明確になります。このシリーズは観察と修正の方法で締めくくり、修了作品は求めません。
五枚の展示カードで確認:強調と周囲の関係
面積と間隔は同じで、中央の三枚目を強調します。A は一枚目が橙、B は三枚目だけが橙、C はすべて別の色。目的に最も直接合うのはどれでしょう。C は必ず悪いのでしょうか。
先に判断してから解説を開く
B は周囲四枚の一貫性により、三枚目の色差を明確にします。面積や位置は変えていません。A は一枚目の強調に向きます。C は反復の中の一つの変化を弱めますが、同格の五分類には使えます。一つを強調するのか複数を区別するのかで判断します。
最後の二つの確認
状況一: 主体を三分割の交点に置いたのに、画面端の明るい物体のほうが目に入ります。さらに調整を考えるべきでしょうか。
考え方の例を開く
主体を強調したいなら、検討する価値があります。位置は一要因です。端の物体の対比を下げる、切り取りを変える、大きさの関係を変えるなどして全体を比べます。補助線に合っているだけでは意図が明確とは言えません。
状況二: 主体の移動、背景色の変更、画面の半分の切り取りを同時に行い、好みの結果になりました。どの操作が効いたか分かりますか。
考え方の例を開く
直接は判断できません。元の画像を残し、位置だけ、色だけ、切り取りだけを変えた案を並べて比較できます。制作ではまとめて調整しても、関係を学ぶときは変更を絞ると原因を見やすくなります。
ここまでの方法はつなげて使えます。明暗を比べ、立体を読み、形を確かめ、奥行きの手がかりを探し、色を説明し、画面全体での役割を見ます。理解を示すために完成作品を作る必要はありません。新しい画像で関係を指摘し、合理的な修正を一つ説明できれば、有用な前進です。
任意の実践:同じ写真を二通りに切り取り、それぞれの重点を一文で説明します。唯一の正しい構図を探すより、元の画像を比較用に残しましょう。
参考:Getty:デザインの原則、Getty:切り取り、視点、光から写真を読む。