AIで文字入りバナーを作る方法｜文字は後から載せる

バナー、動画のサムネイル、イベントのポスター。こうした画像は、絵だけでは完成しません。タイトルや日付、一言のキャッチコピーといった文字が入って、はじめて役目を果たします。そこで画像生成AIに「この文言を入れて、バナーを作ってください」と頼みたくなるのは自然な流れです。

ところが、実際に試してみると、そのまま使える画像が返ってくることはあまり多くありません。文字がにじむ、読めない形になる、意図しない綴りになる。絵としては悪くないのに、肝心の文字のせいで使えない、という残念な結果になりがちです。

この記事では、その悩みに対する現実的な進め方を紹介します。結論から言うと、AIに作らせるのは「文字を置くための余白がある背景」だけにして、文字は後からデザインツールで載せる、という分担です。依頼の段階で「文字は描かないでください」「上のほうを空けてください」と先に伝えておくと、あとから文字を消す手間がなくなります。

文字入りで頼むと何が起きるか

まず、文字ごと作らせようとしたときに、どんなことが起きがちなのかを整理しておきます。仕組みの理屈に踏み込むつもりはありません。「いまのところ、うまくいかないことが多い」という前提で進め方を決めておく、という考え方です。

よく見かけるのは、次のようなつまずきです。

• 一見それらしい文字なのに、よく見ると読めない形になっている
• 似ているけれど違う綴りになっている(一文字足りない、別の文字に置き換わっている)
• 単語が途中で切れて、最後まで表示されていない
• 同じ文字が二度出てきたり、頼んでいない文字列が混ざったりする
• 文字の太さや大きさが場所によってばらばらになる

どれも、「もう一度作り直せば直るかもしれない」と思わせるのがやっかいなところです。作り直すたびに別の崩れ方をして、何度も試すうちに時間だけが過ぎていく、という流れになりがちです。言語によって結果が変わることもあるため、同じ指示でも文言を変えると別の結果になることがあります。

具体的な場面で考えてみます。たとえば、地域の読書会を告知するバナーを作るとします。文字は「読書会 参加者募集」と、日付、会場名の三行だけです。これをそのままAIに頼むと、絵の雰囲気は良くても、日付の数字が崩れていたり、会場名の一部が別の文字になっていたりします。告知として使うなら、数字や固有名詞が正しいことは絶対条件です。見た目が惜しいからといって、少し違う文字のまま出してしまうと、読んだ人に誤解を与えかねません。

だからこそ、文字は「AIに任せない」と決めてしまうのが近道です。文字の正確さは、人間が自分の手で載せることで守ります。AIには、得意なほうの仕事、つまり雰囲気のある背景づくりに専念してもらいます。この割り切りだけで、作り直しの回数はかなり減らせます。

文字を置く余白つきの背景を作らせる指示文

分担が決まったら、次に大事なのは依頼の仕方です。ポイントは、「何を描いてほしいか」だけでなく、「何を描かないでほしいか」「どこを空けてほしいか」まで、最初に書いておくことです。

あとから文字を消そうとすると、背景の絵を傷めたり、消した跡が不自然に残ったりします。最初から空けておくほうが、ずっと早く済みます。

次の指示文は、そのままコピペして使える形にしたものです。角かっこの部分だけ、自分の内容に差し替えてください。

バナー用の背景画像を作ってください。
テーマは[落ち着いた雰囲気の読書会]です。
画像の中に文字やロゴ、数字、記号は一切描かないでください。
上から3分の1くらいを、物を置かない空いた面にしてください。
その空いた面は、模様や強い色の差を避けて、ゆるやかなグラデーションか単色に近い状態にしてください。
下の部分に、[木の机と本、やわらかい光]を配置してください。
全体の色味は[あたたかいベージュと深い緑]でまとめてください。
横長の構図でお願いします。

書き方のコツは三つあります。

一つ目は、「文字を描かない」を禁止の形ではっきり書くことです。「文字なし」と短く書くより、「画像の中に文字やロゴ、数字、記号は一切描かないでください」のように、対象を具体的に並べたほうが意図が伝わります。看板や本の背表紙のような、絵の中に自然に出てきそうな文字も避けたい場合は、「看板や本の表紙にも文字を入れないでください」と添えておきます。

