2025.06.12
生成AIを用いたUIやプロトタイプの作成ツールは世の中にたくさんありますが、
素早く簡単に質の高い結果を得ることはできるのでしょうか？
今回は色々試してみて個人的に素晴らしいと思ったツールと
自分のやり方を紹介させていただきます。
「UX Pilot」の紹介
こんにちは！ mctのドラです。
今回色々試した中からみなさんにご紹介したいのがUX PilotというアプリのUI生成のAIツールです。
UX Pilotの特徴としては下記の４点が挙げられます。
1. プロンプト補完機能：ユーザーが入力したプロンプトを自動的に補完し、曖昧な指示でも具体的なデザインを得ることが可能です。
2. 自動ユーザーフロー生成：アプリやウェブサイト全体のユーザーフローを自動的に生成し、複数の画面を一括で設計できます。
3. Figmaとの連携：UX PilotはFigmaとの連携が可能で、生成されたデザインをFigma上で直接編集・共有できます。
4. デザインレビュー機能：生成されたデザインに対して自動的にレビューを行い、改善点や提案を提示し、デザインの品質向上が期待できます。
詳細は、公式サイトで確認してみてください！
実際にやってみて使えると思った点
曖昧な指示や複数な画面を一括で生成するのも可能ですが、よくあるシンプルなUIしか出てこないので活用は厳しいという印象を受けました。ただし、詳細なプロンプトを入力すると指示の通りに生成してくれるので、他の似たようなツールよりも自然言語への理解度が高く使えるという感覚がありました。AIによくあるデメリットとして「統一したスタイルを生成するのが難しい」という点がありますが、UX Pilotならあるスタイルを参考に統一感を持った生成が可能です。
また、Figmaとの連携も可能で、足りない部分はすぐにFigmaで修正可能なので、実用性が高いと思います。
私が試した手順をご紹介します
STEP１：まず、ネット検索などで良い参考事例を探す
（自分がよく使うサイト：Pinterest）
例えば、IOT製品のUIを探したいなら、"smart home ui design mobile app"というキーワードを入れると参考画面が出てきます。その中から自分の理想に近い参考例を見つけてダウンロードします。
Pinterestの検索画面
STEP２：次に、Chat GPTにプロンプトを書いてもらう
ダウンロードした画像（１ページのみ）をChat GPTにアップロードし、プロンプトを書いてもらい、それをベースにして自分の作りたいものに合わせてプロンプトを修正していきました。まず日本語で書いてもらって、修正してから英語翻訳をお願いしても問題ありません。
（注意：複数のページを一度に生成するより、１ページの詳細を書いてもらった方がいい結果が出ます。）
Chat GPTが実際に生成した１ページのプロンプト
STEP３：プロンプトをFigmaのUX PilotプラグインにコピペしてUIを生成
「Figmaで新しいページを開く→Plugins→Manage plugins→UX Pilotを検索→プロンプトをコピー&ペースト→デザインを生成」という順番で１ページつづを生成していきました。
(注意：UX Pilotは１ページ生成には６コインがかかります。無料版だと９０コインまでお試し可能でした）
%E6%8B%B7%E8%B2%9D.png?width=650&height=541&name=Black%20and%20White%20%20Modern%20Clean%20Minimalism%20Marketing%20Presentation%20%20(2)%E6%8B%B7%E8%B2%9D.png)
.png?width=650&height=499&name=Black%20and%20White%20%20Modern%20Clean%20Minimalism%20Marketing%20Presentation%20%20(2).png)
生成した３ページの結果
STEP４：Figma上でデザインを微調整
Figma上でブランド色の使用、スタイルの統一、使いやすさ、読みやすさのなど観点で配置を調整しました。
（Figmaが苦手な方なら、UX Pilotでプロンプトを部分的に修正して調整することも可能ですが、イメージに近づけるのに時間がかかります）
（Figmaが苦手な方なら、UX Pilotでプロンプトを部分的に修正して調整することも可能ですが、イメージに近づけるのに時間がかかります）
%E6%8B%B7%E8%B2%9D2.png?width=650&height=476&name=Black%20and%20White%20%20Modern%20Clean%20Minimalism%20Marketing%20Presentation%20%20(2)%E6%8B%B7%E8%B2%9D2.png)
微調整した結果
STEP５：日本語に翻訳
日本語で作成したかったのでFigmaのplugin “translator” (or FigmaのAI翻訳）を使って翻訳し、Figma上で手動編集して調整していきました。調整した箇所は、変な翻訳の訂正と文字のサイズ、字数です。
.png?width=650&height=423&name=Black%20and%20White%20%20Modern%20Clean%20Minimalism%20Marketing%20Presentation%20%20(3).png)
完成
ワイヤーフレームを生成する場合
方法１：同じ手順でワイヤーフレームを生成する
UX Pilotでは、WireframesとHifi Designsの２択生成が可能です。上記の手順でWireframesを選択したらワイヤーフレームの生成が可能になります。
.png?width=650&height=489&name=Black%20and%20White%20%20Modern%20Clean%20Minimalism%20Marketing%20Presentation%20%20(4).png)
同じ手順で生成した健康アプリのワイヤーフレームとUIデザイン
（まだFigmaで編集してないものですが、ある程度のクオリティーができています）
方法２：既に作成済みのUIを、Figmaのプラグインでワイヤーフレームに転換
プラグインWireframerかWireBoxを検索し、画面を選択したらワイヤーフレームに転換してくれます。
情報が多い場合、手作業でいらない情報を削除、微調整します。
%E6%8B%B7%E8%B2%9D.png?width=650&height=354&name=Black%20and%20White%20%20Modern%20Clean%20Minimalism%20Marketing%20Presentation%20%20(4)%E6%8B%B7%E8%B2%9D.png)
結論
現時点のAIツールでは、まだUIデザイナーの仕事をまるごと置き換えるのは難しいですが、スピード重視のプロジェクトや部分的な効率化には使えるという印象です。特に「UIを作り込む前にニーズがあるか仮説検証してみたい」といった素早い検証が求められるプロジェクトとは相性がよく、AIを使うことでさらなるスピードアップや、アイデアの幅に広がりを出すことができます。
今回ご紹介したUX Pilot以外にも、AIツールはどんどん進化を続けているので、これからもいろいろ試して最新の技術をうまく取り入れ、お客様やユーザーにより素晴らしい体験を届けていけたらいいなと思っています。
【資料ダウンロード】mctのUIUXデザイン・ソリューション
弊社mctのUIUXデザインのサービスをまとめた資料を以下よりダウンロードいただけます。またUIUXデザインにまつわる案件のご相談やお問い合わせなどがありましたら、ぜひお気軽にご連絡ください。
＼ mctのUI/UXサービスメニュー 資料ダウンロードはこちら ／
