AIえほんメーカーは、テーマ、ジャンル、キャラクター、アートスタイルを選ぶと、AIが物語とページごとの挿絵を生成し、ブラウザ上で絵本として読めるサービスです。親子や保育・教育現場で、身近なテーマからオリジナル作品を作る場面を想定しました。
約3ヶ月の個人開発として、Next.js 14、TypeScript、Prisma、PostgreSQLを中心に、AI生成、認証、保存、決済、共有まで一通り実装しました。生成部分はGPT-4oで物語と画像プロンプトを作り、Stable Diffusion Ultraでページ画像を生成する構成です。
数ステップで作品になる導線にする
最初に重視したのは、ユーザーが専門知識なしで始められることです。入力項目をテーマ、ジャンル、キャラクター、画風に絞り、生成後はタイトルや本文の編集、画像再生成へ進めるようにしました。
- 絵本生成に必要な設定を、選びやすい項目として画面に整理
- 物語生成からページごとの挿絵生成までを一つの流れで実行
- 生成後に本文編集、画像再生成、保存状態の確認ができる構成にした
読む体験をWebアプリとして仕上げる
生成した文章と画像は、一覧に置くだけでは絵本として伝わりません。React PageFlipを使ったフリップブック形式のビューアを用意し、ページをめくる感覚、没入モード、公開範囲の切り替え、SNS共有まで含めて体験を整えました。
- フリップブック形式の閲覧画面とフルスクリーンの没入モードを実装
- プライベート、コミュニティ内、一般公開の公開範囲を選べるようにした
- 日本語・英語に対応し、海外ユーザーにも作品を届けられる土台を用意
運用に必要な土台も合わせて作る
生成AIアプリは、生成画面だけでは運用できません。ユーザー登録、メール確認、Google OAuth、ポイント購入、生成履歴、画像保存、セキュリティ対策までそろえて、継続して使えるサービスとして組み立てました。
- Stripeでポイント購入とポイント消費による生成フローを実装
- AWS S3で生成画像を保存し、Prismaのデータモデルで絵本、ページ、画像履歴を管理
- reCAPTCHA、CSRF検証、CSPヘッダ、入力バリデーションを組み込んだ
生成AIサービスの体験設計と運用設計
今回の学びは、AI生成の面白さを見せるほど、編集、再生成、保存、支払い、共有の平常運転が重要になるという点です。生成モデルを呼び出す部分に加えて、ユーザーが迷わず作品を完成させ、あとから読み返せるところまで含めて設計する必要がありました。