画像を16:9・正方形に切り抜く方法｜アスペクト比ごとの手順を解説
画像を16:9や1:1（正方形）など特定のアスペクト比で切り抜く方法を解説。Webサイト・SNS・資料作成での用途別に最適な手順とツールを紹介します。
アスペクト比を指定して切り抜くとはどういうことか
画像をトリミングするとき、「縦横の比率を維持したまま切り抜く」操作がアスペクト比指定のクロップです。単に余白をカットするのではなく、出力サイズの縦横比をあらかじめ決めておき、その枠内に収まるよう画像の一部を切り出します。
よく使われるアスペクト比を以下に整理します。
| アスペクト比 | 比率 | 主な用途 |
|---|---|---|
| 16:9 | 横長 | YouTube サムネイル・プレゼンスライド・OGP 画像 |
| 1:1 | 正方形 | Instagram 投稿・アバター・EC商品画像 |
| 4:3 | やや横長 | ブログ記事のアイキャッチ・旧テレビ規格 |
| 9:16 | 縦長 | Instagram Stories・TikTok |
| 3:2 | 横長 | デジタル一眼レフの標準出力 |
アスペクト比が合っていない画像をそのまま使うと、CMS や SNS 側でトリミングや余白付加が自動適用され、意図しない見た目になります。特に OGP 画像では横 1200px × 縦 630px（16:9 相当）が推奨されており、比率が外れると主要なオブジェクトが切れて表示されるケースが頻発します。
環境別：アスペクト比指定クロップの手順
Windows 標準の「フォト」アプリを使う場合
- 画像ファイルをフォトで開く
- 上部メニューの「編集と作成」→「編集」を選択
- 「トリミングと回転」タブを開く
- 縦横比プルダウンから「16:9」「正方形」などを選ぶ
- 切り抜き範囲をドラッグで調整し、「完了」→「保存」
フォトアプリは手軽ですが、カスタム比率（例: 3:1）の指定や数値入力による精密な配置調整は苦手です。
macOS「プレビュー」を使う場合
- 画像をプレビューで開き、ツールバーの「マークアップツールバーを表示」をクリック
- 選択ツール（点線の四角）で範囲を選択
- 「ツール」メニュー→「選択部分をトリミング」（⌘K）
macOS プレビューはアスペクト比を固定したままドラッグする機能が弱いため、正確な比率を保つには Shift キーで正方形選択する程度の補助しかありません。16:9 を厳密に指定したい場合は向いていません。
Photoshop / Illustrator などの専門ソフトを使う場合
Photoshop では切り抜きツール（C キー）のオプションバーで「比率」を選び、W と H にそれぞれ 16 と 9 を入力します。精度は高く、ピクセル数まで指定した出力も可能です。ただし月額コストが発生するため、簡易な用途には過剰なケースもあります。
ブラウザだけで完結させる方法
インストール不要・登録不要で処理したい場合、ブラウザ内で動作するツールが実用的です。なかでも 画像編集ツール はファイルをサーバーに送信せず、WebAssembly と Canvas API を使ってブラウザ内のみで処理を完結させます。
具体的な操作手順
- 画像編集ツール にアクセスする
- 「ファイルを選択」または画面へのドラッグ＆ドロップで画像を読み込む
- クロップモードを選び、アスペクト比のプリセット（16:9・1:1・4:3・9:16 など）を選択する
- 切り抜き範囲を調整し、「ダウンロード」で保存する
ネットワーク通信が発生しないため、DevTools の Network タブを開いて確認すると画像データのアップロードリクエストが一切ないことを確認できます。社内資料・個人情報を含む画像を扱う際の懸念を回避できる点が、オンラインツールの中では明確に異なります。
主要なオンラインツールとの比較
| ツール | サーバー送信 | 無料制限 | アスペクト比プリセット | オフライン動作 |
|---|---|---|---|---|
| zerosend 画像編集ツール | なし（ブラウザ内処理） | なし | あり | 可（SW キャッシュ） |
| Canva | あり | 機能制限あり | あり | 不可 |
| Adobe Express | あり | 機能・枚数制限あり | あり | 不可 |
| iLovePDF / Img2Go | あり | 容量・枚数制限あり | あり | 不可 |
| macOS プレビュー | なし（ローカル） | なし | なし（手動調整のみ） | 可 |
Canva や Adobe Express はデザイン機能が豊富ですが、画像データはサーバーにアップロードされます。利用規約上は処理後に削除されるとされているものの、機密性の高い素材には注意が必要です。
よくあるミスと対処法
切り抜き後にぼやける
出力ピクセル数が小さすぎるケースです。16:9 で書き出す場合は最低でも 1280×720px を確保することが推奨されます。YouTube サムネイルは 1280×720px、OGP 画像は 1200×630px が一般的な最低ラインです（参考: Open Graph protocol 仕様）。
切り抜いた範囲が意図した箇所からずれる
ピクセル数を指定せずに比率だけで出力すると、ツールによっては元画像のどの部分を中心にするかが異なります。被写体の位置を意識して切り抜き枠を手動調整する習慣をつけることが重要です。
変換後にファイルサイズが増える
PNG で出力すると、トリミング前より容量が増えることがあります。最終的な用途が Web であれば、クロップ後に JPEG または WebP で書き出すのが合理的です。WebP の仕様については Google の WebP 公式ドキュメント を参照してください。
まとめ
アスペクト比を指定した画像の切り抜きは、SNS・OGP・プレゼン資料など用途ごとに異なる比率に対応する必要があります。OS 標準ツールはお手軽ですが精度に限界があり、Photoshop 系は高機能な反面コストがかかります。
ブラウザ内処理の 画像編集ツール は、インストールなし・登録なし・サーバー送信なしという条件をすべて満たしたうえで、16:9・正方形など主要なアスペクト比プリセットを使ったクロップに対応しています。用途と環境に合わせてツールを選んでください。
Zerosend Editorial
Zerosend の制作チームによる記事です。ファイルがデバイスの外に出ないことを設計の中心に置き、WASM・Web Worker をベースとするブラウザ完結ツールを開発しています。
Zerosend Editorial について →関連記事
音声・BGMのカット・トリミング・無音編集を無料でやる方法
音声ファイルのトリミング・BGMカット・無音部分の編集方法を解説。ブラウザだけで完結する無料ツールも紹介。インストール不要で手軽に作業できる。
画像を横並び・縦並びに無料で結合する方法【コラージュ作成】
複数の画像を横並び・縦並びに結合してコラージュを作る方法を解説。ブラウザだけで完結する無料ツールの使い方と、各手法の特徴を比較します。
動画トリミングをオンラインで無料・簡単にやる方法【完全ガイド】
動画のトリミングをオンラインで無料・簡単に行う方法を解説。インストール不要のブラウザ完結ツールを中心に、各方法の特徴と使い分けを実践的にまとめた。