画像の角丸加工と枠線追加

角を丸くしたり、円形に切り抜いたり、透過背景のまま色付きの枠を付けたりできます。複数の画像をまとめて処理でき、すべてブラウザ内で完結します。

ここに画像をドラッグ
クリックして選択することもできます — JPG・PNG・WEBP対応。複数まとめて選べます。

角を丸くして枠線を付ける方法

まずは画像をアップロード欄にドラッグするか、そこをクリックしてファイル選択画面を開きます。Ctrl(Macでは Cmd)を押しながら選べば複数の写真を一度に読み込めます。対応形式はJPG・PNG・WEBP・GIF・BMPです。2枚以上読み込むとプレビューの上にファイル名のタブが並ぶので、クリックして切り替えれば各写真の仕上がりを確認できます。プレビューのすぐ下には、追加した枠線も含めた最終的な寸法がピクセルで表示されます。

最初に決めるのは形状です。「角丸」は写真の縦横比をそのままに、角だけをやわらかくします。「円形」は中央を1:1で切り抜いてから丸いマスクをかけます。縦長の人物写真を無理に円に押し込んだときに起きるつぶれを避けられるため、プロフィール写真やアイコンにはこちらが適しています。「正方形」は中央を1:1で切り抜くだけで、角は丸めません。角丸モードでは、半径のスライダーが短いほうの辺に対する割合で丸みを決め、その下の4つのボタンで角を個別に無効にできます。クリックすればその角だけ直角に戻ります。

枠線の太さはピクセル単位で指定し、画像の外側に描かれるため元の内容が切れることはありません。値が0を超えると、色選択、16進コードの入力欄、8色のパレットが現れます。枠線は選んだ形状の曲線に沿うので、円形モードではきれいなリングになります。「やわらかい影」を有効にすると画像の背後に軽い陰影が加わり、明るい背景に置くサムネイルで効果を発揮します。透過背景は初期状態で有効になっており、これが切り抜いた角を本当に抜けた状態に保ちます。

最後にダウンロード形式を選びます。おすすめはPNGで、画質を落とさずに角の透明部分を保てます。WEBPも透明度を維持しつつファイルが軽くなるため、サイトでの利用に向いています。JPGは透明度に対応していないため、選ぶと角が設定した背景色で塗りつぶされます。表示中の写真だけを保存するなら画像のダウンロードボタン、同じ設定を適用した全ファイルを.zipで受け取るならすべてダウンロードを使ってください。

よくある質問

画像はサーバーに送信されますか?
いいえ。切り抜きも枠線の描画も、Canvasを使ってブラウザ内で行われます。ファイルがインターネットに送信されることはありません。
複数の画像の角をまとめて丸くできますか?
はい。何枚でも読み込めます。丸みの半径、枠線、形式の設定はすべての画像に同じように適用されます。ダウンロードは1枚ずつでも、.zipにまとめてでも行えます。
保存すると角丸の部分が白や黒になってしまうのはなぜですか?
透明度に対応していないJPGで書き出したときに起こります。切り抜いた部分を何かの色で埋める必要があるためです。角を本当に抜いた状態にするには、形式でPNGかWEBPを選び、透過背景のチェックを入れたままにしてください。どうしてもJPGが必要な場合は、画像を使うサイトや資料の色に合わせて背景色を指定しておきましょう。
サイトのサムネイルやカードにはどのくらいの丸みがよいですか?
最近のUIでは、短いほうの辺の8〜16%程度がよく使われます。100pxのサムネイルならおよそ8〜16pxにあたります。25%を超えるとカプセル型のボタンのような見た目になり、50%では長方形が円や楕円になります。サイトのカードにCSSで丸みを指定しているなら、同じ比率を画像にも適用するときれいに収まります。
枠付きの丸いプロフィール写真を作るには?
形状で「円形」を選んでください。マスクをかける前に中央を1:1で切り抜くため、縦長の人物写真がつぶれることはありません。次に枠線の太さを10〜30px程度に上げ、色を選びます。書き出しはPNGにすると、円の外側がどんな背景でも透明のまま保たれます。LinkedIn、Discord、LINEをはじめ、ほとんどのサービスがこの形式を受け付けます。
一部の角だけ丸くできますか?
はい。角丸モードには角ごとに4つのボタンがあります。直角のままにしたい角をオフにしてください。カードの上端にぴったり付く画像で下の角だけ丸めたいときや、画面の端に揃えるバナーなどで役立ちます。
枠線を付けると画像は大きくなりますか?
はい。枠線は写真の外側に描かれるため、800×600pxの画像に20pxの枠を付けると840×640pxになります。元画像の範囲は切り取られることなくそのまま保たれます。最終的な寸法はプレビューの下に表示されます。
他のツールも使ってみる
関連記事
すべての記事を見る →