画像の切り抜き・トリミング

JPG、PNG、WebP、AVIFに対応。1:1、16:9、9:16、4:5、3:2、4:3など自由なアスペクト比で切り取れます。

または画像をここにドロップ

このツールについて

Araluma のトリミングツールは cropperjs v2 を使い、ブラウザ内で画像を長方形に切り取ります。JPG、PNG、WebP、AVIF のファイルをページにドロップすると、切り取りキャンバスがすぐに開きます。ハンドルをドラッグして範囲を決め、比率チップ(1:1、16:9、9:16、4:5、3:2、4:3、A4)をタップして固定するか、ピクセル数を直接入力すると枠が合わせて変わります。出力サイズはダウンロードする前に、元画像のピクセル数でその場に表示されます。画像は端末から離れません。DevTools のネットワークタブを見れば、切り取り中に外向きの画像リクエストがないことを確認できます。PNG と WebP は元の透明部分をそのまま残し、JPG は透明部分を白で塗ります。EXIF メタデータはすべての書き出しで取り除かれます。ソフトをインストールせず、1枚ずつ正確な長方形切り取りをしたい方に向いています。

画像を切り取る
ブラウザでの切り取り方法

ブラウザでの切り取り方法

画像はブラウザの File API で直接開かれます。サーバへのアップロードはなく、端末の外には一時ファイルも保存されません。切り取り枠を希望の位置までドラッグして、角や辺からサイズを変えると、ピクセル数の表示がリアルタイムで更新されます。座標は元画像のピクセル空間で計算されるので、表示される数値が出力ファイルの実寸そのものです。DevTools を開いてネットワークタブに切り替えながら切り取ってみてください。外向きの画像リクエストは一つも出ません。ドロップしたファイルもダウンロードするファイルも、セッション中ずっと端末の中に留まります。

画像を切り取る
比率の固定またはピクセル数を直接入力

比率の固定またはピクセル数を直接入力

比率チップ(1:1 は正方形、16:9 は横長、9:16 は縦長、4:5、3:2、4:3、A4)をタップすると、選択枠がその比率に固定されます。画像のどこに枠を置くかは自由にドラッグして決められます。特定のピクセル数を狙う場合は、幅と高さの入力欄に直接タイプすれば枠がそのサイズに合わせて変わります。出力は常に選択した範囲の元ピクセル数と同じです。このツールは拡大しません。選択範囲が幅 600 ピクセルなら、出力ファイルも幅 600 ピクセルです。

画像を切り取る
JPG 出力では透明部分が白になります

JPG 出力では透明部分が白になります

元のファイルに透明な部分(PNG、アルファ付きの WebP、アルファ付きの AVIF)があり、出力形式に JPG を選んだ場合、その透明ピクセルは白で塗りつぶされます。JPG にはアルファチャンネルがないので、透明情報を保存する場所がありません。透明を残したい場合は、完了画面のフォーマット選択で PNG、WebP、AVIF のいずれかを選んでください。PNG と WebP は元のアルファチャンネルをそのまま引き継ぎます。AVIF もアルファに対応しています。フォーマット選択には各オプションの特徴が表示され、ダウンロード前に選び分けられます。

画像を切り取る
キーボードで正確に範囲を動かす

キーボードで正確に範囲を動かす

Tab キーで切り取り枠にフォーカスを移し、矢印キーで選択範囲を 1 ピクセルずつ動かせます。Shift と矢印を同時に押すと、移動量は 10 ピクセルに増えます。このキーボード操作は cropperjs v2 のネイティブ機能として組み込まれていて、後付けのアクセシビリティ層ではありません。トラックパッドでは届かないサブピクセルの位置合わせや、キーボードだけで作業したい場合に役立ちます。モバイルではタッチ操作にも対応していて、ピンチでキャンバスをズームし、選択角をドラッグして枠を作り直せます。どちらの場合も特別なモードを切り替える必要はありません。

画像を切り取る
出力形式:PNG、JPG、WebP、AVIF

出力形式:PNG、JPG、WebP、AVIF

切り取り後、完了画面でダウンロード形式を選びます。PNG は劣化なしで、透明部分も維持します。JPG は標準で品質 0.9 のロッシー圧縮を適用し、多くの写真では元との違いが見た目にわかりません。WebP は劣化ありとなしの両モードを持ち、透明部分にも対応します。AVIF は @jsquash/avif で品質 0.9 でエンコードされます。同じ画質で最も小さなファイルになりますが、セッション中で初回のみ 870 KB の WASM をダウンロードします。デフォルトの出力形式は入力と同じです。PNG を入れれば PNG が、JPG を入れれば JPG が出ます。完了画面でいつでも変更できます。

