Vibe CodingでSNSバナーを量産｜文字が崩れない自作ツールの作り方
この記事の要点
- 背景はAIで生成し、ロゴと文字は別ツールで正確に重ねるのが最適
- Vibe Codingでツールを自作すれば文字入力だけでバナーを量産可能
- 仕様を先に決め、絵作りはAI、ロゴと文字は仕組みで固定し属人化を防ぐ
「SNSバナーを毎週作るのが地味につらい」「外注すると1枚数千円、社内で作ると半日つぶれる」。そんなお悩みはありませんか。実は今、文章で指示を出すだけで、ロゴ入りのバナーを安定して作る仕組みを自分たちで用意できます。
この記事では、Vibe Coding（AIに自然な言葉で指示してプログラムを作ってもらう作り方）を使って、ロゴと文字がきれいに入ったSNSバナーを自作する具体的な手順を解説します。AI画像生成にありがちな「文字が崩れる」問題をどう回避するか、コピペで動くコードと公開前のチェックまで、現場目線でお伝えします。
Contents / 目次
結論。背景はAI、文字とロゴは仕組みで重ねるのが正解
先に答えをお伝えします。ロゴ入りSNSバナーをAIで安定して量産したいなら、「背景画像だけをAIに生成させ、ロゴと文字は別の仕組みで正確に重ねる」という作り方が一番うまくいきます。
理由はシンプルです。今のAI画像生成は、写真のような背景やイラストを作るのは非常に得意になりました。一方で、画像の中に日本語の文字をきれいに入れるのは、まだ苦手です。「キャンペーン」と入れたつもりが「キャンヘーン」になったり、ロゴの形が微妙に変わったりします。だから、文字とロゴだけは人間が決めた通りに正確に配置できる仕組みを別に用意するのが現実的なんです。
ここで言うVibe Codingとは、専門のプログラミング知識がなくても、AIに「こういうツールが欲しい」と言葉で頼んでプログラムを作ってもらう進め方のことです。つまり、自分で一からコードを書くのではなく、AIに作らせて、出てきたものを確認・微調整して使います。
このテーマで押さえるべきポイントは、次の3つに整理できます。まずこの全体像をつかんでください。
| 役割 | 担当 | 理由 |
|---|---|---|
| 背景画像をつくる | AI画像生成（ChatGPT・Gemini・Adobe Fireflyなど） | 雰囲気のある背景やイラストは生成が得意 |
| ロゴと文字を重ねる | 自作ツール（Vibe Codingで作る） | 位置・色・フォントを毎回正確に再現できる |
| 仕組みをつくる | あなた＋AI（Cursor・Claude Codeなど） | 一度作れば、文字を打ち替えるだけで量産できる |
大事なのは、AIに全部丸投げしないことです。AIが得意な「絵づくり」はAIに任せ、ブランドとして崩したくない「ロゴと文字」は仕組みでガチッと固定する。この役割分担さえ守れば、誰が操作しても同じ品質のバナーが出せるようになります。これが、属人化しないバナー制作の土台です。
ちなみに、URLや簡単な情報を入れるだけでバナーを生成する市販ツールも増えています。手早く済ませたいならそれも選択肢ですが、自社のフォーマットに合わせて細かく作り込みたい、毎回同じ位置にロゴを置きたい、という会社には、後述する「自作する仕組み」のほうが結局しっくりきます。
具体的なやり方。文字入力だけでバナーが出る仕組みを作る手順
ここからは、実際に手を動かせるように手順を分解します。やることは大きく4ステップです。最初の3ステップを今日のうちに試せば、明日からはバナー1枚が数分で出せる状態になります。
ステップ1。バナーの仕様を先に決める
最初にやるべきは、ツール作りではなく「仕様を決めること」です。ここを飛ばすと、AIに頼んでも毎回バラバラなものが出てきます。決めるべき項目は次の通りです。
- サイズ：Instagram投稿なら1080×1080px、ストーリーズなら1080×1920px、X（旧Twitter）なら1200×675pxが基本
- ロゴの位置：左上か右下に固定する。毎回同じ位置にすると、ブランドとして一貫して見える
- 使う色：メインカラーをカラーコード（例：#1a237e）で指定しておく。色の言葉ではなく数字で決めるのがコツ
- フォント：見出し用と本文用の2種類だけ決める。増やすほど散らかる
- 文字を置く位置：見出しは上1/3、サブ文はその下、のように場所を固定する
この仕様メモが、このあとAIに渡す「材料」になります。紙のメモでもメモアプリでも構いません。先に言葉にしておくことが、後の手戻りを大きく減らします。
ステップ2。背景画像をAIに作らせる
次に、バナーの背景になる画像をAIに生成させます。ここで重要なのは、文字やロゴは入れさせないことです。あくまで「背景だけ」を頼みます。文字は後で正確に重ねるので、AIには絵づくりに集中してもらいます。
プロンプト（AIへの指示文）は、作り込んだ完成形を用意する必要はありません。今のAIは、ざっくり頼めば自分で良い指示に整えてくれます。出発点として、次くらいの短いたたき台で十分です。あとはAIと対話しながら、自社の雰囲気に合わせて詰めていってください。
あなたはプロのアートディレクターです。SNSバナーの背景画像を作りたいです。
- 用途：［春の新生活キャンペーン／業種は○○］
- 雰囲気：明るく清潔感のある、余白の多いミニマルなデザイン
- 主役の色：#1a237e を基調に、ベージュをアクセントに
- 文字やロゴは入れないでください（あとで自分で重ねます）
まずは正方形（1080×1080）で1案。気に入らなければ一緒に調整しましょう。コツが2つあります。1つ目は、英語で指示するとクオリティが上がりやすいこと。主要なAIは英語データで学習しているためです。日本語で方向性を固めてから「これを英語のプロンプトにして」と頼むと楽です。2つ目は、一発で完璧を狙わないこと。初回で大枠を決め、2回目で色味、3回目で構図、と会話で詰めていく「マルチターン編集」のほうが、結局速くきれいに仕上がります。
なお、商用利用での権利が気になる場合は、著作権がクリアなデータだけで学習したとされるツール（Adobe Fireflyなど）を選ぶと安心材料になります。「○○風」と特定の作家の画風を真似させる指示は、権利上のリスクが高まるので避けてください。詳しくはAI画像生成の著作権トラブル回避｜2026年版ガイドラインの作り方でも整理しています。
ステップ3。ロゴと文字を重ねるツールをVibe Codingで作る
ここが記事の中心です。背景画像の上に、ロゴと文字を正確に重ねて書き出すツールを自作します。CursorやClaude Code（AIに言葉で頼んでコードを書かせる開発ツール）に、次のように頼むのが出発点です。
1枚のHTMLファイルだけで動く、SNSバナー作成ツールを作ってください。
- 背景画像とロゴ画像をアップロードできる
- 見出しとサブ文をテキスト欄に入力できる
- 入力した内容で、Canvasにバナーを描画する
- 文字が読みやすいよう、背景の上に半透明の帯を敷く
- 「PNG保存」ボタンで画像をダウンロードできる
外部ライブラリは使わず、コピペで動く完成形でお願いします。AIが出してくるコードは、たとえば次のようなものになります。これはそのままファイルに保存すれば動く完成品です。中身が読めなくても問題ありません。動かしてみて、気になるところをAIに「ここをこう変えて」と頼めば直してくれます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SNSバナー自作ツール</title>
<style>
body{font-family:sans-serif;margin:24px;color:#222}
.row{margin:8px 0}
canvas{border:1px solid #ccc;max-width:100%;height:auto}
</style>
</head>
<body>
<h1>ロゴ入りSNSバナー生成</h1>
<div class="row">背景画像 <input type="file" id="bg" accept="image/*"></div>
<div class="row">ロゴ画像 <input type="file" id="logo" accept="image/*"></div>
<div class="row">見出し <input type="text" id="title" size="34" value="春の新生活応援キャンペーン"></div>
<div class="row">サブ文 <input type="text" id="sub" size="34" value="3月31日まで"></div>
<div class="row">
<button id="draw">バナーを描く</button>
<button id="save">PNG保存</button>
</div>
<canvas id="cv" width="1080" height="1080"></canvas>
<script>
// ［ここを自社の値に変更］ブランドカラーと文字色
const BRAND = "#1a237e"; // メインカラー（帯の色）
const TXTCOL = "#ffffff"; // 文字色
const cv = document.getElementById("cv");
const ctx = cv.getContext("2d");
let bgImg = null, logoImg = null;
// ファイル選択を画像として読み込むための共通処理
function loadFile(input, set){
input.addEventListener("change", e => {
const f = e.target.files[0]; if(!f) return;
const img = new Image();
img.onload = () => { set(img); };
img.src = URL.createObjectURL(f);
});
}
loadFile(document.getElementById("bg"), img => bgImg = img);
loadFile(document.getElementById("logo"), img => logoImg = img);
// 長い見出しを指定幅で自動改行する
function wrapText(text, maxWidth){
const lines = []; let line = "";
for(const ch of text){
if(ctx.measureText(line + ch).width > maxWidth){ lines.push(line); line = ch; }
else { line += ch; }
}
if(line) lines.push(line);
return lines;
}
function draw(){
ctx.clearRect(0,0,cv.width,cv.height);
// 背景を画面いっぱいに（縦横比を保って中央寄せ）
if(bgImg){
const r = Math.max(cv.width/bgImg.width, cv.height/bgImg.height);
const w = bgImg.width*r, h = bgImg.height*r;
ctx.drawImage(bgImg,(cv.width-w)/2,(cv.height-h)/2,w,h);
} else { ctx.fillStyle="#eee"; ctx.fillRect(0,0,cv.width,cv.height); }
// 文字を読みやすくする半透明の帯（下側に敷く）
ctx.fillStyle = BRAND + "cc"; // 末尾ccは透明度（約80%）
ctx.fillRect(0, cv.height-380, cv.width, 380);
// 見出し（自動改行つき）
ctx.fillStyle = TXTCOL;
ctx.font = "bold 76px sans-serif";
ctx.textBaseline = "top";
const title = document.getElementById("title").value;
const lines = wrapText(title, cv.width-120);
let y = cv.height-330;
for(const l of lines){ ctx.fillText(l, 60, y); y += 92; }
// サブ文
ctx.font = "44px sans-serif";
ctx.fillText(document.getElementById("sub").value, 60, y+10);
// ロゴ（右下に固定／幅180pxに統一）
if(logoImg){
const lw = 180, lh = logoImg.height*(lw/logoImg.width);
ctx.drawImage(logoImg, cv.width-lw-50, 50, lw, lh);
}
}
document.getElementById("draw").addEventListener("click", draw);
document.getElementById("save").addEventListener("click", () => {
const a = document.createElement("a");
a.download = "banner.png";
a.href = cv.toDataURL("image/png");
a.click();
});
</script>
</body>
</html>使い方は次の通りです。このコードをメモ帳などに貼り付けて「banner.html」という名前で保存し、ダブルクリックでブラウザで開きます。あとは背景画像とロゴを選び、見出しとサブ文を打ち込んで「バナーを描く」を押すだけ。良ければ「PNG保存」で書き出します。文字を打ち替えるだけで、同じデザインのバナーが何枚でも作れるのがポイントです。
つまずきやすい点。日本語フォントを変えたい場合は、コード内の「sans-serif」の部分をAIに伝えて、Google FontsなどのWebフォントを読み込むよう頼みましょう。「明朝体で上品にしたい」と言えば、必要な読み込みコードごと書き換えてくれます。
ステップ4。テンプレ化して社内に配る
仕組みができたら、最後はチームで使える形にします。完成したHTMLファイルを社内の共有フォルダに置き、「背景画像はこのフォルダから選ぶ」「ロゴはこのファイルを使う」という運用メモを添えます。これで、デザインが分からない人でも、文字を入れ替えるだけでブランドの揃ったバナーを作れるようになります。この「型」を作る発想はVibe Codingで社内限定アプリを自作：プログラミング不要で業務自動化とも共通する考え方です。
効果・成果イメージ。何が、どれくらい変わるか
この仕組みを入れると、バナー制作の「時間」と「ばらつき」が大きく減ります。取り組んだ後の変化を具体的にイメージしてみましょう。
これまで1枚あたり、外注なら依頼から納品まで数日、社内制作でもデザインツールと格闘して30分〜1時間かかっていた作業が、テンプレが整っていれば文字を打ち替えて数分で済むようになります。週に5枚作っているなら、月20枚分の制作時間がまるごと圧縮される計算です。
「絵づくりをAIに、仕上げを仕組みに任せる」という発想は、規模を問わず中小企業でもそのまま使えます。
成果を出している会社に共通するのは、AIを「魔法の自動生成機」ではなく「下ごしらえの担当」として使っている点です。背景の量産はAIに任せ、ブランドの一貫性は人間と仕組みで守る。この線引きができている会社ほど、スピードと品質を両立できています。
数字の目安について。削減できる時間は、現状の作り方や枚数で大きく変わります。まずは「今1枚に何分かかっているか」を一度ストップウォッチで測り、仕組み導入後と比べてみてください。自社の本当の効果は、その実測で初めて見えてきます。
よくある失敗と回避法
現場でこの取り組みを始めると、つまずきポイントはだいたい決まっています。代表的な3つを、起きる状況と防ぎ方のセットで紹介します。
失敗1。AIに文字まで入れさせて崩れる
「バナーごと一発で作ってほしい」とAIに頼むと起きがちな失敗です。AIが画像の中に直接文字を描くと、日本語が崩れたり、誤字のような見た目になったりします。SNSに出してから「文字が変」と指摘されると、信頼にも関わります。
防ぎ方はこの記事の通りで、背景と文字を分けることです。AIには背景だけを頼み、文字とロゴは自作ツールで正確に重ねます。この一手間で、AIに文字を描かせることによる崩れは起きなくなります。
失敗2。「どこかで見た感」が出てブランドが薄まる
AIにお任せで量産すると、似たような構図・似たような色合いの「ジェネリックなバナー」ばかりになり、自社らしさが消えていきます。安易な乱用は「手抜き」「既視感」という印象を消費者に与え、かえってブランドを損なうこともあります。
防ぎ方は、ステップ1で決めた仕様（色・ロゴ位置・フォント）を必ず固定し、人間が最終チェックの番人になることです。「これは自社の顔として出していいか」を毎回一人が確認する。この役割を決めておくだけで、品質は安定します。キャッチコピーで差をつけたいならAIで作るバナーのキャッチコピー｜100本ノックのやり方も合わせてどうぞ。
失敗3。運用ルールがなく、人によって品質がバラバラになる
仕組みを作っても、「どの画像を使っていいか」「何を入力してはいけないか」が曖昧だと、人によって出来がバラつき、結局また属人化します。社外秘の情報を不用意にAIに入力してしまうリスクもあります。
防ぎ方は、短くてもいいので運用ルールを文章にして共有することです。生成AIの業務利用については、デジタル庁が公開している行政の進化と革新のための生成AIの調達·利活用に係るガイドライン（第2.0版）のような公的な資料も、自社ルールを作るときの参考になります。考え方の枠組みとして目を通しておくと安心です。
使う側の落とし穴と、現場の妥協点
ここまで「自作できる」とお伝えしてきましたが、現場で見えてきた本音もお伝えします。きれいごとだけでは、かえって判断を誤るからです。
まず正直に言うと、最初の仕組みづくりは、思ったより試行錯誤がいります。AIにコードを作らせること自体は数分ですが、「ロゴの位置が微妙」「フォントが好みじゃない」「スマホで見ると文字が小さい」といった微調整で、初回は半日くらい溶けることもあります。ただ、ここを一度乗り越えれば、あとは打ち替えるだけ。最初だけは腰を据えて作り込む、と割り切るのが正解です。
次に、内製と外注の切り分けです。週に何枚もバナーを出す会社なら、自作の仕組みは確実に元が取れます。一方で、年に数回しかバナーを作らない会社が無理に内製するのは、むしろ非効率です。その場合は市販のバナー生成ツールを使うか、節目のデザインだけプロに頼むほうが合理的です。「全部自作」が正義ではありません。
そして見落としがちなコストの話です。本当のコストは、ツール代より「誰がメンテし続けるか」にあります。作った人が異動したらメンテできなくなる、というのは現場で本当によく見かける失敗です。だからこそ、コードはAIに作らせて誰でも直せる状態にしておくこと、運用メモを残しておくことが効いてきます。
最後に向き不向きを率直に。デザインの細部にこだわり抜きたいブランドや、毎回まったく違う凝った表現を出したい場合は、AI＋仕組みだけでは限界があります。そこは人のデザイナーの領域です。逆に、「同じ型で、中身を差し替えて、速く、たくさん」というニーズには、この作り方がぴったりはまります。自社がどちらかを見極めることが、遠回りしないコツです。
よくある質問
プログラミングが全くできなくても本当に作れますか。
はい、作れます。コードはAIに頼んで作ってもらい、出てきたものを保存して開くだけです。「ここをこう変えて」と言葉で頼めば修正もしてくれます。コードを読める必要はなく、動かして確認できれば十分です。
AIが作った画像はそのまま商用で使って大丈夫ですか。
ツールや使い方によります。著作権がクリアなデータで学習したとされるツールを選び、特定の作家の画風を真似る指示を避けるのが安全です。心配な場合は、社内で利用ルールを決め、公開前に一人が確認する体制を作っておくと安心です。
CanvaなどのデザインツールとVibe Codingの自作、どちらがいいですか。
手軽さならCanva、自社専用に細かく作り込むなら自作が向きます。毎回同じ位置にロゴを置きたい、文字を打つだけで量産したい、というニーズが強いほど、自作した仕組みのほうが結局ラクになります。両方を併用しても構いません。
作るのにどれくらい時間がかかりますか。
仕様が決まっていれば、ツールの土台はAIに頼んで数分で出てきます。ただ、ロゴ位置やフォントの微調整に初回は半日ほどかかることもあります。一度作り込めば、以降は1枚数分で量産できるようになります。
ここまで読んで、「仕組みは作れそうだけど、最初の作り込みや社内への定着までやり切る余裕がない」と感じた方もいるはずです。そんなときは、コレットラボのAI業務システム化支援にお気軽にご相談ください。いきなり契約ではなく、まずは現状を整理してお話を聞かせていただくだけでも大丈夫です。AI業務システム化の詳細はこちらからどうぞ。
30分の無料相談
現状をお聞きし、優先順位を一緒に整理します。
予約する →
