漫画広告を AI で作る — 絵は生成し、文字は CSS で組む

結論｜文字を AI に描かせないと決めた瞬間、量産できるようになる

SNS で流れてくる漫画広告があります。劇画調のコマがあり、縦書きのセリフがあり、その下に黄色いバッジとロゴが並ぶ、あの形式です。同じフォーマットで何本も連投されているのを見て、構造を調べました。

分解すると、3 つの層でできていました。

重要なのは 2 層目です。セリフは絵の中に描かれていません。 字間が均一でルビの位置も正確なので、フォントで組んで後から重ねています。

この分離が、あのフォーマットの本体でした。絵と文字が分かれているから、文言だけ差し替えて何本でも出せます。逆に言えば、AI に「吹き出しつきの漫画を描いて」と頼んだ時点で、量産は不可能になります。

同じ構造で自社の広告も組みました。絵は生成し、文字は 1 文字も生成していません。 セリフも効果音もロゴも、すべて後から重ねています。

第 1 層｜絵をどう出すか

引き算の指定は、編集モデルでは通らない

まず躓いたのがここです。

手元には自前で立てた画像生成ワーカーがあり、キャラクターの LoRA も学習済みでした。当然そちらで作ろうとしたのですが、通りませんでした。

理由は前回の検証で既に分かっていたことです。参照画像を渡す編集モデルは、画風を足すことはできても、引くことができません。

漫画のコマは、カラーのイラストから色と階調を抜き、線と網点だけにする作業です。引き算そのものでした。

そこで Gemini に切り替えました。こちらはテキストプロンプトが参照画像より優先されるため、画風をまるごと置き換える用途に向いています。普段はこの性質が「参照した人物と別人が出る」という厄介さとして現れるのですが、今回は逆に効きました。

道具の選定は、前回測った制約がそのまま判断材料になりました。

画風は「時代」ではなく「描き方」で指定する

最初は「90 年代のスポーツ漫画風」と指示していました。熱血で、集中線と汗が飛ぶ絵柄です。しかし目標としていたのは、もっと落ち着いた青年向けのビジネス漫画でした。

作風の指定は、ジャンル名で書くより、描き方を分解して書くほうが安定します。

悪い例:
  1990s Japanese sports manga style
 
良い例:
  Realistic gekiga rendering: adult faces with true bone structure,
  subtle skin creases and fine hatching, dense screentone gradients,
  a meticulously drawn office interior in accurate perspective.
  No speed lines, no radiating focus lines, no exaggerated effects.

否定形が効きます。 「集中線を使わない」「誇張した効果を使わない」と明示したことで、静かな緊張のある絵になりました。ジャンル名だけを渡すと、そのジャンルの記号を全部盛り込んできます。

顔についても同じで、骨格・目の細さ・眉の太さ・鼻筋・線の本数まで分けて書きました。ただし振りすぎると 40 代の劇画になり、体格もボディビルダーになります。実際に一度そうなり、上半身裸で出てきました。muscular という語が、服の指定より強く効いたためです。

崩れない構図を選ぶ

いちばん実務的な学びがここでした。

奥の人物に「開いた手で説明するジェスチャー」をさせたところ、こうなりました。

親指がなく、指が 6 本に見えます。右端の指には爪もありません。

対処は 2 つあります。修正するか、その構図をやめるかです。今回は後者を選びました。

プロンプトには so that no fingers are visible anywhere in the picture のように、手が映らないことを明示的に要求します。 「手を下ろす」程度の指示では、下ろした手が画面に入ってきます。

開いた手のひらは、画像生成でもっとも崩れる部位です。広告のように 1 枚を大きく使う用途では、拡大されて必ず見つかります。生成後は縮小表示で判断せず、手の部分だけ切り出して拡大し、指の本数を数えてください。 全体を眺めていると通ってしまいます。

FIXIT

手を消しちゃうって、逃げてない？

Tsukasa

逃げです。ただ、直す試行を 5 回回すより、構図を変えて 1 回で決めるほうが安く済みます。

FIXIT

それはそうだけど。ポーズが限られちゃうよね。

Tsukasa

手を隠す構図は、漫画では普通に使われます。ポケット、腕組み、バストアップ。制約が表現を壊していないなら、それは妥協ではなく選択です。

第 2 層｜文字は CSS で組む

ここからが本題です。

アンチック体を、フォントを買わずに作る

漫画のセリフをよく見ると、漢字はゴシック体、かなは明朝体で組まれています。アンチック体と呼ばれる混植で、日本の漫画のセリフはほぼこの形式です。

専用のフォントもありますが、買わなくても再現できます。CSS の unicode-range で、かなの範囲だけ別のフォントに振ります。

@font-face {
  font-family: "Antique";
  src: local("Hiragino Mincho ProN W6"), local("YuMincho Demibold");
  /* ひらがな・カタカナ・約物だけをこの書体に */
  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+FF01-FF60;
}
 
.serif {
  /* 上で拾われなかった漢字はゴシックに落ちる */
  font-family: "Antique", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 800;
}

仕組みは単純です。unicode-range はその範囲の文字だけを @font-face の書体で描くよう指定します。範囲外の漢字は、font-family の次の候補であるゴシックに落ちます。結果として、1 つの font-family 指定で混植になります。

local() を使っているので、フォントファイルのダウンロードも発生しません。

