AIエージェントシステム開発 / Pon Pon HP

6人月の工数を0.5人月に

ディレクター、デザイナー、エンジニアが分担していた制作工程をひとつのシステムに統合。ディレクターが品質を判断しながら、一人で完成まで進められる業務に変えました。

制作体制
3名 → 1名
HP制作工数
2か月 → 2週間
開発したもの
課金AI SaaS
Pon Pon HPの制作画面とAIエージェントの操作画面 Pon Pon HP公式サイト

01 / 業務の変化

指示する相手を変え、制作を仕組みに

クライアントと向き合い、品質を判断するのはこれまでどおりディレクターです。デザイナーとエンジニアへ出していた指示を、Pon Pon HPへ直接出せるようにしました。

従来人へ指示するHP制作
クライアント要望・確認・修正
相談確認
ディレクター理解・判断・指示
制作を指示
デザイナーデザイン・画像・修正
エンジニア実装・公開・保守
制作体制
3名
制作工数
平均2か月

指示、待機、確認、再依頼を繰り返すため、担当者の予定や経験によって期間と品質が変わっていました。

導入後システムへ指示するHP制作
クライアント要望・確認・修正
相談確認
ディレクター理解・判断・指示
Pon Pon HPへ指示
ディレクターが制作指示を出すPon Pon HPのメイン画面
構成・文章・画像・コード・公開・修正
いつでもすぐに安定した品質で制作
制作体制
1名
制作工数
平均2週間

ディレクターが必要なときに直接指示でき、同じ制作フローと確認基準で何度でも進められます。

02 / 開発内容

8領域・主要16機能を実装

文章を生成するだけのAIではありません。顧客が契約し、ホームページを作り、公開後も更新できるまでを一つのSaaSとして実装しました。

機能実装明細Pon Pon HP
開発種別
課金AI SaaS
主要機能
16機能
  1. 01アカウント・認証会員登録 / ログイン

    自分の制作データを安全に保存し、続きから作業できます。

  2. 02契約・課金料金プラン / 継続課金

    プランを選んで契約し、SaaSとして継続利用できます。

  3. 03制作準備ヒアリング / 要件整理

    事業内容や強みを入力すると、制作条件として整理されます。

  4. 04サイト設計ページ構成 / 導線設計

    必要なページと問い合わせまでの流れを自動で組み立てます。

  5. 05コンテンツ文章生成 / キーワード調査

    事業に合わせた原稿と、検索を意識したテーマを作成します。

  6. 06ビジュアル画像生成 / 画像取得

    各セクションに必要な画像を用意し、ページへ配置します。

  7. 07実装・公開コード生成 / サーバー公開

    PC・スマホ対応のコードを生成し、ドメインへ公開します。

  8. 08運用・改善対話修正 / HP分析

    公開後も指示だけで更新し、分析結果を次の改善につなげます。

実装範囲

8領域主要16機能

AIへ制作を指示し、生成したホームページを確認・修正するPon Pon HPのメイン画面
制作・確認・修正AIへの指示と生成結果の確認を同じ画面で進める
ページ数、ページの使途、サービス名、概要、トーンを決めるPon Pon HPのセットアップ画面
制作条件のセットアップページ数・目的・サービス内容・トーンを整理
BASIC、STANDARD、ADVANCEの料金プランを選択するPon Pon HPの決済画面
料金プラン・決済プラン選択から継続課金まで
公開枠、公開URL、独自ドメインを設定してページを公開するPon Pon HPの画面
ページ公開公開URLと独自ドメインを設定

03 / 開発期間

この機能群を、8か月で課金SaaSとしてリリース

試作品を作って終わりではなく、要求整理から保守運用まで一貫して担当。顧客が契約し、料金を支払い、継続利用できるサービスとして公開しました。

開発期間8か月

要求整理・要件定義・実装・テスト・リリース・保守運用まで

  1. 01要求整理業務・課題
  2. 02要件定義機能・品質
  3. 03実装AI・課金・画面
  4. 04テスト実データ検証
  5. 05リリース本番公開
  6. 06保守運用監視・改善

04 / セキュリティ

サービス運営を前提に、守る場所まで設計

AI機能だけでなく、顧客アカウント、制作データ、決済、外部サービスとの接続、公開操作まで含めてセキュリティを設計しました。

アカウント制作データ決済API接続公開サイト

01 / 認証

アカウントごとにデータを分離

ログインした利用者が、自分の制作データへアクセスすることを前提に設計しています。

02 / 決済

制作機能と決済処理を分離

契約・課金は専用の決済基盤と連携し、AIによる制作機能とは役割を分けています。

03 / 秘密情報

APIキーを画面へ露出させない

AIやサーバーへの接続情報は、利用者のブラウザから見えないサーバー側で管理します。

04 / 公開

制作中と公開中を分けて管理

公開先、URL、独自ドメインを確認し、明示的な公開操作を経て本番へ反映する設計です。

リリース後も対象セキュリティは納品時だけの確認事項ではありません。保守運用の中で、利用サービスや構成の変化に合わせて見直します。

05 / 安心して任せられる理由

進捗だけでなく、判断と課題まで誠実に共有します

AI開発は、動かして初めて分かることがあります。曖昧な「できます」ではなく、確認できたことと未確認のことを分けてお伝えします。

毎回見えるもの

依頼側が現在地を把握できる

  • いま完了している工程
  • 決まったことと判断理由
  • 未解決の課題とリスク
  • 次回までに確認すること

誠実に伝えること

できないことも先に共有する

  • AIが誤る可能性と確認方法
  • データ不足や外部サービスの制約
  • 追加要件による期間・費用への影響
  • 人が承認すべき工程