画像の余白追加|切らずに正方形や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枚入れます。
- 仕上げたい縦横比を選びます。一覧にない比率は「自分で指定」に「3:2」のように書きます。
- まわりに足す余白の割合を決めます。比率を合わせるだけなら0%のままにします。
- 画像を寄せる位置と、余白の背景(単色・透明・ぼかし)を選びます。
- プレビューの下に出る上下左右の余白pxを確かめます。
- 「画像を保存」を押して端末にダウンロードします。
使用例
横長の写真を正方形にする
上下に余白が入り、写真の左右は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枚ずつ仕上げる作りです。同じ設定を何枚もの画像へ当てたいときは、画像一括加工ツールで縮小を済ませてから比率をこちらで整えると楽です。
関連記事
このツールの使い方や活用例をブログでも紹介しています。
関連ツール
同じカテゴリの他のツールも合わせてどうぞ。