てもとツール

画像の余白追加|切らずに正方形やSNSの比率へ整える

写真やイラストを切らずに、正方形や16:9などの比率へ余白を足して整えるツール。余白の色・ぼかし背景・寄せる位置を選べ、上下左右が何pxになったかも表示します。画像は手元のブラウザで処理します。

ブラウザ内処理 公開

クリックまたはドラッグ&ドロップで画像を選択

JPEG・PNG・WebP(最大50MB)

余白を足したい画像を選んでください

元の画像は切り取らず、指定した比率に収まるまで余白を足します

このツールについて

使い方・特徴・補足情報

画像の余白追加とは

画像の余白追加は、写真やイラストを切らずに指定の縦横比へ整えるツールです。

足りない方向へ余白を足すので、元の絵柄は端まで残ります。

比率は正方形・4:5・16:9・9:16・4:3・1.91:1から選べます。自分で「3:2」のように書いてもかまいません。

余白の背景は単色・透明・ぼかしの3種類です。ぼかしは元の画像を大きく引き伸ばして敷きます。

仕上がりは上下左右それぞれ何pxの余白になったかまで表示します。元の画像とのずれを数値で確かめてから保存してください。

こんな人におすすめ

SNSや資料に画像を載せる人

楽になること

切らずに縦横比をそろえる

避けたい手間

端が切れて見えなくなること

解決できる困りごと

  • 投稿すると端が切れてしまう画像を、切り抜かずに枠へ収める形で作り直せる
  • 画像編集アプリでキャンバスを作り直し、中央に貼り直す一連の操作がいらなくなる
  • 正方形の枠に入れたいロゴを、上下左右の余白を目分量で調整せずに中央へ置ける
  • 縦横が混ざった写真を並べるとき、比率をそろえて見た目の高さを合わせられる
  • 余白がそれぞれ何pxになったかを数値で確認してから、投稿や提出に進める

使い方

  1. 「クリックまたはドラッグ&ドロップ」の枠に画像を1枚入れます。
  2. 仕上げたい縦横比を選びます。一覧にない比率は「自分で指定」に「3:2」のように書きます。
  3. まわりに足す余白の割合を決めます。比率を合わせるだけなら0%のままにします。
  4. 画像を寄せる位置と、余白の背景(単色・透明・ぼかし)を選びます。
  5. プレビューの下に出る上下左右の余白pxを確かめます。
  6. 「画像を保存」を押して端末にダウンロードします。

使用例

横長の写真を正方形にする

上下に余白が入り、写真の左右は1ピクセルも欠けません。余白の大きさが数値で出ます。

入力

photo.jpg(1600 × 900)
比率: 正方形 1:1 / 余白: 0% / 背景: 白

出力

photo_padded.png(1600 × 1600)
余白: 上 350px / 下 350px / 左 0px / 右 0px

ロゴのまわりに余白を足す

比率は変えず、四辺に10%の余白を回した例です。円形に切り抜かれても端が欠けません。

入力

logo.png(1000 × 1000)
比率: 元の比率のまま / 余白: 10% / 背景: 透明

出力

logo_padded.png(1250 × 1250)
余白: 上 125px / 下 125px / 左 125px / 右 125px

縦の写真をストーリーズの比率にする

3:4の写真を9:16へ収め、余白をぼかし背景で埋めた例です。長辺を1080pxに指定しています。

入力

tate.jpg(1200 × 1600)
比率: 縦長 9:16 / 長辺: 1080px / 背景: ぼかし

出力

tate_padded.png(608 × 1080)
余白: 上 135px / 下 134px / 左 0px / 右 0px

活用シーン

写真の端まで見せたまま投稿する

料理や風景を撮った横長の写真を、切らずに正方形へ整えます。皿の縁や建物の端が枠の外に出ません。

アイコン用のロゴに余白を持たせる

