
生成AIをWebアプリに組み込む設計実践 ― 非同期処理・生成履歴・再実行UXの考え方
参加枠
| 参加枠 | 申込形式 | 参加費 | 参加者 |
|---|---|---|---|
オンライン参加枠 | 先着順 | 無料 | 0人 / 定員19人 |
基本情報
- 日時
- 〜
- 開催形式
- オンライン
イベント内容
文章、画像、動画、音楽などを生成するAIサービスでは、一般的なWebアプリとは異なる設計上の課題が発生します。
ユーザーがボタンを押しても、結果がすぐには返ってこない。
同じ条件でも毎回違う結果になる。
生成に失敗することがある。
一度作った結果を後から見返したい。
少しだけ条件を変えて、もう一度生成したい。
こうした特徴をそのまま放置すると、AI機能自体が優秀でも、Webサービスとしては使いにくくなります。
今回のイベントでは、生成AIを実際のWebアプリとして提供するときに必要になる「非同期処理」「状態管理」「再生成」「履歴」「プレビュー」「ダウンロード」などの設計を、実践的な観点から整理します。
取り上げる内容
- なぜ生成AIでは同期処理だけでは足りないのか
通常のフォーム送信では、数百ミリ秒から数秒で処理が終わることを前提にできます。
一方、生成AIでは数十秒以上かかる処理も珍しくありません。
そのため、
リクエスト受付
生成ジョブ作成
バックグラウンド処理
進行状態の保存
結果取得
という流れを分離して考える必要があります。
単純にHTTPリクエストを待たせ続ける設計との違いも整理します。
- 「生成中」をどう見せるか
生成AIサービスでは、処理時間そのものをゼロにできない場合があります。
重要になるのは、その時間をユーザーにどう伝えるかです。
「生成中」
「処理待ち」
「完了」
「失敗」
といった状態を明確にすることで、ユーザーは現在何が起きているのかを理解できます。
ポーリング、SSE、WebSocketなどを使う場合の考え方についても触れます。
- 生成結果を単なるファイルとして扱わない
AIが生成した結果には、元になった入力条件があります。
たとえば、
プロンプト
ジャンル
用途
生成日時
生成バージョン
モデル設定
などです。
結果だけ保存すると、後から「どの条件で作ったのか」が分からなくなります。
そのため、生成物と生成条件をセットで管理する設計が重要になります。
- 再生成とバージョン管理
生成AIでは、最初の結果が必ず理想通りになるとは限りません。
そこで重要になるのが、「最初から全部入力し直す」のではなく、現在の条件を残したまま再生成できる仕組みです。
今回のイベントでは、
元の条件を保持する
条件の一部だけ変更する
新しい生成結果を別バージョンとして保存する
過去の結果と比較する
といったUXについて考えます。
- 生成失敗を前提にした設計
外部AI APIやGPU処理を利用するサービスでは、タイムアウト、APIエラー、処理失敗などが発生する可能性があります。
そのため、
再試行
エラー状態の保存
二重実行防止
課金処理との整合性
なども最初から設計しておく必要があります。
特に、有料サービスでは「生成に失敗したのに利用回数だけ消費された」といった状態を避ける必要があります。
- AI音楽生成サービスを例にした実装フロー
後半では、生成AIを使ったWebアプリの具体例として、日本語向けAI音楽生成サービス「AI Ongaku」の生成フローを取り上げます。
AI Ongakuでは、ユーザーが曲の用途、雰囲気、ジャンル、歌詞などの条件を入力し、その内容をもとにAIが楽曲を生成します。
このようなサービスでは、単に「AIに曲を作らせる」だけではWebアプリとして成立しません。
ユーザーから生成条件を受け取る入力画面、生成ジョブの管理、処理中の状態表示、完成した楽曲の試聴、条件を変更した再生成、過去の生成結果の管理といった一連の体験が必要になります。
当日は、この実際の利用フローを題材にしながら、
生成開始前に何を保存するか
生成処理中にどの状態を持つか
完成後にどのデータを残すか
再生成をどのように設計するか
ユーザーが過去の生成物をどのように管理するか
というWebアプリ側の設計を分解していきます。
音楽生成は一例ですが、考え方そのものは画像生成、動画生成、文章生成、音声生成など多くの生成AIサービスに応用できます。
- 小規模チームでも複雑にしすぎない構成
生成AIサービスというと、大規模なリアルタイム基盤が必要に見えることがあります。
しかし、すべてのサービスで複雑な構成が必要なわけではありません。
ユーザー数、平均生成時間、同時実行数、失敗時の再実行要件などをもとに、
どこまで非同期化するか
どこまでリアルタイム通知が必要か
どの情報をDBに保存するか
どこから先を外部サービスへ任せるか
を判断する考え方についても紹介します。
対象となる方
・生成AIを使ったWebサービスを開発している方
・AI APIを組み込んだSaaSを作っている方
・個人開発でAIサービスを作りたい方
・バックグラウンドジョブや非同期処理の設計に興味がある方
・生成履歴や再生成UXの作り方に悩んでいる方
・AI機能を「デモ」ではなく継続して使えるプロダクトにしたい方
このイベントでは、特定のAIモデルを比較することよりも、生成AIをWebサービスとして安定して提供するためのアプリケーション設計に重点を置きます。
生成AI機能を一度実装したものの、「待ち時間をどう扱えばいいか」「再生成をどう見せればいいか」「履歴をどう設計すればいいか」といった課題を感じている方にも参加しやすい内容です。
お問い合わせ
開催グループ

関連するイベント

【9月東京開催】ハンズオンセミナー:エクセル1行から始める「ベテランのつぶやきAI」構築のための入門講座(生成AI×技術継承、現場主導のローカルLLM活用)
2026/09/29(火) 開催
ゼロからはじめるClaude Code入門講座(対面・無料)
2026/10/17(土) 開催
AI-DLC×Claude Skillで実現する「エンジニアの役割越境」
2026/09/16(水) 開催
AIが書いたコードは、誰が確かめるのか ― Claude CodeとCodexに互いをレビューさせたら、99件出た
2026/10/03(土) 開催