ただし注意があります。local() は閲覧者のマシンにその書体があることが前提です。Web ページとして配信するなら使えません。 今回は自分の環境で画像に書き出す用途なので成立しています。配布物として組むなら、源暎アンチックのような商用利用できる書体を woff2 で埋め込んでください。

セリフを縦書きにする

漫画のセリフは縦書きです。CSS だけで組めます。

.balloon p {
  writing-mode: vertical-rl; /* 右から左へ、縦に流す */
  text-orientation: upright; /* 英数字も倒さず立てる */
  line-height: 1.42;
  letter-spacing: 0.06em;
  white-space: nowrap; /* 意図しない位置で折り返させない */
}

white-space: nowrap を入れて、改行は <br> で自分で決めます。漫画のセリフは、意味の切れ目ではなく吹き出しの形に合わせて改行するので、自動折り返しに任せると読みにくくなります。

吹き出し自体は、border-radius を 4 方向でわずかにずらすと手描きらしくなります。

.balloon {
  border: 4px solid #111;
  /* 真円にしない。ずらすと手で描いた歪みが出る */
  border-radius: 48% 52% 47% 53%;
}
/* しっぽは擬似要素の三角で */
.balloon::after {
  content: "";
  position: absolute;
  border: 16px solid transparent;
  border-top-color: #111;
  border-bottom: 0;
  bottom: -30px;
  left: 34px;
}

効果音を絵に食い込ませる

「ぐっ!!」のような効果音は、吹き出しの外に置いて絵に重ねます。そのままだと絵の黒に埋もれて読めないので、白フチで抜きます。

.sfx {
  font-weight: 900;
  font-size: 60px;
  color: #111;
  writing-mode: vertical-rl;
  text-orientation: upright;
  -webkit-text-stroke: 9px #fff; /* 白フチ */
  paint-order: stroke fill; /* フチを先に描く */
  transform: rotate(-7deg); /* わずかに傾ける */
}

paint-order: stroke fill が肝です。 これを付けないと、フチが文字の内側に食い込んで線が痩せます。ストロークを先に描いてから文字を上に乗せることで、太さを保ったままフチだけが外側に付きます。

傾きも効きます。効果音が水平だと、貼り付けたように見えます。5 度から 8 度ほど回すと絵に馴染みます。

なお最初は効果音を横書きにしていたのですが、三点リーダが潰れて読めませんでした。縦書きにしたところ解決しました。漫画の効果音が縦書きなのには理由があります。

第 3 層｜レイアウトと書き出し

なぜ HTML で組むのか

ここはグラフィックツールでも構いません。それでも実装で組んだのは、文言の差し替えが速いからです。

広告は 1 本作って終わりではありません。コピーを変えて反応を見る作業が続きます。HTML なら該当箇所を書き換えて再度書き出すだけで、レイヤーを探す必要がありません。バッジの文言もコマの画像も、同じ要領で差し替わります。

下部のブロックは、確認した 8 本すべてで同一でした。変わっていたのはコマの中身だけです。固定部分をコンポーネント化しておけば、変えるのはコマとセリフだけになります。

Chrome だけで入稿用 PNG を書き出す

ヘッドレスブラウザのライブラリを入れる必要はありません。Chrome にその機能があります。

CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
 
"$CHROME" --headless --disable-gpu --hide-scrollbars \
  --screenshot="$PWD/out.png" \
  --window-size=1080,1350 \
  --force-device-scale-factor=1 \
  --virtual-time-budget=4000 \
  "file://$PWD/ad.html"

要点が 2 つあります。

--force-device-scale-factor=1 を明示してください。 付けないと環境によって 2 倍の解像度で書き出され、指定と違うサイズの PNG が出ます。

--virtual-time-budget はレイアウトの完了を待つためのものです。 Web フォントの読み込みや画像のデコードが終わる前に撮ると、崩れた状態が保存されます。4 秒あれば十分でした。

書き出しサイズは 1,080 × 1,350 にしました。Instagram と Facebook の縦型広告で使われる比率です。

やらなかったこと｜特定作品には寄せない

制作中、特定の漫画作品の絵柄や名場面に寄せるという案が出ました。採用していません。

作風そのものはアイデアであり、著作権で保護される対象ではありません。問題は組み合わせです。特定作品を想起させる画風と、その作品の台詞をもじったコピーを、商業広告で併用すると、元ネタを利用して注目を集める意図が明確になります。日本にはパロディに関する権利制限規定がなく、翻案権や不正競争防止法の観点で争われる余地が残ります。

一方で、狙っていた「熱量」は様式のほうで出せます。名場面が名場面である理由は、その作品にしかない絵だからではなく、演出の文法を的確に使っているからです。

並べて気づいたのは、強いコマほど何かを描いていないということです。背景を捨て、顔を捨て、効果音を捨てている。描き足す方向で作っていたコマが弱かった理由がここにありました。

まとめ

絵の生成は 30 枚ほど回して 3 ドル弱でした。金額としては小さく、時間の大半は構図とプロンプトの調整に使っています。

FIXIT

結局いちばん時間かかったの、どこ？

Tsukasa

絵柄の方向を決めるところです。熱血のスポーツ漫画で作り始めて、途中で青年劇画だと分かりました。

FIXIT

最初に参考を見せてもらってれば早かったってこと？

Tsukasa

そうです。言葉で聞いた画風と、実際に狙っている画風はずれます。参考が 1 枚あれば、そこは飛ばせました。

なお本記事のキービジュアルも、絵は生成し、文字は入れていません。同じ原則で作っています。