枠を付ける

画像の枠と角丸

枠を足し、角を丸め、背景は透明のまま —— 保存する前に確認できます。

枠を付ける

☞ すべてブラウザ内で処理 — アップロードは一切ありません

画像をここにドロップ

クリックして選択も可 —— PNG・JPG・WebP・GIF

ピクセルではなくパーセント

どの大きさでも同じに見える枠

枠の太さも角の丸みも、ピクセルではなく**短辺に対する割合**で指定します。これが「持ち運べる設定」と「そうでない設定」の違いです。40 ピクセルの丸みは 4000 ピクセルの写真では見えず、400 ピクセルのアイコンでは被写体を半分飲み込みます。4% はどちらでも 4% に見えます。算出されたピクセル値は読み取り欄に出るので、正確な数値が要るときも困りません。

角は同心の 2 本のパスで切り抜きます —— 外側は指定した半径、内側の画像は「半径 − 枠の太さ」。こうすると枠は曲線を回っても太さが一定で、四隅で膨らみません。丸めた外側は PNG と WebP なら本当に透明のまま。JPG にはそれができないので選んだ背景色で埋まります。だから JPG に切り替えるとその設定は自動的に無効になります。

3 ステップ

画像に枠を付ける手順

01

画像をドロップ

PNG・JPG・WebP・GIF をブラウザ内でデコードします。プロフィール写真も未公開のスクリーンショットも端末から出ません。

02

枠と角を決める

枠の太さと色を選び、角をどこまで丸めるか決めます。正方形の画像で 50% にすると結果は真円になり、アイコン用途ではたいていこれが正解です。

03

形式を選んで保存

PNG か WebP なら丸めた外側は透明のまま。JPG は透明を持てないので、そこは背景色で埋まります。

早わかり

画像の枠のよくある質問

なぜ枠をピクセルでなくパーセントで指定するのですか?

同じ設定がどの画像でも通用するようにです。ピクセル指定の枠は大きな写真では髪の毛のように細く、サムネイルでは額縁のように太くなります。短辺に対する割合ならどちらでも同じに見えます。算出されたピクセル値はプレビューの横に表示されます。

丸いアイコンはどう作りますか?

まず正方形に切り抜き、角の丸みを 50% にします。その時点で各辺の中点で弧が接し、形は真円になります。外側を透明にするため PNG か WebP のままにしてください。

角を丸めたら黒くなったのですが?

形式が JPG(透明を持てない)で、背景色を選んでいないときに起きます。このツールでは JPG を選ぶと透明の設定が自動で切れ、角は背景色で埋まるので、黒い三角が不意に現れることはありません。

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

いいえ。枠は画像の**外側**に足されるので、出力は入力より枠の太さの 2 倍だけ大きくなります。角丸で削られる部分以外、元画像は何も隠れません。

画像は再エンコードされますか?

はい —— 枠付きの結果は新しいファイルです。ここでの PNG と WebP は実質可逆、JPG は高品質で再エンコードされます。元が JPG で JPG に書き出すなら、通常どおり二世代目の劣化が乗ります。

扱える画像の上限は?

25 MB までです。枠を太くするとキャンバスも大きくなり、ブラウザにはキャンバスの上限があるため、巨大な写真に極太の枠だと収まるように縮小されます —— そのときはサイズ行がそう伝えます。

アニメーション GIF にも使えますか?

1 コマ目だけが使われ、結果は静止画になります。このツールでアニメーションは残せません。動く画像が必要なら、各コマに枠を付けてから「画像を GIF に」でまとめてください。

画像はアップロードされますか?

いいえ。画像はブラウザ内でデコードして描き直すだけで、結果はそのままダウンロードに入ります。このツールに写真を送る先のサーバーはありません。

無料ですか?

はい —— 無料、透かしなしです。