CodeKitHubこのツールとは？
画像トリミングツールは、写真から長方形の領域を切り取り、残りを削除します。これは最も基本的で、最も頻繁に必要とされる写真編集作業です。スクリーンショットを必要なウィンドウの部分だけに切り取ったり、集合写真から自分の部分を切り出してアバターにしたり、背景の乱れた縁を取り除いたり、風景写真を投稿用に正方形に再構図したりといった用途があります。
このトリミングツールは、ブラウザ内のHTML5 Canvas API上で動作します。 ファイルを選択すると、そのファイルはローカルでデコードされ、選択範囲は辺や角をドラッグして調整し、そのピクセルのみを新しいキャンバスにコピーすることでトリミング画像が生成されます。サーバーを介さないため、アップロードの待ち時間やファイルサイズによる追加料金、プライバシーの犠牲も一切ありません。ページが読み込まれれば、オフラインでもこのツールは動作します。
なぜこれを使うのか？
- ドラッグ＆調整による選択：ボックスを移動したり、角や端のハンドルを引っ張ったりして、フレームの位置が完璧になるまで調整できます。その際、ピクセル単位でのサイズがリアルタイムで表示されます。
- アスペクト比のプリセット（1:1、4:3、16:9、9:16）を使用すると、アバター、サムネイル、縦型動画のカバー画像の枠の形状が固定されます。また、フリーモードに切り替えると、自由にトリミングを行うことができます。
- PNG（非圧縮、透明度を維持）またはJPG（写真の場合はファイルサイズが小さくなります）としてダウンロードできます。エクスポート時に選択してください。
- Canvas API による 100% ローカル処理：画像は一切アップロード、送信、保存されることはありません。これは、個人データを含む証明写真、書類、スクリーンショットなどにおいて重要なポイントです。
- 無料で、透かしもなく、会員登録も不要です。デスクトップだけでなく、スマートフォンやタブレットでもタッチ操作によるドラッグが可能です。
使い方
- アップロードエリアをクリックするか、画像ファイルをその上にドラッグ＆ドロップしてください。JPG、PNG、WebPをはじめ、一般的な形式のほとんどに対応しています。
- 選択枠内をドラッグして移動するか、角や辺のハンドルをドラッグしてサイズを変更してください。
- 必要に応じて、アスペクト比のプリセット（1:1、4:3、16:9、9:16）を選択してボックスの形状を固定するか、自由な形状のままにしておくことができます。
- 出力形式としてPNGまたはJPGを選択してください。
- 「切り抜いてダウンロード」ボタンを押すと、トリミングされた画像がすぐにダウンロードされます。
例
入力
A 4000×3000 photo, selection locked to 1:1 over the face, 800×800 area chosen出力
An 800×800 PNG containing only the selected square出力時には元のピクセルが1対1で保持されます。JPG形式でエクスポートする場合を除き、トリミングによって選択範囲のサイズ変更や再圧縮が行われることはありません。JPG形式でエクスポートする場合は、軽微な画像圧縮が適用されます。
よく使う切り抜き比率とその用途
アスペクト比は、元の画像ではなく、公開先のプラットフォームに合わせて設定してください。縦長の写真の中央から切り抜いた16:9のサムネイルは、通常、レターボックス状の余白が入るよりも見栄えが良くなります。 プラットフォームで正確なピクセルサイズが指定されている場合は、まずそのアスペクト比に合わせてください。トリミングの段階で正しい形状に整えておけば、多くのサイトで適用される自動中央トリミングを回避でき、頭やテキストが切り取られるのを防げます。
| 理由 | 形状 | 代表的な用途 |
|---|---|---|
| 1:1 | スクエア | プロフィール写真、Instagramのフィード、アプリアイコン |
| 4:3 | 古典的な風景 | プレゼンテーション、旧型のカメラ、iPadの画面 |
| 16:9 | ワイドスクリーン | YouTubeのサムネイル、動画のカバー画像、モニター |
| 9:16 | 縦 | ストーリー、リール、TikTok、スマホの壁紙 |
| 無料 | 任意の長方形 | スクリーンショットのトリミング、余白の削除、レイアウトのカスタマイズ |
画像編集ツールの中で、トリミングはどのような位置づけにあるのか
トリミングは画像に写る内容を変え、リサイズはその大きさを変えます。一般的なアバター作成のワークフローでは、この両方が使われます。まずここで1:1にトリミングし、その後「Image Resizer」を使って必要なサイズである400×400にリサイズします。この順序で処理を行うと、最終的な構図で一度だけリサイズが行われるため、被写体が鮮明に保たれます。
トリミング後もファイルサイズが大きすぎる場合（特に高解像度のスマホ写真ではよくあることですが）、画像圧縮ツールを使って圧縮してください。また、情報を削除するのではなく隠すことが目的の場合は、検閲ツールを使って機密部分をぼかしたりピクセル化したりすることで、写真の他の部分をそのまま残すことができます。
→ 画像リサイザー · 画像圧縮ツール · 写真モザイク・ぼかしツール
よくある質問
私の画像はサーバーにアップロードされていますか？
いいえ。ファイルはブラウザによって直接開かれ、お使いのデバイス上でCanvas APIを使用して処理されます。データが送信されたり、保存されたり、記録されたりすることは一切ありません。ページを読み込んだ後、インターネット接続を切断しても、通常通りトリミングを行うことで、これを確認できます。そのため、このツールは身分証明書や契約書、その他の機密性の高い画像の処理にも安全にご利用いただけます。
どのアスペクト比を使えばいいですか？
1:1（正方形）は、ほとんどのプロフィール写真やInstagramのフィード投稿に適しています。4:3は、従来の写真やプレゼンテーションのフォーマットに合います。16:9は、YouTubeのサムネイル、動画のカバー画像、ワイドスクリーンディスプレイの標準です。9:16は、ストーリー、リール、TikTok、スマートフォンの壁紙など、縦長のコンテンツ向けです。 特定のプラットフォームでアスペクト比が指定されていない場合は、「フリーモード」を使用することで、任意の長方形にトリミングできます。
PNGとJPG、どちらでダウンロードすればいいですか？
PNGは非可逆圧縮ではなく、透明度も保持されるため、スクリーンショット、グラフィック、ロゴ、およびテキストを含むあらゆるコンテンツに適しています。JPGは写真コンテンツを、画質の劣化がほとんど目立たない状態で大幅に小さなファイルサイズに圧縮するため、共有やアップロードを目的とした写真に適しています。迷った場合は、テキストや透明度があるもの → PNG、写真 → JPG としてください。
トリミングをすると画質は低下しますか？
トリミング自体には画質劣化はありません。選択したピクセルは変更されずにコピーされるため、トリミング後の領域は元の画像とピクセル単位で同一です。画質に影響を与えるのはエクスポート形式のみです。PNG形式ではすべてが正確に保持されますが、JPG形式では写真用の圧縮が適用されます。このツールは画像の拡大・縮小を行わないため、リサンプリングによるシャープネスの低下は発生しません。
ピクセル単位で正確なサイズにトリミングすることはできますか？
ドラッグ中に選択範囲のサイズがピクセル単位でリアルタイムに表示されるため、必要なサイズが表示されるまでハンドルを微調整することができます。 ソースのフレーミングに関係なく、512×512のような正確なターゲットサイズが必要な場合は、ここで適切な形状（この場合は1:1）にトリミングし、その後「Image Resizer」を使用して結果を拡大・縮小してください。