画像角丸

画像の角丸とは？

画像の角丸とは、長方形画像の4つの鋭い角を滑らかな円弧に置き換え、より柔らかく親しみやすいシルエットを作る効果です。各角の硬い90°の代わりに、角丸は一つの辺から次の辺へ穏やかに曲線でつなぎ、角のピクセルを切り取って画像の背後にあるものを表示します。その円弧の半径（ピクセル単位）が角丸の強さを決めます。小さな半径はわずかな面取り、大きな半径はカプセルやピル形状を作ります。

角丸は現代の UI とウェブデザインで最も人気のある視覚処理の一つで、サムネイル、アバター、カード、ボタンの見た目を柔らかくし、すでに角丸ジオメトリを使っているデザインに写真を自然に溶け込ませます。効果は角のピクセルを上書きせず切り取るため、結果は出力形式に依存します。PNG と WebP は透過に対応しているため、切り取られた角は画像の背後が透けて見えます。JPG は透過に対応していないため、切り取られた角は純色（通常は黒）で塗りつぶされます。本ツールは Canvas 2D API で角丸処理を完全にブラウザ内で行うため、写真がアップロードされることはありません。

角丸ツールの仕組み

本ツールはブラウザの Canvas 2D API を使用します。画像をデコードした後、同じピクセル寸法のキャンバスを作成し、背景を透過のまま（塗りつぶしなし）にし、現代ブラウザでは ctx.roundRect、古いブラウザでは ctx.arcTo にフォールバックして角丸長方形のクリップパスを構築します。その後 ctx.drawImage でクリップ領域内に画像を描画するため、角丸長方形の内側のピクセルだけが残り、角のすべてが透過として切り取られます。

半径スライダーは 0〜200 ピクセルです。半径 0 は角丸なし（鋭い長方形画像、実質パススルー）です。半径は弧の重なりを防ぎ無効な形状になるのを避けるため、自動的に短辺の半分までに制限されます。最大値では結果は完全な円やカプセルになります。PNG は透過角を保持するため推奨される出力形式で、WebP も透過に対応します。JPG は透過に対応していないため、切り取られた角はエンコードされたファイル内で黒く塗りつぶされます。

角丸半径の値と効果

半径は各角がどれだけ切り取られるかを直接制御します。下表は各半径範囲の効果を示します：

半径	効果	典型的な用途
0 px	鋭い角 — 元のまま	パススルー、四角いサムネイル
4〜12 px	わずかな面取り	写真カード、ブログ画像、柔らかな現代 UI
15〜30 px	はっきりした角丸	アバター、サムネイル、ソーシャルカード
40〜80 px	強い角丸	アプリアイコン、ボタン風画像
100〜150 px	ヘビーな角丸	ステッカーモックアップ、装飾フレーム
≥ 短辺の半分	ピル / カプセル / 円	アバター風の完全丸端

デフォルトの 20 px から始め、角がデザインの他の部分と合うまで調整してください。半径は自動的に上限が設定されるため、非常に大きな値でも有効な形状になります。

角丸を使う場面

硬い長方形のエッジがデザインに対して鋭すぎたり写実的すぎたりする場合、角丸が適切な選択です。よくあるシナリオは以下の通りです：

• アバターとプロフィール画像。角丸四角形や円は、ほとんどのアプリやソーシャルプラットフォームでユーザーアバターの事実上の標準です。
• 写真カードとサムネイル。角丸はギャラリーのサムネイルやコンテンツカードにより柔らかく親しみやすい見た目を与えます。
• UI 統合。角丸 UI コンポーネント（ボタン、パネル、モーダル）内に配置された画像は、角が周囲のジオメトリと一致するときよりまとまって見えます。
• ソーシャルメディア投稿。角丸写真は四角いテキスト中心のフィードの中で目立ち、硬さが和らぎます。
• マーケティングと広告クリエイティブ。キャンペーン全体で一貫した角丸半径を使うと、クリエイティブ資産に統一感のあるブランド感が生まれます。
• ステッカーと装飾要素。ヘビーな角丸や完全なピル形状は写真を遊び心のあるグラフィック要素に変えます。
• 印刷・エディトリアルデザイン。雑誌やパンフレットの角丸写真は、鋭い角の写真よりも現代的に感じられます。

写真がより柔らかく、親しみやすく、角丸 UI に統合された感じが必要な場合、角丸の追加が通常は最もシンプルで効果的な処理です。

画像の角丸の適用手順

本ツールで角丸を適用するのは数秒で終わり、すべてブラウザ内で完結します——アップロードなし、サインアップなし、透かしなし。ツールは画像をローカルでデコードし、Canvas API を通じて角丸長方形をクリップし、必要な形式で出力できます。次の手順で行います：

1. 画像をアップロード。アップロードエリアをクリックするか、JPG・PNG・WebP・GIF・BMP ファイルをドラッグ＆ドロップします。画像は即座にデコードされプレビュー表示されます。
2. 角丸半径を設定。スライダーを 0〜200 px で動かします。0 は角丸なし、デフォルトの 20 px ははっきりしつつ穏やかな曲線を与えます。
3. 出力形式を選択。透過角を保持するには PNG または WebP、より小さいファイルが必要な場合は JPG（角は黒で塗りつぶされます）を選びます。
4. 「角丸を適用」をクリック。ツールが画像をクリップし、元の画像と角丸後のファイルサイズを並べて表示します。
5. 角丸画像をダウンロード。「角丸画像をダウンロード」をクリックして結果を保存します。元のファイルはデバイス上で変更されません。

すべてのステップは JavaScript でブラウザ内ローカルに実行されるため、画像がサーバーへアップロードされることはありません。これにより角丸ツールは完全にプライベートで高速、機密画像にも適しています。