画像に枠線を追加
ブラウザ内で、あらゆる画像に色付きの枠線、内側の余白、角丸、ドロップシャドウを追加。外側の背景は透明または単色にできます。
ここに画像をドロップするか、クリックして選択
クリップボードから画像を貼り付けることもできます（Ctrl+V / ⌘V）
すべてブラウザ内で実行されます。データがアップロードされることはありません。
画像枠線とは？
画像を、任意の太さと色の単色の枠線、別の色の任意の内側の余白、角の丸み、やわらかなドロップシャドウで囲みます。フレームの外側の領域は透明のまま（角丸や影と相性が良い）にするか、背景色で塗りつぶせます。
画像枠線の使い方
- 画像をドロップ、選択、または貼り付けます。
- 枠線の太さと枠線の色を設定し、必要なら色付きの内側の余白も設定します。
- 必要に応じて角の丸みと影の大きさ/オフセットを追加します。
- 枠の外側を透明にするのままにするか背景色を選んで、ダウンロードします（PNGは透過を保ちます）。
例
入力
40×20 image, border 20 px #ff00ff, no padding, radius 0
出力
80×60 PNG whose top-left pixel is #FF00FF
画像枠線を使うべき場面
ドキュメント内でスクリーンショットを目立たせたり、写真に白い「印刷用」の縁を付けたり、SNS投稿やスライド用に角丸と影の付いた画像を作ったりするときに使います。透明な角丸や影が欲しい場合はPNG出力を使ってください。JPEGでは白で埋められます。
画像枠線の仕組み
画像より、枠線と余白の2倍に影の分の余裕を加えた分だけ大きい新しいcanvasが作られます。角丸の矩形が枠線の色で塗られ（影が有効な場合はcanvasの影の設定付き）、内側の角丸の矩形が余白の色で塗られ、画像は最も内側の角丸の矩形でクリップして描画されるため、角の丸みは写真にも適用されます。
一般的な使用例
- Instagram投稿用の写真への白いフレームの追加
- ドキュメント内のスクリーンショットへの細いグレーの枠線の追加
- 影付きの、アプリアイコン風の角丸画像の作成
- 商品画像の周囲への統一した余白の追加
セキュリティ注意事項
画像はブラウザ内でCanvas APIを使ってデコード、処理、エンコードされます。サーバーには何もアップロードされません。
よくある質問
角丸が白くなるのはなぜですか？
JPEGは透明度を保存できません。透明な角や影を保つには、出力形式にPNGまたはWebPを選んでください。
出力サイズはどのように計算されますか？
幅 = 画像の幅 + 2 × (枠線 + 余白) に、影が有効な場合は各辺の追加の余裕を加えたものです。高さも同様です。
半透明の枠線を使えますか？
色の欄は6桁のHEXの色を受け付けるため、枠線は不透明です。背景に合ったフレームが必要な場合は、枠線を0にして余白だけを使ってください。