画像を円形に切り抜き

この画像を円形に切り抜きツールを使って、写真、ロゴ、スクリーンショットを正円または調整可能な楕円に切り抜き、透明な PNG として保存できます。丸いマスクの中で画像をドラッグして残す部分を決め、被写体が枠いっぱいに収まるまでズームし、必要ならリングを追加して、プロフィール、チームページ、ポッドキャストカバー、スライドデッキに使えるアバターをダウンロードできます。

処理はすべてブラウザ内の HTML canvas 要素で行われます。写真のデコード、マスク、書き出しはすべてローカルで行われるため、miniwebtool にアップロードされることはなく、待ち行列も透かしもなく、アップロード制限は自分のデバイスのメモリ以外にありません。

できること

主な機能

• ドラッグで枠に収め、スクロールまたはピンチでズーム: マスクは固定されたまま写真がその後ろで動きます。アバター編集でよく使う操作と同じです。
• 切り取り範囲を表示: 捨てられるピクセルのゴーストがプレビューに残るので、耳や肩を切っていないかが分かります。
• 円または楕円: 高さ対幅のスライダーで円を横長または縦長の楕円に変え、書き出しキャンバスも同じ形に従います。
• 回転と左右反転: 90 度単位の回転で横向きのスマホ写真を直し、左右反転でセルフィーの向きを戻せます。
• リング枠とフェザーエッジ: 出力ピクセル単位で色付きリングを追加するか、縁をぼかして背景に馴染ませます。
• 透明 PNG、WebP、または JPG: PNG と WebP では四隅を空のままにし、JPG では選んだ色で埋めます。
• アバターサイズのプリセット: よく使う 320、400、512、640、800 ピクセルのプロフィール画像サイズをワンクリックで選べます。
• コピーできる CSS: スニペットは border-radius と object-fit で、同じ丸いアバターを Web ページに再現します。

画像を円形に切り抜く方法

1. 写真を読み込む: ファイルをドロップエリアにドラッグするか、画像を選択を選ぶか、コピーした画像を Ctrl+V で貼り付けます。
2. 被写体を枠に収める: ステージ内をドラッグして写真を動かし、ズームスライダー、スクロールホイール、またはピンチ操作で大きさを合わせます。マスクを埋めるはマスク全体を覆う最もきつい切り抜きにリセットし、写真全体を収めるは写真全体をマスク内に表示します。
3. 形状を選ぶ: 円のままにするか、楕円に切り替えて高さ対幅の比率を設定します。
4. 縁を整える: リングとその色を設定し、フェザーで縁をぼかし、透明または単色の背景を選びます。
5. 小さいプレビューを確認する: ステージ下の 128、64、32 ピクセル版を見て、顔が見えなくなればさらにズームインします。
6. 書き出す: 出力サイズと形式を選び、円形画像をダウンロードを選択します。

円として表示されるプロフィール画像のサイズ

多くのプラットフォームは四角いアップロードを受け取り、CSS で独自の丸いマスクを適用します。すでに円形の PNG を書き出すことは、Web サイト、文書、スライドではまだ便利で、マスクがどこに落ちるかを正確に制御できます。安全なアップロードサイズは次のとおりです。

円形マスクの描画方法

写真は出力サイズのキャンバスに描画され、キャンバスの合成モードが destination-in に切り替わったあと、その上に楕円が塗りつぶされます。楕円の下にあるピクセルだけが残り、それ以外は完全に透明になります。フェザーがゼロより大きいときは、楕円は単色ではなく放射状グラデーションで塗られるため、アルファ値が徐々に落ち、縁は硬い線で終わらずにフェードアウトします。リングを追加した場合は、マスクで消されないようその後にストロークされます。

円は切り出す正方形に内接するため、丸い結果は常に正方形の面積の約78.5 パーセントを覆い、失うのは四隅です。ポートレートでは少しズームインするのがたいてい正しい理由は、頭のてっぺんと肩が、ちょうど取り除かれる四隅に来るからです。

32 ピクセルでも使える切り抜きのコツ

• 円を顔で満たす。 頭の上に少し余白を残し、肩は縁から外へ出しましょう。全身ショットは判読できない点になります。
• 目を中心より少し上に置く。 顔を円の真ん中に正確に置くと、沈んでいるように見えます。
• 無地でコントラストのある背景を選ぶ。 頭の後ろの細かいディテールは、アバターを縮小するとノイズになります。
• 拡大しない。 元が幅 200 ピクセルなら、800 ピクセルで書き出してもぼやけるだけです。枠に収めた元サイズ以下で書き出してください。
• 暗いインターフェースにはリングを追加する。 1〜2 パーセントの白いリングは、暗い写真が暗いチャットのサイドバーに溶け込むのを防ぎます。

よくある質問

写真はサーバーにアップロードされますか？

いいえ。ファイルは FileReader API でブラウザが読み取り、HTML canvas に描画してそこでマスクします。miniwebtool には何も送られないため、タブを閉じても写真は自分のデバイス上に残ります。ページを読み込んだ後は遅い回線でもツールは動き続け、アップロード待ち行列もなく、ファイルサイズの制限は自分のデバイスメモリ以外にありません。

円の外側を透明のままにするには？

背景を「透明」にし、出力形式に PNG または WebP を選びます。アルファチャンネルを保存できるのはこの2形式だけです。JPG には透明度がまったくないため、円の周りの四隅は背景色で塗りつぶされます。JPG を選ぶと、ツールは背景を自動的に単色へ切り替えます。

丸いアバターをアップロードしたのに四角く見えるのはなぜ？

一部のサイトは再エンコード時に透明度を白または暗い背景に焼き付けるため、透明だった四隅が再び見えます。その場合は透明度の代わりにサイトに合わせた背景色を使うか、四角い原画像をアップロードしてサイト側の円形マスクに任せてください。多くのソーシャルネットワークは CSS で円形マスクを適用します。

円形のプロフィール画像はどのサイズがよいですか？

512×512 ピクセルはほぼすべてのプロフィールに適します。サイトは大きい画像を縮小しますが、小さい画像に細部を足すことはありません。よく使う目安は X と LinkedIn が 400 ピクセル、Instagram が 320、Discord が 512、WhatsApp が 640、YouTube が 800 です。「出力サイズ」のプリセットを使い、縮小はサイトに任せましょう。

正円ではなく楕円に切り抜けますか？

はい。形状を「楕円」に切り替え、高さ対幅のスライダーを動かします。100 パーセント未満は横長の楕円、100 パーセント超は頭と肩のショットに向く縦長の楕円になります。出力キャンバスも形に合わせて変わるため、幅 512 ピクセルの楕円を 130 パーセントにすると 512×666 ピクセルで書き出されます。

円形に切り抜くと写真の画質は落ちますか？

切り抜き自体は円の外側のピクセルを除くだけで、ロスレスの PNG で書き出せば残った部分は再圧縮しません。画質が落ちるのは、出力サイズが元画像の枠内より大きくブラウザが拡大する場合か、非可逆の JPG または WebP を選んだ場合です。小さい元画像でおよそ 100 パーセントを超えてズームするのが、ぼやけのよくある原因です。

どのファイル形式を開いて保存できますか？

ブラウザが画像としてデコードできるものは開けます。通常は JPG、PNG、WebP、GIF、BMP、AVIF、SVG です。アニメーション GIF は1枚の静止フレームとして切り抜きます。ダウンロードは既定で PNG で、形式リストから WebP と JPG も選べます。