10

SNS · AI POST AUTOMATION

SNS投稿自動生成AI × GAS × Claude API

カテゴリ

SNS運用 / AI自動化デモ

技術

HTML / CSS / GAS / Claude API / Google Sheets

デプロイ

GitHub Pages

ステータス

LIVE

何を作ったか

SNS担当者が毎日頭を悩ませる「今日の投稿文、何にしよう…」をゼロにするツールのデモです。ブランド名・商品・ターゲット・雰囲気を入力してボタンを押すだけで、AIがThreads・Instagram・TikTok向けの投稿文をまとめて作ってくれます。

生成された文章はそのままGoogleスプレッドシートの「投稿カレンダー」に自動で保存。「未投稿 → 確認中 → 投稿済み」とステータスをドロップダウンで管理できるので、チームでの運用フローにもそのまま使えます。

使い方の流れ

  • ① 情報を入力する — ブランド名・商品・ターゲット・雰囲気(カジュアル/高級感など)をフォームに入力。投稿したいSNS(Threads・Instagram・TikTok)を選んで、何件作るかをスライダーで指定
  • ② AIが自動生成する — ボタンを押すとAI(Claude)が動き出す。SNSごとに文体を変えながら投稿文とハッシュタグをセットで作成(Threadは長め・Instagramは絵文字多め・TikTokは短くテンポよく)
  • ③ スプレッドシートに保存される — 生成完了と同時に、Googleスプレッドシートの「投稿カレンダー」に自動で追記。日時・SNS・投稿文・ハッシュタグが整理された状態で記録される
  • ④ ステータスを管理する — スプレッドシートのステータス列をクリックすると「未投稿 / 確認中 / 投稿済み / 却下」をドロップダウンで選択可能。チームでの確認フローにも対応

使った技術

  • フロントエンド(画面) — HTML / CSS / JavaScript のみで制作。ラベンダー×ピンクのグラデーションUI。外部フレームワーク不使用
  • バックエンド(裏側の処理) — Google Apps Script を使用。フォームのデータを受け取り、AIへの問い合わせ・スプレッドシートへの保存を全自動で行う
  • AI文章生成 — Anthropic の Claude API(claude-opus-4-5)。SNSごとに「何文字以内・どんな文体で」という指示をAIに渡して、用途に合った文章を生成させている
  • データ保存 — Google スプレッドシート。新規投稿が生成されるたびに自動で行が追加され、ヘッダーの色付け・列幅の調整もコードで自動設定
  • 公開 — GitHub Pages(無料ホスティング)

工夫したところ

  • SNSによって文体が変わる — 同じブランド情報でも、ThreadsはInstagramとは別の文章・TikTokはさらに別の文章を生成。「このSNSらしさ」をAIへの指示に組み込んで実現した
  • まとめて複数件つくれる — スライダーで1〜5件を指定可能。1回の操作で1週間分の投稿文をまとめて作れる
  • ドロップダウンで進捗管理 — スプレッドシートのステータス列がプルダウン式になっており、手打ち不要で「投稿済み」などに切り替えられる
  • フォームからシートまで全部つながっている — 入力 → AI生成 → 保存の一連の流れをコードだけで完結。手動コピペや転記作業がゼロ
  • 「何を書けばいいか」から解放される — SNS運用で一番しんどいのは文章を書くことより「何を書くか」を考えること。ブランドとターゲットを渡すだけでAIがアイデアを出してくれるので、白紙から悩む時間がなくなる