AIで構図の異なる3案を作る

一度に色も言葉も構図も変えると、どの変更が見やすさに効いたのか分からなくなります。このレッスンでは、同じ見出しと同じ素材を使い、配置だけが異なる三案を作ります。ChatGPTでは文字なしの素材を用意し、配布ツールで正確な日本語を配置します。画像内の文字を何度も生成し直す作業と、素材の構図を考える作業を分けるためです。

学習目標

文字なしの素材を生成して保存する。
同じ言葉と素材で構図の異なる三案を作る。
PNGと再編集用設定を分けて保存する。

素材の役割を一文で指定する

素材の役割は「会議の前に、必要なことを三枚のカードに整理する場面を伝える」です。単に会議室の写真を求めると、会議中の雰囲気は表せても、準備を教える記事だと分かりにくくなります。先に主役の行動や物の関係を言葉にし、その後で色や描き方を指定します。

ChatGPTの新しい会話へ、配布した工程別の指示文の素材生成指示を貼ります。記事全文を渡す場合は、練習用であることを明記します。指示には「文字・数字・ロゴを入れない」「人の顔は不要」「三枚のカードを大きく見せる」を含めてください。小さな文字や読めない架空のロゴが混ざる原因を減らせます。

描き方は、明るいクリーム色と青緑を使った簡潔な立体イラストから始めます。これは今回の練習の選択であり、OGPがすべて同じ色や立体表現であるべきという規則ではありません。実案件のブランド規定がある場合は、その指定が優先します。配色を勝手に変えず、参照できる規定をAIへ渡します。

指示文を送って文章だけが返った場合は、「説明文ではなく、指定した画像を作成してください」と伝えます。画像生成が使えない表示なら、アカウントの利用条件を確認し、配布素材で配置練習を先に行います。利用できなかった工程は記録し、生成したと書き換えないでください。

生成素材を選びファイルで保存する

生成画像が出たら、細部の美しさより記事との対応を先に見ます。三枚のカードが主役か、会議前の整理を連想できるか、余計な人物や成果のグラフが入っていないかを確認します。今回のテーマでは、上昇する売上のグラフは本文が教えていない成果を連想させるため採用しません。

問題があれば、一度に一つの原因を直します。「背景の小物を減らし、三枚のカードと並べる手元だけを残す。配色と主役の大きさは保つ」のように、変更箇所と保持する箇所を指定してください。「もっとプロっぽく」だけでは、見た目が変わっても目的に近づいたか判断できません。

採用した画像は、ChatGPTの画像を開いて保存する操作で手元へダウンロードします。画面全体のスクリーンショットでは、周囲の操作ボタンや余白まで混ざるため、画像そのものを保存してください。ファイルを開き直し、壊れていないことと、保存した版が採用したものと同じであることを確認します。

保存名は「素材v1.png」などにし、元の生成指示を別のテキストへ残します。画像だけでは、どういう条件で生成したか再現しにくいためです。ChatGPTの会話に残っているから大丈夫と考えず、必要な指示と採用画像を同じ作業フォルダへそろえます。会話全体や個人情報を配布する必要はありません。

配布ツールへ文字と素材を入れる

「OGP編集ツール.html」をブラウザーで開き、見出しの一行目へ「会議前に決める」、二行目へ「3つのこと」と入力します。「素材を選ぶ」から保存した画像を指定してください。選んだファイルはこのページ上で読み込まれます。ツールは外部サービスへ画像を送信しない構成ですが、共有PCでは保存先や画面の扱いにも注意します。

最初はAの構図を選びます。文字を左、素材を右へ置くため、情報の役割が分かれます。素材の端が切れても、三枚のカードがすべて見えていれば、この課題では意味が残ります。主役が切れる場合は、素材の収め方を「全体を収める」に変え、枠内の余白と比較してください。

読み込んだ画像が見えない場合は、対応するPNG・JPEG・WebPのファイルか確認します。画像ではないファイルを名前だけ変更しても使えません。必要なら生成元から画像として保存し直します。配布ツールの見本素材へ戻せるため、素材の問題なのか編集画面の問題なのかを切り分けられます。

