画像クロップ

画像クロップツールとは？#

クロップとは、長方形の範囲だけを残して残りを切り捨てる、一見すると最も単純な画像操作です。しかし実際に正確に行ろうとすると、さまざまな疑問が一気に押し寄せます。サムネイルやバナー枠に合わせて固定縦横比を維持できるか、傾いた水平線を先に直せるか、書き出しサイズはアップロードに十分小さいか、そしてこれらがデバイスから外に出ることはないか。本ページは、4 つの疑問すべてにブラウザ内で答えるフル機能のクロップスタジオです。

画像をドラッグし、選択ボックスを描く（または 8 つのハンドルのいずれかを掴んでリサイズする）、必要に応じてフレーム全体を回転・反転させ、1:1 や 16:9 のように比率を固定し、選択した領域を選んだ品質で PNG、JPEG、WebP として書き出します。すべてこのタブ内の Canvas API で動作します。元のファイルはローカルで読み込まれ、結果もローカルで再エンコードされるため、データがアップロードされることはありません。

使い方#

1. 画像を点線の ドロップ領域 にドラッグします（またはクリックしてファイルを選択）。ドロップゾーンがエディタに切り替わります。
2. クロップ前にフレーム全体を変形するには、プレビュー上のツールバーを使います。
   • 90°回転 はクリックごとに画像を時計回りに 90° 回します。選択範囲は回転後の座標空間で追跡されるため、見た目と常に整合します。
   • 左右反転 / 上下反転 はフレームを水平・垂直にミラーリングします。
3. ドロップダウンから 縦横比 を選びます。自由（任意の長方形をドラッグ）、1:1（アバター・プロフィール）、4:3、16:9（壁紙・動画カバー）。比率を固定すると、ドラッグ中もボックスはその形状を保ちます。角のハンドルはカーソルを追って拡大し、辺のハンドルは直交する辺を自動的に導き出します。
4. ボックスの本体をドラッグして移動、8 つのハンドルのいずれかをドラッグしてリサイズします。マウスとタッチの両方に対応します。
5. プレビュー下部の書き出しオプションを設定します。
   • 出力形式 — JPEG（最小・非可逆）、WebP（小さい・モダン）、PNG（可逆。PNG に品質ツマミはないため、品質スライダーは無効になります）。
   • 出力の最大辺 — ピクセル数。クロップの長辺がこの値に比率を保ったまま制限されます。0 でクロップ全体の解像度を維持します。
   • 品質 — 5〜100。JPEG と WebP のみで使用されます。92 が妥当な既定値です。サムネイルなら 80 まで下げます。
6. ダウンロード の横の読み取り値を確認します。選択サイズと出力サイズが表示されます（例: 1:1 の選択を 800 に制限した場合は 1500×1500 → 800×800）。
7. ダウンロード をクリックして保存します。選択をリセット で選択範囲を中央の既定値に戻します。

主な機能#

• 自然に感じる比率固定リサイズ。 角のハンドルは両軸でカーソルを追い、辺のハンドルはドラッグした軸のみを調整して反対側を比率から再計算します。意図しない引き伸ばしは起きません。
• 変換を反映した選択範囲。 回転と反転はオフスクリーンのキャンバスに一度だけ適用され、クロップボックスはその変換空間内に存在します。そのため、選んだものがそのまま書き出されます。プレビューと出力の不一致はありません。
• 正直な品質設定を持つ 3 形式。 PNG は可逆と明示され、スライダーを黙って無視するのではなく無効化します。JPEG と WebP はエンコーダーに直結する本来の品質値を扱います。
• オプションの出力制限。 最大辺を設定すると、比率を保ったままクロップが縮小されます。アバター、Open Graph 画像、アップロードサイズ制限に便利で、計算は不要です。
• 前後のライブ読み取り。 選択寸法と最終出力寸法が並んで表示されるため、制限や比率の変更が確定前に分かります。
• 100% ローカル。 画像はブラウザでデコードされ、ブラウザで再エンコードされます。アップロード先は存在しません。

実例#

4000×3000 の横長写真があり、長辺 1280px の 16:9 バナーサムネイルが必要だとします。写真を読み込み、縦横比 を 16:9 に設定して、水平線に合わせて選択をドラッグします。比率が固定されているため、ボックスは 16:9 の長方形にスナップします。ソースピクセルで選択が 4000×2250 になったとします。ここで 出力の最大辺 に 1280 と入力すると、読み取り値が次のように更新されます。

crop size  4000 × 2250  →  1280 × 720

出力形式: JPEG を選び、品質 を 92 のまま、ダウンロード します。シーンに応じて約 180〜280 KiB の 1280×720 JPEG が得られます。これは元の数メガバイトのファイルのごく一部で、ヒーローバナーが必要とする正確な縦横比を持ち、レターボックスもありません。同じ手順で 1:1、出力の最大辺 512 とすれば、アップロード可能なプロフィールアイコンが完成します。

よくある質問#

選択範囲があるサイズより小さくならないのはなぜですか？#

ハンドルを掴みやすいよう、書き出しが極細のスリットにならないよう、8 ピクセルの最小辺が設定されています。極端にきついクロップが必要な場合は、ズームインして極小領域をクロップするのではなく、大きめにクロップしてから 出力の最大辺 で縮小してください。

16:9 に固定したのに、端っこでドラッグするとボックスのサイズが変わりました。#

それは、ボックス全体を画像内に収めるための境界クランプです。比率固定のボックスが端を越えそうになると、比率を維持したまま短い方が縮みます。まずボックスを中央付近に動かしてからリサイズしてください。

JPEG と WebP のどちらで書き出すべきですか？#

同じ品質の WebP は通常 JPEG より 25〜35% 小さく、現在は主要な環境すべてでサポートされています。下流のレガシーパイプラインが WebP を弾く場合にのみ JPEG を使ってください。クロップがロゴ、UI のスクリーンショット、あるいはシャープなエッジとフラットな色を含むもので、非可逆アーティファクトが目立つ場合は PNG を使ってください。

クロップするとファイルサイズは減りますか？#

2 つの意味で減ります。面積が減ればエンコードすべきピクセルが減り、さらに 出力の最大辺 で追加の縮小ができます。ただし、ノイズの多い写真を 200×200 で品質 100 にクロップした場合、フル画像を品質 80 にしたものより大きくなることもあります。非可逆サイズの調整は 品質 スライダーが真のレバーです。