メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
画像・軽量ファイル
/
画像余白追加
▨
画像余白追加
image/image-padding
画像の周囲に余白(パディング)を追加。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
画像余白追加では、画像の周囲に余白(パディング)を追加。
関連する観点として 画像余白、画像パディング、image padding を確認し、結果をコピーして別の作業に使えます。
余白: 20px
背景色
生成
使い方
ファイル選択から画像を1枚選びます。
余白 スライダーで上下左右に足すpx数を決めます。
背景色 で余白部分を塗る色を選びます。
生成 ボタンでCanvasへ描画し、プレビューの外側サイズを確認します。
ダウンロード ボタンで padded.png として保存します。
入力例・出力例
INPUT
100×50px画像、余白20px
OUTPUT
140×90pxのPNG
node -eで 100+20*2 と 50+20*2 を検算。
INPUT
800×600px画像、余白0px
OUTPUT
800×600pxのPNG
余白を0にするとCanvasサイズは元画像と同じです。
よくある利用シーン
SNSやサムネイル用に、被写体の周囲へ白やブランド色の余白を均等に足したいとき。
トリミングせずに画像の外側サイズだけを大きくしたいとき。
アイコンや商品写真を中央に残したまま、正方形に近い見え方へ寄せたいとき。
結果確認のポイント
出力サイズ、縦横比、ファイル形式、画質が用途に合っているか確認してください。
画像余白、画像パディング、image paddingの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
重要な元画像は別に保存し、必要に応じて元データと比較してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
画像余白追加の主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
余白の色を透明(アルファチャンネル)にすることはできますか?
現在の余白色は色入力で指定する単色です。透明余白やアルファ値の個別指定はありません。透過を前提にした処理が必要な場合は、専用の画像編集ツールで確認してください。
上下左右それぞれ異なるサイズの余白を設定できますか?
いいえ。現在は1つの余白px数を上下左右すべてに同じ量で追加します。左右だけ、上下だけ、各辺別々の余白量を指定する機能はありません。
余白追加後の画像は元のアスペクト比から変わりますか?
変わる場合があります。上下左右へ同じpx数を足すため、元画像が正方形でない場合は外側サイズの縦横比が元画像と完全には一致しないことがあります。
関連ツール
画像圧縮
画像をブラウザ上で圧縮・軽量化。JPEG/WebP出力、品質スライダーで調整。サーバーにアップロード不要で安全。
alt属性チェックリスト
装飾画像、情報画像、リンク画像、キャプション重複、125文字目安など alt 属性の判断項目を表で確認できます。
アスペクト比計算機
幅と高さからアスペクト比を計算。16:9やカスタム比率でリサイズ後のサイズも算出。
バナーサイズ一覧
Leaderboard、Medium Rectangle、Mobile Banner など代表的な広告バナー寸法を一覧表示します。
ダミー画像生成
指定サイズのダミー画像(プレースホルダー)をCanvas APIで生成。色・テキスト・フォーマット指定可能。Webデザインに。
favicon生成
1〜2文字またはアップロード画像から 16/32/48/180/192/512px の PNG favicon を canvas で生成します。
ファビコンサイズ一覧
16×16 から 512×512 までの favicon 用途、HTML link タグ、manifest icons の雛形を確認できます。
<figure>タグ生成
入力した画像 URL を src に入れ、loading と decoding を付けた figure/figcaption の雛形を生成します。