SNS投稿自動生成 — Kokona Portfolio

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がアイデアを出してくれるので、白紙から悩む時間がなくなる