AI画像をSNS・ホームページに使い回す方法|サイズと余白の調整

AI画像をSNS・ホームページに使い回す方法|サイズと余白の調整

ホームページ用の横長画像をSNSへ載せたら、文字の端が切れた。
正方形に引き伸ばしたら、人物や商品が縦長になった。
こうした問題は、画像生成の指示をやり直す前に、サイズの合わせ方を分けると整理できます。

縮小、切抜き、余白の追加、AIによる背景の拡張は別の操作です。
何を残し、どこを変えてよいかを決めてから加工しましょう。

この記事は、完成した画像を別の掲載面へ展開する手順です。
元の案内文や画像を作る工程は生成AIで販促バナーを作る方法で説明しています。
以下の寸法は架空の制作例で、各SNS共通の推奨サイズではありません。

画像を別サイズへ展開掲載枠の比率と表示を確認。切り抜き・余白・拡張を選ぶ。文字と変えてはいけない部分を確認。書き出し後にPCとスマホで確認。条件・例外・具体操作は本文も確認してください。画像を別サイズへ展開1掲載枠の比率と表示を確認2切り抜き・余白・拡張を選ぶ3文字と変えてはいけない部分を確認4書き出し後にPCとスマホで確認番号と矢印:進める順序
本文で説明する流れを整理しています。
具体的な操作、適用条件、例外、注意事項は各見出しも確認してください。

まず掲載枠の比率と表示方法を確かめる

最初に確認するのは、「幅が何pxか」だけではありません。
掲載先が求める幅と高さ、その比率、一覧では切抜き表示になるかを確認します。
投稿面と一覧のサムネイルで表示範囲が違う場合もあります。

社内では、次の3点を制作メモに残してください。

  • 掲載先と位置:会社のお知らせ、SNS投稿、一覧サムネイルなど。
  • 必要な寸法・比率・対応形式:掲載先の現行仕様で確認する。
  • 必ず残すもの:見出し、商品、人物、日付、必要な条件など。

画像の重要部分が中央にあっても、どの場所でも必ず切れないという意味ではありません。
実際の掲載画面での確認が最後に必要です。

4つの調整方法を使い分ける

方法 どんな調整か 向いている状況 注意点
縦横比を保った縮小 全体を同じ割合で小さくする 掲載枠と元画像の比率が同じ 文字も小さくなる
切抜き 不要な周辺を削って比率を変える 重要部分が切抜き範囲に収まる 文字・商品・注記が欠ける場合は使わない
余白を追加 全体を残し、空いた部分を背景色等で埋める 切りたくない文字・商品がある 小さくなった文字を読み直す
生成拡張 AIで画像の外側を補う 説明用の背景を広げたい 実物や意味を勝手に追加・変更していないか確認
スマホでは必要に応じて表を横にスクロールしてご覧ください。

縦横の比率を変えて画像そのものを引き伸ばす操作は、人物や商品の形を変えてしまいます。
縦と横を別々に伸ばすより、上の方法から選んでください。

1200×630pxの画像を別サイズにする具体例

架空の会社のお知らせ画像を、横長1200×630pxから3種類の社内指定サイズに展開すると仮定します。
元画像にある見出しと商品イラストは、欠けないよう残す条件です。

同じ比率で600×315pxに縮小する

幅も高さも半分なので、形を変えずに縮小できます。
例えば元画像の文字の高さが48pxなら、画像上では約24pxになります。

さらに掲載画面で幅300pxとして表示されれば、元の48px相当の文字は約12pxになります。
これは画像の寸法比による目安で、フォントの読みやすさを保証する数値ではありません。
実際に表示し、必要な条件まで読めるか確認しましょう。

1080×1080pxの正方形に、全体を残して配置する

元の横幅1200pxを1080pxに縮める割合は0.9倍です。
高さは630×0.9=567pxになります。

正方形の高さ:1080px
縮小後の画像の高さ:567px
残りの余白:1080 − 567 = 513px
中央に置く場合:上256px、下257pxなどに配分

これなら全体は残せますが、余白が大きくなります。
完成した文字入り画像をそのまま貼るより、編集可能な見出しを上、イラストを中央、必要な補足を下に組み直す方法もあります。

