画像の縦横比とサイズの基本｜切れない・ぼやけない画像の作り方

画像が切れるのは比率が合っていないから

SNSやブログの多くは、投稿された画像を決まった枠にはめ込んで表示します。このとき、画像の縦横比と枠の縦横比が違うと、枠に合わせて余った部分が切り落とされます。これがトリミング（切り抜き）です。

重要なのは、切り落とされる場所がたいてい「上下」または「左右」の端だということです。つまり、縦長の画像を横長の枠に入れると上下が消え、横長の画像を正方形の枠に入れると左右が消えます。文字やロゴを端に置いていると、真っ先に犠牲になります。

よく使う縦横比と用途

実務で使う比率はそれほど多くありません。次の5つを押さえておけば、たいていの場面に対応できます。

表の1.91:1は、URLを共有したときに出るプレビュー画像でよく使われる比率です。プロフィールカードメーカーが1200×630pxのPNGで書き出すのも、この用途にそのまま使えるサイズだからです。SNSに貼っても、ブログのアイキャッチにしても収まりが良い比率です。

各サービスの推奨サイズは変わることがあるため、正確な数値は公式のヘルプで確認してください。ただし比率そのものは大きく変わらないので、上の5つで作っておけば、あとから多少の調整で対応できます。

どこに置いても切れない「セーフエリア」の考え方

同じ画像が複数の場所で使われる場合、表示枠を1つに決めることはできません。そこで有効なのが、切られても困らないように中央に情報を集めるという考え方です。

1. 1

   ①一番大事な要素を中央に置く

   顔、ロゴ、タイトル文字は中央寄せにします。四隅は「切られる前提の飾り」と割り切ると、どの枠に入れても破綻しません。

2. 2

   ②上下左右に1割ずつ余白を確保する

   画像の外周およそ10%は、文字を置かない領域として空けておきます。これだけで、正方形にトリミングされたときの事故がほぼなくなります。

3. 3

   ③正方形に切ってみて確認する

   横長の画像なら、中央を正方形に切ったときに意味が通じるかを見ます。ここで成立していれば、たいていの枠で耐えられます。

4. 4

   ④文字は小さくしすぎない

   一覧表示では画像が数分の一に縮小されます。原寸で読めても、縮小したら潰れる文字サイズは避けてください。目安は、画像の高さの5%以上です。

ぼやける原因は「拡大」にある

画像は小さなマス目（ピクセル）の集まりです。縮小するときは情報を捨てるだけなので破綻しませんが、拡大するときは元になかった情報を作り出すため、必ず甘くなります。ぼやける画像の原因は、ほぼすべてこの拡大です。

さらに、スマートフォンやノートPCの多くは高精細な画面を持っており、表示上100pxの場所に実際は2倍の200px分を表示できます。表示サイズと同じピクセル数で作ると、こうした画面ではぼやけて見えます。表示予定サイズの2倍で作っておくのが安全です。

• ブログの本文画像：横1600px前後で作り、表示は800px程度に収める
• SNSのアイコン：800×800px以上で用意する（表示は数十px〜数百px）
• サムネイル：1280×720px（16:9）で作る
• リンクカード用：1200×630px（1.91:1）で作る
• 印刷に回す可能性があるなら、上記の2〜3倍で作っておく

作ってから公開するまでの流れ

1. 1

   ①用途を決めてから比率を選ぶ

   先に「どこで使うか」を決めます。あとから比率を変えると、必ずどこかが切れるかレイアウトが崩れます。

2. 2

   ②推奨サイズより大きめに作る

   縮小は劣化しません。迷ったら大きいほうを選んでおくと、別用途への転用も効きます。

3. 3

   ③中央に情報を集めて仕上げる

   外周1割を空け、文字は画像の高さの5%以上を確保します。プロフィールカードメーカーのように、あらかじめ余白を計算したテンプレートを使うのも手です。

4. 4

   ④用途に合う形式へ変換する

   写真中心ならJPEGかWebP、文字やロゴ、透過が必要ならPNGです。画像形式変換ツールでは形式を選んで変換でき、JPEGとWebPは品質も調整できます。

5. 5

   ⑤変換後のファイルサイズを確認する

   変換ツールは変換後の容量と削減量を表示します。アップロード先に上限がある場合は、この数値を見てから品質を微調整してください。

画像形式変換ツールでの処理はブラウザ内で完結し、画像はサーバーに送信されません。未公開の資料やプロフィール写真を扱うときも、そのまま使えます。

よくある質問

アスペクト比とは何ですか？

画像の横と縦の長さの比のことです。1200×630pxなら約1.91:1、1080×1080pxなら1:1です。ピクセル数が違っても比が同じなら、拡大・縮小されるだけで内容は切れません。

画像が上下だけ切られてしまいます。どうすればいいですか？

表示枠より縦長の画像を使っているのが原因です。表示先の比率（多くは1.91:1か16:9）に合わせて作り直すのが確実です。すぐに直せない場合は、重要な要素を中央に寄せるだけでも被害を減らせます。

小さい画像を大きくしてもきれいにできますか？

基本的にできません。拡大は存在しない情報を推測で補う処理なので、輪郭が甘くなります。元データが残っているなら作り直すのが最短で、残っていない場合は、そのサイズで収まるレイアウトに変えるほうが結果的にきれいに見えます。

スマホで撮った写真はそのまま使えますか？

解像度は十分ですが、比率が4:3や3:4のことが多いため、そのままだと切れる場所が読めません。使う枠の比率に合わせて先にトリミングし、そのうえで形式と容量を調整してからアップロードするのが安全です。