4つ選ぶだけで、AIが絵本を1冊つくる。AIえほんメーカーを一人で作った事例

開発当時の様子は、トップ画面で確認できます。

代表が約3か月の個人開発として、企画、画面づくり、支払いの仕組み、公開後の運用の備えまでを一人で作り切りました。AIが物語と絵を用意し、人は選んで、直して、読む。その体験を、専門知識のない方がつまずかずに最後まで進められる形に整えることを、開発全体の軸に置きました。

一人で開発した範囲

対象	実装したもの	利用者ができること
生成・編集	物語と挿絵の生成、本文修正、挿絵の再生成	作った内容を読み直して仕上げる
閲覧・共有	ページをめくる画面と公開範囲の選択	自分で読む、選んだ相手に見せる
利用の管理	会員登録、ポイント購入、保存と履歴	続きを作り、過去の絵本を読み返す

選ぶだけで一冊になる流れをつくる

最初に重視したのは、専門知識がなくても始められることです。4つの選択からAIが物語と場面ごとの挿絵をつくり、一冊に組み上げます。

一冊を生成した後にも、本文を直したい場合と、挿絵だけ変えたい場合があります。そのため、本文の編集と挿絵の再生成を分け、絵はページ単位で作り直す形にしました。たとえば一場面の絵を直すとき、ほかのページや本文まで作り直す必要はありません。本文と絵を確かめ、必要なページだけ直してから保存するところまで、同じ画面で進められます。

本物の絵本のように読める画面にする

絵本として楽しめるよう、ページをめくる動きを再現した閲覧画面を用意し、画面いっぱいに表示して物語に集中できる没入モードも付けました。作った絵本は、自分だけで楽しむ、仲間内で見せ合う、広く公開する、の3段階から公開範囲を選べます。

日本語と英語の両方で作品を読めるようにしました。

続けて使うための土台までそろえる

会員登録時のメールアドレス確認と、Googleアカウントでのログインに対応しました。ポイントを購入し、生成のたびに使う流れを実装し、絵本・ページ・挿絵の履歴を保存してあとから読み返せるようにしました。いたずらや不正な入力への備えも含め、繰り返し使うための機能をそろえました。

使った主な技術

• 土台（Webアプリ本体）：Next.js 14 / TypeScript
• データ保存：PostgreSQL / Prisma / AWS S3
• AI生成：GPT-4o（文章と、絵の指示づくり）／Stable Image Ultra（挿絵）
• 閲覧：React PageFlip（ページめくり表示）
• 決済：Stripe
• ログイン：Google OAuth
• セキュリティ：reCAPTCHA / CSRF対策 / CSPヘッダ

生成を試す段階と、続けて使う段階で依頼範囲が変わる

AIで物語や絵を作れるか確かめる段階では、生成の試作から始められます。利用者が続けて使うサービスにする段階では、保存・編集・支払い・共有まで依頼範囲に含めるかを先に決めます。

生成AIサービスづくりを検討している方には、試作・PoC・MVPから本番へ進む条件と見送る条件と、AIエージェントの監督｜問い合わせ返信で考えるで判断のポイントを整理しています。NeoLogicとしての作り方の全体像は、AIネイティブ開発｜人の確認と品質・引き継ぎをご覧ください。

AIサービス開発を相談する