画像角丸

GeekFormat について

クリックして画像をアップロード

JPG / PNG / WEBP

丸みプリセット

丸み半径

20%

050%

出力フォーマット

画像をアップロードしてプレビューを表示

オンラインで画像に角丸を追加、スライダーでリアルタイムプレビュー、小/中/大3段階プリセット、透明PNG出力でどんな背景にも対応。

画像の角丸処理とは？

画像の角丸処理とは、画像の4つの直角を滑らかな曲線に置き換える処理技術です。本ツールはCanvasのarcTo()で角丸長方形パスを描画し、clip()で画像を角丸領域内に切り抜きます。塗りつぶされなかった領域はPNGエクスポート時にAlpha=0の透明ピクセルになります。

**角丸の視覚効果は？** 角丸は直角と比べて柔らかく親しみやすく、鋭さを軽減します。UIデザインではアプリアイコン、ボタン、カード、アバターに広く使用されています。iOSが推進する「Superellipse（squircle）」は角丸を滑らかな曲線の極致まで高めています。

**なぜ多くのアプリアイコンに角丸が必要なのか？** iOS/iPadOS/macOS Big Sur以降、システムが自動的にアプリアイコンに角丸マスクを適用しますが、元画像に白背景があると「白フチ」の不具合が発生します。正しい方法は元画像で角丸PNGを事前出力しておくこと。本ツールはまさにこの用途のためのものです。

**ピクセル vs パーセント：** ピクセルは正確だが画像間での整合が難しく、パーセントは自動的に適応し異なるサイズでも一貫した結果になります。デザインシステムでは一般的にパーセントが使用され、iOS Appアイコンの22.37%、Android Adaptive Iconの25%などがあります。

**CSS border-radiusとの違い：** CSS border-radiusは表示レイヤーでの処理のため、エクスポートした画像は直角のまま。本ツールはアルファチャンネル付きの本物のPNGを生成するため、CSSが使えないあらゆるシーン（PPT、動画、印刷）に貼り付けて使用できます。

ユースケース

SNSアカウントのアバター作成（LINE、Twitter/X、Instagram、Facebookなど）、ワンクリックで正円アバター生成
アプリアイコンに素早く角丸を追加（iOSは22-25%推奨、Android Adaptive Iconは25%推奨）
ECサイト商品メイン画像に角丸を追加すると柔らかく美しくなり、クリック率と購買意欲が向上
PPTプレゼンテーション、動画編集、印刷物で必要な角丸画像素材のローカル処理
デザインシステムの統一規格時、同じ角丸サイズのアイコンや素材を作成（1枚ずつ処理）

使い方

アップロードエリアをクリックして画像を選択、またはJPG/PNG/WEBP画像を直接アップロードエリアにドラッグ
小（10%）、中（25%）、大（50%）プリセットボタンでワンクリック設定、またはスライダーをドラッグしてカスタマイズ（クリックでピクセル/パーセント単位切り替え）
出力形式を選択：PNG（透明背景付き）/WEBP（高圧縮）/JPG（白背景・透明なし）
右側でリアルタイムプレビュー、満足したらダウンロードボタンをクリック、ファイルは自動的に -rounded サフィックス付きで保存

特徴

2つの単位：角丸半径はピクセル（0-500px）とパーセント（0-50%）を自由に切り替え、様々なシーンに柔軟対応
3段階プリセット：小（10%）、中（25%）、大（50%）をワンクリック、スライダーでカスタム調整も可能
3形式出力：PNG（アルファチャンネル付き）、WEBP（高圧縮）、JPG（白背景・透明なし）に対応
リアルタイムプレビュー：スライダー調整で即座に効果を確認、市松模様背景で透明部分が明確に表示
ドラッグ&ドロップアップロード：クリック選択またはドラッグでアップロード、JPG/PNG/WEBPを処理可能
ローカル処理：すべてブラウザのCanvasで処理、画像はサーバーにアップロードされず安全

Best Practices

透明背景が必要な場合はPNGを優先、JPGは使わない

JPGはアルファチャンネルに対応していないため、選択すると白背景で強制塗りつぶされ角に白い四角が発生します。透明が完全に不要な場合のみJPGを使用し、デフォルトはPNGを選択してください。

透明かつ小サイズが必要な場合はWEBPを選択

WEBPも透明背景に対応しつつPNG比25-35%小さいため、Web素材に最適です。ただし古いバージョンのデザインソフトではWEBPを認識しない場合があるため、ソフト間連携時はPNGを優先してください。

アプリアイコンの角丸比率選択

iOSはシステムが自動的に約22.37%の角丸を追加しますが、元画像が白背景だと「白フチ」の不具合が発生します。正しくは本ツールで事前に角丸付きPNGを生成（22-25%推奨）。Android Adaptive Iconは25%をセーフゾーンとして推奨。

アバターには50%半径で正円生成

LINE、Twitter、InstagramなどほとんどのSNSは正円アバターを使用しています。50%プリセットでワンクリック正円PNG生成、透明背景でダーク/ライトテーマ両対応。

iOS App Icon 角丸仕様

角丸画像にCSS角丸コンテナを重ねて表示しない

本ツールで角丸PNGをエクスポートした場合は、CSS border-radius + overflow:hiddenで重ねないでください。二重処理になりエッジが不鮮明になります。角丸画像はimgタグで直接表示してください。

より複雑な角丸（片角だけ、TabBar上角丸など）が必要な場合

