生成AIをWebアプリに組み込む設計実践 ― 非同期処理・生成履歴・再実行UXの考え方 - TECH PLAY

TECH PLAY

2027/01/01(金)14:00 〜 16:00
Bookmark Icon

生成AIをWebアプリに組み込む設計実践 ― 非同期処理・生成履歴・再実行UXの考え方

オンライン

参加枠

0/定員19
オンライン参加枠先着順無料
0定員19

基本情報

日時
開催形式
オンライン
主催
AI Ongaku

イベント内容

文章、画像、動画、音楽などを生成するAIサービスでは、一般的なWebアプリとは異なる設計上の課題が発生します。
ユーザーがボタンを押しても、結果がすぐには返ってこない。
同じ条件でも毎回違う結果になる。
生成に失敗することがある。
一度作った結果を後から見返したい。
少しだけ条件を変えて、もう一度生成したい。
こうした特徴をそのまま放置すると、AI機能自体が優秀でも、Webサービスとしては使いにくくなります。
今回のイベントでは、生成AIを実際のWebアプリとして提供するときに必要になる「非同期処理」「状態管理」「再生成」「履歴」「プレビュー」「ダウンロード」などの設計を、実践的な観点から整理します。
取り上げる内容

  1. なぜ生成AIでは同期処理だけでは足りないのか

通常のフォーム送信では、数百ミリ秒から数秒で処理が終わることを前提にできます。
一方、生成AIでは数十秒以上かかる処理も珍しくありません。
そのため、
リクエスト受付
生成ジョブ作成
バックグラウンド処理
進行状態の保存
結果取得
という流れを分離して考える必要があります。
単純にHTTPリクエストを待たせ続ける設計との違いも整理します。

  1. 「生成中」をどう見せるか

生成AIサービスでは、処理時間そのものをゼロにできない場合があります。
重要になるのは、その時間をユーザーにどう伝えるかです。
「生成中」
「処理待ち」
「完了」
「失敗」
といった状態を明確にすることで、ユーザーは現在何が起きているのかを理解できます。
ポーリング、SSE、WebSocketなどを使う場合の考え方についても触れます。

  1. 生成結果を単なるファイルとして扱わない

AIが生成した結果には、元になった入力条件があります。
たとえば、
プロンプト
ジャンル
用途
生成日時
生成バージョン
モデル設定
などです。
結果だけ保存すると、後から「どの条件で作ったのか」が分からなくなります。
そのため、生成物と生成条件をセットで管理する設計が重要になります。

  1. 再生成とバージョン管理

生成AIでは、最初の結果が必ず理想通りになるとは限りません。
そこで重要になるのが、「最初から全部入力し直す」のではなく、現在の条件を残したまま再生成できる仕組みです。
今回のイベントでは、
元の条件を保持する
条件の一部だけ変更する
新しい生成結果を別バージョンとして保存する
過去の結果と比較する
といったUXについて考えます。

  1. 生成失敗を前提にした設計

外部AI APIやGPU処理を利用するサービスでは、タイムアウト、APIエラー、処理失敗などが発生する可能性があります。
そのため、
再試行
エラー状態の保存
二重実行防止
課金処理との整合性
なども最初から設計しておく必要があります。
特に、有料サービスでは「生成に失敗したのに利用回数だけ消費された」といった状態を避ける必要があります。

  1. AI音楽生成サービスを例にした実装フロー

後半では、生成AIを使ったWebアプリの具体例として、日本語向けAI音楽生成サービス「AI Ongaku」の生成フローを取り上げます。

AI Ongakuでは、ユーザーが曲の用途、雰囲気、ジャンル、歌詞などの条件を入力し、その内容をもとにAIが楽曲を生成します。
このようなサービスでは、単に「AIに曲を作らせる」だけではWebアプリとして成立しません。
ユーザーから生成条件を受け取る入力画面、生成ジョブの管理、処理中の状態表示、完成した楽曲の試聴、条件を変更した再生成、過去の生成結果の管理といった一連の体験が必要になります。
当日は、この実際の利用フローを題材にしながら、
生成開始前に何を保存するか
生成処理中にどの状態を持つか
完成後にどのデータを残すか
再生成をどのように設計するか
ユーザーが過去の生成物をどのように管理するか
というWebアプリ側の設計を分解していきます。
音楽生成は一例ですが、考え方そのものは画像生成、動画生成、文章生成、音声生成など多くの生成AIサービスに応用できます。

  1. 小規模チームでも複雑にしすぎない構成

生成AIサービスというと、大規模なリアルタイム基盤が必要に見えることがあります。
しかし、すべてのサービスで複雑な構成が必要なわけではありません。
ユーザー数、平均生成時間、同時実行数、失敗時の再実行要件などをもとに、
どこまで非同期化するか
どこまでリアルタイム通知が必要か
どの情報をDBに保存するか
どこから先を外部サービスへ任せるか
を判断する考え方についても紹介します。
対象となる方
・生成AIを使ったWebサービスを開発している方
・AI APIを組み込んだSaaSを作っている方
・個人開発でAIサービスを作りたい方
・バックグラウンドジョブや非同期処理の設計に興味がある方
・生成履歴や再生成UXの作り方に悩んでいる方
・AI機能を「デモ」ではなく継続して使えるプロダクトにしたい方
このイベントでは、特定のAIモデルを比較することよりも、生成AIをWebサービスとして安定して提供するためのアプリケーション設計に重点を置きます。
生成AI機能を一度実装したものの、「待ち時間をどう扱えばいいか」「再生成をどう見せればいいか」「履歴をどう設計すればいいか」といった課題を感じている方にも参加しやすい内容です。