歪みなく画像の縦横比を変更する方法

更新日: June 28, 2026

画像の縦横比を変更することは、写真を引き伸ばすことを意味してはいけません。クリーンなワークフローは、新しいフレームがピクセルを削除するか、空のスペースを追加するか、シーンを拡張するかを決定することです。このガイドでは、いつクロップし、いつパディングし、いつアウトペイントすべきか、一般的なプラットフォームで使用する比率、そしてエクスポート前に確認すべき事項を紹介します。

クイック回答：歪みなしでアスペクト比を変更する方法は？

crop、pad、または outpaint を使用してください。幅と高さをロック解除して画像を新しい形にドラッグしないでください。そうすると被写体が引き伸ばされ、円が楕円になり、製品写真がおかしく見えます。

重要な被写体はエッジをトリミングした後でも収まる場合は crop を選びます。ロゴ、製品写真、証明書、スクリーンショット、またはマーケットプレイスの画像など、すべてのピクセルが重要である場合は pad を選びます。画像が窮屈すぎて被写体の周りに背景がもっと必要な場合は outpaint を選びます。

比率変更後、実際のアップロードサイズにリサイズし、一度圧縮してから、エクスポートされたファイルを開いてください。比率が変わらない通常のサイズ変更には、Image Resizer または resize an image without losing quality のワークフローを使用してください。

アスペクト比とはどういう意味ですか？

アスペクト比は、幅と高さの間の比例関係です。1200 x 800 の画像は 3:2 です。1080 x 1080 の画像は 1:1 です。1920 x 1080 の画像は 16:9 です。比率は同じままで、ピクセル数は変わる可能性があります。

ブラウザや多くのデザインツールはこの考え方を使用しています。MDN は CSS aspect-ratio を、一方の寸法が柔軟な場合にボックスをサイズ化するために使用される推奨される幅対高さの比率として説明しています。これは、画像がレイアウトシフトなしでレスポンシブなカードやヒーローエリアに収まる必要がある場合に重要になります。MDN aspect-ratio reference で技術的な動作を確認してください。

画像編集における実用的なルールはよりシンプルです。被写体ではなく、フレームを変更します。4:3 のカメラ写真が 9:16 のストーリーになる必要がある場合、エディターはサイドのディテールを削除したり、上下にスペースを追加したり、背景を拡張する必要があります。元の画像を縦長の長方形に押しつぶすべきではありません。

クロップ、パディング、アウトペイントのうちどれを選ぶべきですか？

最終ファイルで何が許容できないかを尋ねることから始めましょう。左右のエッジの損失が問題なければ、crop を使用します。画像のどの部分を失うのも問題ない場合は、pad を使用します。パディングが壁に貼り付けられたポスターのように見える場合は、outpaint を使用します。

エクスポートコントロールを触る前に、この決定表を使用してください。

製品写真の場合、パディングが通常最も安全な最初のステップです。編集記事用の画像の場合、crop の方がクリーンに見えることが多いです。AI支援のエディットでは、元のフレームが良いが狭すぎるか短すぎる場合に image outpainting が役立ちます。

被写体を切り取りすぎずにクロップするにはどうすればよいですか？

まずターゲットの比率を設定し、その後リサイズする前にクロップボックスを移動させます。リサイズ後にクロップを行うと、作業できるピクセル数が少なくなり、間違いが修正しにくくなります。

この順序を使用してください。

1. 元のファイルを複製します。
2. 1:1、4:5、16:9、または 9:16 のような必要な比率を選択します。
3. クロップボックスをその比率にロックします。
4. 被写体を安全エリア内に配置し、エッジに沿わせないようにします。
5. テキスト、手、製品のエッジ、ロゴを確認します。
6. クロップを適用します。
7. 最終的なピクセル寸法にリサイズします。
8. 必要に応じて WebP、JPEG、または PNG にエクスポートします。

安全エリアとは、プレビュー、オーバーレイ、および自動プラットフォームのクロップによって生き残るべき画像の部分です。宛先がUIを追加する可能性がある場合、顔、製品名、字幕、コールトゥアクションテキストをフレームの外側の 10-15% から離してください。

正確なクロップツールとノーコードワークフローについては、crop image online を参照してください。円形のアバターだけが必要な場合は、四角形クロップの後にも可視形状が再び変わるため、別の crop image to circle ワークフローを使用してください。

パディングはクロッピングより優れているのはどんな時ですか？

画像全体が製品である場合にパディングが適しています。これには、ロゴ、パッケージ、製品カタログショット、アプリのスクリーンショット、スキャンされた文書、証明書、ID写真、チャートが含まれます。

パディングには、ソリッドカラー、ぼかし背景、拡張キャンバス、またはブランドカラーを使用できます。最も安全な選択は通常、宛先の背景色です。白いマーケットプレイスページ用の白い製品写真には、白いパディングが必要です。透明なロゴが、宛先が透過をサポートしている場合は PNG のままでいられます。

被写体と競合するパディングは避けてください。ぼかしの複製背景はカジュアルなソーシャル投稿には役立ちますが、eコマース製品や文書の周りでは安っぽく見えることがよくあります。ストアの画像については、製品がフレームのより多くの部分を占めるべきかどうかを決定する前に、ecommerce image guide を読んでください。

パディングチェックリスト：

• 可能な限り、宛先の背景色に合わせる。
• 被写体を数学的に中央ではなく、視覚的に中央に保つ。
• 自動的なサムネイルクロップのための十分な余白を残す。
• テキストの背後にある混雑したぼかし背景を避ける。
• 透過が必要な場合は、透明なロゴを PNG としてエクスポートする。
• 通常の写真には WebP または JPEG を使用する。

