見出し画像

Instagramカルーセル運用を週1時間に圧縮する方法 — YAML定義→自動画像生成を仕組み化した話_Instagram_SNS自動化

藤解 神羽｜AIで仕事と事業を動かすエンジニア



はじめに

「Instagramのカルーセル投稿、デザインに時間を取られすぎて続かない」

これ、SNS運用をやったことがある人なら、ほぼ全員が一度はぶつかる壁だと思います。

僕も同じ壁にぶつかりました。介護領域で運用している2つのInstagramアカウントを週3〜5投稿のペースで回しているのですが、
1投稿のデザインに毎回1時間以上かかっていた時期があります 。

それを「YAMLにテキストを書く → スクリプトを叩く → 完成画像が出てくる」という仕組みに置き換えて、1投稿あたりのデザイン時間を5〜10分まで圧縮 しました。

今回はその仕組みの中身と、AI駆動開発でどう設計したかを書いていきます。

「SNS運用に時間を取られている人」「業務を仕組み化したいエンジニア」「個人の発信を継続したい人」、誰かのヒントになれば嬉しいです。

なぜ「デザインに時間がかかる」のか

まず問題の構造から整理します。Canva や Figma でSNSのデザインを毎回作っていた頃、時間を奪っていたのはこの3つでした。

  1. デザインの再現性が低い — 前回の投稿と「同じトーン」で作ろうとしても、微妙にズレる

  2. テキスト編集が面倒 — 文言を1文字変えたいだけなのに、レイヤーを開いて修正して…が積み重なる

  3. マルチアカウント運用がしんどい — そっとネット用とけありんぐ用でブランドカラーが違うので、毎回設定し直し

つまり、「コンテンツの中身を考える時間」より「形を整える時間」のほうが長い という、本末転倒な状態。

ここで気づきました。

「デザイン」は、ほぼ全部が"型"の問題だ。

カバー画像のレイアウト、見出しの大きさ、本文の余白、デコレーション要素の配置——どれも「投稿ごとに考えたい」ものではなく、ブランドとしての型を一度決めれば、あとは流し込むだけ で済むはずのものです。

だったら、デザインソフトで毎回手作業する必要はない。型をコードで持って、テキストを差し込む仕組み を作ればいい。

そう考えて、ワンオペでも回る運用基盤を組み直したのが、今回の話です。

全体像 — YAML → HTML → PNG の3段変換

仕組みは、思っていたよりシンプルです。

post.yaml         ← 投稿の中身（テキスト・テーマ）を書く
   ↓
create-post.js    ← YAMLを読んで slides.html を生成
   ↓
slides.html       ← ブラウザで表示可能なカルーセル
   ↓
screenshot-slides.js  ← Puppeteer でスクショ
   ↓
img/slide1.png 〜 slide7.png  ← Instagramに上げる完成画像

要するに、「テキスト → HTML/CSS でレンダリング → スクショで画像化」 という3段変換です。

Webエンジニアにとっては馴染みのある技術しか使っていません。Puppeteer（ヘッドレスChromeを操作するライブラリ）と、HTML/CSS のレイアウト、それを束ねるNode.js。
自分が日常的に書いている言語のままSNS運用が組める のが、この構成の強みです。

ステップ1: テキストを構造化する（YAML定義）

このシステムの肝は、「投稿の中身」をYAMLで構造化したことです。

実際の post.yaml の一部はこんな感じです。
実際にAIでカルーセルを画像を作成した@kaigofukushi_carering_officialの１つ目の投稿です。


title: "投稿1: けありんぐって何？ — 介護職のためのSNSアプリ"

slides:
  - type: cover
    bg: teal
    ribbonText: アプリ紹介
    lines:
      - けありんぐって
      - 何？
      - 介護職のためのSNS
    subtext: 知識でつなぐ、介護の仲間

  - type: list-item
    bg: white
    label: "01"
    emoji: "📱"
    icon: app
    headline: "介護職専用の<br>SNSアプリ"
    body: "けありんぐは、介護の現場で働く<br>あなたのためのSNS。..."
    note: "施設・訪問・デイ・ケアマネ…<br>どんな職種の方も歓迎です。"

  - type: cta
    bg: teal
    headerText: "介護職のためのSNS<br>「けありんぐ」"
    bodyText: "投稿・DM機能で<br>全国の介護職とつながろう。"

