縦横比と解像度は別のものです。800×800と2000×2000ではピクセル数が異なりますが、どちらも1:1です。比率はフレームの形を、解像度はその中を構成するピクセル数を表します。
掲載先が決まっているなら、最初に比率を合わせ、その後で必要なピクセルサイズへ縮小します。先に数字だけを合わせると、重要な部分が切れたり、画像が不自然に伸びたりします。
比率とピクセルサイズは役割が違う
16:9は、幅16に対して高さ9の形です。1920×1080、1280×720、640×360はすべて同じ形になります。ピクセル数が多い画像ほど、大きな表示や高密度ディスプレイでも鮮明さを保ちやすくなります。
目的の幅を横の比率（16）で割り、縦の比率（9）を掛けると高さを求められます。16:9で幅1200なら、高さは675です。
よく使う比率には向いている構図がある
流行だけで比率を選ぶ必要はありません。実際に画像が入る枠と、被写体の配置を基準にします。各サービスの推奨サイズは変わることがあるため、公開前に最新のヘルプを確認してください。
| 比率 | フレームの特徴 | 使いやすい場面 |
|---|---|---|
| 1:1 | 正方形 | アイコン、プロフィール、中央にまとまった被写体 |
| 4:3 | 縦方向に余裕のある横長 | 文書のキャプチャ、商品、従来型のデジタルカメラ写真 |
| 3:2 | 写真でなじみのある横長 | カメラ写真、人物と背景を一緒に見せる場面 |
| 16:9 | 幅の広い横長 | 動画サムネイル、ヘッダー、広い風景 |
中央で切り抜けばよいとは限らない
自動の中央切り抜きが合うのは、被写体も中央にある場合です。顔が片側にある、または商品の横の余白へ文字を置く予定なら、切り抜き範囲を手動で動かします。
大きなプレビューでは問題がなくても、モバイルのカードや丸いプロフィール枠では端がさらに隠れることがあります。顔、ロゴ、画像内の文字は安全な範囲の内側へ置きましょう。
- 必ず残す被写体を先に決める
- 目的の比率で切り抜き枠を設定する
- 視線の先や主要な被写体の周囲に必要な余白を残す
- 実際の表示サイズまで縮小して構図を見直す
掲載場所ごとに別の画像を作る
一つの画像をCSSだけですべての枠へ合わせると、場所によって予想外の部分が切れます。重要な画像は、正方形、横長、縦長のバージョンを分けて作る方が確実です。
ファイル名へ比率とサイズを入れると管理しやすくなります。product-blue-1x1-800.webp、product-blue-16x9-1280.webpのように区別できます。
対応形式と書き出し時の注意
GIFとアニメーションPNG・WebPは入力できません。出力は再エンコードされ、EXIF、位置情報、向き、一部のカラープロファイルなどが削除される場合があります。
別の切り抜きが必要になった場合に備え、元ファイルは上書きせず保管してください。
例：3:2の写真から16:9のヘッダーを作る
3000×2000の旅行写真を1200×675のWebヘッダーにします。画面左側にいる人物は残す必要があります。
手順
- PolishToolsの画像リサイズ・切り抜きツールで3000×2000のファイルを開きます。
- 切り抜き比率から16:9を選びます。
- 枠を左へ移動し、人物と視線の先の余白を残します。
- 出力サイズを1200×675に設定します。
- プレビューで顔が切れていないことを確認し、書き出します。
結果
人物を変形させず、16:9の枠を満たす1200×675の静止画像になります。上下の切り取った範囲は出力に残らないため、元ファイルを保管してください。
よくある質問
16:9の画像は必ず1920×1080ですか？
いいえ。1280×720や1200×675も16:9です。使用する表示サイズと必要な画質に合わせてピクセル数を決めます。
余白を入れずに別の比率へ変更できますか？
元画像の一部を切り抜けば可能です。全体を残す場合は余白が必要です。変形せずに全体を残すことと、形の違う枠を隙間なく埋めることは同時にはできません。
どこを切り抜けばよいか迷います
顔、商品、ロゴ、文字など、必ず残す要素から決めます。その後、被写体の周囲や視線の先に必要な余白を残して枠を動かしてください。