正方形を元画像から直接切り抜くなら、元の高さに合わせて630×630pxの範囲になります。
中央切抜きの場合は左右が各285pxなくなる計算です。
左に見出し、右に商品がある画像では、重要部分が失われる可能性があります。

1080×1350pxの縦長にする

幅1080pxで全体を残すと、画像部分の高さは同じく567pxです。
縦長枠には783px分の余白が残ります。
横長版をそのまま拡大して縦長いっぱいに埋めると、左右が大幅に切れるため、構成を組み直す方がよい場合があります。

例えば、上部に見出し、中央に元のイラスト、下部に条件を置く配置です。
掲載先の操作ボタンや表示に重なる場所へ重要な文字を置かないよう、実画面で確認してください。

文字は別に編集できる状態を残す

AI画像に文字が焼き込まれていると、サイズ違いを作るたびに小さくなったり、文字の一部が切れたりします。
元から作れるなら、背景・イラストと、見出し・日付・条件を分けて編集するのがおすすめです。

文字を載せる領域には細かい装飾を入れず、背景とのコントラストを確保します。
余白率を一律に決めても、媒体の切抜きや画面表示によっては足りません。
「上下左右を少し空けたから大丈夫」ではなく、最初と最後の文字まで実際に読めるかを確かめます。

元画像が小さい場合、単純に拡大しても元の情報が増えるわけではありません。
生成拡張や高画質化によって、文字、ロゴ、商品形状まで変わった場合は採用せず、編集元や実写から作り直してください。

AI拡張では、変えてはいけない部分を指定する

背景を広げたい場合の、架空の説明用イラストに対する指示例です。
実際の商品写真や施工記録を補完するための指示ではありません。

この説明用の背景イラストを、指定する縦横比に合わせて広げてください。
元の中央部分の人物・物・形は変更しないでください。
追加するのは無地の背景と既存の抽象的な装飾だけにしてください。

文字、数字、ロゴ、商品、設備、人物を新しく追加しないでください。
受付期間、価格、資格マーク、実績を作らないでください。
文字は後から別に配置するので、上部に整理された余白を残してください。
仕上がりの寸法と、元の部分が変わっていないかは人が確認します。

指示をしただけで保持が保証されるわけではありません。
元画像と並べて比較し、変更された部分があれば修正または不採用にします。

例えばAdobe Expressの公式案内には、サイズ指定に合わせて画像を生成拡張する機能が紹介されています。
これは通常の切抜きや縮小と同じではなく、当該機能にはPremiumの条件があります。
会社で使えるツールと費用・利用条件を確認してください。
Adobe公式:AIによる画像サイズ変更

書き出した後に、PCとスマホで確認する

完成したら、ファイルを開くだけでなく、公開前のプレビューで確かめます。

  1. 実際の寸法が指定どおりで、対応形式になっている。
  2. 人物・商品・ロゴの比率や形が変わっていない。
  3. 見出しと必要な補足が読め、端の文字が切れていない。
  4. 一覧サムネイルと本文の表示を、それぞれ確認した。
  5. リンク先と、案内内容・期間・条件が一致している。

WebPやJPEGなどへの書き出しは、掲載先が対応する形式を選びます。
容量を減らすときも、文字のにじみや輪郭を確認してください。
画像の意味が伝わる代替テキストを用意し、重要な条件は画像内だけでなく通常の本文にも記載します。

サイズ違いも同じ画像IDで管理する

横長版、正方形版、縦長版を別々の「最終画像」にせず、元画像と結び付けます。
「IMG-202610-001_square_1080x1080_v02.webp」のように、ID、用途、寸法、版を付ける方法です。

どこを切り抜いたか、背景を追加したか、文言を変更したかも残すと、次の更新で迷いにくくなります。
詳しくはAI画像の管理台帳と修正履歴を参照してください。

まずは1枚を1つの掲載先に合わせて調整し、PCとスマホで「全体を残す」「読みやすく配置し直す」のどちらがよいかを比べてみましょう。
画像生成サービスを検討する場合も、ConoHa AI Canvasの導入判断とは分けて、今ある編集環境でできるかを確認できます。

※資料確認日:2026年10月8日。
会社・画像寸法・配置は架空の制作例です。
媒体の推奨サイズは利用時に公式仕様をご確認ください。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です