生成AI着せ替え体験 2025北陸編の振り返り＠JAWS FESTA 2025 in 金沢

はじめに

2025年10月11日に金沢で開催されたJAWS FESTA 2025 北陸のお祭りトラックにて、Amazon Nova CanvasのVirtual Try-on機能を使ったバーチャル試着コンテンツ「生成AI着せ替え体験 2025北陸編」を公開しました。

JAWS FESTAにおけるお祭りトラックは「"誰もが"楽しく学んで体験して感動したことを共有できる場」として、様々な設置型のコンテンツが公開され、セッションだけではないイベントの楽しみを提供しています。

今回、私は「生成AI着せ替え体験 2025北陸編」ということで、カメラで撮影した参加者の写真と、加賀友禅をイメージした着物やイベントオリジナルTシャツの画像を生成AIの機能で合成（生成）し、参加者の方にデジタルお土産として持って帰っていただくというお楽しみコンテンツを開発しました。

この記事では、アプリの概要やアーキテクチャ、実装した機能について解説します。

アプリの概要

このアプリは、美と伝統の地である金沢開催という点を活かしたうえで、最新の生成AIを使った楽しいコンテンツを作りたいということで考えました。
遊びに来てくれた参加者の方の写真を撮り、加賀友禅をイメージした着物やイベントらしいデザインのTシャツと画像を生成AIの機能で合成（生成）します。
更に、できあがった画像を、参加者の方にイベントのお土産として持ち帰ってもらえるダウンロード機能を付けました。

UIと基本機能

UIはこのようになっています。

私はプログラムをほとんど書くことができないため、このアプリのコードはすべてAmazon Q Developer for CLI(以下Q CLI)を使って作られました。

AIとコーディングをするうえでの苦労は様々にありますが、ひとつは凝ったUIにしたい場合の要望を伝える難しさだと思っています。
普段使いのアプリならまだしも、今回のアプリはイベントに展示するお楽しみアプリです。
見た目も楽し気で、華やかで、ワクワクするものでなくてはなりません。
しかし、それをQ CLIにうまく伝えるのは至難の業でした。テーマである、「和風」「華やか」のようなざっくりしたイメージを伝えてたたき台を作ってもらい、そこからは一つ一つ、違和感を言語化して、改修されたものを見て、また修正していく作業が続きました。
生成AIは、やはり具体的な指示は通りやすいので、いかに最初のたたき台で、理想に近いものを引き当てるかのガチャに、そのあとの修正にかかる工数が大きく左右されると思います。

今回、着替えられる対象として用意したのは以下の7種類の衣装です。

着物は、本物の画像を使うことはできないので、加賀友禅について私なりに調べ、生成AIとともに作った「加賀友禅風着物」です。TシャツはAWSのイベントでおなじみのユニコーンの柄と、イベントロゴのTシャツを準備しました。
イベントの参加者は男性のほうが多いとわかっていたので、なるべく男性でも選びやすい選択肢を作ろうと考えましたが、当日蓋を開けてみると、体験してくださった方は男女問わず、8割～9割の方が1,2,3の女性用着物のいずれかを選択しました
男性で1,2,3の着物を選ばれた方は、お祭りで羽目を外したいという部分が大きかったとは思いますが、実際に女性ものの着物を着ることは色んな意味で難しいということで、せっかくの機会と考えた方が何人もいらっしゃったのが印象的でした。

アプリで人物の写真と服を選んだら、いよいよ着せ替え画像が生成されます。
30秒～1分ほど待つと、画面に生成された画像が表示されます。

今回は、会場がグリーンバックのスタジオだったため、イベント特別仕様の背景とイベントロゴを用意して合成しました。
目指したのは観光地のご当地プリクラです（笑）

更に、画面下部のQRコードボタンを押すと、ファイルが一時保存されているS3の署名付きURLがQRコードとして表示され、参加者自身の端末から読み込むことで画像をダウンロードできます。

アーキテクチャ

このアプリは、カメラで撮影した参加者の写真と、加賀友禅をイメージした着物やイベントオリジナルTシャツの画像を生成AIの機能で合成（生成）し、参加者の方にデジタルお土産として持って帰っていただくというシンプルな機能のため、アーキテクチャもシンプルです。

私自身はインフラエンジニアで、フロントエンド側の構成についてはとんと知識がないのですが、AWS Amplifyを使うことで最低限の知識でもアプリを実行する環境を作ることができました。

見ていただくとわかると思いますが、CloudFrontでUIを提供し、あとはBedrockを酷使して画像を生成し、S3にファイルとして保存するというドシンプルな構成です。

処理の流れ

全体の処理の流れはこんな感じです。