プラットフォームごとにどの比率を使用すべきですか？

万能のベストな比率は存在しません。配置に合わせて比率を選択し、1つの画像が複数の場所で使用する必要がある場合は、代替のエクスポートを作成します。四角い製品タイル、縦長のストーリー、そして幅広のブログヒーローは異なるファイルです。

Meta のビジネスヘルプページでは、フィードの配置が 1:1 および 4:5 をサポートしており、そのコンテキストでの単一画像広告には縦長の 4:5 が推奨されていると述べています。広告の配置は変更される可能性があるため、有料クリエイティブを作成する前に現在の Meta aspect ratio guidance を確認してください。

多くのソーシャルエクスポートを管理する場合、毎回手動で寸法を入力するのではなく、比率プリセットリストを保持してください。social media image sizes guide は、キャンペーン引き渡し前に現在のプラットフォームの寸法を確認するためのより良い場所です。

比率変更後に画質低下を防ぐにはどうすればよいですか？

比率の変更とピクセル寸法の変更は別々の操作です。まずフレームを決定します。次にリサイズします。そして圧縮します。同じ JPEG を何度も再圧縮すると、特にテキストや単色部分の周りに目に見えるアーティファクトが追加される可能性があります。

この記事内の各図は、表示向きの寸法にリサイズされ、例が過剰なダウンロードなしでシャープに保たれるように最終アセットを WebP としてエクスポートされました。ユーザー画像の場合も同じ順序が適用されます。

1. 元のファイルを変更せずに保持する。
2. crop、pad、または outpaint を使用して比率を変更する。
3. 結果を最終的な表示サイズにリサイズする。
4. リサイズダウン時には高品質のリサンプリングフィルターを使用する。
5. 一度エクスポートする。
6. 100%のズームで最終ファイルをチェックする。
7. 最終ファイルをアップロードし、ライブプレビューを検査する。

Google の画像ガイドでは、関連テキストの近くに配置されたシャープでクリアな画像と、画像をコンテキストで説明する記述的な alt text を推奨しています。これは検索や支援技術を使用する人々にとって役立ちます。Google's SEO starter guide および Google Image SEO best practices を参照してください。

フォーマットの選択については、ほとんどのウェブ写真と図には WebP を使用し、互換性が制約の場合は JPEG を、透過性や鮮明なインターフェースピクセルが重要な場合は PNG を使用します。image format guide がトレードオフを説明しています。

エクスポート前に何をチェックすべきですか？

エディターのプレビューだけでなく、最終ファイルを開いてください。エディターキャンバスは、スケーリング、圧縮、クロップの問題を隠す可能性があります。

以下の項目を確認してください：

• 被写体が水平または垂直に引き伸ばされていないか。
• 重要なテキストが安全エリア内にあるか。
• 手、髪、製品の角、影が誤って切り取られていないか。
• パディングが宛先背景上で意図的であるように見えるか。
• アウトペイントされた領域が明白な繰り返しのパターンを生み出していないか。
• 小さなテキストがアップロードサイズでも読みやすいままであるか。
• ファイル形式が宛先に合致しているか。
• ファイルサイズがページやプラットフォームにとって妥当であるか。
• 画像がサムネイルとしてまだ意味をなしているか。
• ファイル名が final-final-2.jpg のようなものを使用するのではなく、画像を説明しているか。

ウェブサイトの場合、レイアウトの動作も確認してください。画像がレスポンシブカード内に配置される場合、ページが画像の読み込み中にジャンプしないように、幅と高さを設定するか、CSS aspect ratio を設定します。画像が多いページでは、ファイル名、alt text、圧縮が直前になって処理されないよう、最終エクスポートを image optimization for SEO と組み合わせてください。

よくある間違い

最も一般的な間違いは、比率をロックせずに正確な寸法を強制することです。これが 4:3 の写真が歪んだ四角形になる原因です。2番目の間違いは、エディター上ではきれいに見えるからクロップを選ぶものの、プラットフォームのプレビューで再びクロップされてしまうことに気づくことです。

これらを避けてください：

• 要求されるアップロードサイズを満たすために写真を引き伸ばすこと。
• 製品画像が影やパッケージのエッジを失うようにクロップすること。
• 9:16 の画像の最上部にテキストを配置し、アプリのUIによってそれが覆われる可能性がある場合。
• 宛先ページと衝突する色でパディングを行うこと。
• 人物の周りをアウトペイントする際に、手、髪、背景の線を確認しないこと。
• 4000px の画像を 600px のカード用にエクスポートすること。
• 比率の決定が完了する前にオリジナルを圧縮すること。

まとめ

画像のアスペクト比チェンジャーは、被写体を維持する場合にのみ役立ちます。エッジピクセルを失ってもよい場合は crop を使用します。すべてのピクセルを保持する必要がある場合は pad を使用します。背景が窮屈な被写体の周りで自然に成長する必要がある場合は outpaint を使用します。

リサイズする前にターゲット比率を選択し、安全エリアのコンテンツを保護し、一度エクスポートし、最終的なアップロードを検査してください。この小さな操作順序が、ユーザーが最初に気づく目に見える問題（引き伸ばされた顔、切り取られた製品、ぼやけたテキスト、不自然なボーダー）を防ぎます。

関連ガイド

• Resize an Image Without Losing Quality
• Social Media Image Sizes Complete Guide
• Crop Image Online Guide
• AI Image Outpainting
• Image Format Guide

画像クレジット

• アスペクト比ワークフローカバー、crop-pad-outpaintの決定、プラットフォーム安全エリア、およびエクスポートチェックリストの図は、本記事のために実際の 1:1、4:5、16:9、および 9:16 のフレームジオメトリを使用して生成されました。