px=画像の実ピクセル数。%=画像の短辺に対する割合(サイズの違う画像でも見た目が揃います)。
border-radius: 20px;
透過に対応しない形式(JPG)では、指定した背景色で角の外側が塗りつぶされます。
プレビュー — 透明部分は市松模様で表示されます
無料・登録不要でご利用いただけます。
無料・登録不要で使える画像の角丸加工ツールです。画像をドラッグ&ドロップして半径を選ぶだけで、写真や画像の四隅を丸く加工できます。ブログのアイキャッチ、サムネイル、プロフィール画像、資料やスライドに貼る図版など、「画像の角を丸くする」場面で幅広くご利用いただけます。角ごとの個別指定、複数画像の一括処理、PNG/JPG/WebPでの書き出しにも対応しています。
画像はブラウザ内で処理されるため、サーバーにアップロードされません。
この画像角丸ツールの特長
アップロード不要・インストール不要。ブラウザだけで写真や画像の角を丸くできます。
完全無料・登録不要
会員登録やアプリのインストールは不要。ページを開いてすぐに加工できます。ウォーターマーク(透かし)も入りません。
画像を送信しない安全設計
加工はすべてブラウザ内(JavaScript)で完結します。画像がサーバーへアップロードされないため、社内資料や未公開写真にも安心してお使いいただけます。
角ごとの個別指定にも対応
四隅を一括で丸めるほか、左上・右上・右下・左下を個別に指定できます。px指定・%指定の切り替えや、完全な円形への切り抜きも可能です。
透過PNG・複数枚の一括処理
角の外側を透過させたPNGで書き出せます。JPG・WebPも選択可能。複数枚をまとめて同じ設定で加工し、ZIPで一括ダウンロードできます。
画像の角を丸くする手順
操作は3ステップ。画像を置いて、丸みを決めて、保存するだけです。
画像をドラッグ&ドロップするか、エリアをクリックしてファイルを選択します。スクリーンショットなどは、ページ上で Ctrl+V(Macは⌘+V)を押すとクリップボードから直接貼り付けられます。JPG・PNG・GIF・WebPに対応しています。
スライダーまたは数値入力で半径を決めます。プリセットボタンを押せばワンタップで設定でき、「円形」を選ぶと正円に切り抜かれます。角ごとに違う半径を付けたいときは「個別指定」に切り替えてください。プレビューに即座に反映されます。
角の外側を透明にしたい場合はPNGを選びます。JPG・WebPを選んだ場合は透過できないため、背景色を指定してください。複数枚を読み込んでいるときは「すべてダウンロード」でZIPにまとめて保存できます。
画像角丸加工の活用シーン
角を丸くするだけで、写真や図版の印象はやわらかく、洗練された見え方に変わります。
Web・ブログ制作
アイキャッチ画像、記事内の figure、バナー、サービス紹介のスクリーンショットなど。CSSのborder-radiusが使えない配信先(メールマガジン、一部のCMS、note等)でも、画像そのものを角丸にしておけば同じ見た目を再現できます。
SNS・プロフィール
プロフィールアイコンの円形切り抜き、投稿画像の角丸加工、サムネイルの統一など。「円形」プリセットを使えば、正方形でない写真でも中央を基準に正円へ切り抜けます。
資料・スライド作成
PowerPoint・Googleスライド・Wordに貼る図版や写真に。あらかじめ透過PNGで角丸にしておくと、貼り付け先で図形の書式設定を毎回いじる必要がなくなり、資料全体のトーンも揃います。
角丸の半径(サイズ)の目安
同じ半径でも、画像そのものが大きいほど丸みは相対的に小さく見えます。迷ったときは、下の目安を起点にプレビューを見ながら微調整してください。
| 半径の目安 | 見え方 | 向いている用途 |
|---|---|---|
| 4〜8px | 言われないと気づかない程度のわずかな丸み | スクリーンショット、表や図版など情報量の多い画像 |
| 10〜16px | もっとも一般的で汎用性の高い丸み | ブログのアイキャッチ、記事内の写真、カード型UI |
| 24〜40px | はっきりと柔らかい印象 | バナー、LPのビジュアル、親しみを出したい写真 |
| 短辺の50%(円形) | 正円に切り抜かれる | プロフィールアイコン、人物写真、ロゴマーク |
※ 複数の画像でサイズが異なる場合は、px指定ではなく%指定(短辺に対する割合)を使うと、見た目の丸みを揃えやすくなります。
画像を角丸にする方法の比較
角を丸くする手段はいくつかあります。目的に応じて使い分けてください。
| 方法 | 特徴 | 注意点 |
|---|---|---|
| 本ツール(Web) | インストール不要・無料。画像ファイル自体を角丸にできるため、貼り付け先を選ばず同じ見た目を再現できる。 | 透過を保つにはPNG(またはWebP)で保存する必要がある。 |
CSSの border-radius | Webページ上で表示だけを丸くする方法。元画像を加工しないので、あとから丸みを変更しやすい。 | 画像ファイル自体は四角のまま。メールや外部サービスでは反映されない。 |
| Photoshop/Illustrator | マスクやシェイプで自由度が高く、細かな調整や他の加工と組み合わせられる。 | 有料。1〜2枚を角丸にするだけの用途には手順が多い。 |
| Canva/Figma などのデザインツール | 他のデザイン作業と同じ画面で完結できる。テンプレートも豊富。 | アカウント登録が必要。書き出し形式や透過の可否がプランに依存する場合がある。 |
| PowerPoint/Word の図形 | 資料内で完結する。「図形に合わせてトリミング」で角丸四角形を選ぶだけ。 | その資料の中でしか使えない。画像として書き出す手間がかかる。 |
アプリ側で丸めるか、画像そのものを丸めるか
角丸には二つのやり方があります。使っているアプリの機能で丸めるか、画像ファイルそのものを丸めてしまうかです。どちらが正解ということはなく、その画像を「どこで使うか」で決まります。
アプリ側で丸めるのが向いている場合
PowerPointやGoogleスライド、Canva、Figma、あるいはWebページのCSS(border-radius)で丸める方法です。あとから丸みを変えられるのが利点で、その資料・そのページの中だけで完結するなら、これで十分です。
ただし、丸みはあくまで「その環境での表示」です。画像を書き出して他へ渡した時点で、丸みは付いてきません。
画像そのものを丸めるのが向いている場合
次のどれかに当てはまるなら、画像ファイル自体を角丸にしておくほうが確実です。
- 複数の配信先で同じ見た目にしたい——ブログ、メールマガジン、note、SNSなど。配信先ごとに角丸の可否が違うため、画像側で揃えたほうが早い
- 画像を人に渡す——資料に貼ってもらう、別の担当者が編集する。渡した先の環境に依存しない
- CSSが効かない場所に置く——メール本文、一部のCMS、PDF化する資料
画像側で丸める場合の注意は二つだけです。ひとつは保存形式。角の外側を透明にしたいならPNGかWebPを選んでください(JPGは仕様上、透過を持てません)。もうひとつは元画像を残しておくこと。焼き込んだ丸みは、あとから戻せません。
当社では記事のアイキャッチや提案資料の図版で日常的に角丸を使いますが、いちばん多い失敗は「JPGで書き出して、角が白や黒で塗られる」というものです。配信先が透過に対応しているかを先に確認しておくと、やり直しが減ります。
よくあるご質問(FAQ)
- アップロードした画像はサーバーに保存されますか?
-
いいえ、保存されません。本ツールは画像の読み込みから角丸加工、書き出しまでをすべてブラウザ内のJavaScript(Canvas)で処理しています。画像がインターネット経由で送信されることはないため、社外に出せない資料や未公開の写真でも安心してご利用いただけます。
- 角の外側を透明にするにはどうすればよいですか?
-
保存形式でPNG(またはWebP)を選んでください。PNGは透過に対応しているため、丸めた角の外側が透明のまま書き出されます。JPGは仕様上透過を扱えないため、角の外側は指定した背景色(既定は白)で塗りつぶされます。背景が白以外のページに貼る場合は、PNGを選ぶか、貼り付け先に合わせた背景色を指定してください。
- 複数の画像をまとめて角丸にできますか?
-
はい、できます。複数のファイルを選択またはドラッグ&ドロップすると一覧に追加され、同じ角丸設定がすべての画像に適用されます。「すべてダウンロード」を押すと、加工後の画像をZIPファイル1つにまとめて保存できます。1枚だけの場合は、ZIPにせずそのままダウンロードされます。
- 写真を円形(丸型)に切り抜くこともできますか?
-
はい。プリセットの「円形」を選ぶと、画像の中央を基準に正円へ切り抜かれます。長方形の写真の場合は短辺に合わせた円になるため、人物の顔などを中心に置いた写真を使うときれいに仕上がります。プロフィールアイコンやチーム紹介ページの顔写真づくりに便利です。
- 画質は劣化しますか?
-
PNGで保存する場合は可逆圧縮のため、角を丸めた以外の部分の画質は劣化しません。JPG・WebPは非可逆圧縮のため、品質スライダーの値に応じてわずかに劣化します(既定の0.92では、通常の閲覧で違いを感じることはほとんどありません)。また、極端に大きな画像(長辺8,192pxを超えるもの)は、ブラウザの処理限界を避けるため自動的に縮小して処理し、その旨を画面上でお知らせします。
- 対応している画像形式とファイルサイズを教えてください。
-
読み込みはJPG・PNG・GIF・WebPに対応し、1ファイルあたり最大10MBまでです。書き出しはPNG・JPG・WebPの3形式から選べます。なお、アニメーションGIFを読み込んだ場合は、1コマ目のみが静止画として加工されます。
- スマートフォンでも使えますか?
-
はい、スマートフォン・タブレット・PCのいずれのブラウザでもご利用いただけます。スマートフォンでは、アップロードエリアをタップするとカメラロール(写真アプリ)から画像を選択できます。加工した画像は端末のダウンロードフォルダまたは写真アプリに保存されます。
- CSSの border-radius とどちらを使うべきですか?
-
自分で管理しているWebサイト上でだけ丸く見せたい場合は、元画像を加工せずに済むCSSの
border-radiusが便利です。一方、メールマガジン、note、各種SNS、PowerPointなどCSSが効かない場所に貼る場合や、画像ファイル単体で角丸の状態を保ちたい場合は、本ツールで画像そのものを加工してください。両者は排他的ではないため、用途に応じて使い分けるのが実務的です。
アマノートの無料ツール
FREE TOOLSいずれも登録不要・ブラウザ内で完結します。コンテンツ制作の現場で自分たちが使うために作り、そのまま公開しています。
すべてのツールを見る →
