こんにちは。個人でWebサービスを開発・運営しているエンジニアです。
先月、AI画像生成を使った二次元アイコン作成ツールをリリースしました。その後、ユーザーの方から「プロンプトに何を書けばよいのか分からない」という声をいただいたことをきっかけに、自由入力中心だった画面を、スタイルを選ぶだけで使えるUIへ全面的にリニューアルしました。
本記事では、Stable Diffusion XL（SDXL）を使って二次元アイコンを生成するWebアプリの実装方法を、モデル選定、プロンプト設計、パラメータ調整、フロントエンド実装まで順に解説します。
実際に開発・運用する中でつまずいたポイントも、コードとあわせて紹介します。
完成イメージ：
ユーザーが「地雷系」「量産型」「VTuber風」などのスタイルを選択すると、4枚の二次元アイコンが生成されるアプリです。
ユーザー自身がプロンプトを書く必要はなく、好みのスタイルを選ぶだけでアイコンを作成できます。
6種類のスタイルから好みのデザインを選択する画面
2. 技術スタックの選定理由・修正版
今回使用した主な技術は以下のとおりです。
- Next.js 14（App Router）
- React
- Tailwind CSS
- Replicate API
- Stable Diffusion XL
- Vercel
Replicateを採用した理由は、モデルごとに入出力の仕様が整理されており、使用するモデルのバージョンも固定できるためです。Next.jsのRoute Handlerから呼び出しやすく、自分でGPUインスタンスや推論サーバーを管理する必要もありません。
当初はStability AIの公式APIやfal.aiも検討しましたが、利用したいモデルをバージョン単位で固定できることと、実装・運用のしやすさを重視し、今回はReplicateを採用しました。
個人開発では、生成品質だけでなく、モデルの更新管理、障害時の切り分け、APIの扱いやすさも重要になります。その点で、Replicateは短期間でプロトタイプを公開する今回の用途に合っていました。
3. Route Handlerコード後の解説・修正版
ここで重要なポイントは、次の3つです。
-
num_outputs: 4
1回のリクエストで4枚を生成し、ユーザーが気に入った画像を選べるようにしています。1枚だけでは、結果が好みに合わなかった場合に再生成が必要になり、「もう一度待つ」というストレスが大きくなります。 -
guidance_scale: 7
guidance scaleは、生成結果をプロンプトへどの程度強く従わせるかを調整する値です。今回使用したモデルとプロンプトでは、5〜9の範囲を比較したところ、値が低いとスタイル指定が弱くなり、高すぎると輪郭や色が不自然になりやすい傾向がありました。最終的に、7前後が最も安定しました。 -
num_inference_steps: 30
推論ステップ数を増やすと品質が向上する場合がありますが、生成時間とコストも増加します。25、30、35ステップを比較したところ、今回の二次元アイコンでは30ステップ以降の品質差が小さく、待ち時間だけが長くなるケースが多かったため、30を基準にしました。
これらの値は、すべてのSDXLモデルに共通する最適値ではありません。使用するモデル、プロンプト、画像サイズによって結果は変わるため、実際の生成結果を比較しながら調整する必要があります。
4. 生成結果のスクリーンショット挿入位置
フロントエンド実装のコードブロックと、その解説文の間に、次の画像を配置します。
選択したスタイルをもとに生成された4枚の候補。ユーザーは気に入った画像を選択できます。
この画像を入れてから、以下の文章へ続けます。
UIは意図的にシンプルにしています。
自由入力のプロンプト欄を最初から表示すると、AI画像生成に慣れていないユーザーは「何を書けばよいのか分からない」と感じやすくなります。
そこで、最初の操作をスタイル選択だけに限定しました。
自由度は下がりますが、ユーザーが迷いにくく、画像生成まで進みやすいUIになります。
5. 参考リンク・修正版
参考リンク
タグ： Next.js StableDiffusion 画像生成 個人開発 AI