見出し画像

【AIでLINEスタンプ11日目】AIと作る専用LINEスタンプ工場！「タグ付け自動化」の歓喜から異文化リジェクトに散る。

へろん

【AIによるこの記事の3行まとめと解説】

40個のスタンプに手作業で「おはよう」などのタグを付ける地獄を回避するため、ワンクリックで自動入力してくれる便利ツールを開発！さらに、背景の透明化を判定する仕組みも賢く進化させました。

あらすじ

AIとの共同作業で少し光が見えたと思いきや、欲を出して40個生成した途端に背景透過の泥沼に逆戻りしたのだった。

40個作成の「隠しボス」、タグ付け地獄

昨日（10日目）、調子に乗って一気に40個のスタンプ画像を生成した私ですが、申請画面に進んでから「ある重大な見落とし」に気づきました。

「これ、40個全部に手作業でタグを設定するのか……？」

スタンプ1つにつき、最大3つのタグ。8個の時は気合いで乗り切りましたが、40個となると話が違います。そもそも、どの画像にどのタグ（「おはよう」「ありがとう」など）が適切なのか、探して選ぶだけでも気が遠くなる作業です。

そこでまずは、スタンプ一つひとつのタグを考えてもらうためのプロンプトをAI（Gemini）に追加しました。これにより、申請開始時には「どの画像にどのタグを設定すべきか」のリストがすでに手元にある状態を作りました。

……が、リストがあっても手動でポチポチ設定するのはとんでもない時間がかかりました。少しやってみて「これは無理だ」と悟り、またしてもAIに泣きつくことにしました。

救世主「ブックマークレット」爆誕（※コード公開します）

AIに「このタグ付け、どうにか楽にならない？」と相談したところ、「ブックマークレット」なるものを提案されました。

ブラウザのブックマークバーに登録しておき、LINEの申請画面でクリックすると入力フォームが開く。そこにAIに出力させたタグリストをコピペすると、自動的にタグを選択してくれるという魔法のような仕組みです。

実際に使ってみると、これがもうめちゃくちゃ便利！作業時間が劇的に短縮されました。 同じようにLINEスタンプのタグ付けで消耗しているクリエイターの皆様のために、AIが書いてくれたコードをここに公開しておきます！

javascript:(function(){var text=prompt('タグをカンマ区切りで貼り付け:');if(!text)return;var tags=text.split(/[,、\n]/).map(function(s){return s.trim();}).filter(Boolean);var clicked=[],notFound=[];tags.forEach(function(tag){var found=false;document.querySelectorAll('button,label,span,div,li,a,p').forEach(function(el){if(found)return;var t=el.childNodes.length===1?el.textContent.trim():'';if(t===tag){el.click();found=true;clicked.push(tag);}});if(!found)notFound.push(tag);});alert('✅ '+clicked.length+'個選択: '+clicked.join(', ')+(notFound.length?'\n❌ 見つからず(手動で): '+notFound.join(', '):''));})();

URLエンコード(%〜〜)が入っていて怪しさ満点ですね！
プログラムの内容は以下のものです。


⏺ (function() {
    var text = prompt('タグをカンマ区切りで貼り付け:');
    if (!text) return;                                                                                                    
   
    var tags = text.split(/[,、\n]/).map(function(s) { return s.trim(); }).filter(Boolean);                               
                                                                                                                        
    var clicked = [], notFound = [];                                                                                      
    tags.forEach(function(tag) {                                                                                        
      var found = false;
      document.querySelectorAll('button, label, span, div, li, a, p').forEach(function(el) {
        if (found) return;                                                                                                
        var t = el.childNodes.length === 1 ? el.textContent.trim() : '';
        if (t === tag) {                                                                                                  
          el.click();                                                                                                   
          found = true;
          clicked.push(tag);                                                                                              
        }
      });                                                                                                                 
      if (!found) notFound.push(tag);                                                                                   
    });

    alert(
      '✅ ' + clicked.length + '個選択: ' + clicked.join(', ') +
      (notFound.length ? '\n❌ 見つからず(手動で): ' + notFound.join(', ') : '')                                          
    );
  })();

【使い方】

  1. ブラウザのブックマーク（お気に入り）バーに、適当なページを登録します。

  2. 登録したブックマークを「編集」し、名前を「タグ自動入力」などに変更。URLの欄に上記のコード（javascript:〜から最後まで）をすべてコピーして貼り付け、保存します。

  3. LINEクリエイターズマーケットのタグ設定画面を開き、作ったブックマークをクリック！

  4. 入力画面が出るので、タグリスト（カンマ区切り）を貼り付ければ、自動でタグを選択してくれます。

※ ただし、もうちょっと痒いところに手が届いていないので改良予定です。改良版も公開するつもりです。

「専用画面」作りへの寄り道

タグ付け問題が解決したところで、今度は日々の作業フローそのものを見直すことにしました。

