AIブログ自動生成ツールの全体設計｜Next.js×OpenAI×WordPressのアーキテクチャ
前章では、AIブログ自動生成ツールとは何かを解説しました。
この記事では、実際に作るツールの
**全体アーキテクチャ（設計構造）**を説明します。
今回のツールでは次の技術を使用します。
- Next.js
- OpenAI API
- WordPress REST API
WordPress APIについて詳しく知りたい方は
こちらの記事も参考になります。
また、WordPressへ記事を自動投稿する仕組みについては
こちらの記事でも解説しています。
この章のゴール
この章では、AIブログ自動生成ツールの構造を
- UI
- API
- サービス
- ストレージ
の4つのレイヤーに分けて理解します。
この設計を最初に決めておくことで
- コードが整理される
- 保守しやすい
- 機能追加がしやすい
というメリットがあります。
まず完成形を1分で理解する
今回作るツールは
**Next.js（App Router）**で構築します。
主な特徴は次の通りです。
- フロントとバックエンドを同一プロジェクトで管理
- 4ステップUIで記事生成
- OpenAI APIで記事と画像を生成
- WordPress REST APIで投稿
- JSONファイルで履歴とコスト管理
ユーザーから見た操作フローは次の通りです。
テーマ入力
↓
設計確認
↓
生成結果確認
↓
WordPress投稿
この4ステップだけで
記事生成から投稿まで完了します。
ツールのレイヤー設計
このプロジェクトは次の4層構造で作ります。
UI層
API層
サービス層
ストレージ層
それぞれの役割を説明します。
UI層
app/page.tsx
ここでは
- 入力フォーム
- API呼び出し
- 進捗表示
- 結果表示
などを担当します。
重要なのは
UIにロジックを書かないこと
です。
UIは
表示と操作のみ
に集中させます。
API層
app/api/*
ここでは次のエンドポイントを作ります。
POST /api/estimate
POST /api/generate
POST /api/image-only
GET /api/openai/test
GET /api/wp/test
POST /api/wp/post
APIの役割はシンプルです。
入力を受け取る
↓
サービス層を呼ぶ
↓
結果を返す
このように
薄いAPI設計にすると保守しやすくなります。
サービス層
src/services/*
ここが
ツールの本体ロジック
になります。
主なファイルは次の通りです。
generationService.ts
wpService.ts
openaiClient.ts
markdown.ts
役割は次の通りです。
generationService.ts
記事生成のメイン処理
wpService.ts
WordPress投稿処理
openaiClient.ts
OpenAI API接続
markdown.ts
Markdown → HTML変換
この層には
複雑なロジックを集約します。
ストレージ層
src/lib/db.ts
MVPでは
データベースは使いません。
代わりに
JSONファイル
で管理します。
保存するデータは次の通りです。
generations
usage_logs
cache
本番環境では
- SQLite
- PostgreSQL
などに置き換えることも可能です。
データの流れ
記事生成処理の流れは次の通りです。
UIでテーマ入力
↓
/api/generateへPOST
↓
generationService.runGeneration()
↓
OpenAI APIで段階生成
↓
SEO
↓
構成
↓
本文
↓
画像計画
↓
内部リンク
↓
HTML変換
↓
WordPress投稿データ作成
↓
履歴保存
ここで重要なのは
1回の巨大プロンプトにしないこと
です。
生成処理を分けることで
- エラー修正
- 品質改善
が簡単になります。
型設計
TypeScriptでは
型設計を先に作ると実装が安定します。
中心となる型は
src/types/index.ts
にまとめます。
主な型は次の通りです。
InputPayload
GenerationResult
SeoPlan
Outline
ImagePlanItem
WordPressPostPayload
TokenUsage
型を先に作るメリットは次の通りです。
- API仕様が明確になる
- UIとのズレを防げる
- リファクタリングが安全になる
なぜ4ステップUIにするのか
初心者向けツールでは
機能より導線
が重要です。
4ステップに分ける理由は次の通りです。
入力画面
設定を迷わせない
設計確認画面
コストと質問を確認
生成結果画面
編集に集中
投稿画面
成果を明確化
この構造にすると
ユーザーが迷わないUI
になります。
コスト管理を最初から入れる理由
OpenAI APIツールでは
コスト管理を後付けすると破綻します。
そのため最初から
- トークン記録
- 見積
- 実コスト
- 円換算
を入れておきます。
OpenAI API料金については
こちらの記事も参考になります。
MVPで割り切ること
今回は最短で動くツールを作るため
次の機能は省きます。
ユーザー認証
本格DB
ジョブキュー
高度記事評価
まずは
ローカルで動くMVP
を完成させます。
その後
- DB化
- 非同期処理
- スケール
などを拡張します。
まとめ
AIブログ自動生成ツールの設計で重要なのは
UIは薄く
ロジックはサービス層へ
保存は抽象化
この3つです。
この構造にすると
- 実装が整理される
- 保守しやすい
- 拡張しやすい
ツールになります。
次の記事では
環境構築と初期セットアップ
を解説します。