角丸画像ジェネレーター

この角丸ツールが違う理由: 各角に独自の半径を設定でき、半径はピクセルまたは短辺に対するパーセントで指定でき、角そのものは通常の角丸アーク、なめらかなスクワークル、直線のベベル、内側にえぐるスクープのいずれにもできます。ツールは一致するCSS border-radiusルールも表示するので、同じ形をファイルではなくコードで再現できます。

画像の角を丸める理由

画像に角丸を付ける方法

1. 画像を読み込む。 ドロップ領域にファイルをドラッグするか、画像を選択を選びます。JPG、PNG、WebP、GIF、BMP、AVIF、SVGは、ブラウザがデコードできる限りすべて使えます。
2. 半径を設定する。 プレビュー上の丸い角ハンドルをドラッグするか、角の半径スライダーを動かすか、正確な数値を入力して単位をpxと%で切り替えます。
3. 角のスタイルを選ぶ。 角丸、スクワークル、ベベル、スクープ。四隅を連動をオフにすると、各角に独自の値を付けられます。画面上の配置は、操作する角そのものと同じです。
4. 必要ならパディング、背景、枠線を追加する。 パディングは絵の周りにキャンバスを広げ、背景がそれを塗り、ボーダーリングは古い長方形ではなく角丸の輪郭に沿います。
5. ダウンロードする。 透けて見える角にはPNGのまま、画像をダウンロードをクリックします。パネルに書き出し寸法とファイルサイズが表示され、CSS欄に同等のスタイルシート規則が出ます。

ピクセルの半径とパーセントの半径

ピクセルの半径は絶対値です。32 pxは画像が400ピクセルでも4000ピクセルでも32 pxなので、同じ値でも小さなサムネイルでは大きく見え、大きな写真ではほとんど目立ちません。パーセントの半径は画像の短辺を基準に測るので、絵の大きさに合わせてスケールし、どの書き出しでも同じ見た目になります。実用上の最大は50%で、正方形では円、長方形ではピル型になります。

4つの角スタイル

• 角丸 — 四分円で、border-radiusのためにブラウザが描くのと同じ幾何です。予測しやすく、CSSに一対一で対応する唯一のスタイルです。
• スクワークル — 超楕円風の角です。カーブは各辺のより先から始まり、円のような急な曲率の変化なしに直線へつながります。そのためiOSとAndroidのアプリアイコン指針はこの形を使います。
• ベベル — 角を直線の対角線で切り落とします。カーブより鋭く技術的で、小さいサイズでもくっきり残ります。
• スクープ — アークが内側に曲がり、凹型のくぼみを取り除きます。向かい合う2つのスクープは、すぐにチケットやタグに見えます。

出力形式の選び方

JPGにはアルファチャンネルがないため、書き出すと切り取られた角は空のままではなく、選んだ背景色で塗りつぶされます。白いページ上の白い角丸写真のように、それがまさに欲しい結果であることも多いですが、それは透明度ではなく、後から元に戻せません。

主な機能

• 設計上プライベート: ファイルはブラウザのFileReader APIで読み込まれ、キャンバス上でローカルに描画されます。アップロードされることはありません。
• 角をドラッグして編集: プレビュー上のハンドルを斜めに引き、半径が指やカーソルに追従するのを確認できます。
• 角ごとの制御: 上の2つの角だけを丸めたり、片側だけスクープして残りを直角のままにしたりできます。
• プレビュー背景: 透明チェッカーボード、白、ダーク、カラーグラデーションを切り替えて、ダウンロード前にアルファの端を確認できます。
• パディング、背景の塗り、ボーダーリングは、すべて同じ角丸の輪郭に沿います。
• 出力倍率: 元の解像度で書き出すか、同じ処理で75%、50%、25%に縮小できます。
• コピー可能なCSS: 生成されたborder-radiusルールは、ファイルが適切でないときにスタイルシートで同じ形を再現します。
• アンチエイリアスされた端: 角はクリッピングパスとして描かれるので、階段状のにじみではなくなめらかなカーブになります。

