やっほー！AIでLINEスタンプを作ろうとしたとき、
「絵は可愛いのに日本語のセリフがぐにゃぐにゃに崩れちゃう…」って困ったことはないかな？
今回は、イラスト生成はAIに任せて、文字入れやレイアウトはHTML/CSSとHeadless Chromeで行う
分業型のスタンプ量産パイプラインを紹介するよ！
「画像生成AIを使って、LINEスタンプを40個作って販売してみたい」
MidjourneyやDALL-E、Stable Diffusionなどの登場以降、多くのクリエイターやエンジニアが一度は挑戦したことがあるのではないでしょうか。
しかし、実際に制作を始めてみると、文字崩れと審査リジェクトという2つの問題に直面します。
- プロンプトで日本語のセリフを指定しても、文字がぐにゃぐにゃに崩れる
- 無理に日本語を出そうとすると、見慣れない中華フォント風の字体が含まれる
- 綺麗に出力された場合でも、40枚を並べた際にフォントの太さやサイズ、配置が不揃いになる
- LINE公式の審査ガイドライン（370×320px、10px以上の余白、偶数サイズ、背景透過）に手動で合わせる作業に膨大な時間がかかる
もちろん、画像生成AIに文字入れまで任せる方法もあります。ただ、生成を何度も回して当たりを引く「ガチャ」になったり、プロンプトを作り込んだりする手間がかかります。そこで、文字入れだけHTML/CSSでやるパターンもあるよね、というのがこの記事の話です。
今回、全40種の新作LINEスタンプ『誤用警察ネコチャン』を制作するにあたり、絵の生成はAIに任せ、文字とレイアウトはWeb標準技術（HTML/CSS＋Headless Chrome）に任せる分業型の制作パイプラインを構築しました。
さらに、次の工程すべてをAIコーディングエージェントのClaude Codeに自律実行させました。画像の生成だけは、Claude Codeからagy（Antigravity）のCLIコマンドを実行して任せています。
- プロンプト設計
- 画像の透過処理
- HTMLコーディング
- Chromeでの透過レンダリング
- 申請用ZIPのパッキング
この記事では、なぜこの分業構成をとるのかという設計思想を解説します。あわせて、次の3点を詳しく紹介します。
- 実際に使用したPythonスクリプト
- HTML/CSSの組版テクニック
- LINE審査に適合するための自動処理
1. なぜ画像生成AIに文字まで任せると何が大変なのか？
画像生成モデルの弱点：文字の意味を理解していない
近年の画像生成モデルは英単語であれば比較的きれいに描画できるようになってきました。しかし、日本語（漢字・ひらがな・カタカナ）に関しては依然として大きな課題を抱えています。
拡散モデル（Diffusion Model）にとって、文字は意味を持った記号ではなく、画像の模様として扱われます。そのため、ガチャを回して当たりを引くか、プロンプトを作り込まないと、以下のような問題が出てきます。
- フォントの揺らぎと異体字混入 「誤」の字の口が離れていたり、「警」の漢字のつくりが中国の簡体字に引っ張られたりして、一目で不自然さが目立ってしまいます。
- デザインの一貫性（統一感）の喪失 LINEスタンプは1パッケージにつき40枚（または8〜32枚）を一覧として見せる商品です。1枚ごとにプロンプトを投げて生成すると、あるスタンプは極太丸ゴシック、別のスタンプは明朝体、文字のフチ取りの太さも揃わない状態に陥ります。
- 改行・レイアウトの微調整が不可能 「この文字だけ2行にして、少し右上に傾けたい」「キャラクターの手の前に文字の帯（テープ）を重ねたい」といった細やかなレイアウト指定が、プロンプトではミリ単位で制御できません。
LINE公式審査の厳格な仕様
LINEスタンプを販売するには、LINE Creators Marketの審査ガイドラインを満たす必要があります。
| 審査項目 | LINE公式仕様 | 手動・AI単体生成での課題 |
|---|---|---|
| 画像サイズ | 最大 横370px × 縦320px（偶数必須） | AI出力は正方形（1024×1024等）が多く、手動リサイズが必要 |
| 余白ルール | 上下左右に10px以上の余白が必要 | キャラの端や文字がキャンバス端に触れると即リジェクト |
| 透過処理 | 背景が透明な透過PNG | 背景白飛び、輪郭のフチ残り（白フチ・黒ノイズ） |
| ファイル命名 | 01.png〜40.png、main.png、tab.png | 40枚手作業で名前を変えてZIP化するのはミスが頻発 |
手作業で進めると、次のような作業が40枚分つづき、揃えるまでに多大な時間がかかります。
- プロンプトを何10回も試行する
- Photoshopで文字を入れる
- 10pxの余白を手作業で整える
そこで、Webフロントエンド技術でスタンプを組版する手法を取り入れました。
2. 制作アーキテクチャ：画像生成AIとHTML/CSS組版の併用
責務の分離モデル
Webデザインでは、HTMLで構造を定義し、CSSでスタイリングし、Webフォントで美しい文字を表示するのが標準的です。この手法をLINEスタンプ制作に適用します。
イラスト素材と組版の分離がもたらすメリット
この構成の強みは、イラスト素材と文字・レイアウトの役割をきれいに分けられる点です。
- キャラクターの表情やポーズを変えたい場合は、イラスト素材を差し替える
- セリフの言い回しやフォントサイズを変えたい場合は、HTML/CSSのテキストを書き換える
- 文字の折り返しやフチ取りを調整したい場合は、CSSのプロパティを変更するだけで全件に即時反映
文字を修正するために画像を再生成し、キャラクターの顔が変わってしまう事態を防ぐことができます。
3. 実践！技術実装のステップバイステップ解説
ここからは、実際に今回のスタンプ制作で構築・実行したパイプラインのコードと技術的ノウハウを解説します。
ステップ1：キャラクターポーズ集の生成と一括切り出し
スタンプ制作でありがちな失敗が、1枚ずつプロンプトを入力して個別に生成することです。これをやると、スタンプごとにキャラクターの顔や線の太さ、頭身が変わってしまいます。
そこで今回は、1枚の大きなスプライトシート（ポーズ集）としてAIに一括生成させる手法を採用しました。
プロンプト設計のポイント：
- 同一キャラクター（白猫、2頭身、黒目、太い均一な黒輪郭線）
- 警察帽、手錠、ホイッスル、虫眼鏡などの小道具を持たせた8つの異なるポーズ
- 背景は真っ白（#FFFFFF）のフラットなスプライトシート
Claude Codeからagyのコマンドで画像を生成する
画像の生成は、Claude Codeからagyのコマンドを実行して任せます。-p（--print）を付けると、agyは1つのプロンプトを対話なしで実行して結果を出力します。そのため、Claude Codeのシェルから呼び出せます。
agy -p "白い背景に、太い黒の輪郭線で描いた白猫のイラストを1枚生成し、./test_cat.png として保存してください。" --print-timeout 240s
実際に試すと、次のとおりになりました。
- 保存先を、プロンプトで指定したパスにできた
- 出力は1024×1024pxのPNGで、白背景に太い黒の輪郭線の猫が描かれた
- 終了時に保存先のパスとサイズが文章で返るので、Claude Codeが次の工程にそのまま渡せる
--print-timeoutは応答を待つ時間の上限で、省略すると完了まで待ちます。
生成されたシートから、各ポーズをPythonスクリプト（Pillow）で切り出します。切り出しの範囲は、自動で検出する方法と、バウンディングボックスで指定する方法があります。
画像生成AIの注意点：背景の微細なノイズと白フリンジの発生
画像生成AIで透過素材を作ろうとするとき、主に2つの問題が生じます。
- 背景色が純白（#FFFFFF）ではなく、微細なノイズや影が生じる
プロンプトでwhite backgroundと指定しても、AIが出力する背景は
(255, 255, 255)の完全な単色にはなりません。代わりに、(254, 252, 253)のような色ムラ、JPEG圧縮ノイズ、薄いドロップシャドウが出ます。単純な白を透明化する処理では背景にゴミが残ります。かといって許容しきい値（Threshold）を広げすぎると、白いキャラクターの体や白目まで透明化されてしまいます。 - 境界線のアンチエイリアスによる白フリンジ（ハロー）の発生 キャラクターの黒い輪郭線と白い背景の間には、境界を滑らかに見せるための中間色ピクセル（グレーやオフホワイト）が1〜2px生成されます。背景だけを透明に抜くと、この中間色が輪郭線の外周に残り、LINEのダークモードや色付きトーク背景でスタンプを表示した際に白いフチ浮き（ハロー）として目立ってしまいます。
4段階のクレンジング・パイプラインによる解決法
この意図しない透過や白フリンジを防ぐため、本パイプラインでは以下の4段階のアプローチを採用しました。
- プロンプト設計での予防（太い黒の境界バリア）
プロンプトに
thick uniform clean black outline, closed contours（均一で太い黒の閉じた輪郭線）を明示します。キャラクターと背景の境界に、隙間のない黒線を作らせるためです。 - 外周起点Flood Fill（キャラクター内部の白を保護）
画像の外周四隅（
0, 0等）をシード（起点）とし、黒い輪郭線のバリアに衝突するまでのみ背景領域を探索・拡張します。これにより、白猫の身体や手錠の輪の内側など、輪郭の内側にある白色は一切透明化されず完全な不透明（#FFFFFF）として保護されます。 - 輪郭線への1〜2px食い込み（Alpha Erosion / 境界収縮）
背景透過マスクを
scipy.ndimage.binary_dilationで輪郭線側へわずか1〜2ピクセル膨張（侵食）させます。これにより、輪郭と背景の色が重なった外周の半透明なフリンジピクセルを物理的に透過側に巻き込んで削ぎ落とします。元々太い輪郭線で生成しているため、1〜2px削ってもキャラクターの造形が崩れることはありません。 - 最外周エッジピクセルの黒置換（Color De-fringing / 黒線クランプ）
透過領域と直接接しているピクセルで、白やグレーがわずかに残っている境界ピクセルを黒（
#000000）へ置換します。これでフリンジが解消され、鮮明な輪郭線を維持できます。
このロジックを、Pillow・NumPy・SciPyによる数十行のPythonスクリプトにまとめています。ポーズ画像を渡すと透過PNGが出てくる形にしてあり、実装の細部は割愛します。
ダーク背景チェッカーによる目視品質検証
こうして生成された透過PNGは、黒背景（ダークモード）に載せたプレビューシートをレンダリングして目視検証します。白背景では見逃しやすい微細な白フリンジや浮遊ノイズも、ダーク背景であれば容易に確認できます。
実際に単純にしきい値で白を抜いた画像（Before）と、2px食い込み＋黒線クランプを適用した画像（After）を暗い背景に並べ、境界ピクセルを5倍に拡大した比較が下図です。
単純透過では輪郭線の外側にアンチエイリアスの中間色（白〜灰色）が残り、暗い背景で白い光のように浮き上がってしまいますが、本処理を施すことで余分な混色ピクセルが解消され、境界が引き締まります。
こうして、cat_01_whistle.png（ホイッスル）やcat_04_salute.png（敬礼）など、暗色背景でもフチ浮きせず輪郭の太さが統一された8種類のマスター透過PNGを準備します。
発展知見：マゼンタ（クロマキー）背景との違いとハイブリッド方式
ここでクリエイターやWebエンジニアにとって実務において考慮すべき点として、元画像の背景色とキャラクターの配色の関係があります。
今回の『誤用警察』は「白猫 × 白背景」という極限条件だったため、身体の白を守るために外周起点Flood Fillを採用しました。しかし、この方式には腕と体の間や、旗竿と体の間のような閉じた隙間に外側からの探索が届かないという構造上の弱点があります。
一方、背景をマゼンタ（#FF00FF）やグリーンバックなどのクロマキー色で生成できる場合、さらに汎用的な方法が使えます。
| 背景の種類 | 透過アプローチ | メリット | 弱点・対策 |
|---|---|---|---|
| 白背景（同系色） | 外周起点Flood Fill ＋ 閉領域レタッチ | 白いキャラでも体が抜けない | 閉じた隙間は個別透過が必要 |
| マゼンタ背景（補色） | 色距離透過 ＋ 境界2px黒置換（ハイブリッド） | 閉じた隙間も全自動で一発透過 | 輪郭に薄紫のフリンジが残る → フチ2px黒置換で完全解決 |
Webブラウザ（Canvas）や自動化ツールで汎用的に動くのは、全体を色距離で透過し、透過境界から2px以内の背景色を含んだピクセルのみを黒線クランプするハイブリッド方式です。この処理を行えば、キャラクター本来のグレーや模様を損なうことなく、閉じた隙間の透過とフリンジ除去を自動で両立できます。
ステップ2：HTML/CSSによるデザインテンプレート
次に、切り出した透過PNGを読み込み、文字や装飾を重ねるHTMLテンプレートを作成します。
世界観を深める演出ギミックの設計
Claude Codeとの共同作業において、単に文字を添えるだけでなく、警察の世界観を取り入れた演出ギミックを設計しました。
- POLICE LINE（規制線テープ） 事件現場の黄色いキープアウトテープを模した斜め帯です。文字の迫力と現場の緊迫感を両立させ、キャラクターの手前に重ねることで奥行きを創出します。
- 容疑猫マグショット（目盛ボード） 逮捕時の身長目盛スケールと容疑者プラカードを模したデザインです。「確信犯」などの誤用を取り締まるユーモアを表現しています。
- ホイッスル突風エフェクト 「ピピィーーッ！」の笛とともに漫画的な集中線・衝撃波をCSS/SVGで重ねて現場の勢いを演出します。
- 誤用赤切符（反則告知票） 交通違反の赤切符のような枠線を敷き、言語違反として取り締まるパロディデザインです。
- 照準ロックオン スナイパーや監視カメラのようなターゲットスコープを重ね、日常会話の誤用を見逃さない演出です。
文字入れをHTML/CSSで行う利点は、こうしたWeb特有の装飾・グラフィック要素（ボーダー、グラデーション、シャドウ、2D変形、SVG）を自由自在に組み合わせられる点にあります。
① Webフォントの確実な日本語表示
CSSでGoogle Fonts（Zen Maru Gothic）などの丸ゴシック体を読み込みます。
ローカル環境でレンダリングする場合、システムの標準フォントやダウンロードしたTTFフォントを@font-faceで直接指定すると、オフラインでも確実に日本語フォントでレンダリングされ、中華フォントの混入を根本から防げます。
② 現場の緊迫感を演出するPOLICE LINE（規制線テープ）
文字を単に配置するのではなく、黄色と黒のストライプが入った規制線テープとして斜め（-8度）に配置し、その前面にキャラクターの手を飛び出させることで、視認性と立体感を両立させました。
次の3点がポイントです。
- 黄色の帯の上下に、黒い太線を引く
- 帯を-8度に傾ける
- 文字には太い白フチ（
paint-order: stroke fill）を付ける
③ 辞書解説カードの組版
解説側スタンプは、国語辞典の語釈を模したカードレイアウトです。CSSのFlexboxと角丸（border-radius）、控えめなドロップシャドウを加えることで、紙の単語帳のような端正な質感を表現しました。
見出し語と「誤用」バッジを上に並べ、その下に語釈を置く構成です。
会話を盛り上げる2連投ペアスタンプの設計
今回のスタンプセットの大きな特徴が、1通目の突撃警察と、2通目の語釈解説カードが対になっている点です。
トークルームで友達が誤用を使った際、次の2通を続けて送ります。
- 1通目：「姑息警察ですっ！」と突撃する
- 2通目：「姑息＝一時しのぎ」というカードを投げる
こうすることで、角を立てずに知的な笑いとしてコミュニケーションを盛り上げることができます。これもHTML/CSSの共通カードテンプレートを作っておいたからこそ、40種という点数をスムーズに量産できました。
ステップ3：Headless Chromeによる高精度な透過スクリーンショット
HTML/CSSでデザインした画面を、画像として書き出します。 PuppeteerやPlaywrightのようなライブラリを導入しなくても、MacやLinuxに標準インストールされているGoogle ChromeのCLIコマンド（Headless Chrome）を実行するだけで透過PNGが生成できます。
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
--headless \
--disable-gpu \
--default-background-color=00000000 \
--window-size=740,640 \
--screenshot=output.png \
file:///path/to/template.html
--default-background-color=00000000の設定
Chromeのヘッドレススクリーンショットは、デフォルトでは背景が白（#FFFFFF）で塗りつぶされてしまいます。
しかし、--default-background-color=00000000（RGBAのAlpha=0）フラグを渡すことで、CSSで背景を指定していない部分が透明なアルファチャンネルとして書き出されます。
スーパーサンプリングによる高精細化
LINEスタンプの規定サイズは最大370×320pxですが、HTMLを直接そのサイズでレンダリングするのではなく、2倍の解像度（740×640px）でレンダリングしてからPillowのLANCZOSリサンプリングで50%に縮小します。 この処理により、文字のフチやイラストの輪郭線のジャギー（ギザギザ）を抑え、滑らかなスタンプ画像が得られます。
ステップ4：LINE審査ガイドラインを満たす余白自動保証アルゴリズム
LINEスタンプの審査では、上下左右の余白が10px未満であること（見切れ）によるリジェクトに注意が必要です。
手動で余白を調整していると、文字の端やキャラクターの耳が枠外に寄ってしまい、リジェクトの原因になります。 そこで、画像の不透明ピクセル領域（Bounding Box）を検出し、自動で上下左右に正確に10px以上の余白を設けて中央配置するスクリプトを作成しました。
処理の流れは次のとおりです。
- 透明ではないピクセルの範囲（バウンディングボックス）で切り出す
- 上下左右の余白10px分を引いたセーフエリア（350×300px）に収まるよう、縦横比を保って縮小する
- 縦横が奇数になったら、1px削って偶数にそろえる
- 370×320pxの透明キャンバスの中央に貼り付ける
この処理を通すことで、元画像のサイズや縦横比に関わらず以下の条件が満たされます。
- 上下左右に必ず10px以上の余白が確保される
- 画像のサイズは必ず横370px × 縦320px（偶数）になる
- アルファチャンネル透過が保持される
手作業を介さずに安定した画像が生成され、審査でのリジェクトリスクを確実に防ぐことができます。
ステップ5：40種の一発パッキングとカタログ自動生成
全40枚のスタンプが完成したら、審査申請のためのパッケージングもコードで自動化します。
- メイン画像（
main.png: 240×240px）とタブ画像（tab.png: 96×74px）の自動生成 - 提出用ZIP（
line_stamps_upload.zip）の自動生成（main.png、tab.png、01.png〜40.pngを規定の階層なしフラット構造でアーカイブ） - 完成カタログ画像（
line_stamps_catalog.png）の生成（8列×5行のグリッドで全40種とmain/tabを並べた一覧シート）
手作業で40個のファイルをドラッグ＆ドロップして名前を直していた時代にはもう戻れません。
4. 自律型AIエージェント（Claude Code）に任せて見えた開発体験の進化
今回の制作において、筆者が行った作業は次の2つだけです。
- 企画コンセプトの決定
- チャットでのディレクション
人間（ディレクター）：
「間違えがちな日本語を取り締まる『誤用警察』スタンプを作りたい。
ネコチャンのイラストと、本格的な辞書カードのペアで40種いこう。
文字入れはHTMLとChromeでやってね」
Claude Code：
- 文化庁の国語世論調査から誤用率の高い91単語をリサーチ＆DB化
- agyのCLIを実行してネコチャンの基本8ポーズを生成し、透過切り出し
- 警察の世界観を強調するため、POLICE LINEテープや容疑猫マグショットなどの演出ギミックを自律提案
- 提案したギミックをその場で画像加工し、視覚的なチェックシートとして提示
- 人間が実物を見ながら直感的に採用案を選定
- HTML/CSSテンプレートを設計、文字のフチ取りや吹き出しを実装
- 40種類のスタンプを全件一括レンダリング
- 文字の改行位置やフォントの微調整指示を受けて即座にPythonスクリプトを改修・再レンダリング
- 提出用ZIPとカタログ画像を生成
人間がPhotoshopやIllustratorを一切開くことなく、Git管理されたコードとスクリプトだけでLINEスタンプ40種フルセットが完成しました。
チャットの枠を超えた成果物による視覚的フィードバック
従来のAIチャットで企画を進める場合、どうしてもテキストベースのやり取りになりがちでした。 POLICE LINEのテープを斜めに配置する案などをテキストで説明されても、それがスタンプとして本当に可愛いのか、トークルームの縮小表示で視認できるのかは想像しきれません。
しかし、Claude Codeのようなコード実行・画像処理が可能な自律型AIエージェントと組むと、制作体験が大きく進化します。
- 実画像をその場でレンダリングして成果物として提示 エージェントがPythonやHTML/CSSを実行し、デザインのモックアップや比較シート、カタログ画像をその場でレンダリングして提示します。
- 目視で判断できる意思決定スピード POLICE LINEテープやマグショット、赤切符といった演出案を、テキストではなく実際の完成イメージの比較シートとして確認できるため、ディレクターは直感的に採用案を選定できます。
- 視覚的フィードバックループ（Visual Feedback Loop） フォントの印象やパーツの重なり具合といった細かな違和感も、目の前の画像を参照しながら確認できるため、指示のズレが起きません。
テキストで指示を受けるだけでなく、視覚的な成果物を自ら作って提示する制作パートナーとして協調作業を進められます。
コードベースによる迅速な修正サイクル
この構成の大きな利点は、手戻りに対する修正の容易さです。
制作の途中で、次のような調整をしたくなることがあります。
- フォントをもう少し太くしたい
- 誤用バッジの赤色を落ち着いたトーンにしたい
従来の画像生成であれば全枚数を再生成して何時間もかかっていました。
しかしコードで組版されているため、CSSのカラーコードやフォントサイズを1箇所書き換えてスクリプトを再実行するだけで、次のものが数十秒で再生成されます。
- 全40枚のスタンプ画像
- 提出用ZIPファイル
- カタログ画像
ソフトウェア開発におけるCI/CD（継続的インテグレーション）と同様の効率化が、アセット制作の現場でも実現できます。
5. まとめ：画像生成AIをパイプラインの構成要素として活かす
AIツールの普及に伴い、すべてをAIに任せようとして非効率になるケースが見られます。
- AIが得意なのは、キャラクターイラストの生成、アイデア出し、スクリプト作成
- Web標準技術が得意なのは、ミリ単位のレイアウト制御、フォント組版、規格への厳密な適合
すべてを1つのプロンプトで完結させようとするのではなく、次の分担にします。
- 絵はAIに任せる
- 文字とレイアウトはHTML/CSSに任せる
- 全体をコードで繋ぐ
これこそが、再現性高くプロ品質のアウトプットを量産したいときに、有力な選択肢になります。
LINEスタンプ制作はもちろん、Webサイトのアセット制作やSNSバナーの量産にも応用できる実践的な手法ですので、ぜひ試してみてください！
お疲れ様！絵はAI、文字とレイアウトはHTML/CSSとHeadless Chromeに分業することで、
文字崩れゼロで40種類のスタンプが一気に作れちゃうんだね！
CSSを1行変えるだけで全スタンプのデザインを一括修正できるのもエンジニアならではの気持ちよさだから、
ぜひ試してみてね！