二つ目は、空ける場所と大きさを、構図の目安で伝えることです。「上から3分の1くらい」「左半分」のように書きます。数値で厳密に指定する必要はありません。目安を伝えるだけで、余白のある構図になりやすくなります。

三つ目は、余白の質まで指定することです。余白に細かい模様や強い明暗があると、あとで文字を載せたときに読みにくくなります。「ゆるやかなグラデーションか単色に近い状態」と添えておくと、文字を載せやすい面になります。

英語で指示を受け付けるツールや、英語のキーワード列のほうが扱いやすいツールもあります。その場合は、同じ内容を次のように置き換えます。

background image for a banner, calm book club atmosphere,
no text, no letters, no logo, no numbers, no symbols,
empty copy space in the top third, smooth soft gradient in the empty area,
wooden desk with books and soft warm light at the bottom,
warm beige and deep green color palette, horizontal composition

ここで効いているのは「no text」「copy space」といったキーワードです。ただ、キーワードの書き方や、除外したい要素の指定の仕方はツールによって違います。専用の欄がある場合もあれば、文章の中に含める形の場合もあります。使い方は各ツールの公式の説明でご確認ください。

背景の作り方が決まったら、実際に画像を生成する段階です。画像生成の代表的なツールの一つとして、Midjourneyのようなサービスがあります。使い勝手や出力の傾向はツールによって違いますし、利用できる条件も変わることがあるので、公式サイトの案内を確認してから、自分に合うかを試してみてください。

複数枚の画像を同じ雰囲気でそろえたいときは、AI画像のテイストをそろえる方法｜複数枚で統一感を出すも参考になります。背景を何枚も作るシリーズものでは、指示文の型を固定しておくと、統一感を保ちやすくなります。

AIに描かせるものと自分で載せるものの分担表

分担の考え方は単純ですが、実際の作業では「これはどっちだろう」と迷う場面が出てきます。迷ったときの基準を、表にまとめておきます。

この表の線引きは、「間違えたときに困るかどうか」で考えると迷いません。雰囲気や質感は、多少ずれても「味」として受け取れます。一方、名前、数字、連絡先、条件のように、正確さが求められる情報は、一字違いでも問題になります。そうした情報は、必ず自分の手で入力して、自分の目で確かめる。この原則を守るだけで、事故の多くを避けられます。

画像の権利や商用利用の可否は、ツールや契約内容によって扱いが違い、ここで断定できることではありません。仕事で使う画像は、使う前に必ず確認が必要です。確認の進め方は、AIで作った画像を仕事で使う前に確認しておきたいことで詳しく扱っているので、あわせて読んでみてください。

文字を載せるときに読みやすくする実務

背景が用意できたら、いよいよ文字を載せます。ここは、デザインの経験がなくても、いくつかの基本を押さえるだけで見違える部分です。

背景の明るさで、文字の色を決める。 背景が暗い面なら明るい色の文字、明るい面なら暗い色の文字にします。迷ったら、背景を一度白黒にして見て、明るいか暗いかを判断するとわかりやすくなります。中間の濃さの背景は、白でも黒でも読みにくくなりがちなので、背景側を調整するほうが早い場合もあります。

文字の後ろに帯や薄い影を入れる。 背景に多少の明暗の差があっても、文字の後ろに半透明の帯を一本引くだけで、ぐっと読みやすくなります。帯の色は、文字色と反対の明るさにします。帯が重く感じるときは、ごく薄い影を文字のまわりにつける方法もあります。ただし、影を濃くしすぎると、かえって古い印象になることがあるので、ほどほどにします。

文字のまわりに余白を取る。 文字を画像の端いっぱいに寄せると、窮屈で読みにくくなります。上下左右に、文字の高さ一文字分くらいの余白を確保する、といった目安で置くと安定します。SNSやサムネイルでは、画面の端が自動的に切り取られたり、ボタンや時間表示が重なったりすることもあるため、端に大事な文字を置かないのが安全です。

