コンテンツにスキップ

✂️ 画像トリミング

画像をマウスのドラッグ操作で矩形選択して切り抜き。アスペクト比固定 (1:1 / 4:3 / 16:9 / 自由) に対応。Canvas API でブラウザ内処理。

完全無料 登録不要 ブラウザ完結 5 言語対応 ダークモード

🔒 プライバシーについて

📂

画像をドラッグ&ドロップ、またはクリックで選択(ペースト可)

📖 つまずきやすいポイント

画像をドラッグで矩形選択して切り抜きます。アスペクト比の固定 (1:1 / 4:3 / 16:9 / 3:2 / 9:16 / 自由) に対応し、PNG・JPEG・WebP で書き出せます。処理は Canvas API でブラウザ内完結です。トリミングは画素を実際に捨てる操作で、元に戻せません — 表示範囲を変えているのではなく、選択範囲の外にあったデータは出力ファイルに存在しなくなります。この点が、次の注意点の前提になります。

ケース 何が起きるか どうする
切り抜いた画像が想定より小さい・粗い 切り抜きの出力サイズは選択した範囲の実ピクセル数そのものです。4000px の写真から画面上で「小さめ」に見える範囲を選んでも、それが原画像の 300px 相当なら、出力は 300px の画像になります。画面が縮小表示されているとこの感覚がずれやすく、「大きな写真から切り出したのだから十分な解像度があるはず」という思い込みが外れます。SNS のヘッダー画像やサムネイルに使うと、アップロード先で引き伸ばされて明らかに粗くなります 用途に必要な出力サイズを先に決めてください。OGP 画像なら 1200×630、X のヘッダーなら 1500×500 というように規定のサイズがあるので、それを下回る範囲は切り抜かないのが原則です。足りない場合、拡大しても画質は戻りません — 元の画像をより高解像度で用意し直す以外に方法はありません。作業の順序としては、まず必要な比率で切り抜き、次にリサイズツールで規定サイズに合わせるのが確実です (画像リサイズ)。切り抜き範囲を選んでいる間、選択領域の実ピクセル数を意識してください — これが判断の唯一の材料です。
比率を固定したのに出力の縦横比がぴったりでない 比率固定はドラッグ中の選択枠を比率に合わせて調整する機能で、最終的なピクセル数は1 px 単位の丸めが入ります。16:9 で選んだつもりでも 1920×1079 のように 1 px ずれることがあります。また、選択範囲が画像の端に達するとそこでクランプされるため、比率が崩れます — 端いっぱいまで使いたいときに起きやすい現象です。SNS のプレビューや動画のサムネイルのように、規定サイズが厳密に決まっている用途では、この 1 px が余白や引き伸ばしとして目に見えます 厳密な寸法が要るなら、切り抜き後にリサイズを 1 回かけてください — 1 px の差は拡大縮小で吸収され、規定サイズちょうどになります。この順序が重要で、先にリサイズしてから切り抜くと、必要な範囲が入りきらないことがあります端まで使いたい場合は、比率固定を外して自由に選び、あとからリサイズで比率を合わせるほうが早いです。そして最終的な確認は、必ず実際の掲載先で行ってください — OGP 画像は各 SNS が独自にトリミングするので、1200×630 に合わせても中央以外は切られる可能性があります。重要な要素は中央寄りに置いてください。
JPEG で保存したら透過部分が黒くなった JPEG は透明度を扱えません。ロゴやアイコンのように透過を含む PNG を切り抜いて JPEG で保存すると、透明だった部分は白か黒で塗りつぶされます — どちらになるかは実装依存で、Canvas の初期状態は「透明な黒」なので、黒くなるほうが多いです。白いページに置くつもりで用意した画像が黒枠付きで表示される、というのはこの経路です。WebP は透過を保持できるので、この問題は起きません。 透過が必要なら PNG か WebP を選んでください。使い分けの目安は — 写真は JPEG か WebP、透過を含む図やロゴは PNG か WebP、ファイルサイズを最優先するなら WebP です。WebP は同じ画質で JPEG より 25〜35% 小さく、しかも透過とアニメーションに対応します — 主要ブラウザはすべて対応済みなので、Web 用途では第一候補です。ただし、メールに添付する・古い画像編集ソフトで開く・印刷所に入稿するといった用途では、WebP が開けないことがあります渡す相手が決まっている場合は、その相手が開ける形式を選んでください。迷ったら PNG が最も互換性が高い選択です。

「隠す」目的でトリミングを使うときは、形式に注意してください。PNG や JPEG のトリミングは画素を実際に捨てるので安全ですが、PDF・Word・PowerPoint の「図のトリミング」は表示範囲を変えているだけで、元の画像は文書の中に丸ごと残っています — 受け取った側が「トリミングをリセット」すれば全部見えます。これは実際に何度も情報漏洩を起こしている経路で、黒い四角を上に重ねて隠す方法も同様に危険です (図形を動かせば下が見えます)。機密部分を消したいなら、必ず画像として書き出してから、その画像を編集してください。もう 1 点、Canvas を通すので EXIF は消えます — GPS 座標や撮影日時が落ちるので、公開前の処理としては都合が良い一方、撮影日時を保持したい業務用途では、別途メタデータを記録しておく必要があります

📖 使い方

  1. 1
    画像を読み込む
    ドラッグ&ドロップ、ファイル選択、または Ctrl+V でクリップボードから貼り付け。
  2. 2
    アスペクト比を選ぶ
    自由 / 1:1 / 4:3 / 16:9 / 3:2 / 9:16 から選択。固定比率を選ぶとドラッグ範囲が自動的に縦横比に揃います。
  3. 3
    範囲をドラッグ
    画像上をマウスでドラッグして切り抜きたい範囲を囲みます。やり直しは「選択解除」。
  4. 4
    切り抜きとダウンロード
    「切り抜き実行」でプレビューを生成し、PNG / JPEG / WebP でダウンロード。ファイル名末尾に _cropped。

❓ よくある質問

画像はサーバーにアップロードされますか?
いいえ。すべての処理はブラウザ内 Canvas API で完結します。Network タブで通信が発生していないことを確認できます。
切り抜き範囲のピクセル精度は?
1 ピクセル単位で正確に切り抜きます。Canvas のスケーリングを補正して原画像座標で計算しているため、表示が縮小されていてもズレません。
対応している画像形式は?
入力はブラウザが表示できるすべての形式 (PNG / JPEG / WebP / GIF / BMP / SVG / AVIF / HEIC など)。出力は PNG / JPEG / WebP。
🐛 このツールで問題が発生しましたか?

完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。

※ 不具合再現のため、ブラウザ情報 (UA / 画面サイズ / 言語 / URL) を自動で送信します