AIと二人三脚で、ここまで作れる。
『マイ・ヒーリング絵本』開発の裏側と、全部入り機能一覧
今回作った全ての機能の情報を最新モデル「GPT-5.1 Thinking」に入力して全機能を確認してもらった上で、外注すると安くていくらくらいかかるものか聞いてみました！
はじめに：「AIで作りました」の中身をちゃんと見せてみる
「AIを使えば、今はもうここまでのものが作れるんだ。」
これは、きれいごとでも宣伝文句でもなくて、
僕自身が頭をフル回転させながら、何度も頭痛になりつつ実感していることです。
ただ、「AIで作りました」と一言で言ってしまうと、
- なんとなくAIが勝手にやってくれたように聞こえてしまう
- どれくらい大変なことなのか、どのくらいの規模のシステムなのかが伝わらない
というモヤモヤが残ります。
なのでこの記事では、
- 『サヨナラ・モンスター』＋購入者限定機能「マイ・ヒーリング絵本」で
今、実際に動いている機能を「全部」リストアップします。 - それを、もし普通にフリーランスや開発会社に頼んだら
どのくらいの規模（＝お金と工数）になりそうかの感覚も書きます。 - そして最後に、
「AIに丸投げしたわけでは全くなくて、僕の頭もかなり酷使した」
というリアルなところも正直に書きます。
全体像：何を作ったのか
作ったものを一言でいうと、
『サヨナラ・モンスター』という心理系教材をベースに、
自分の心の記録を絵本・マンガとしてまとめて、
Kindle本やペーパーバックとして出版までしやすくするWebシステム
（WordPressに組み込んだ）
です。
中身は大きく分けて、
- ユーザー（購入者）側の機能
- 僕（管理者）側だけが使う機能
- その両方を支える「有料ツールエンジン」
この3つが、WordPressを土台にしながら
かなり複雑に噛み合っています。
ここから、機能一覧フルバージョンに入ります。
1. ユーザー側の機能一覧（全部）
1-1. アクセス・チケット・決済まわり
- 「サヨナラ・モンスター」購入者専用ログイン
- マイ・ヒーリング絵本を含む会員メニュー
- チケット制の利用権限管理
- 絵本の初回本番PDFは無料
- 2回目以降のPDF生成や.kpf依頼、AI画像一括生成などにチケットを消費
- 「チケット残高表示」＋「チケット購入ボタン」
- Stripe（クレジットカード決済）と連携したチケット購入画面
- チケットの利用履歴（自分がどの処理に何枚使ったか）表示
1-2. ログイン後ダッシュボード・案内
- 購読者用にカスタマイズしたシンプルダッシュボード
- 「マイ・ヒーリング絵本」
- 「教材ダウンロード」
- 「会員限定コンテンツ」
- 「ログインセキュリティ」などへのカードリンク
- 絵本専用のログイン画面デザイン（白＋薄いピンクの世界観）
- サイドバーや余計なメニューを減らした「迷子になりにくい」構成
- 利用案内ウィジェット
- サヨナラ・モンスター公式サイト
- Amazon販売ページ
- マイ・ヒーリング絵本への入り口
- 注意事項や利用の流れ
1-3. 絵本の台本（物語）づくり
- 『サヨナラ・モンスター』のワークで書いた
- 「必ずメモしておくこと」
- 気づき・成長のメモ
- 心の記録
を入力すると、AIが絵本の台本案を自動生成
- 生成モードの切り替え
- 通常モード
- 1ページあたりの文字数を短めにするモード
- 少し視点を変えた物語を作るモード
- ページ数の指定
- 「物語部分はちょうど○ページにする」といった形で調整
- 基本情報の編集
- タイトル
- サブタイトル
- テーマ（伝えたいメッセージ）
- 「この絵本について」
- 「さいごに」
- ペンネーム
- 著作権表記
- ページごとの本文編集
- 各ページのテキストを直接編集
- ページの追加・削除（構成の微調整）
- CSV一括インポート
- サンプルCSVをダウンロード
page, text形式で台本を作成- アップロードすると、全ページ本文を一括で上書き
- 既存画像のURLや添付ファイルもクリーンに削除
1-4. 挿し絵・画像まわり
1-4-1. AI一括画像生成（現在非公開）
- 指定した絵本の全ページ画像をAIで一括生成
- DALL·E 3 などの画像エンジンを利用
- 処理の流れ
- 1ページずつAIにリクエスト
- 返ってきた画像を添付ファイルとして保存
- ページに紐づける
- 必要なチケットを消費
- 正方形・縦長の両方に対応
- 通信エラーなどで途中で止まっても、
- 進んだところまで保存されている
- 「途中から再開」ボタンで続きから実行可能
- スタイル・世界観の統一
- カラーテイストやタッチを統一するための
スタイルプリセット - 1枚の「リファレンス画像」を基準に
絵柄を似せていく設定（キャラクターの顔つき等）
- カラーテイストやタッチを統一するための
1-4-2. ChatGPT連携のプロンプト支援
- 絵本編集画面の上部に、
AI画像づくりのヘルパーカード - ボタン例
- 「表紙用プロンプトをコピー」
- 「挿し絵用プロンプトをコピー」
- 「ChatGPTを開く」
- 絵本データから自動でプロンプト生成
- タイトル、サブタイトル、テーマ、ペンネームなどを含めた表紙用プロンプト
- 各ページの本文をもとにした挿し絵用プロンプト
- プロンプトのプリセット管理
- よく使う画風・構図・色合いなどを定型文として保存
- ChatGPTスレッドURLの保存
- 各絵本ごとに、よく使うChatGPTスレッドのURLをメモしておき、
- ワンクリックでそのスレッドに飛べる
1-4-3. 画像アップロード・整理
- ユーザーごとのメディアライブラリ
- 管理者以外のユーザーには自分がアップした画像しか見えない
- 他の会員の画像は一切表示されないプライバシー仕様
- 絵本ごとの「全画像削除」機能
- その絵本の全ページ画像のURLを空にする
- 対応する添付ファイルもメディアから削除
- 「この絵柄は全部やり直したい」時に一発でリセット可能
1-5. PDF・Kindle・ペーパーバック
1-5-1. 本体PDF生成
- DocRaptor＋HTMLによる高品質PDF生成
- 対応フォーマット（例）
- 正方形ペーパーバック用（8.5×8.5インチ＋塗り足し）
- 縦長ペーパーバック用（6×9インチ＋塗り足し）
- 正方形Kindle用
- 縦長Kindleマンガ用（スマホ読み想定）
- 非同期処理
- DocRaptorの非同期APIを使い、ジョブIDを取得
- ステータスをポーリングして完成を待つ
- 完成したPDFをサーバーに保存
- 出力モード
- 通常版（本文＋画像）
- 画像のみ版（絵だけで見せたい場合）
- ストーリーモードなど
1-5-2. ペーパーバック表紙ジェネレーター
- トリムサイズ＋ページ数から背幅を自動計算
- 表紙全体のキャンバス（表1＋背＋表4）サイズを自動決定
- 表表紙画像・裏表紙画像・背景色を指定して、
- KDP入稿用の表紙PDFを自動生成
- 裏表紙文を作るためのChatGPT用プロンプトボタン
1-5-3. .kpf（Kindle Create用）作成依頼
- ログイン後の「.kpf作成依頼」画面
- 対象の絵本を選択
- レイアウト種別（PC向け／スマホ向けなど）を選ぶ
- チケットを使って作成依頼を送信
- 依頼一覧
- ステータス（受付中／完了など）
- 完成した.kpfファイルのダウンロードリンク
- 「著作権はユーザー本人に帰属します」という注意書き
1-6. Kindleストア・販売ページ用テキストサポート
- Kindle用の説明文自動生成（1冊につき回数制限あり）
- 推奨年齢ラベル
- 親御さん向け解説文
- 子ども向けのやさしい解説文
- Kindleストアの「内容紹介」テキスト案
- ローマ字・カタカナ表記のタイトル／サブタイトル
- A＋コンテンツ用サポート
- A＋全体構成を考えるマスタープロンプト
- 各モジュール用の具体的なプロンプト
- 管理画面で設定したサンプル書籍・実例ページへのリンク案内
1-7. お知らせ・ご感想・BGMなど
- 「マイ・ヒーリング絵本 お知らせ＆みなさまの声」ページとの連携
- ログイン後のご感想・ご意見・ご質問フォーム
- テキスト＋画像添付
- サイト下部に表示できるAIデモ楽曲プレイヤー
- 再生／停止
- プロフィール画面からON/OFF設定
- 各ページ右上「×」で一時的に非表示
2. 管理者（僕）側の機能一覧（全部）
2-1. チケット・決済管理
- 「チケット管理（管理者用）」メニュー
- 全ユーザーのチケット取引履歴
- 検索（ユーザーID・メールなど）
- ページング表示
- 管理者からのチケット手動調整
- 増やす／減らす
- 理由のメモ
- チケット残高ステータスバーの設定
- どの画面で表示するか
- 購入ページURLの指定
2-2. 絵本データの管理・メンテナンス
- 全絵本一覧（ユーザー・タイトル・作成日時など）
- 絵本ごとのページ・画像の状態確認
- 絵本の初期化系
- 本文の一括リセット
- 全画像の一括削除
- 絵本の複製
- テンプレート用の絵本を作り、別ユーザー用にコピー
- CSVインポート・エラー確認
2-3. .kpf依頼・PDFジョブ管理
- .kpf作成依頼一覧（管理者用ビュー）
- ステータス変更（受付→対応中→完了など）
- 完成ファイルのアップロード
- ユーザーへのメモ
- DocRaptorジョブログ
- いつ誰がどの本でPDF生成を行ったか
- 成功／失敗のステータス
2-4. 有料ツール共通エンジン（pt_tool）
- カスタム投稿タイプ
pt_tool- ツール名
- 説明
- 価格
- 紐づく固定ページ（コンテンツ）
- Stripeの価格IDなど
- ショートコード
：セールスボックス：購入者だけ閲覧可能なコンテンツロック
- 特定商取引法URLや各種ポリシーURLの一括設定
- LP専用ページテンプレート（ヘッダー・フッター無しの「まるごとLP」）
2-5. モニター・レビュー管理
- 「モニターの声」用のカスタム投稿タイプ
pt_toolとモニター投稿の紐づけ- ショートコード
：声一覧表示：ツール別モニターセクション
- 「モニター募集中／受付終了」などのステータス管理
2-6. LP用AIプロンプトの管理
pt_tool編集画面に- 「LP用AIプロンプト」メタボックス
- ツール情報から自動生成した
「LP制作用プロンプト」のテキストをボタン一発でコピー - これをChatGPTやGeminiに貼り付けて、
LPを設計・コーディングしてもらうための仕組み
2-7. デザイン・世界観まわり
- ログイン画面カスタマイズ（サヨナラ・モンスターらしい世界観）
- 購読者ダッシュボードのメニュー整理
- カードデザイン・配色の共通CSS
- 白背景＋薄いピンクをベースにした
「心理・癒し系だけど子どもっぽくない」トーン
- 白背景＋薄いピンクをベースにした
- AIデモ楽曲プレイヤーのON/OFF設定
- 表示位置
- 楽曲URL
3. これを外注したら、どれくらいの規模感なのか
こうやって一覧にしてみると、
「あ、これもう“プラグイン1個”とかの話じゃないな」
というのが、伝わるんじゃないかと思います。
ざっくりした感覚でいうと、
- 小さめ〜中規模のWebサービス（SaaS）を1本作った
- ＋有料ツールの汎用エンジンまで一緒に作った
くらいのボリュームです。
フリーランスや開発会社に、
設計から実装・テスト・改善まで全部頼んだ場合、
- 工数：150〜300時間以上
- 時給：4,000〜10,000円（経験あるエンジニアの場合）
とすると、
60万円〜300万円以上のレンジになってもおかしくない規模感です。
もちろん、これはあくまでイメージですが、
「安いフリーランスに数万円で頼めるレベル」では
ぜったいにない
ということだけは、はっきりと言えます。
4. それでも「僕＋AI」でここまで来られた理由
ここまで読んで、
「じゃあ、プログラミングできないと無理なんじゃ…？」
と思う方もいるかもしれません。
正直に言うと、
AIなしで全部やれと言われたら、無理です。何もできません。
でも今は、
- 仕様の相談相手としてAIがいてくれる
- コードのたたき台をすぐ出してくれる
- エラーを一緒に読み解いてくれる
- LPの文章やプロンプトまで下書きしてくれる
そんな存在が、常にそばにいます。
AIがやってくれたこと
- 「こういう機能を作りたい」という相談に対して、
データ構造や処理の流れの案を出してくれる - WordPressのフック・PHP・JavaScript・CSSを
具体的なコードとして生成 - エラー文を貼ると、「ここでは？」と候補を示してくれる
- LP用の長文プロンプトを、僕の意図に合わせて一緒につくってくれる
それでも必要だった「僕の頭」
ただし、AIに丸投げしていたわけではまったくなくて、
（丸投げで作れるものではない）
僕のほうもかなり頭を使いました。
- 『サヨナラ・モンスター』の世界観を壊さないこと
- 心の問題を扱ううえで、心理的な安全性を守ること
- ユーザーさんにとって「分かりやすい導線」になっているか
- 実際に自分で何度も触ってみて、
- この画面は怖く感じないか
- この文言はきつくないか
- このステップ、もう1つ減らせないか
といった感覚を調整すること
- AIが出してきたコードや文章を、そのまま使わず
「ここは違う」「ここは変えたい」と何度も数えきれないほどの修正をしていくこと
正直、
**「頭が痛くなるまで考えた日」**もたくさんありました。
AIがいてくれたからこそ乗り越えられたけれど、
AI任せにしていたら、絶対にこの形にはなっていません。
5. いまも「完成」ではなく、進化中
この記事を書いている今も、
マイ・ヒーリング絵本には新しい機能を少しずつ追加し続けているところです。
- ユーザーさんの声をもとにした微修正
- Kindleまわりのサポートの強化
- LPやチケット説明の分かりやすさ改善
- 管理画面の動線の整理
「一旦完成」したように見えても、
心理系のサービスは、使ってもらう中で見えることがたくさんあります。
そのたびに、またAIと相談して、
僕の頭をフル回転させて、
- もっとやさしく
- もっと安全に
- もっと使いやすく
なるように、少しずつ形を変えています。
6. まとめ：AIは魔法ではない。でも、ひとりの力を何倍にもしてくれる
最後に、僕が一番伝えたいのはこれです。
AIは「全部自動でやってくれる魔法」ではないけれど、
ひとりの人間ができることの範囲を、大きく広げてくれる存在だということ。
- 『サヨナラ・モンスター』という教材があって
- それをもっと活かしたいという願いがあって
- 僕なりに世界観や安全性にこだわり続けて
- そこにAIの力を重ねていった結果、
「マイ・ヒーリング絵本」という、
フリーランスに丸投げしていたら
数十万〜数百万円の開発費がかかっていたであろうシステムを、
僕ひとり＋AIでここまで育てることができました。
もしあなたが、
「こういう仕組みがあったら、きっと誰かの役に立つ」
でも「自分にはプログラミングなんて無理だ」と感じているなら、
この話が少しでも、
- 「もしかしたら、自分にもできるかもしれない」
- 「AIと一緒なら、ここまで行けるかもしれない」
と思ってもらえるきっかけになれば、とても嬉しいです。
そしていつか、
あなたがAIと一緒に作ったシステムやサービスの話を投稿する日を、
僕は楽しみにしています。
漫画で理解（30秒）
※AI生成画像です。内容は記事本文を元にしています。
コメントを投稿する