caption: |
  はじめまして、けありんぐです。
  ...

hashtags: "#介護 #介護職 #介護福祉士 #けありんぐ #介護SNS"

ポイントは3つあります。

1. スライドの「型」を `type` で指定する

`cover` / `list-item` / `quote` / `cta` / `end` などのスライド型をあらかじめ用意しておいて、YAMLでは型を指定するだけ。デザインのバリエーションは全部コード側にある ので、書く側は中身に集中できる。

2. ブランドカラーを `bg` で指定する

`teal` / `white` / `dark` のように背景キーワードで指定すると、テンプレート側でブランドカラー（けありんぐなら `#36C3A8`）に自動でマッピング。カラーコードを覚えなくていい 。

3. キャプションとハッシュタグもYAMLに含める

画像だけでなく、Instagramに貼り付けるテキストもYAMLにまとめておく。投稿時に「あの文章どこだっけ」と探す手間が消える 。

YAMLの良いところは、人が読み書きしやすい構造化フォーマット であること。JSONより書きやすく、Excelより柔軟で、Markdownより構造化されている。「テキストを構造化する」最初の選択肢として、いまだに最強だと思います。

ステップ2: テンプレートで「型」を生成する

YAMLを読み込んだら、テンプレート関数で HTML 文字列に変換します。

たとえばカバーのテンプレートはこんな構造です（一部抜粋）。

function renderCover(slide) {
  return `
    <div class="slide" style="background:${B[slide.bg]};">
      ${topBar()}
      <div class="ribbon">${slide.ribbonText}</div>
      <h1 style="font-size:${F.hero}px;">
        ${slide.lines.join("<br>")}
      </h1>
      <p style="font-size:${F.sub}px;">${slide.subtext}</p>
      ${swipeIndicator(slide.bg)}
    </div>
  `;
}

  • ブランドカラー `B` と フォントサイズ `F` を定数で持つ

  • スライド共通の装飾（トップバー、スワイプインジケーター）は関数化

  • スライド型ごとに専用のレンダリング関数を用意

「型ごとに最適化されたレンダリング関数」が並んでいる だけのシンプルな設計。Reactを使わないのは、最終的にPuppeteerでスクショするだけだから。ライブラリは増やさない 主義です。

ステップ3: Puppeteerでスクショ取得

最後に、生成された HTML をブラウザで開いてスクショを撮ります。

const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();

await page.setViewport({ width: 1080, height: 1350 * 10 });
await page.goto(`file://${htmlPath}`, { waitUntil: "networkidle0" });
await page.evaluate(() => document.fonts.ready);

const slides = await page.$$(".slide");
for (let i = 0; i < slides.length; i++) {
  await slides[i].screenshot({
    path: `img/slide${i + 1}.png`,
    type: "png",
  });
}

ポイントは2つ。

1. Instagram推奨サイズ（1080×1350）で取る

Instagramのカルーセルは 4:5 比率が推奨されています。最初からこのサイズで作っておくことで、投稿時のトリミング作業がゼロ になります。

2. フォントの読み込み完了を待つ

`document.fonts.ready` を待たないと、Webフォントが読み込まれる前にスクショが撮られて崩れます。地味だけど絶対に外せない一行 。

これで `npm run create-post post1` のような1コマンドで、slide1.png 〜 slide7.png までの全画像が生成完了 します。

どこにAIを差し込んでいるか

「YAML→画像」だけならただの自動化ツールですが、僕の運用では コンテンツを考える段階にAIを組み込んでいます 。

1. 投稿テーマのブレスト

ChatGPT / Claude にターゲット（在宅介護家族 or 現役介護職）とブランドトーンを渡して、毎週のテーマ案を10個出してもらう 。そこから自分の感覚で3本選ぶ。

2. スライド構成の下書き

選んだテーマを Claude に渡して、カルーセル7枚分のスライド構成（タイトル・本文・締め）を一気に下書き してもらう。トーンや構成のクセは過去投稿を渡して学習させている。

3. YAML化

