Marketing OpsSNSWorkflow

海外SNS翻訳・承認・投稿管理アプリ

国内向けの日本語投稿を、海外6ロケール向けに翻訳・確認し、Instagram/Facebookへの投稿予約まで進める業務アプリ。

課題

国内SNSの投稿を海外向けにも展開するには、翻訳、表現確認、承認、国別アカウントへの投稿準備が手作業になりやすかった。 原文にない効能や数値が混ざるリスクを抑えながら、6カ国のInstagram/Facebookへの投稿まで一つの流れで扱う必要があった。

ソリューション

Next.js 15 + Supabase + Cloudflareを基盤に、日本語本文と画像を登録し、6ロケールの翻訳、用語集/NGルール確認、ネイティブ確認、Client側の最終承認、投稿予約まで扱うWebアプリを構築。 投稿作成、翻訳承認、投稿状況確認の3ステップに画面を整理し、Meta Graph API / Buffer APIどちらでも投稿できる構成にした。

成果

海外SNS投稿の準備、確認、予約、公開状況の確認を同じ画面で進められるMVPを整備。 国別タイムゾーン、画像アップロード、投稿失敗時の手動復旧導線、監査ログまで含め、日々の運用に乗せやすい形にした。

チーム

1 member, MVP phase

要件整理・アプリUI・DB設計・翻訳フロー・SNS投稿連携・デプロイ設計

役割

要件整理、画面、DB、翻訳フロー、投稿連携、運用手順まで担当。

海外SNS運用の毎日の作業に合わせ、レビューと復旧まで含めた管理アプリとしてまとめました。

技術スタック

FrontendNext.js 15 (App Router) / React 19 / TypeScript / Tailwind CSS / Radix UI / lucide-react
BackendNext.js Server Actions / Route Handlers / Zod
Database / AuthSupabase (PostgreSQL / Auth / Storage) / Drizzle ORM
TranslationGoogle Gemini API / Glossary / NG Rules / Style Guides
SNSMeta Graph API / Buffer API / Instagram / Facebook
InfrastructureCloudflare Pages / Workers / Wrangler / OpenNext

主要機能

01

日本語本文、画像アップロードまたは画像URL、投稿日、投稿先SNSを登録する投稿作成画面

02

fr-FR、ar-AE、en-US、en-AU、zh-Hant-TW、ko-KRの6ロケールに対応。ar-AEはRTL編集とプレビューを用意

03

用語集、NGルール、国別スタイルガイド、直近の修正履歴を翻訳指示に反映

04

ネイティブ確認、Client最終承認、本文/ハッシュタグの直接編集、国別タイムゾーンでの投稿予約

05

Meta Graph API / Buffer APIを切り替えられる投稿アダプタと、投稿ジョブ・ステータス確認・手動復旧導線

06

投稿、翻訳、承認履歴、画像、SNSアカウント、投稿結果をSupabase上で管理

工夫点

人の承認を前提にした投稿フロー

翻訳結果をそのまま投稿せず、ネイティブ確認とClient側の最終承認を通してから予約できる状態設計にしました。

国別運用を一つの画面で扱う設計

ロケール、タイムゾーン、SNSアカウント、レビュー方針、用語集、NGルール、RTL表示を国別に持たせ、同じ画面で確認できるようにしました。

投稿失敗時に戻せる設計

投稿ジョブ、外部サービス側ID、ポーリング結果、手動復旧メモを残し、自動投稿が失敗しても運用担当者が復旧しやすい形にしました。