本ツールは4角同一の標準角丸のみ対応しています。TabBarの上2角だけ、下2角だけ、または片角ごとに異なる角丸など複雑なシーンでは[画像エディタ](/image/image-editor/)またはFigmaなどの専門デザインツールを使用してください。

よくある質問

画像に角丸を追加するには？

画像をアップロードし、小/中/大プリセットボタンをクリックして素早く選択するか、スライダーをドラッグしてピクセル（0-500px）またはパーセント（0-50%）をカスタマイズ。右側でリアルタイムプレビュー、満足したらダウンロード、PNG形式は透明背景を自動維持。

角丸半径はピクセルとパーセントどちらを使う？

ピクセルは角の大きさを正確に制御したい固定サイズのシーンに適しています。パーセントは画像の短辺比率で計算するため、異なるサイズの画像でも一貫した仕上がりになります。ワンクリックで単位切り替え可能、50%で完全な正円になり、アバター作成に最適。

角丸部分は何色になりますか？

PNGまたはWEBP形式選択時、角丸部分は完全な透明ピクセル（Alpha=0）になり、どんな背景にも自然になじみます。JPG選択時は自動的に白背景で塗りつぶされ（黄色の警告が表示されます）、透明が不要な完成画像向けです。

対応している画像形式は？

入力はJPG、PNG、WEBPの3形式に対応、出力はPNG（透明）、WEBP（高圧縮）、JPG（白背景）から選択可能。出力ファイル名には自動的に -rounded サフィックスが追加され、オリジナルと区別できます。

角丸の大きさに制限はありますか？

パーセントモードは0-50%（50%で正円）、ピクセルモードは0-500px。値が大きいほど角が丸くなり、短辺の半分に達すると正円になります。このツールはCanvas arcTo + clipによる標準的な角丸（Squircle・超楕円ではない）を実装。

アバターやアプリアイコンは作れますか？

最適です。正円アバターは50%プリセットでワンクリック生成。iOSアプリアイコンは22-25%推奨（25%プリセットでワンクリック一致）、Android Adaptive Iconは25%をセーフゾーンとして推奨。透明PNG出力であらゆるテーマに対応。

角丸処理で画像がぼやけますか？

いいえ。このツールはCanvasでオリジナル解像度のままパス切り抜きを行い、リサンプリングや圧縮を行わないため、画質はオリジナルと完全に同一です。角丸部分はぼかしではなく完全な透明ピクセルのため、エッジはシャープに仕上がります。

画像処理中に画像が流出しますか？

いいえ。すべての処理はCanvas APIを通じてブラウザ内でローカルに完結し、画像は読み込みからダウンロードまで一切サーバーを経由しません。プライバシーを含む画像、証明写真、アバターなどの機密素材も安心して利用できます。

角丸効果が表示されないのはなぜですか？

以下を確認してください：①角丸値が0より大きいか（スライダーが左端にないか）；②画像が正常に読み込まれているか（形式はJPG/PNG/WEBP）；③ブラウザがHTML5 Canvasに対応しているか（現在のブラウザはすべて対応）。それでも問題がある場合はページを更新して再アップロードしてください。

CSS border-radiusとの違いは？

CSS border-radiusは表示レイヤーでの処理のため、エクスポートした画像は角が直角のままでWebシーンでしか使えません。このツールはアルファチャンネル付きの本物のPNGファイルを生成するため、PPT、動画、印刷物などCSSに対応していないあらゆるシーンで使用できます。

用語集

角丸半径（Border Radius）: 円弧の半径値で、角の丸み具合を決定します。値が大きいほど角が丸くなり、最大値（画像短辺の半分）で正円になります。ピクセル（0-500px）とパーセント（0-50%）の2つの単位に対応。
アルファチャンネル: PNG/WEBPに標準搭載された透明チャンネルで、ピクセルごとに0-255で透明度を表現します。角丸処理後の4隅はAlpha=0のため、背景は「何色か」ではなく「完全に透明」になり、どんな背景にも自然になじみます。
Squircle（超楕円）: iOS 7以降で導入された角丸形状で、従来の角丸長方形より滑らかです。数式はx⁴+y⁴=r⁴。本ツールは標準円弧を出力するため、Squircleが必要な場合はFigma/Sketchなどのデザインツールを使用してください。
Adaptive Icon: Android 8.0以降で導入されたアダプティブアイコンで、前景と背景の2層で構成されます。25%の角丸をセーフゾーンとして推奨、OEMベンダーのランチャーが独自形状でマスクします。
Canvas arcTo: Canvas 2D APIの円弧描画メソッド。本ツールはarcTo + clipを組み合わせて角丸長方形パスを作成し、画像を角丸領域内に切り抜きます。角丸領域はエクスポート時にAlpha=0の透明ピクセルになります。

プラットフォーム別角丸仕様早見表

プラットフォーム / 要素	基準サイズ	推奨角丸比率	おおよそ (px)
iOS / iPadOS App Icon	`1024 × 1024`	約22.37%	≈ 229 px
Android Adaptive Icon	`108 × 108`	約25%	≈ 27 px
macOS Sonoma App Icon	`1024 × 1024`	Squircle 超楕円	固定pxなし
Windows 11 カード	`—`	約8 px	8 px
Material Design 3 Large	`—`	約28 px	28 px
LINE アバター	`640 × 640`	50%（完全な円）	320 px
Twitter / Instagram アバター	`400 × 400`	50%（完全な円）	200 px
EC商品メイン画像	`800 × 800`	16~24 px推奨	16-24 px