これまではプロンプトや画像をGeminiと行ったり来たりしていましたが、コピペの手間を減らし、工程を柔軟に行き来できるように「自分専用のWeb画面」をAIに作らせることにしたのです。

AIは「Streamlit（ストリームリット）」というフレームワークを使って画面を組んでくれました。……が、最初に出てきた画面はとにかく使い辛い！これでは作業効率化どころか、逆に鈍足化してしまいます。

そこで少し寄り道をして、作業フローに合わせて画面の繋ぎ合わせを一つひとつ修正。レイアウトも根本的に違うものに作り変えてもらいました。AIと何度もやり取りし、なんとか使えそうな状態のシステム画面が完成。これでまた一歩、工場化に近づきました。

こんな感じ

背景透過システムの進化。「二刀流」へ

さて、昨日から私を苦しめ続けている最大の敵「背景色と透過問題」です。 この日も何度も何度も試行錯誤を繰り返し、画像生成プロンプトに色々と対策を仕込むとともに、透過処理自体を大幅にブラッシュアップさせました。

具体的には、事前の「自動調整機能」と事後の「解析機能」を追加。さらに「背景が残る」「囲まれたエリアの背景が抜けない」「キャラごと消える」といった典型的な失敗パターンを検知し、自動調整を試みる処理を組み込みました。

そして最大の進化が、透過プログラムの「二刀流化」です。 事前の解析処理で「複雑度が高い」と判断された場合は、少し時間がかかっても高機能なrembgというライブラリを使用。逆に単純なものは「自前の高速な処理」で短時間で済ませる、というハイブリッドな魂胆です。

AIと作った独自透過処理の裏側

ちなみに、その「自前の高速な処理」がどうなっているのか。AIに今回のロジックを解説させたものがこちらです。少し専門的ですが、記録として残しておきます。

背景透過の基本方針は「外周フラッドフィル」で、画像の四辺から背景色に近いピクセルを芋づる式に辿り、キャラクター輪郭で自然に止まる外側背景のみを透明化します。

次に透過済み領域の境界から内側へ再フラッドフィルすることで、キャラクター内部に囲まれた白目や白い装飾など「孤立した背景色の島」も除去します。

境界ピクセルは完全透明でも不透明でもなく、scipy.ndimage.distance_transform_edtで透過境界からのピクセル距離を一括計算し、距離に応じてアルファ値をグラデーション付与することでアンチエイリアス処理を実現しています。

独自の工夫として、Gemini画像生成AIが右下に埋め込む透かしロゴへの対応があり、右下領域で「背景色から最も遠い色の重心」をウォーターマーク中心として動的に検出し、4点星形マスクで精密に除去します（固定座標ではなくバージョン変化に追従する設計）。

全体として「単純に白ピクセルを消す」のではなく、連結性・距離・形状を組み合わせることで、キャラクター内部の白は残しつつ外側背景だけを正確に透過する設計になっています。

……なにやら高度なことをやっていますが、要するに「ただの白抜きじゃなくて、キャラの中身は守りつつ、透かしロゴも狙い撃ちで消す賢い仕組み」ということです。AI恐るべし。
(まあ、ウォーターマーク綺麗に消えてはいないんですけどね。改善に期待！)

11日目の終わりに。またしてもリジェクト！？

この日はシステムの構築と画面作りにほとんどの時間を費やしたため、LINEスタンプ自体は2つしか作成しませんでした。

そして、その2つの結果を先取りすると……まさかの全滅。

1つは後日「致命傷な理由」でリジェクトされて完全にお蔵入り（ボツ）。 もう1つは「スマートウォッチを擬人化したキャラクター」だったのですが、昨日のランドセルに続いて、またしても「地域・文化問題」によるリジェクト（販売エリア制限）を食らってしまいました。スマートウォッチの擬人化の何が異文化の壁に触れたのか……世界の基準は本当に奥が深いです。

スタンプの成果としてはボロボロですが、ツールとしての完成度は飛躍的に高まった11日目。今回作ったツールを使い、改良し、明日こそは安定した量産工場を目指したいと思います！


リジェクトは激しくなって参りましたが失敗を活かして審査通貨の精度あげていきます。そしてここからは1セット40スタンプで制作しますよ！

次回、ブックマークレットによる時短の強化修正。

公開中の全記事はこちら！

記事作成のお供に！お役立ちツール！

コピペするだけ！簡単「タイトル＋URL一撃コピー(note特化型)」｜へろん
コピペするだけ！簡単「AI記事から**を消す(note特化型)」｜へろん

その他、こんなことやってみてます！

気に入ったらスキ、フォローよろしくお願いします！
note外から見にきてくださったかたも、もしよければハートマーク押して頂けたら励みになります😊

いいなと思ったら応援しよう！

へろん いつも応援ありがとうございます！ 快適な制作を進めるためのおやつ活動費に使わせて頂きます！