AI画像がスマホで見切れる原因は？Web掲載時のサイズ・比率・レスポンシブ対策

AIで作った画像をWebサイトに掲載して、

「PCでは綺麗なのに、スマホで見ると左右が切れてしまう」
「縦長画像を入れたら、人物の顔や文字が途中で見切れた」
「16:9で画像を作ったはずなのに、Webサイトでは違う比率に見える」

と困ったことはありませんか？

AI画像そのものが壊れているわけではなく、こうしたトラブルの多くは、画像のアスペクト比とWebサイト側の表示領域が合っていないことによって起こります。

特にWebサイトでは、PC・タブレット・スマートフォンで画面サイズが変化する「レスポンシブ表示」が一般的です。

そのため、AIで綺麗な画像を1枚作っただけでは、すべての端末で同じように見えるとは限りません。

この記事では、AI画像がスマホで見切れる原因と、16:9・9:16などのアスペクト比、トリミング、安全範囲までわかりやすく解説します。

---

AI画像がスマホで見切れる3つの主な原因

1．AI画像と表示エリアの縦横比が違う

最も多い原因が、画像とWebサイトの表示枠の縦横比が合っていないケースです。

例えば、AIで16:9の横長画像を作成したとします。

PCのファーストビューでは横長の画面なので綺麗に収まっていても、スマートフォンは縦長です。

同じ16:9画像をスマートフォンの横幅いっぱいに表示しながら、一定の高さを確保しようとすると、画像の左右が切られる場合があります。

反対に、Instagramストーリーズなどで使う9:16の縦長画像をPCサイトの横長バナーへ使用すると、上下が大きく切れることがあります。

つまり、

「画像自体の比率」と「画像を表示する場所の比率」は別物

として考える必要があります。

---

2．Webサイト側で画像をトリミングしている

画像サイズ自体が正しくても、WebサイトのCSS設定によって画像が切れることがあります。

よく使われるのが、

object-fit: cover;

という指定です。

coverは、指定された表示枠いっぱいに画像を敷き詰めるための設定です。

画像を引き伸ばして変形させることはありませんが、表示枠と画像の縦横比が違う場合は、余った部分がトリミングされます。

例えば、

横長のPC画面
→ 左右まで広く表示

縦長のスマホ画面
→ 中央部分を残して左右をカット

というような表示になります。

Web制作では非常によく使われる方法ですが、人物・商品・文字などを画像の端に配置していると、その部分がスマートフォンで消えてしまうことがあります。

---

3．重要な要素を画像の端に置きすぎている

AI画像では、画面いっぱいに人物や商品、装飾が配置されることがあります。

見た目としては迫力がありますが、Webサイト用画像としては扱いにくい構図です。

特に、

・人物の顔
・商品
・ロゴ
・文字
・QRコード
・重要な装飾

などが画像の端ギリギリに配置されていると、少しトリミングされただけで見切れてしまいます。

Webサイトで使用する予定のAI画像は、最初から中央付近に重要な要素を集め、周囲に余白を確保する方が安全です。

---

16:9・1:1・4:5・9:16の違い

AI画像を生成するときによく指定するのが「アスペクト比」です。

アスペクト比とは、画像の横幅と高さの比率です。

代表的なものには、

16:9

横長の比率です。

Webサイトのメインビジュアル、YouTubeサムネイル、動画などに向いています。

ただしスマートフォンでは左右が切られる場合があります。

1:1

正方形です。

SNS投稿、商品画像、一覧ページのサムネイルなどで使いやすい比率です。

比較的さまざまなレイアウトへ転用しやすい反面、横長バナーには向きません。

4:5

縦長ですが、9:16ほど極端ではありません。

Instagram投稿やスマートフォン向けコンテンツなどに使いやすい比率です。

9:16

スマートフォン画面に近い縦長比率です。

Instagramストーリーズ、リール、TikTokなどには向いていますが、PCサイトの横長スペースでは大きくトリミングされる可能性があります。

---

PCとスマホで同じAI画像を使うとどうなる？

Webサイト制作では、1枚の画像をPCとスマートフォンの両方で使うケースがあります。
これは管理しやすい反面、デザインによっては見切れが発生します。

例えば、横長画像の左側に人物、右側に大きなキャッチコピーが配置されているとします。
PCでは問題なく表示できます。

しかしスマートフォンで中央部分だけ表示すると、

人物が消える
または
文字が途中で切れる

ということがあります。

その場合は、

PC用画像とスマートフォン用画像を別々に作る

方法も有効です。

例えば、

PC：16:9
スマホ：4:5または9:16

のように画像を用意して、画面幅によって表示する画像を切り替えます。
デザインの重要度が高いファーストビューでは、この方法の方が仕上がりをコントロールしやすくなります。

---

「cover」と「contain」の違い

Web画像で覚えておくと便利なのが、

cover
と
contain

の違いです。

cover

表示領域を画像で完全に埋めます。
余白はできませんが、画像の一部が切れる可能性があります。
ファーストビューやバナーなどでよく使用されます。