画像を切り取る
他のツールとの使い分け

他のツールとの使い分け

このツールは長方形(正方形、横長、縦長、任意のピクセル数)だけを切り取ります。背景透過の丸い切り抜き、たとえばプロフィール写真には Circle Crop を使ってください。同じくブラウザ内で動きますが、出力は丸い PNG です。Instagram の 1080×1080、YouTube のサムネイル 1280×720、Facebook のカバー 1200×630 など、プラットフォーム別の決まった寸法には、Crop ファミリーのプリセットページを開けば最初から入っています。形を変えずに形式だけ変えたい場合は、Convert ツールで PNG、JPG、WebP、AVIF に変換できます。

写真を円形に切り抜く方法

  1. 画像をドロップ

    ツールを開いて、JPG、PNG、WebP、AVIF のファイルをアップロード領域にドロップするか、クリックして端末から選びます。

  2. 比率またはピクセル数を選ぶ

    比率チップ(1:1、16:9、9:16、4:5、3:2、4:3、A4)をタップするか、幅と高さの入力欄にピクセル数を直接入れて切り取り枠を決めます。

  3. 枠の位置を決める

    残したい部分に切り取り枠をドラッグし、角や辺からサイズを調整して、リアルタイムの表示で必要な出力寸法に合わせます。

  4. 切り取ってダウンロード

    切り取りボタンを押し、完了画面で出力形式(PNG、JPG、WebP、AVIF)を選んで、ファイルを端末にダウンロードします。

よくあるご質問

画像をオンラインでトリミングするにはどうすればいいですか?

切り取りツールに画像をドロップし、比率を選ぶかピクセル数を入力します。残したい範囲に枠をドラッグして、切り取りボタンを押してダウンロードします。すべてブラウザ内で処理されます。最近の端末では、アップロードからダウンロードまで 10 秒もかかりません。

PNG 画像をオンラインで切り抜く方法は?

PNG をツールにアップロードし、比率かピクセル数を設定し、枠を合わせて切り取りボタンを押します。完了画面で出力形式に PNG を選べば、アルファチャンネルがそのまま保たれます。JPG を選ぶと透明部分が白になります。PNG 出力は劣化がないので、切り取りで画質が下がることはありません。

Instagram に使う画像の切り抜き比率は?

正方形投稿には 1:1、縦長フィード投稿には 4:5、ストーリーやリールには 9:16 を使います。比率チップをタップしてから、枠を被写体に合わせてドラッグし、切り取りボタンを押すだけです。出力寸法は枠の元ピクセル数と同じです。

SNS 投稿に最適なアスペクト比は何ですか?

Instagram の正方形投稿は 1:1、縦長フィードは 4:5、ストーリーとリールは 9:16、YouTube のサムネイルや Twitter のヘッダーは 16:9 が定番です。Facebook のカバーは 1200×630 ピクセル(およそ 2:1)が最適です。このツールには 1:1、16:9、9:16、4:5、3:2、4:3 のチップと、カスタムピクセル入力があります。

切り抜いた画像のファイル形式は何が選べますか?

PNG(劣化なし、透明対応)、JPG(標準で品質 0.9、ロッシー)、WebP(劣化ありとなしを選べる、透明対応)、AVIF(同じ画質で最小、@jsquash/avif の WASM で書き出し)が選べます。デフォルトは入力と同じ形式で、完了画面でダウンロード前にいつでも変えられます。

丸く切り抜くにはどのツールを使えばいいですか?

丸い出力(角が透明)には /circle-crop/ の Circle Crop を使ってください。同じくブラウザ内で処理し、丸い PNG を返します。こちらの crop-image ツールは長方形専用で、正方形、横長、縦長、カスタムピクセル数の切り取りに対応しています。

詳細

良い円形クロップの背後にある技、フォーマット、小さな決定についてのチームからのメモ。

