画像生成AIに日本語を描かせない。文字は後から重ねる

画像生成AIに日本語の見出しを入れた画像を頼むと、字の形が崩れたり、日本語に見えて日本語ではない字が混ざったりします。BenriWorksでも、記事の画像を生成していた頃に、画像の中へ架空の日本語が描かれたことがありました。それ以来、生成する画像には文字を一切描かせず、ロゴや見出しやコピーは、あとから別の仕組みで重ねています。そのための指定の書き方と、文字を重ねる3か所、それでも作り直しが必要になった数をまとめます。

文字を描かせない指定

アイキャッチ写真を生成するときは、指定の末尾に必ず次の1文を付けます。

No text, no letters, no logos, no watermarks.

案内役のキャラクターの場面画では、もう少し細かく書いています。持っている紙やノートPCのような小物に、文字、数字、ラベル、ブランドのロゴを描かないこと。吹き出しも描かないこと。文字が入りそうな小物ほど、何も書かれていない状態を明示しておく必要があります。

ただ、指定しても文字やロゴは出てきます。2つの使い方講座のアイキャッチ写真33枚を生成したときは、Codexの講座17枚のうち7枚、Claude Codeの講座16枚のうち4枚にブランドのマークが写り込み、作り直しました。ほかに、写真の周りに余白が焼き込まれた2枚と、被写体が指定と違った1枚も作り直しています。指定は写り込みを減らす手段で、なくす手段ではありません。生成したら、1枚ずつ目で確かめています。

文字を重ねる3か所

文字は、画像を使う場面ごとに、別々の段階で重ねています。

アイキャッチ写真

記事の一番上に出る写真には、サイトのロゴと、SNSで共有されたときの見出しが重なります。どちらも写真には描かせません。ロゴは記事のページを表示するときに左上へ重ね、見出しはSNS向けの共有画像を作るときに、写真を少し暗くしたうえで合成します。そのため写真の指定では、左上と下の3分の1を空けるよう頼んでいます。

写真はJPEGで保存しています。PNGでは同じ写真が数倍重くなり、WebPは共有画像の合成に使っている仕組みが読めないためです。

キャラクターバナー

記事の途中に置くバナーは、場面画にコピーを重ねて作ります。場面画はキャラクターを右半分に置き、左半分を何もない背景にして描かせます。そこへ、記事の種別を示す小さな英字、2行の見出し、1行のサブを、画像処理のスクリプトで重ねます。左側には淡い白のグラデーションを敷いていて、背景の小物に文字がかかっても読めるようにしています。

見出しは2行以内、1行は全角10文字前後までと決めています。9月には、見出しの2行目が案内役の手元に重なっているバナーを見つけ、この上限に収まるよう短くしました。上の例でも、2行目の終わりが手元の紙に少しかかっています。グラデーションのおかげで読めますが、長くなるほど重なりは増えます。

コピーを後から重ねる形にしてよかったのは、ここです。見出しを1文字直すのに、画像を生成し直す必要がありません。同じ場面画のまま、コピーだけを書き換えて作り直せます。

説明の図

仕組みや手順を説明する図は、画像生成AIでは作りません。SVGで作図し、文字は図形に変換せず、テキストのまま置いています。文字が崩れる心配はありません。図の内容は、代替テキストでも言葉にしています。数値や手順は本文と一字一句合わせ、本文にない数字を図だけに書くことはしません。キャラクターを描き続ける方法は「画像生成AIで、同じキャラクターを記事ごとに描き続ける方法」に書きました。

重ねた文字は、代替テキストにも書く

バナーのように画像の中に文字を合成すると、その文字は検索エンジンにも、画面の読み上げにも読まれません。そこで、バナーを記事に置くときは、代替テキストにキャラクターが何をしている絵かを書き、重ねたコピーの文字列もそのまま書き添えています。画像の中の文字を後から重ねる方法にすると、元の文字列が手元に残っているので、代替テキストに写すのも簡単です。

描かせないと決めてから

文字を描かせないと決めてから、画像の日本語が崩れる問題は、描かせない指定と生成後の確認の問題に変わりました。崩れた字を直す方法を探すより、字を描かせない仕組みを作るほうが確実でした。これから記事やバナーの画像を作るなら、まず指定の末尾に文字とロゴを入れない1文を足し、見出しを重ねる場所を空けて描かせるところから試してみてください。