画像トリミングツール
無料のオンライン画像トリミング——ピクセル単位で正確に、すべてブラウザ内で処理
画像をここにドラッグ、またはクリックして選択
JPG、PNG、WebP、BMP、GIF に対応
画像トリミングとは？
トリミングとは、画像から矩形の領域を切り出し、その外側をすべて捨てる操作です。最も古い編集操作のひとつであり、構図を変えながらピクセルを再サンプリングしないという特徴があります——4000×3000 の写真から 1000×800 の領域を切り出した場合、その範囲内の元のピクセルはすべてそのまま残ります。このページのトリミング体験はデスクトップエディタと同じです：プレビューの上で選択範囲をドラッグし、X/Y/W/H に正確な数値を入力し、固定キャンバスに収める必要があるとき（アバター、バナー、証明写真など）はアスペクト比をロックし、最後に PNG/JPEG/WebP として書き出します。回転と反転はトリミングの後に適用されるので、保存されるファイルにはすでに望みの向きが焼き込まれます——これは印刷や、EXIF の向きタグを無視するアプリにとって重要です。すべての処理は Canvas を介してブラウザ内で完結します——画像のバイト列はページの外に出ないので、書類や個人写真はあなたの端末に留まります。
使い方
手順
- 画像をドロップするかクリックして選択します。JPG/PNG/WebP/BMP/GIF どれでも OK です。
- 選択ボックスをドラッグ、または四隅・辺のハンドルを掴んでサイズを変えます。プリセットからアスペクト比を選べば比率がロックされます。
- ピクセル単位で正確に位置決めしたいときは X/Y/W/H に数値を直接入力します。
- 必要に応じて 90° 回転や左右/上下反転をかけます——これらは切り出した結果に対して適用されます。
- PNG/JPEG/WebP を選び、「トリミング」を押して書き出し、ダウンロードします。
コツ
- アバターやサムネイルに使う前に必ず比率（1:1、16:9 など）を固定しておきましょう——そうしないとプラットフォーム側で勝手に再トリミングされてしまいます。
- X/Y/W/H の数値は元画像のピクセル座標で、画面上のピクセルではありません。横 4000 ピクセルの写真は画面で縮小表示されていても座標は 4000 まで表示されます。
- 写真は JPEG なら 0.85〜0.92、WebP なら 0.80〜0.90 が目安です——これ以上品質を上げても目には違いが分からず、ファイルサイズだけ増えます。スクリーンショット、線画、テキストを含む画像は PNG を選んでください。
利用シーン
技術的な仕組み
トリミング自体はロジック的にはシンプルです——矩形を選び、そのピクセルをコピーし、残りを捨てる——しかしブラウザできちんと実装するには、いくつかの可動部があります：画面上のプレビューは原画像の縮小版で、ドラッグハンドルは表示座標で動作し、実際の切り出しは品質を落とさないために原画像座標で行わなければなりません。 ファイルを読み込むと、ツールはまず URL.createObjectURL() で blob URL を取得し、HTMLImageElement に渡してデコードします（ゼロコピーで、base64 data URL よりはるかにメモリ効率が良い）。img.naturalWidth / naturalHeight が正準の座標系になります——state に保持される X/Y/W/H はすべてこのピクセル単位で表現されます。プレビュー <img> は max-width / max-height でブラウザに自動縮小させており、読み込み時と resize 時には getBoundingClientRect() で実際の描画幅を測り、displayScale 比率（描画幅 / natural 幅）として保持します。ドラッグ中のマウス移動量をこの比率で割ることで、画面上の動きを原画像のピクセル単位に変換でき、表示倍率に関係なくトリミング矩形の精度が保たれます。 トリミング枠は画像の上に重ねた position: absolute の <div> です。8 つのリサイズハンドル（四隅 + 四辺）はそれぞれ pointerdown でモード（'nw'、'n'、'ne'、'e'、'se'、's'、'sw'、'w'、'move'）を発火します。window レベルの pointermove リスナー（pointer events はマウスとタッチの両方をカバー）が現在のマウス位置を読み、ドラッグ開始点との差分を求め、原画像ピクセルに変換してから矩形の left/top/right/bottom を再計算します。角ハンドルでは対角がアンカーとなり、辺ハンドルでは垂直な中軸が固定され、比率ロック時には主軸を先に決めてからもう一方を導出します。各結果は画像の境界内に最小 10 px でクランプされ、矩形が反転したりキャンバスの外に飛び出したりすることがありません。 書き出しでは 2 枚のオフスクリーン canvas を使います。1 枚目は切り抜き領域の natural 幅 × 高さでサイズを取り、ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh) の 9 引数版で対象範囲だけを抜き出します——Chromium も Firefox もこれを GPU 上のテクスチャコピーとして扱うため、出力サイズが変わらなければ再サンプリングは発生しません。回転や反転を伴う場合は、2 枚目の canvas を回転後の寸法（90°/270° では幅と高さを入れ替え）で作り、context を中心に平行移動して ctx.rotate(angle) と ctx.scale(±1, ±1) で変換を適用し、切り抜いた canvas を (-w/2, -h/2) のオフセットで描画します。最後に canvas.toBlob(mimeType, quality) がエンコード済みバイトを Blob として返し、URL.createObjectURL() がダウンロード可能な URL に変えます。quality は PNG では無視され（可逆）、JPEG と WebP ではエンコーダへのヒント（0〜1）になります。新しいトリミングが生成されたら古い Blob URL を revokeObjectURL で解放し、デコード済みのピクセルデータがメモリに残らないようにしています。
- 切り抜き座標（X/Y/W/H）は元画像のピクセル単位です。
- すべての処理はブラウザ内のCanvas APIで実行されます。
- 切り抜き枠は絶対配置されたdivで8つのドラッグハンドルを持ちます。
- エクスポートはオフスクリーンCanvasでdrawImageの9引数形式を使用します。
- 状態遷移のたびに古いBlob URLを明示的に解放します。
サンプル
縦写真から正方形のアバターを作る
写真を読み込む（3024×4032）→ 比率 1:1 → 顔に枠を合わせる → W=2000 H=2000 → 形式 JPEG、品質 0.9 → トリミング → ダウンロードOpen Graph 画像（1200×630）
バナーを読み込む（1920×1080）→ 比率 16:9 → W=1200 H=630 と入力 → 被写体に合わせる → 形式 WebP、品質 0.85 → トリミング → ダウンロードYouTube サムネイル (1280×720)
素材を読み込み → アスペクト 16:9 → W=1280 H=720 → 焦点に合わせる → JPEG 品質 0.9 → トリミング → ダウンロードカメラで撮った縦写真の向きを正す
IMG_4321.jpg を読み込む → 右に 90° 回転 → 比率 自由 → キャンバス全体を保持 → 形式 PNG → トリミング → ダウンロード（向きはピクセルに焼き付け済み）スクリーンショットの一部を切り出す
スクリーンショットを貼り付け/アップロード → 比率 自由 → ダイアログにぴったり枠を合わせる（例：740×420）→ 形式 PNG → トリミング → バグ報告用にダウンロードよくある質問
画像はどこかにアップロードされますか？
いいえ。デコード、トリミング、回転、エンコードはすべてこのタブの Canvas API 内で実行されます。DevTools の Network タブで確認できます——トリミング中もダウンロード中もリクエストは一切発生しません。
トリミングすると画質は下がりますか？
トリミング自体は可逆です——枠の外側のピクセルが捨てられるだけで、内側のピクセルはそのままコピーされます。品質が変わるのは、100% 未満の品質で JPEG や WebP に再エンコードした場合、もしくは 90/180/270 以外の角度で回転をかけた場合だけです（後者を避けるために、この 3 つの角度しか提供していません）。
Photoshop や Lightroom との違いは？
デスクトップソフトはレイヤー、色調整、バッチ処理、自動選択など高機能だが、起動が遅く、有料で、インストールが必要。オンラインツールはブラウザを開くだけで使え、インストール不要、サインアップ不要、1～2枚の画像を処理する程度なら Photoshop を起動するより速い。1枚のトリミングやアスペクト比固定ならオンラインツールのほうが適している。大量バッチや複雑な編集は PS を。
スマホのギャラリーアプリのトリミングとの違いは？
ギャラリーアプリは手軽だが、固定のアスペクト比しか選べなかったり、正確なピクセル入力ができなかったり、出力形式を変更できなかったりと制限が多い。1200×630 のような正確なサイズに切り抜きたい場合や、HEIC を JPG に変換しながらトリミングしたい場合は、スマホのギャラリーでは対応できず、本ツールが役立つ。
X/Y/W/H の値が画面で見ている数字と違うのはなぜですか？
これらは画像の原寸ピクセル座標で、画面ピクセルではありません。4000 ピクセルの写真が 800 px 幅で表示されていても、座標は 4000 まで届きます——これがエディタやアップロード先が実際に受け取る値です。
出力画像に透かしは入りますか？
いいえ。本ツールは完全無料で、透かしやログイン、回数制限は一切ありません。トリミング結果にロゴやリンクが追加されることはありません。
原画像より大きい 1242×2208 のような正確なサイズに切り出せないのはなぜですか？
切り抜き枠は画像より大きくできません——もっと大きな出力が必要なら、別途アップスケールを先にかけてください。トリミング中にアップスケールしないのは、最近傍や双線形補間ではぼやけてしまうからです。質の良いアップスケーラーは専用ツールに任せるべきです。
プリセットにない独自のアスペクト比を固定できますか？
比率を「自由」にしたまま、W と H の数値欄に欲しい値を直接入れてください——結果の比率はその 2 つの数字で決まります。W/H を計算機代わりに使うのもアリです。例えば 1080 / 1350 = 0.8 = 4:5。
複数の画像を一度にトリミングできますか？
バッチ処理には対応していません。本ツールは1枚ずつの正確なトリミング向けに設計されています。同じアスペクト比で複数画像を処理する場合は、ImageMagick などのコマンドラインツールや専用のバッチエディタをご利用ください。
ここでの回転と、スマホ写真の EXIF 向きとはどう違うのですか？
EXIF 向きはメタデータのフラグです——尊重するアプリは表示時に画像を回転して見せますが、ファイル内のピクセルは元の向きのままです。ここで回転すると実際にピクセルがレンダリングし直されるので、書き出したファイルはどのビューアでも正しい向きになります——プリンタや EXIF を無視するアプリでも同じです。
PNG、JPEG、WebP のうちどれを選べばいいですか？
スクリーンショット、UI モックアップ、テキストや鋭いエッジを含む画像は PNG（可逆、ファイルは大きめ）。印刷向けの写真や、透過よりサイズを優先したい写真は JPEG。WebP は同等の見た目で JPEG より 25〜35% 小さく、透過にも対応しています——ターゲットがモダンブラウザを使っているならこれを選ぶといいでしょう。
トリミング後にファイルサイズが逆に大きくなるのはなぜですか？
元が高圧縮の JPEG だった場合、PNG で書き出すと可逆な再エンコードで結果が大きくなります。元と同じ形式（または WebP）で書き出すと避けられます。