【画面操作】

1. 人物写真をアップロード（外付けのカメラで撮影）

• アップロード前に自動リサイズ
• Base64エンコード前の圧縮処理
• Nova Canvasの推奨サイズ（1024x1024）に調整

2. 試着したい服の画像を選択

3. 「試着する」ボタンをクリック

【システム処理】

1. フロントエンドで画像をBase64エンコード

2. Lambda Function URLにPOSTリクエスト

const response = await fetch(LAMBDA_FUNCTION_URL, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    mode: 'virtual-try-on',
    personImage: personImageBase64,
    clothingImage: clothingImageBase64
  })
});

3. Bedrock Runtime APIでNova Canvasを呼び出し（背景削除）

{
  taskType: 'BACKGROUND_REMOVAL',
  backgroundRemovalParams: {
    image: personImageBase64
  },
  imageGenerationConfig: {
    quality: 'premium'
  }
}

4. Bedrock Runtime APIでNova Canvasを呼び出し（試着画像生成）

{
  taskType: 'VIRTUAL_TRY_ON',
  virtualTryOnParams: {
    personImage: personImageBase64,        // 人物写真（背景削除済み）
    garmentImage: clothingImageBase64,     // 服の画像
    backgroundImage: backgroundImageBase64, // イベント特別背景画像
    garmentClass: 'UPPER_BODY',            // 'UPPER_BODY'（Tシャツ）or 'FULL_BODY'（着物）
    mergeStyle: 'DETAILED',                // 柄やロゴの細部を優先
    maskExclusions: {
      preserveBodyPose: 'ON',              // 体のポーズを保持
      preserveHands: 'ON',                 // 手を保持
      preserveFace: 'ON'                   // 顔を保持
    }
  },
  imageGenerationConfig: {
    quality: 'premium',
    height: 1024,
    width: 1024
  }
}

garmentClassは服の種類に応じて生成範囲を変更（UPPER_BODY: Tシャツ、FULL_BODY: 着物）。

mergeStyle: 'DETAILED'で加賀友禅の複雑な草花模様やイベントロゴを鮮明に表現。maskExclusionsは何度もテストしている中でポーズや手が変わってしまうことが気になったので設定。

quality: 'premium'で最高品質を指定し、参加者の方の写真を使わせていただく以上、クオリティ重視にしました。

5. 試着画像をフロントエンドに返却

6. React Konvaでウォーターマークを追加

• ドラッグ&ドロップ、リサイズをするため、UI側から操作

【QRコード生成】

1. 「QRコード生成」ボタンをクリック

2. html2canvasでキャンバスをキャプチャ

• PNG形式で画像化

3. Lambda Function URLに完成画像をアップロード

• mode: 'upload-final'
• Base64エンコードした画像データ

4. S3バケットに画像を保存

• ファイル名: タイムスタンプ + UUID

5. 署名付きURL（30分有効）を生成

import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
import { GetObjectCommand } from '@aws-sdk/client-s3';

const command = new GetObjectCommand({
  Bucket: BUCKET_NAME,
  Key: fileName
});
const signedUrl = await getSignedUrl(s3Client, command, { expiresIn: 1800 });

6. QRコードを画面に表示

• qrcode.reactライブラリで生成
• URLをQRコード化

イベントでの反響

体験してくださった皆様からは好意的な感想をたくさん頂けました。

「イベントの記念になる」「着物を着た自分を見られて嬉しい」などの、そういう感想を抱いてもらえたら嬉しいなと思っていた感想をいただけたのは、自分が作ったものが目指したものになっていたことを実感できて嬉しかったですし、生成速度の速さや結果の自然さに驚いていらっしゃる方を見かけて、Amazon Nova Canvasのすごさを皆さんにも実感してもらえて嬉しかったです。

「"誰もが"楽しく学んで体験して感動したことを共有できる場」というお祭りトラックのポリシーが、伝わったのではないでしょうか。

終わりに

このアプリを公開することになってから、当日うまく動くだろうか、参加者の方に楽しんでもらえるか不安でしたが、蓋を開けてみると殆ど空きがないくらいたくさんの方に来ていただけました。
皆、思い思いに楽しそうに体験してくださって、それを見られたのが、今回のFESTAの思い出です。

私は長くインフラエンジニアをやっており、プログラムはほとんど書くことができません。
Vibe Codingに頼りきりのコーディングに疑問を呈されるようになった昨今ですが、生成AIがなければ、私がこのようにアプリを作って、たくさんの方に体験してもらうこともなかったでしょう。

改めて生成AIの良さ、すごさを感じながら、また新しい技術を取り入れて、自分のやりたいことを実現していきたいです。