Webに載せた円が楕円に見える 完成画像の形と掲載寸法を照合する

完成した作品の円が、Webの紹介画面では縦長に見える。原図を描き直す前に、同じ完成画像が縦横同じ倍率で載っているかを確かめます。作品全体が見えていても、形の比率まで保たれているとは限りません。

編集者へ渡したいのは、画像と「正しく載せてほしい」という言葉だけではありません。残したい形の基準、掲載枠の寸法、枠の中で画像が実際に占める寸法をそろえると、原作品を直す依頼と掲載方法を調整する依頼を分けられます。

円と正方形を、完成画像へ戻して見る

作品「丸と四角の間」1.0は、横1440・縦960ピクセルの完成画像です。左の紺の円と、右の赤茶・黄土の二つの正方形を、それぞれの形のまま残します。青緑の線、各要素の位置、間の空き、四辺の余白も確認の基準です。

掲載画面の円だけを見ると、原図の描き方を変えたくなるかもしれません。先に同じ完成画像へ戻り、円の縦横と正方形の辺を見比べます。円だけでなく二つの正方形も縦長になっていれば、画像全体の縦横がどう縮められたかを確かめる手掛かりになります。

360角の枠で、合わせ方だけを変える

同じ完成JPEGの全範囲を、同じ360×360の枠へ表示して比べました。背景色、中央への配置、画像の版と補間の指定をそろえ、枠への合わせ方だけを変えています。元のSVGと完成JPEGは変更していません。

Aでは、画像全体と四辺が載りましたが、円が楕円に、二つの正方形が縦長の長方形に見えました。横は1440から360へ4分の1、縦は960から360へ8分の3になり、縦と横で縮む割合が違うためです。

Bでは、縦横とも4分の1で縮めた画像が360×240になり、円と正方形の縦横関係が完成基準に対応しました。360角の枠の中央に置くため、上下には60ずつ空きが残っています。両方とも全体を載せた表示なので、違いは見せる範囲ではなく、縦横の倍率にあります。

同じ原画像を載せたときの表示寸法

確認する寸法	A：枠へ縦横を合わせる	B：縦横比を保つ
掲載枠	360×360	360×360
枠内の画像	360×360	360×240
画像の外側の空き	なし	上60・下60

表は、このブラウザーで比べた表示寸法です。枠の寸法と、その中に描かれる画像の寸法を分けて記録しています。

枠の空きと、作品の余白を分けて指定する

この作品を円と正方形のまま渡すなら、Bのように縦横を同じ倍率で載せる条件を指定できます。そのうえで、正方形の枠が必要なのか、画像の3対2の比率に沿った掲載枠を使えるのかを編集者と相談します。

正方形枠を使う場合、上下の空きを作品の一部と混同しないことも大切です。元画像の淡い地にある四辺の余白は作品に含まれます。図の灰色は、原比率のまま収めた結果、掲載枠の側に残った空きです。空きを減らすために作品自体を縦へ伸ばすと、残したい円と正方形の形が変わります。

受け渡しでは、原画像と完成基準に、掲載予定の場所・枠の寸法・違って見える形を添えます。今回の条件なら、たとえば次のように伝えられます。

このJPEGの全体を、円と二つの正方形の比率を変えずに掲載したいです。360×360の枠を使う場合は、画像を360×240で中央へ置き、上下の空きが残る形で確認してください。原画像の配置と四辺の余白は保ってください。

寸法をまだ決めていなければ、数字を推測で埋めず、掲載候補の画面と残したい形を渡します。調整後は、枠が埋まったかだけでなく、完成基準の円・二つの正方形・線・四辺へ戻って見比べます。

原図の修正と掲載調整を分けて相談する

今回の比較では、完成画像を描き直さず、掲載条件を変えることで形の比率を保てました。ご自身の作品でも、まず基準にする原画像を確定し、形の変更を依頼するのか、原形を保った掲載寸法の調整を依頼するのかを分けて伝えます。

複写の作品集・カタログ・Web制作では、お持ちの作品画像や原稿から、見せる相手と掲載する内容に合わせて紹介ページを考えます。原画像、作品名と版、残したい形、掲載候補の画面、確認した寸法とブラウザー、画像を使う範囲を添えてご相談ください。

原形式の受付、掲載寸法や表示コードの調整、費用、公開後の更新までどこを依頼するかは、素材と掲載先を見ながら個別に確かめます。作品画像と掲載方法の相談はこちらから、原図を変えたい箇所と、掲載側で保ちたい形をお知らせください。