AI作業内容をブログ記事自動生成アプリ

プロジェクト概要

背景・課題

クライアント企業では、施工事例や作業報告をWordPressブログとして定期的に発信していた。しかし、現場スタッフが撮影した写真と作業メモから記事を作成するプロセスには大きな課題があった。

1記事あたりの作成に1〜2時間を要し、文章の構成・画像の配置・WordPressへの入稿をすべて手作業で行っていた。特に複数の現場写真を適切な文脈に配置する作業は煩雑で、記事の更新頻度が落ちる原因となっていた。

また、ライターごとに文体やトーンにばらつきが生じやすく、ブランドとしての統一感を維持することが難しかった。

ソリューション

作業メモをアップした画像を認識させ、AIがブログ記事を自動生成し、修正指示で何度でも調整した上でWordPressに下書き保存できるWebアプリケーションを構築しました。

• AI記事生成 — Gemini 2.5 Flashが作業メモと添付画像を分析し、指定されたボリューム・文体で構成されたHTML記事を自動生成。画像は文脈に合った箇所に自動配置
• 基本プロンプト設定 — 文体・トーン・構成の指示をプロンプトとして保存可能。「柔らかく読者に寄り添うトーン」「導入→見出し→まとめの構成」など、ブランドに合わせた記事スタイルを固定化し、誰が使っても統一された品質を実現
• プレビュー＆修正機能 — 生成された記事をプレビュー画面で確認し、「見出しを変更して」「もっとカジュアルに」などの自然言語での修正指示で何度でもリファイン可能
• ターゲット読者指定 — 想定読者層を設定すると、知識レベルや関心に合わせた表現・内容で記事を生成
• サムネイル自動生成 — Imagen 4が記事内容からアイキャッチ画像を自動生成し、WordPress投稿時にアイキャッチとして設定（生成の質はAPIに依存）
• WordPress直接投稿 — REST APIによるワンクリック下書き保存。画像アップロード・記事本文・カテゴリ設定・アイキャッチ画像をすべて自動処理
• 画像貼り付け＆音声入力 — クリップボードからの画像貼り付けとブラウザ音声入力に対応し、現場からの素早い入力を支援
• 自動保存 — すべての入力内容をブラウザに自動保存。作業の中断・再開が容易

↑画像は生成した記事を確認と修正ができるページ

導入効果

使用技術

• Next.js 16 (App Router) + TypeScript — フロントエンド・APIルート・SSEストリーミングを1つのフレームワークで統合し、型安全な開発を実現
• Gemini 2.5 Flash — マルチモーダルAIによるテキスト＋画像の同時分析で、作業メモと現場写真から文脈を理解した記事を生成
• Imagen 4 — 記事内容を要約したプロンプトからプロフェッショナルなアイキャッチ画像を自動生成
• WordPress REST API — メディアアップロード・投稿作成・カテゴリ設定をAPI経由で自動化。WAF対策として2段階投稿を採用
• localforage (IndexedDB) — ブラウザ側での入力内容の自動保存・復元により、作業の中断・再開をシームレスに実現

追加予定機能

• 複数記事のバッチ生成（CSVから一括で下書き作成）
• 記事テンプレート機能（施工事例・お知らせなどのパターン化）
• SEO分析との連携（キーワード密度・メタディスクリプションの自動生成）
• 生成記事の履歴管理と過去記事の再編集