線画から高精度なUIモックアップを生成!ComfyUIでFLUX.1とControlNetを組み合わせる実践ワークフロー
手書きのラフスケッチやシンプルな線画から、一瞬でクオリティの高いWebサイトやモバイルアプリのUIモックアップを作成できたら──。それをローカル環境かつオープンなモデルで実現するのが、画像生成モデル「FLUX.1」と「ControlNet」の組み合わせである。
今回は、ノードベースの画像生成ツールである ComfyUI を使い、手書きのUIワイヤーフレーム線画をベースにして、崩れのない綺麗なUIデザインイメージを生成する実践的なワークフローを紹介する。
なぜFLUX.1とControlNetなのか?
従来のStable Diffusion 1.5やXLでもUI生成は可能だったが、UI内の文字表現が崩れて文字化けしたり、画面レイアウトの細かいパーツが歪んでしまったりする問題があった。
強力なテキスト追従性を持つ FLUX.1 を使用することで、生成されるUIのボタン、ラベル、テキスト表示の品質が劇的に向上した。さらに、入力画像の輪郭をキープする「ControlNet (Canny / HED等)」や「Union ControlNet」と組み合わせることで、手書きしたスケッチのレイアウト(ヘッダーの位置、カラムの幅、ボタンの配置)を正確に保持しながら、細部のマテリアルやアセットを描き分けることができる。
ワークフローの構築手順
今回の構成には、軽量で生成速度の速い FLUX.1-schnell(または品質重視の FLUX.1-dev)と、FLUX用のControlNetモデル(X-Labs製またはInstantX製)を使用する。
1. 必要なモデルの準備
- チェックポイント:
flux1-schnell.safetensorsをmodels/checkpoints/に配置する。 - ControlNetモデル:
flux-controlnet-canny.safetensors(または対応するUnionモデル)をmodels/controlnet/に保存する。
2. ノードの配置と接続
ComfyUIを開き、以下のノードを追加して接続する。
- Load Image (画像の読み込み): 手書きのUIスケッチ(白地に黒の線画)をロードする。
- Canny / Edge Detector (エッジ検出器): 読み込んだスケッチから輪郭線を正確に抽出する。スケッチがすでに綺麗な線画であれば、このステップをスキップして直接ControlNetに入力してもよい。
- Apply ControlNet (ControlNetの適用):
Load ControlNetでcannyモデルを読み込み、Applyノードでプロンプトのコンディショニングと接続する。 - KSampler (サンプラー): Schnellを使う場合はステップ数を4〜8、Devを使う場合は20〜30に設定する。CFGは1.0〜3.5の低めに設定するのがFLUXのコツである。
高精度なUIを作るためのプロンプトのコツ
ControlNetで構造を縛っているため、プロンプトでは「デザインのテーマ」や「スタイル」を細かく指定することに集中できる。
- 効果的なプロンプトの例:
“A clean and modern dashboard UI, dark mode, high-fidelity mock-up, SaaS website design, sleek gradients, flat design, vector icons, sharp details, 8k resolution, professionally designed on Figma”
- ネガティブプロンプト (Dev使用時のみ):
“blurry, messy, hand-drawn texture, low quality, distorted text, ugly colors”
ControlNetの強度(Strength)は 0.7〜0.9 の範囲で調整すると、スケッチのレイアウトを守りつつ、AIがバランスの良い装飾やグラフィック要素を自然に補完してくれる。
お役立ち情報
- 💻 GitHub: ComfyUI 公式リポジトリ (英語)
- ComfyUIのインストール方法、基本的な使い方、ノードのカスタムに関する公式ドキュメント。
- 📄 Hugging Face: XLabs-AI FLUX ControlNet モデル(英語)
- FLUX.1向けに開発されたCanny、HED、DepthなどのControlNetモデルファイル群。
- 📄 Zenn: ComfyUIで始めるFLUX.1画像生成入門(日本語)
- FLUXモデルの種類やComfyUIでの初期環境構築の手順を初心者向けに丁寧に解説した記事。
出典: