角丸画像

CSSのほうが適している場合

Webページでは、CSSのborder-radiusで表示時に画像の角を丸くできます。ファイルは最も小さい形式のまま保て、後から半径を変更しても再書き出しは不要です。角を画像に埋め込むのは、CSSが使えないスライド、文書、マーケットプレイスの掲載画像、ソーシャル投稿、メールなどに適しています。Outlookのデスクトップアプリはborder-radiusを無視するためです。この方法でPNGとして保存した写真はかなり重くなります。PNGからWebPへなら、透明な角を保ったままサイズを大幅に抑えられます。

ストアアイコンには使わない

あらかじめ角を丸くした画像をアプリアイコンとして提出しないでください。iOSとGoogle Playは完全な正方形に独自のマスクを適用するため、先に丸くした角がシステムの形状の内側に透明または暗い隙間を残します。角丸画像は、Webサイト、プレゼンテーション、モックアップなどで通常の画像として表示するアイコンに適しています。アプリプロジェクトで必要なアイコンファイルには、アプリアイコン生成で完全な正方形を書き出してください。

使い方

1. 画像を選びます。
2. iOSのアプリアイコンなどのプリセットを選ぶか、半径を指定します。
3. 角丸にしたPNGをダウンロードします。

プライバシーと制限事項

画像の角丸処理はローカルで行われ、アップロードされることはありません。出力は常にPNGです。JPGには角の透過を保持するアルファチャンネルがないためです。