画像枠線追加 — 太さ・色・内側余白を指定したフレームを Canvas で合成
画像 1 枚に枠線 (ボーダー) と内側余白 (マット) を追加するシンプルツール。枠の太さ (0〜200 px) と色 (HEX)、画像と枠の間の内側余白 (写真のマット風) を指定。写真風の白マット + 黒細枠も組合せ可能。出力は PNG (透過) / JPEG / WebP + 品質スライダ。SNS 投稿・ポートフォリオ・プレゼン資料用の整った見た目を 1 クリックで。Canvas で完結し、画像はブラウザ外に送信されません。
使い方
画像をドロップして、枠の太さ (0〜200 px) と色 (HEX) を指定します。さらに『内側余白』を入れると、写真のマット (白いふち) のように画像と枠の間にスペースが入り、ポラロイド風や額装風の見た目になります。プリセットから細枠 / ポラロイド / 写真マット / SNS 余白 を 1 クリックで適用可能。出力は PNG (透過) / JPEG / WebP。Canvas で合成するので大きい画像でも数秒で完了します。
よくある質問
- 枠と『内側余白』の違いは何ですか?
- 枠 (border) は画像の最も外側を囲む色付きのリング。内側余白 (inner margin) は枠と画像の間の追加スペースで、色を変えるとマット (写真フレーム内側の白いふち) になります。両方をゼロにすると元画像そのまま、太さ 0 + 内側余白 + 白色 にすると枠なしのポラロイド風が作れます。
- 出力サイズはどう決まりますか?
- 元画像の幅 / 高さに『(枠の太さ + 内側余白) × 2』が追加されます。例: 1000×800 の画像に枠 6 px + 内側余白 40 px をつけると 1092×892 になります。
- JPEG を選んだら透過が黒くなりました
- JPEG は透過に対応していないため、透過のままだと黒で塗り潰されます。内側余白の色を白などに変更するか、PNG または WebP を選んでください。
- 枠が太すぎて画像が小さく見えます
- プリセット『細枠 4 px』『SNS 余白 32 px』などを試してみてください。スライダで 0〜200 px まで自由に調整可能です。アスペクト比を維持したい場合は太さを画像の短辺の 5〜10% 以下に抑えるのが目安です。
- 角を丸めたい場合は?
- 角丸が必要な場合は『画像の角丸ツール』(image-rounded-corners) を併用してください。先に枠を追加 → ダウンロード → 角丸ツールで再度丸める、の順で組み合わせ可能です。
類似のツール
画像の角を丸める
画像の四隅を角丸にして透過 PNG / JPEG / WebP として書き出します。半径は px 指定 (短辺の最大半分まで)、四隅を個別に on/off (TL/TR/BR/BL) して半円・カプセル形・カードコーナーも作成可能。背景は透過 (PNG/WebP) または任意色で塗り潰し (JPEG など透過非対応形式用)。SNS プロフィール画像・アプリアイコン・カードサムネ・shadcn 風 UI 用の素材作成に。Canvas で完結し、画像はブラウザ外に送信されません。
画像ウォーターマーク — 文字 / 画像で透かし合成
画像にテキストまたは別の画像で透かしを重ねます。Canvas で合成するのでブラウザ内だけで完結。位置 (9 グリッド)・サイズ・不透明度・余白を細かく調整でき、複数画像を一括処理して ZIP でダウンロードできます。出力フォーマットは元と同じ (PNG / JPEG / WebP)。
画像コラージュ — グリッド / 横 / 縦に結合
複数の画像をグリッド、横一列、縦一列で 1 枚の画像に結合します。Canvas で合成するためブラウザ内だけで完結。列数・隙間・余白・背景色・出力形式 (PNG / JPEG / WebP) を調整でき、並び順を上下ボタンで入れ替え可能。
AVIF を JPG / PNG / WebP に変換 — 古い Safari でも開ける形式へ
ブラウザネイティブの AVIF デコーダで .avif 画像を読み込み、JPEG / PNG / WebP として書き出します。AVIF はファイルサイズが小さく Web 配信向きですが、古い Safari やビューアでは開けないことが多く、メール添付や Office / Slack などへの貼り付けにも不向きです。複数ファイルを一括変換して ZIP でまとめてダウンロードもできます。アップロードした画像は外部に送信されず、すべての処理はブラウザ内で完結します。