cropperjs v2 がピクセル空間の座標をどう扱うか
cropperjs v2.1.1 では、選択枠の座標は元画像のピクセル空間で計算されます。画面のピクセル空間ではありません。これが高 DPI ディスプレイで重要になります。デバイスピクセル比 3× のスマートフォンは、CSS 上で幅 300 ピクセルの画像を実際には 900 ピクセルで描画しますが、選択枠の座標は 900 ピクセル基準です。ダウンロードするファイルには、選択範囲が元画像で表している実ピクセル数がそのまま含まれます。切り取り処理は selection.$toCanvas() を呼び、選択ピクセル数のサイズで新しい HTMLCanvasElement を返します。そのキャンバスを canvas.toBlob() に渡して PNG・JPG・WebP を、または @jsquash/avif に渡して AVIF を生成します。拡大処理は入りません。選択範囲が 800 ピクセル幅なら、出力も 800 ピクセル幅です。ライブラリ本体は jsDelivr CDN の content-length ヘッダ計測で 41 960 バイト(raw)、12 175 バイト(gzip)です。
画像がサーバに送られない仕組み
画像はブラウザの File API で直接読み込まれ、cropperjs v2 のキャンバスに描画され、canvas.toBlob() または @jsquash/avif の WASM で書き出されます。サーバへのアップロードは一切ありません。これを自分の目で確認するには、DevTools のネットワークタブを開き、フィルタを Img にして、画像をドロップしてから切り取りボタンを押すまでを観察してください。外向きの画像リクエストは記録されません。WASM のロード(AVIF を初めて選んだ場合の 870 KB)はキャンバスへの画像描画とは別の経路で、画像データ自体は端末から出ません。プライバシーへの影響が大きい使い道、たとえば医療画像や ID 用写真、社内資料のスクリーンショットでも、外部に送信されるリスクなしに切り取れます。
形式ごとの透明度の扱い
PNG、WebP、AVIF はアルファチャンネルを持つので、元の透明部分をそのまま出力に引き継げます。JPG にはアルファチャンネルがないので、透明ピクセルは白で塗りつぶされます。これは canvas.toBlob() の挙動です。完了画面のフォーマット選択には各形式の特徴がラベル表示されるので、ダウンロード前にトレードオフが見えます。透明部分を残したい場合は PNG が安全な選択肢です。WebP は同じ透明保持で、ファイルサイズを 25 から 35 パーセントほど削減できます。AVIF も透明対応で、さらに小さくなりますが、初回エンコードで WASM ダウンロードが入ります。出力の見た目を実機で確認してから判断してください。
AVIF エンコード:品質と速度
AVIF の書き出しは @jsquash/avif 2.1.1 を使い、デフォルトの品質設定は 0.9 です。エンコーダは WASM で動き、初回ロードは 870 KB です。同じセッション中で 2 回目以降は再ダウンロードしません。Convert ツールと同じチャンクを共有しています。Chromium 系ブラウザでは温まったエンコードがおよそ 250 ms 程度ですが、Firefox では同じ画像で 4 倍ほど時間がかかります(Convert ツールの E2E 検証と同じ傾向、docs/research/convert-e2e-2026-05-16.md)。大きな画像、たとえば 4000 ピクセル幅の写真では、初回エンコードに数秒かかることがあります。AVIF が必要ない場合は PNG か WebP が高速です。同じ画質で最小のファイルが必要なら AVIF が向いています。
キーボードとタッチでのアクセシビリティ
矢印キーで選択範囲を 1 ピクセルずつ動かせます。Shift と矢印を同時に押すと、10 ピクセル単位での移動になります。これは cropperjs v2 のネイティブ機能としてシャドウルート内のキーボードハンドラに組み込まれていて、別途のポリフィルではありません。スクリーンリーダーや支援デバイスを使う方、キーボードだけで操作したい方、トラックパッドでは届かないサブピクセル位置合わせが必要な方の助けになります。モバイルではピンチでキャンバスをズームし、選択角をドラッグして枠を作り直せます。ライブのピクセル表示は矢印キー入力ごとに更新されるので、aria-live 領域を持つ環境では音声でも寸法変化を追えます。この点では iLoveIMG や img2go よりも先に対応できています(2026-05-17 の競合監査で確認)。
EXIF メタデータの除去
すべての書き出しで EXIF、IPTC、XMP、ICC プロファイルが取り除かれます。これはキャンバスパイプラインの仕様です。ブラウザがデコードしたピクセルを HTMLCanvasElement に描き、その結果を新しいファイルに再エンコードする時点で、メタデータコンテナの情報は引き継がれません。キャンバスはピクセル値とエンコードパラメータしか保持しないからです。削除される情報には、GPS 座標、カメラのメーカーとモデル、レンズ焦点距離、露出設定、著作権フィールド、カラープロファイルタグが含まれます。多くの Web 公開や SNS 投稿では、これは望ましい挙動です。スマートフォン写真に埋め込まれた GPS は意図せず位置を明かしてしまうからです。色管理が必要な印刷や出版用途では、ICC プロファイルの忠実度は保たれないので、専用のメタデータ保持ツールを使ってください。Chromium、Firefox、WebKitGTK の E2E 検証で同じ挙動を確認しています。