正方形のロゴに10%ほど余白を回します。円形に切り抜く仕様のサービスでも、文字の端が欠けにくくなります。

縦横が混ざった写真の見た目をそろえる

縦の写真と横の写真を同じ比率に整えます。一覧に並べたときに高さがそろい、視線が上下に散りません。

スライドに貼る図の幅をそろえる

資料に貼る図を16:9に整えてから貼り付けます。1枚ずつ位置を直す作業が減り、余白の幅も同じになります。

商品写真の背景を白でそろえる

出品先が正方形を求める場合に、白い余白を足して比率だけ合わせます。商品自体は元の大きさのまま残ります。

スクリーンショットを縦長の枠に収める

横長のスクショを9:16へ整え、余白をぼかし背景で埋めます。画面の文字を縮めずに縦の枠へ収まります。

技術的な解説

補足: 仕組み

比率をそろえる計算は、まず「画像が余白の内側に収まる最小のキャンバス」を求めるところから始めます。指定比率で必要な幅と高さを比べ、大きいほうに合わせてキャンバスを決めます。

描画はCanvasのdrawImageで行い、寸法は丸めたあとのキャンバスから取り直します。丸め誤差で画像が枠からはみ出さないためです。

もっと詳しく

切り抜きと余白足しの使い分け

比率を変える方法は2つあります。要らない部分を切り落とすか、足りない方向へ余白を足すかです。

人物や商品が画面いっぱいに写っている写真は、切ると主役の一部が欠けます。こういう写真は余白側で合わせるほうが安全です。

逆に背景が広く写っていて、寄りの構図にしたい場合は切り抜きが向きます。切って整えたいときはリサイズ側の記事を参照してください。

アイコンの端が欠けるのを防ぐ余白の量

多くのサービスはアイコンを円形に切り抜いて表示します。正方形の四隅は表示されないため、角の近くに置いた文字は消えます。

正方形に内接する円の外側は、面積のおよそ2割です。文字やロゴの端が角に寄っている場合、余白を8〜12%ほど回すと欠けにくくなります。

実際の見え方はサービスごとに違うので、保存したあとに小さく表示して確かめるのが確実です。

ぼかし背景が向く写真と向かない写真

ぼかし背景は、元の画像を引き伸ばしてから敷き直したものです。写真の色がそのまま余白へ流れるので、単色よりなじみます。

風景や料理のように色数が多い写真ほど自然に見えます。反対に、白背景の商品写真や文字だけの画像では、ぼかしても背景がほぼ単色になり効果が薄いです。

文字を読ませたい画像は単色か透明を選んでください。背景の模様と文字が重なると読みにくくなります。

よくある質問

元の画像は切り取られますか?

切り取りません。指定した比率に収まらないときは画像のほうを縮め、上下左右の余白がそれぞれ何pxになったかを保存前に確かめられます。

余白を透明のまま保存できますか?

背景で「透明」を選ぶと、余白を塗らずに残したPNGとして書き出します。透明を保持できるのはPNGだけなので、選んだ時点で出力形式をPNGに固定します。

画像はどこかに送信されますか?

読み込んだ画像は端末の中だけで処理し、ファイルの中身を外部へ送る仕組みは持っていません。書き出しも開いているブラウザの中で終わり、できあがりはそのまま端末に保存されます。

出力の大きさを指定できますか?

詳細設定の「出力の長辺」に数値を入れると、その長さに合わせて全体を縮めます。空欄のままなら元の画像の大きさを基準にするので、投稿先が推奨サイズを示しているときだけ入れてください。

複数の画像をまとめて処理できますか?

このツールは1枚ずつ仕上げる作りです。同じ設定を何枚もの画像へ当てたいときは、画像一括加工ツールで縮小を済ませてから比率をこちらで整えると楽です。

関連記事

このツールの使い方や活用例をブログでも紹介しています。

関連ツール

同じカテゴリの他のツールも合わせてどうぞ。