画像ファイルかCSSか

角丸の絵をスライドデッキ、PDF、メール署名、マーケットプレイスの掲載、スタイルシートを実行しないツールに入れるなら、本物の透明度を持つ本物のファイルが必要です。PNGを書き出してください。自分で管理するウェブページに載せるなら、CSSルールの方が軽く、どのサイズでもシャープで、後から変えやすいので、代わりにスニペットをコピーしてください。両方使っても構いません。多くのチームは外部向けにPNG、サイト向けにCSSを用意します。

トラブルシューティング

• 角がギザギザに見える: 元画像がすでに小さいことが多いです。拡大した画像を丸めるのではなく、使える最大解像度で丸めてから縮小してください。
• 暗い背景で薄い明るいハローが出る: 画像に白いマットが焼き込まれています。合う色で1〜2ピクセルのパディングを足すか、半径を少し大きくしてハローを切り落としてください。
• ダウンロードが白い四角になる: 形式がJPGか、背景が透明になっていません。出力形式をPNGに切り替えてください。
• とても大きな写真が重い: キャンバスはスライダーを動かすたびにフル解像度の画像を再描画します。スライダーを離してブラウザに少し時間を与えるか、出力倍率を下げてください。
• アニメーションGIFの動きが消える: キャンバスは1フレームだけ書き出します。最初のフレームだけが丸められて保存されます。

よくある質問

画像はサーバーにアップロードされますか？

いいえ。ファイルはブラウザのFileReader APIで読み込まれ、ご自身のデバイス上のHTMLキャンバスに描画されます。miniwebtoolには何も送られないため、非公開のスクリーンショット、クライアントのアートワーク、個人の写真がコンピュータから出ることはありません。ページ自体の読み込みにはインターネット接続が必要です。

角丸が透明ではなく白や黒に見えるのはなぜですか？

透明度を保存できるのはPNGとWebPだけです。JPGで書き出すとアルファチャンネルがないため、切り取られた角は背景色で塗りつぶされます。出力形式の一覧でPNGを選び、背景を透明にしてください。それでも角がおかしく見える場合は、貼り付け先のアプリやサイトがアルファに対応しているか確認してください。一部のエディタはPNGの透明度を白に合成してしまいます。

完全な円の画像にするにはどうすればよいですか？

半径の単位をパーセントにして、半径を50%に設定します。正方形の画像では完全な円になります。長方形ではピル型（スタジアム型）になります。パーセントの半径は短辺を基準に測るためです。円形プリセットを使うと、正方形にトリミングして一度に丸められます。

角丸、スクワークル、ベベル、スクープの違いは何ですか？

角丸は普通の四分円で、CSSのborder-radiusが描く形と同じです。スクワークルはカーブを各辺に沿って長く伸ばし、つなぎ目がなめらかで連続的になります。これがiOSとAndroidのアプリアイコンの見た目です。ベベルは角を直線の対角線で切り落します。スクープは外側ではなく内側にカーブし、各角を凹型にくぼませるので、チケット、クーポン、バッジに向いています。

ピクセル指定の半径は、サイトのCSS border-radiusと一致しますか？

半径は画像自身のピクセルで適用されるため、画像が原寸で表示されるときだけCSSと一致します。幅1200ピクセルの書き出しを幅600ピクセルの欄に置くと半分に縮小されるので、48ピクセルの半径は画面上では24ピクセルに見えます。サイズに依存しない結果にはパーセント単位を使うか、ツールが生成するCSSスニペットをコピーしてください。スニペットには縮小後の相当値も含まれています。

画質と元の解像度を保てますか？

はい。出力倍率を変えたりパディングを足したりしない限り、書き出しは元のピクセル寸法のままです。PNGは可逆なので再圧縮されません。変わるのは角のピクセルだけで、不透明から透明になります。WebPとJPGは非可逆なので、元ピクセルの正確なコピーよりファイルサイズを優先する場合に使ってください。