文字の大きさは、一番長い行を基準にする。 最初に、一番長い行が余白の幅に収まる大きさを決めます。その大きさを基準にして、ほかの行を少し大きくしたり小さくしたりして強弱をつけます。短い行から先に決めてしまうと、長い行が入りきらず、あとで全体を小さく直すことになります。

文字を載せる作業には、デザインツールが使えます。ブラウザで使えるデザインツールのCanvaのようなサービスは、テンプレートや文字の編集機能がまとまっていて、背景画像を読み込んで文字を載せる使い方に向いています。機能や料金の範囲は変わることがあるので、使い始める前に公式サイトで内容をご確認ください。

載せたあとに必ず確認することと、使う前のチェック項目

文字を載せ終えたら、そこで完成にしてはいけません。作っている最中は画面を大きく表示して見ているため、実際の表示サイズで見たときの読みにくさに気づきにくいからです。載せたあとには、次の三つを必ず確認します。

一つ目は、縮小表示にして読めるかを確かめることです。サムネイルは、実際にはとても小さく表示されます。画像を思い切り縮小して、何と書いてあるか読めるかを見てください。読めないなら、文字を大きくするか、文字数を減らします。

二つ目は、スマートフォンの画面幅で見ることです。パソコンの画面では十分に読めても、スマートフォンでは小さくて読めないことがあります。可能なら、実際にスマートフォンで開いて確かめます。端末が手元になくても、パソコンのブラウザで画面幅を狭くして見るだけで、ある程度は確認できます。

三つ目は、他の人に見せて、読めるかを聞くことです。自分で作った画像は、内容を知っているので、何でも読めた気になってしまいます。初めて見る人に数秒だけ見せて、「何が書いてありましたか」と聞くと、伝わり方がわかります。特に日付や名前のような大事な情報が、正しく読み取られたかを確認します。

そのうえで、使う前に次の項目を一つずつ見直してください。

• 画像の中にAIが描いた文字が残っていない(看板や背表紙の中も含めて)
• 載せた文字に誤字や脱字がない(声に出して読み直す)
• 会社名、商品名、日付、価格、連絡先が正確である
• ロゴは正規のデータを使い、形が変わっていない
• 背景の明るさに対して、文字の色が十分に目立っている
• 文字のまわりに余白があり、端に寄りすぎていない
• 一番長い行が余白の幅に収まっている
• 縮小しても読める
• スマートフォンの画面幅で見ても読める
• 他の人に見せて、意図どおりに読んでもらえた
• 画像を使ってよい条件を、使うツールの公式の案内で確認した

最後の項目は、見落としやすいけれど大切です。商用で使えるかどうか、クレジット表記が必要かどうかといった条件は、ツールや契約内容によって異なります。迷ったときは、公式サイトや利用規約で確認してください。

まとめ

文字入りのバナーやサムネイルをAIで作るときは、文字ごと作らせようとしないのが、現実的な進め方です。いまのところ、文字が崩れる、読めない、意図しない綴りになるといった結果になりやすく、作り直しを重ねても時間がかかりがちです。

そこで、AIには「文字を置くための余白がある背景」だけを作ってもらい、文字は後からデザインツールで載せます。依頼の時点で、「画像の中に文字やロゴを描かないでください」「上から3分の1くらいを空けてください」と伝えておくのがコツです。あとから文字を消すより、最初から空けておくほうが早く済みます。

載せる文字は、背景の明るさに合わせて色を決め、必要なら後ろに帯や薄い影を入れ、まわりに余白を取り、一番長い行を基準に大きさを決めます。載せたあとは、縮小表示、スマートフォンの画面幅、他の人の目、という三つの確認を欠かさないでください。

名前、数字、連絡先のような間違えられない情報は、必ず自分で入力して自分で確かめます。この線引きを守れば、AIの背景づくりと、人の手による正確な文字載せを、無理なく組み合わせられます。ツールごとの機能や条件は変わることがあるため、使う前に公式サイトで最新の内容をご確認ください。