丸い画像を背景透過で作る方法：正円・二重丸・円形のバッジ
丸い画像を資料や Web ページに貼ったら、円の周りに白い四角が残ってしまった……という経験はありませんか。 画像はもともと四角形なので、丸く見せるには円の外側を「透明」にしておく必要があります。 この記事では、背景が透明な丸い画像（透過 PNG）を作る方法と、二重丸や円形のバッジへの応用を紹介します。
丸い画像の周りが白くなる理由
画像ファイルは、どんな形に見えても中身は必ず四角形です。丸い画像とは「四角形の画像のうち、円の外側が透明になっているもの」のことです。 円の外側が白で塗られていると、白い背景の上では丸く見えても、色の付いた背景に置いたとたんに白い四角が現れます。
円の外側を透明にできるのは、透明な部分を記録できる PNG などの形式だけです。JPEG は透明を扱えないため、保存すると透明だった部分が白（または黒）で塗られてしまいます。 仕組みの詳しい説明は透過 PNG の作り方をご覧ください。
背景が透明な丸い画像の作り方
1. 正方形のキャンバスを用意する
パネルの「キャンバス」で、幅と高さを同じ値にします（例：400×400）。「背景を透明にする」にチェックが入っていることを確認してください。 キャンバスがグレーと白の市松模様で表示されていれば、背景は透明になっています。この模様は画面上の表示だけで、画像には入りません。
2. Shift キーを押しながら円を描く
円ツールを選び、Shift キーを押しながらドラッグすると、縦横の比率が同じきれいな正円になります。 キャンバスの左上の少し内側から右下に向かってドラッグし、キャンバスとほぼ同じ大きさの円にすると、余白の少ない画像になります。
3. 色と枠線を決める
「塗り」で円の色を選びます。枠線が不要なら「線の太さ」を 0 にしてください。 枠線を付ける場合は、線の半分が円の外側にはみ出すので、キャンバスの端との間に線の太さ以上の余白を残しておきます。余白がないと、枠線の端が切れてしまいます。
4. PNG で保存する
形式は必ず「PNG」を選んでダウンロードします。解像度を「2x」にすると、縁がよりなめらかな画像になります。
アイコン作成ツールを開くと、背景が透明な正方形のキャンバスに円が描かれた状態から始められます。
応用：二重丸と円形のバッジ
二重丸（◎）
大きさの違う円を 3 つ重ねて作ります。いちばん大きい色付きの円、一回り小さい白い円、さらに小さい色付きの円の順に、 Shift キーを押しながら描いて中心を合わせると、くっきりした二重丸になります。 あとから描いた図形ほど上に重なります。順番を入れ替えたいときは、パネルの「前面」「背面」ボタンを使ってください。
円形のバッジ
「NEW」「おすすめ」「50% OFF」のような円形のバッジは、目立つ色の円に白い文字を重ね、白い枠線（線の太さ 6〜10 ピクセル）を付けると作れます。 Web ページの商品画像やサムネイルに重ねて使うと、写真の上でもくっきり見えます。
| バッジの例 | 円の色 | 文字 |
|---|---|---|
| 新着 | 赤 | 白で「NEW」 |
| おすすめ | オレンジ・黄色 | 白か濃い茶色で「おすすめ」 |
| ステップ番号 | 青・緑 | 白で「1」「2」「3」 |
ステップ番号のバッジは、手順の説明画像やスライドで特に便利です。色と大きさをそろえて番号だけ変えれば、統一感のあるセットになります。
よくある失敗と対処法
- 四隅が白い：JPEG で保存しているか、「背景を透明にする」のチェックが外れています。PNG で、チェックを入れて保存し直してください。
- 楕円になってしまう：Shift キーを押さずに描くと、縦横の長さがずれやすくなります。描き直すときは Shift キーを押したままドラッグを終えてください。
- 円の端が切れている：円や枠線がキャンバスからはみ出しています。円を少し小さくするか、キャンバスを大きくしてください。
よくある質問
写真を丸く切り抜くことはできますか？
Shape Maker は図形と文字で画像を作るツールのため、写真の読み込みや切り抜きには対応していません。写真の切り抜きには、写真編集用のアプリやツールを使ってください。
中が透明なリング（ドーナツ型）は作れますか？
今のところ、塗りを透明にする機能はないため、中が透明なリングは作れません。中を背景と同じ色の円で塗りつぶす方法なら、見た目の近いリングを作れます。
まとめ
背景が透明な丸い画像は、「正方形のキャンバス」「背景を透明にする」「Shift キーで正円」「PNG で保存」の 4 つで作れます。 丸い図形を使ったアイコンづくりはアイコン画像の作り方でも紹介しているので、あわせてご覧ください。