下書きをそのまま「この構造のYAMLに変換して」と指示すると、コピペで使える状態になる。

4. 微調整は人間

最後の言い回し調整・トーン補正・ファクトチェックは自分でやる。AI に任せるのは"型を作るところ"まで、最終判断は人間 ——これは士業AIデモのときと同じ考え方です。

このフローで、1投稿の制作時間が「ネタ出し30分 + AI下書き15分 + 微調整15分 + 自動生成5分」= 約1時間 に収まるようになりました。デザインソフトで毎回作っていた頃から、半分以下です。

効果と、想定外の副産物

このシステムを導入してから、いくつか想定外のいいことが起きました。

効果1: 投稿の品質が安定した

「型」が決まっているので、当たり外れが減って、平均点の高い投稿が量産できる ようになりました。バズ狙いではなく、安定運用には向いている。

効果2: マルチアカウント運用が現実的になった

複数のアカウントを並行運用していますが、それぞれ独立したディレクトリでYAMLを管理しているので、ブランドが混ざらない 。アカウントごとにスタイル定義（カラー・フォント・トーン）を持てるのが大きい。

効果3: 振り返りが資産になる

過去の投稿が全部 Git で管理されているので、「あの投稿、どんな文言で出したっけ」がリポジトリ検索で一発で出る 。手書きデザイン時代は、Canvaの中を探し回ることになっていた。

副産物: 引き継ぎコストが激減した

万一、運用を誰かに引き継ぐとなっても、YAMLの書き方さえ覚えてもらえば誰でも投稿が作れる 。Canva の作法を覚えてもらう必要がない。チーム運用やクライアント案件への展開も視野に入ります。

このアプローチが向いている領域

今回はSNS運用の例でしたが、「同じフォーマットを繰り返し作る」業務すべて にこの考え方は応用できます。

  • 営業資料のテンプレート化（顧客名・金額だけ差し替え）

  • 採用候補者へのオファーレター自動生成

  • 月次レポートの定型部分自動化

  • ECサイトの商品ページ量産

  • ブログのまとめ記事テンプレート化

「同じ構造のものを、中身だけ変えて繰り返し作る業務」が、自動化の最有力候補です。

逆に「毎回ゼロから考える業務」は無理に自動化しないほうがいい。自動化に向く業務と向かない業務の見極めができる人 が、AI時代の業務設計者として強いです。

まとめ

  • Instagramのデザイン業務の正体は「型 × 中身」の組み合わせ

  • 型をコードで、中身をYAMLで管理することで、1投稿のデザイン時間を1時間→5〜10分に圧縮

  • Puppeteer + HTML/CSS という、Webエンジニアの手持ち技術だけで完結

  • AIは「ネタ出し」と「下書き」に使い、最終判断は人間 に残す

  • 「同じフォーマットを繰り返し作る業務」は、ほぼすべて自動化候補

「SNS運用が続かない」「コンテンツ制作の工数が膨らんで本業を圧迫する」——こういう悩みの大半は、仕組みで解決できる 領域です。デザインソフトとの相性が悪い人ほど、コードに寄せる選択肢を持っておくと武器になります。

そして、仕組み化は一度作れば永久に効きます 。最初に1日かけて作った仕組みが、その後の100投稿、1,000投稿を支える。「面倒くさい」と感じた瞬間こそ、仕組み化のチャンス ——これは AI 時代でも変わらない原則だと思っています。

次回予告

5月の連載はここで一区切り。次回は6月テーマに移ります。

候補としては、Claude Code で開発速度が変わった具体的な使い方 あたりを書く予定です。AI駆動開発を「ふわっとした概念」ではなく、自分の毎日のワークフロー単位で分解 して書きます。

ご相談・お問い合わせ

AI駆動開発や業務自動化のご相談は、株式会社ゼットリンカーまでお気軽にどうぞ。

「自社のSNS運用・営業資料・レポート業務をどう仕組み化するか」のディスカッションだけでも歓迎です。

この記事が参考になったら「スキ」で教えてもらえると嬉しいです。
AI活用・開発の実務ノウハウを発信しています → フォローはこちら
x：https://x.com/shinba_toge
Instagram：https://www.instagram.com/shinba_toge
note：https://note.com/shinba_toge 


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