contain

画像全体が表示領域に収まるように縮小します。
画像は切れませんが、表示領域との比率が違う場合は上下または左右に余白ができます。
商品画像やロゴなど、「絶対に全体を見せたい画像」ではcontainの方が適している場合があります。

---

スマホで見切れないための「安全範囲」を作る

AI画像をWebサイト用に作る場合は、印刷物と同じように「安全範囲」を意識すると使いやすくなります。
例えば16:9の画像であっても、

画像の中央50〜60％程に、

・人物の顔
・商品
・ロゴ
・重要な情報

をまとめておけば、スマートフォンで左右がトリミングされても内容が残りやすくなります。

逆に、装飾・背景・空・壁など、多少切れても問題ない要素を外側へ配置します。
これは厳密な規格ではなく、使用するサイトのレイアウトによって変わります。

実際の表示環境を確認しながら調整することが重要です。

---

AI生成時から「余白」を指示しておく

後から画像を無理に修正するよりも、AI生成時からWeb掲載を意識した構図にしておく方が効率的です。

例えば、

「人物を中央に配置し、左右に十分な余白を確保する」
「Webサイトのヒーロー画像用。中央60％に重要な要素を配置する」
「左右がトリミングされても成立する背景」
「文字を後から配置できるネガティブスペースを作る」

といった指示を追加します。

ただし、AIに「スマホ対応で」と伝えただけでは、実際のWebサイトの表示サイズまで理解してくれるわけではありません。

最終的には実際のPC・スマートフォン表示を確認します。

---

すでに作ったAI画像に余白がない場合は？

気に入ったAI画像が完成した後に、「人物が大きすぎてスマホで切れる」と気づくこともあります。

その場合は、画像を作り直さなくても、

・背景を左右へ生成拡張する
・人物や商品を少し縮小する
・背景を再構成する
・文字を画像から分離する
・PC用／スマホ用に別レイアウトを作る

といった方法があります。

単純に画像全体を横へ引き伸ばすと人物や商品まで変形するため、おすすめできません。

参考記事
AIで画像の余白を自然に追加する方法｜文字を入れるスペースがないときの対処法

---

Web用AI画像を書き出す際のポイント

Web画像では印刷物とは異なり、CMYKではなく基本的にRGBで扱います。

また、画像が大きすぎるとページ表示速度に影響します。

Webサイトへアップロードする際は、

・実際の表示サイズに対して極端に大きすぎないか
・JPG、PNG、WebPなど適切な形式か
・画質を落としすぎていないか
・ファイル容量が大きすぎないか
・PCとスマホの両方で確認したか

をチェックしましょう。

特に写真やAI生成画像では、WebPを使用すると画質を保ちながら容量を抑えられるケースがあります。

---

AI画像をWeb掲載する前のチェックリスト

□ PCで画像全体が正しく表示されている
□ スマートフォンで人物や商品が切れていない
□ 文字やロゴが見切れていない
□ 重要な要素が中央付近に配置されている
□ 画像と表示枠のアスペクト比を確認した
□ object-fitによるトリミングを確認した
□ PC用・スマホ用を分ける必要がないか検討した
□ 画像容量が大きすぎない
□ スマートフォン実機でも確認した

---

よくある質問

16:9の画像ならWebサイトで必ず綺麗に表示されますか？

必ずしもそうではありません。
16:9は横長画像として使いやすい比率ですが、実際の表示領域が16:9とは限りません。
特にスマートフォンでは別の縦横比になるため、左右がトリミングされる場合があります。

スマホ用に9:16で作れば解決しますか？

スマートフォンだけで使用するのであれば有効な場合があります。
しかし、PCでは縦長すぎるため、PCとスマホの両方で使用する場合は別画像を用意する方法も検討します。

CSSを変更せず画像だけで対応できますか？

ある程度は可能です。重要な要素を中央へ移動したり、背景を広げたりすることで、coverでトリミングされても問題が起きにくい画像にできます。

AI画像の文字も一緒にスマホ対応できますか？

可能ですが、文字まで1枚の画像にしてしまうと、画面サイズによって文字が小さくなったり見切れたりする可能性があります。

Webサイトの場合は、背景画像とHTML上の文字を分離した方が調整しやすいケースもあります。

---

AI画像をWebサイトやSNSで使えるサイズへ調整したい方へ

SeishoAIでは、AIで作った画像をもとに、

「PCでは綺麗なのにスマホで見切れる」
「Webサイトのファーストビューに合わせたい」
「16:9画像をスマートフォン用に作り直したい」
「人物や商品はそのままで背景だけ広げたい」
「1枚の画像からWeb・SNS用に複数サイズを作りたい」

といった画像の修正・リサイズにも対応しています。

気に入っているAI画像をゼロから作り直さず、現在のデザインを活かしたまま実際に使用する媒体に合わせて調整できます。

まずは現在お持ちのAI画像と、「どのWebサイトやSNSで使いたいか」をお送りください。