文字は入力欄から変更できますが、絵の中に含まれる文字はここでは編集できません。だから生成時に文字なしと指定しました。正確な見出しを後置きする工程には、誤字を減らし、記事の改訂時に短時間で直せる利点があります。生成画像と文字の編集範囲を混同しないでください。

配置だけを変えて三案に分ける

次にB、Cへ切り替えます。Bは見出しを上、素材を下へ置く構図です。Cは素材を背景として扱い、中央の明るい面に見出しを置きます。どの案も同じ文章、同じ素材、同じ大きさの画像で比較します。配置以外の条件をそろえることで、違いを読み順として説明できます。

Aは文字と素材の役割を分けやすい一方、中央の正方形切り抜きでは左の文字が切れる場合があります。Bは見出しに横幅を使えますが、素材の縦幅が足りないことがあります。Cは中央に見出しをまとめられますが、背景の絵が見えにくくなることがあります。万能の構図を選ぶ練習ではなく、条件に対する違いを見つける練習です。

それぞれで「設定JSONを保存」と「PNGを保存」を使い、A、B、Cが分かる名前で残します。JSONは、文字・配置・素材を戻すための設定ファイルです。PNGは掲載用です。設定ファイルが大きくなる場合がありますが、読み込んだ画像を含めて保存するためです。内容を勝手に公開せず、自分の作業フォルダに置いてください。

三案を一枚に並べたスクリーンショットだけで終えないでください。各案を個別に書き出すと、縮小時の読みやすさや実際の画像寸法を確認できます。比較表へは、生成した順番や好みより、どこを最初に読めるか、何が見切れたかを書きます。

初稿を完成品と混同しない

三案がそろっても、この段階では比較するための初稿です。大きな画像で見えた文字が一覧では読めない、切り抜きで主役が消える、保存した設定を開くと別の素材になるといった問題が残る可能性があります。見た目の印象だけで完成にせず、次のレッスンで表示と保存を確かめます。

初稿のファイル名に「final」を付けると、後から見つけた問題を別ファイルへ直したときに、どれが配布版か分からなくなります。「A-v1」「B-v1」「C-v1」のように、候補と版を分けてください。採用後に「採用版」のフォルダへコピーすると、比較案も判断の記録として残ります。

AIの応答に「完成しました」と書かれていても、それは画像の内容や保存状態の検査結果ではありません。生成したものを開き、指定した素材と文字があるかを自分で確認します。特に画像の中へ追加された細かな記号や文字は、縮小すると見えなくても、原寸では意味不明な内容が残ることがあります。

また、三案を作ったことだけで比較実験を実施したとは言えません。ここで行うのは編集上の比較です。実際のクリック率や記事閲覧数を比べるには、対象や掲載期間などをそろえた別の検証が必要です。制作記録には、実際に見たことだけを書きます。

実践課題：同じ訴求の三案を保存する

用意するものは、制作メモ、文字なしの生成素材または配布素材、OGP編集ツールです。同じ二行の見出しを入力し、A・B・Cの配置を順に選びます。各案のPNGと設定JSONを保存し、比較表に「最初に読む場所」と「気になった箇所」を一つずつ書いてください。自分で生成できなかった場合は、配布素材で行ったことを明記します。

完成例では、Aは左の見出しが先に読める、Bは見出しが横へ広がる、Cは中央の言葉が先に読めると記録します。自己確認は、三案の文章が同じか、素材が同じか、各案のPNGと設定を保存したかの三点です。次の比較で条件が変わらないように、元記事と素材の版も記録してください。

まとめ：比較できる初稿をそろえる

素材をAIで生成する工程と、日本語を正確に配置する工程を分けました。同じ訴求と素材を使い、配置だけを変えた三案ができれば、読み順と見切れを比べられます。初稿には版を付け、再編集用の設定を残します。次は小さい表示で問題を見つけ、一つずつ修正します。

自社の記事画像制作へ取り入れる

チームで使う記事と制作例、判断に迷う箇所を整理して、法人研修・AI導入支援の内容をご覧ください。