上のエディタは、背景が透明な 512×512 の正方形キャンバスになっています。 円・四角形・三角形・文字を組み合わせて、SNS のプロフィール画像や、ブログ・アプリのアイコンを作れます。 背景が透明な PNG で保存できるので、どんな色の背景にもなじみます。
作り方(3 ステップ)
- 土台の形と色を決める:ひな形の青い円を選び、左側のパネルの「塗り」で色を変えます。 角ばった印象にしたいときは、円を消して四角形ツールで Shift キーを押しながら正方形を描きます。
- 中のマークを作る:ひな形の白い三角形を変えるか、テキストツールで頭文字やひらがな 1 文字を置きます。 文字は大きめ(150〜250 ピクセル)にすると、小さく表示されても読めます。
- 透過 PNG で保存する:形式は「PNG」を選びます。解像度を「2x」にすると 1024×1024 の画像になり、高精細な画面でもくっきり表示されます。
用途別のおすすめサイズ
| 用途 | おすすめのサイズ | ポイント |
|---|---|---|
| SNS のプロフィール画像 | 512×512 以上の正方形 | 丸く切り抜かれて表示されることが多い |
| ブログ・サイトのロゴ | 512×512(2x で保存) | 背景を透明にすると配置しやすい |
| ファビコンの元画像 | 512×512 | 16 ピクセル程度まで縮小されるため形はシンプルに |
サイズの目安はサービスによって異なります。登録先の案内もあわせて確認してください。
小さくても伝わるアイコンのコツ
- 大事な形は中央に寄せる:SNS では正方形の四隅が切れて丸く表示されます。ひな形の円の内側に収めると安心です。
- 色は 2〜3 色まで:色が多いと、小さく表示したときに何の形かわかりにくくなります。
- 細い線は使わない:縮小すると細い線は消えてしまいます。線の太さは 8 ピクセル以上を目安にしましょう。
- 縮小して確認する:保存した画像を小さく表示して、ひと目で形がわかるか確かめてください。
背景が透明な画像の仕組みや注意点は、透過 PNG の作り方で詳しく解説しています。
よくある質問
保存した画像の背景が白くなります
形式が「JPEG」になっていないか確認してください。JPEG は透明を扱えないため、背景が白で保存されます。 また、パネルの「背景を透明にする」にチェックが入っていることも確認してください。
市松模様は画像に入りますか?
入りません。グレーと白の市松模様は、透明な部分を画面上でわかりやすくするための表示です。
作ったアイコンは商用でも使えますか?
はい。作成した画像は商用・非商用を問わず自由に使えます。画像はブラウザの中だけで処理され、サーバーには送信されません。