こんにちは。
株式会社スプールのディレクター 高橋です。

本記事では、Googleの Gemini 2.5 Flash（Nano banana）を活用し、ユーザーの自撮り画像と商品画像から着用画像を生成するシステムを、弊社のカスタムオーダーシステム（WordPress）に実装する手順を検討しました。

セキュリティとプライバシーを最優先し、生成された画像データをサーバーに永続的に保存しないフローで構築します。

生成イメージ

ステップ 1: 開発環境の準備と認証設定

この機能を実装するために、Google Cloud Platform（GCP）とWordPress側の準備を行います。

1. Google Cloud プロジェクトのセットアップ
   • GCPアカウントでプロジェクトを設定し、Vertex AI API を有効にします。
2. APIキー / サービスアカウントの取得
   • WordPressから Vertex AI に安全にアクセスするための認証情報を取得します。
3. WordPress カスタムプラグインの準備
   • AI連携のバックエンドロジック（PHP）とフロントエンドのインタラクション（JavaScript/Ajax）を実装するためのカスタムプラグインを作成します。

ステップ 2: WordPressでのフロントエンド（UI）構築

ユーザーが操作するインターフェースを構築し、Base64での描画に備えます。

1. 画像アップロードフォームの作成
   • ユーザーが以下の2種類の画像をアップロードするフォームを実装します。
     • 入力 1: ユーザーの自撮り画像
     • 入力 2: 商品画像（シャツ、パンツ、ストッキングなど）
   • フォーム送信時には、画像をサーバーにアップロードするのではなく、JavaScriptで画像を読み込み、Base64エンコードしてからAjaxで送信する準備をします。
2. 結果表示エリアの確保
   • 生成された画像を表示するための空の タグまたは エリアをHTML内に準備しておきます。

---

ステップ 3: バックエンドロジックとプロンプトエンジニアリング

プラグインのPHPコード内で、AIモデルに渡すためのデータと指示（プロンプト）を準備します。

1. 画像データの受け取りと処理
   • フロントエンドからAjaxで送信されたBase64エンコードされた画像データとプロンプトを、PHPで受け取ります。
2. プロンプトの作成（AIへの指示書）
   • Gemini 2.5 Flashに、高い品質で着用画像を生成させるためのテキストプロンプトを作成します。
   • 例: 「提供された商品（シャツ、パンツ、ストッキング）を、提供された人物の画像に着用させてください。自然なライティングと影を付けてください。人物の体型にフィットするように調整してください。背景はそのまま残してください。」
3. APIリクエストの構成
   • 以下の要素を含むAPIリクエストペイロードを作成し、Vertex AIへ送信します。
     • モデル指定: gemini-2.5-flash
     • 入力データ: ユーザーの自撮り画像（Base64）、商品画像（Base64）、プロンプト（テキスト）。

ステップ 4: Vertex AI APIとの連携と画像生成

バックエンドからVertex AIにリクエストを送信し、生成された画像データをBase64形式で受け取ります。

1. APIリクエストの送信
   • ステップ3で構成したリクエストを、GCPの認証情報を用いてVertex AI APIエンドポイントへ送信します。
2. AIモデルによる処理
   • Gemini 2.5 Flash が、提供された複数の画像とプロンプトに基づき、リアルな着用画像を生成します。
3. レスポンスの受信
   • Vertex AIから、生成された**着用画像データ（Base64エンコード）**をレスポンスとして受け取ります。

ステップ 5: 結果の処理と表示（サーバー非保存フロー）

サーバーに画像を保存せず、高速にブラウザへ表示するための処理を実行します。

処理フェーズ	詳細な手順	セキュリティ/速度のメリット
バックエンド (PHP)	APIから受け取った Base64 画像データを、ファイルとして保存せずに、そのまま Ajax レスポンスのJSONデータに含めてフロントエンドに返します。	サーバーのストレージを消費せず、画像がサーバーに残らないためプライバシーを保護。
フロントエンド (JavaScript)	Ajax レスポンスから Base64 文字列を受け取ります。	ネットワーク通信が1往復で済むため、表示までの速度が速い。
描画処理	JavaScriptで以下の形式の data URI を生成し、ステップ2で準備した タグの src 属性に直接セットします。 src="data:image/jpeg;base64, [Base64文字列]"	サーバーへの追加リクエストが不要となり、即座に画像がブラウザに描画されます。

全体処理フローまとめ（サーバー非保存）

ステップ	担当システム	処理内容	セキュリティ観点
1. UI入力	フロントエンド	ユーザーが画像を選択し、Base64に変換してAjaxで送信。	画像はクライアント側で処理され、一時的にメモリに格納される。
2. API連携	バックエンド	画像（Base64）とプロンプトをGeminiに送信し、処理を依頼。	生成された画像もサーバーに保存しない。
3. 結果返却	バックエンド フロントエンド	APIから得た Base64 画像データを、そのまま Ajax レスポンスでブラウザに返す。	サーバー側の永続的なファイル作成・保存を完全に回避。
4. 画像描画	フロントエンド	受け取った Base64 データを data: URI として タグに直接セットし、表示。	クライアント側の処理で完結し、高速に描画。

まとめ

本機能は、Gemini 2.5 Flash の高精度な画像合成能力を活かしつつ、「サーバーに画像を保存しない」というセキュリティ要件と「Base64による一往復通信」という高速化手法を組み合わせました。

ユーザーに安心して、ストレスなくAI着用画像を体験してもらうことが可能になります。

---

弊社ではカスタムオーダー商品に特化したシステムを開発しています。
お気軽にお問い合わせください。

▼ユニフォームに特化したカスタムオーダーシミュレーター
カスタムオーダーシミュレーター「MyCOS（マイコス）」

▼アイテムやグッズに特化したカスタムオーダーシミュレーター
カスタムオーダーシミュレーター「MyCOS GOODS（マイコスグッズ）」

▼3Dモデルを利用したカスタムオーダーシミュレーター
3Dシミュレーターシステム「MyCOS 3D（マイコススリーディー）」