✂️ 画像切り抜きツール の使い方
画像の必要な範囲だけを切り出したいときに便利な無料ブラウザツールです。プレビュー上をドラッグして範囲を選ぶだけで、座標とサイズを確認しながら簡単にトリミングできます。SNS 用のプロフィール画像作成やスクリーンショットの不要な余白削除など、日常的な画像編集作業をアプリのインストールなしにこなせます。画像はブラウザ内で処理されるため、ファイルが外部サーバーに送信されることはありません。
🚀 画像を切り抜く →📌 このツールでできること
- ✂️ ドラッグ操作でトリミング範囲を選択：プレビュー上をドラッグするだけで直感的に切り抜き範囲を指定できます。マウスをリリースした瞬間に選択完了です。
- 🧭 座標・サイズの数値微調整：左上基準の X / Y 座標と幅 / 高さが自動反映され、1px 単位でキーボード入力しながら細かく追い込めます。
- 📐 ピクセル精度の切り抜き：SNS・OGP・アイコンなど決まったサイズに合わせた正確なトリミングが可能です。
- 🔄 形式変換（JPEG / PNG / WebP）：切り抜きと同時に出力形式も変換できます。写真なら JPEG、透過が必要なら PNG か WebP を選べます。
- 🎨 品質調整：JPEG・WebP では出力品質（0〜100%）を調整して、ファイルサイズと画質のバランスを取れます。
- 👁️ リアルタイムプレビュー：切り抜き後の仕上がりをダウンロード前にプレビューで確認できます。
- ⬇ 切り抜き後の画像をダウンロード：処理後の画像をそのままブラウザからローカルに保存できます。
- 🔒 プライバシー保護：すべての処理はブラウザ内の Canvas API で完結し、画像が外部に送信されることはありません。
🚀 使い方
- 画像ファイルを選択します。
ファイル選択ボタンをクリックするか、プレビューエリアにファイルをドラッグ＆ドロップしても選択できます。JPEG・PNG・WebP 形式に対応しています。 - 元画像プレビュー上をドラッグして切り抜き範囲を選択します。
左上から右下方向にドラッグすると選択範囲が青いオーバーレイで表示されます。選択後でも再ドラッグで範囲を変更できます。 - 必要に応じて座標と幅・高さを数値で微調整します。
開始 X・Y 座標と幅・高さの入力欄が自動で埋まります。特定のピクセルサイズにしたい場合はここで直接入力してください。 - 出力形式と品質を選び、「▶ 切り抜く」を押します。
形式は「元の形式のまま」「JPEG」「PNG」「WebP」から選択できます。品質スライダーで圧縮率も調整できます。 - プレビューを確認し、「⬇ ダウンロード」で保存します。
プレビューに問題がなければダウンロードボタンを押して完了です。やり直したい場合は範囲を再選択してください。
💡 活用例
SNS・アプリのプロフィール画像を作成する
撮影した写真から顔まわりや上半身だけをドラッグで選択し、SNS 向けの正方形アイコンとして切り抜けます。Twitter / X は 400×400px、Instagram は 320×320px を目安にするとプロフィール画像として最適です。JPEG 品質を 85% 程度に設定するとファイルサイズも抑えられます。
スクリーンショットの不要な余白・UI を削除する
ブラウザやアプリのスクリーンショットを撮ると、ウィンドウ枠やタスクバーが映り込むことがあります。切り抜きツールを使えばコンテンツ部分だけを切り出して、ブログや資料に貼りやすいスッキリとした画像に加工できます。座標入力で余白を正確に揃えると複数枚の画像で統一感が出ます。
商品写真・バナー素材の調整
EC サイトや広告バナー向けに、商品の必要な部分だけを切り出して背景の余白を整えることができます。OGP 画像（1200×630px）用に特定の縦横比に合わせた切り抜きも、幅・高さの数値入力を使えばピクセル精度で行えます。
ドキュメント・資料の画像を整形する
Word・PowerPoint・PDF などのドキュメントに貼り付ける画像を作成する際、余分な部分をカットして情報密度を高めるのに便利です。プレゼン資料や報告書のスライドに合わせた比率でトリミングすることで、見栄えの良い資料が作れます。
🧩 技術的背景：Canvas API とトリミングの仕組み
このツールはブラウザ標準の Canvas API を使用して画像を処理しています。選択した範囲の座標と幅・高さを drawImage() メソッドに渡すことで、指定エリアだけをオフスクリーン Canvas に描画し、toBlob() または toDataURL() で出力画像データとして取得する仕組みです。
座標系は画像の左上隅を (0, 0) として、X 軸が右方向、Y 軸が下方向に増加します。プレビュー上でのドラッグ位置は表示スケールに合わせて実際のピクセル座標に変換されるため、プレビューがどのズーム率で表示されていても正確な切り抜きが可能です。
出力形式として JPEG を選んだ場合は非可逆圧縮、PNG を選んだ場合は可逆圧縮でエンコードされます。WebP は Google が開発した次世代フォーマットで、同画質での JPEG 比約 25〜35% のサイズ削減が期待できます。透過チャンネル（アルファチャンネル）を持つ画像を JPEG で出力すると背景が白で塗り潰されるため、透過を維持したい場合は PNG または WebP を選択してください。
⚠️ 注意事項・制限
- 対応形式：JPEG・PNG・WebP に対応しています。GIF・TIFF・BMP・SVG などは対応していません。
- ファイルサイズ：大きすぎるファイル（目安として 20MB 超）はブラウザのメモリ制限により処理が遅くなるか失敗する場合があります。
- アニメーション GIF：GIF 形式はサポート対象外のため、静止画として読み込まれます。
- 透過 PNG の切り抜き：PNG の透過（アルファチャンネル）は保持されます。JPEG で出力すると透過部分は白背景に変換されます。
- モバイル対応：スマートフォン・タブレットのブラウザでも利用できますが、小さい画面ではドラッグ操作がしにくい場合があります。その際は数値入力欄で直接指定してください。
❓ よくある質問
- Q. 画像のどこを基準に座標を指定しますか？
- 画像の左上角が原点 (0, 0) です。開始 X 座標は左端からの横方向の距離、開始 Y 座標は上端からの縦方向の距離をピクセル単位で表します。たとえば X=100, Y=50 と指定すると、左から 100px・上から 50px の位置から切り抜きが始まります。
- Q. 切り抜いたあとに形式も変えられますか？
- はい。元の形式のまま保存するほか、JPEG・PNG・WebP に変換して保存できます。切り抜きと形式変換は同時に行われるため、手順は増えません。
- Q. 透過 PNG を切り抜いても透明部分は保持されますか？
- 出力形式を PNG または WebP に設定すれば、切り抜き後も透過部分（アルファチャンネル）が維持されます。JPEG は透過を持てないため、透明部分は白で塗り潰されます。透過を保持したい場合は必ず PNG か WebP を選択してください。
- Q. GIF や TIFF は使えますか？
- 現在は JPEG・PNG・WebP のみ対応しています。GIF や TIFF を使いたい場合は、事前に別のツールで対応形式に変換してからご利用ください。
- Q. スマートフォンやタブレットで使えますか？
- モバイルブラウザでも利用できます。ただし小さい画面での細かいドラッグ操作は難しい場合があります。そのような場合は座標と幅・高さを数値入力欄に直接入力することで対応できます。
- Q. ファイルサイズに上限はありますか？
- 明示的な上限は設けていませんが、ブラウザのメモリ制限により大きなファイル（目安 20MB 以上）では処理が遅くなることがあります。高解像度の RAW 現像ファイルなどは事前に適切なサイズに変換してからご使用ください。