AIブログ自動生成ツール開発シリーズ
この連載では、AIを使ったブログ自動生成ツールをゼロから作ります。
AIブログ自動生成ツールのUI実装
前章では、開発環境のセットアップを行いました。
この記事では
AIブログ自動生成ツールのUIを実装します。
ここでは初心者でも迷わないように
4ステップUI
を設計します。
この章のゴール
この章の目的は
記事生成ツールの操作UIを完成させること
です。
AIツールは機能が多くなりやすいため
UIを先に整理しておくことで
- 実装が整理される
- API接続が簡単になる
- 操作ミスを防げる
というメリットがあります。
なぜ4ステップUIにするのか
今回のUIは次の4段階です。
入力
↓
設計確認
↓
生成結果
↓
WordPress投稿
この分割にすると
- 入力の心理的負担が減る
- コスト確認ができる
- 投稿判断を分離できる
というメリットがあります。
AIツールでは
「今どこにいるか」が分かるUI
が非常に重要です。
必要な状態管理
Next.jsでは
app/page.tsx
で状態を管理します。
Reactの useState を使い
次の状態を持たせます。
step
loading
isGenerating
blogTheme
estimate
result
statusMessage
特に重要なのは
loading
isGenerating
を分けることです。
理由
API待機
→ loading
長時間生成
→ isGenerating
この分離で
UIの挙動が安定します。
テーマ入力からの自動推定
このツールでは
テーマ入力から
- 想定読者
- 記事目的
- 想定文字数
- トーン
を自動推定します。
Reactでは
useMemo
を使い計算します。
これを
クイック情報
として表示します。
初心者でも
「設定がよく分からない」
という状態を防げます。
入力パネルの設計
入力パネルは
情報量を絞る
ことが重要です。
構成
必須
テーマ
任意
詳細設定
詳細設定は
<details>
で折りたたみます。
設定内容
ヒアリングON/OFF
画像枚数
WordPress投稿状態
予約投稿日時
カテゴリ候補
タグ上限
コスト優先モード
Web検索
サイト設定ID
初心者向けUIでは
最初から全部見せない
のがポイントです。
ボタン導線の設計
入力画面には
3つの行動を用意します。
設計確認へ
そのまま生成
画像のみ再生成
API
/api/estimate
/api/generate
/api/image-only
この分離により
ユーザーは
まず見積
即生成
再生成
を選べます。
生成中オーバーレイ
記事生成は
30〜60秒
かかることがあります。
そのため
オーバーレイ表示
を実装します。
表示要素
スピナー
現在処理ラベル
進捗バー
残り時間
進捗が完全一致でなくても
待ち時間体感を下げる
効果があります。
生成結果画面の設計
生成結果画面では
情報の優先順位が重要です。
表示順
実コスト
WordPress投稿ボタン
画像サムネイル
SEOタブ
内部リンク
記事プレビュー
usageログ
初心者は
上から読むだけ
で次の操作が分かります。
コピー補助機能
実務では
コピー作業が多くなります。
そのため
CopyButton
を作ります。
コピー対象
SEO情報
画像プロンプト
ALT
ファイル名
WP投稿JSON
Markdown全文
これは小さい機能ですが
作業速度がかなり上がります。
UI実装でよくある失敗
よくあるバグ
resultがnullなのに描画
非同期エラー無視
タブ表示崩れ
日時形式エラー
対策
if (!result) return
try catch finally
statusMessage表示
型定義
この4つを守ると
UIが安定します。
まとめ
AIツールのUIで重要なのは
機能を全部見せることではありません。
重要なのは
ユーザーが次の行動を迷わないこと
です。
4ステップUIにすると
- 入力
- 確認
- 生成
- 投稿
の流れが明確になります。
次の記事では
OpenAI APIの接続
を行います。
前の記事
環境構築
次の記事
OpenAI API接続
👉 ()