AIでUIデザインを生成｜プロトタイプでの使いどころ

AIにUIデザイン（画面の見た目や操作の設計）を生成させる使い方が広がっています。この記事では、新規事業のプロトタイプ開発で、AI生成のUIデザインをどこに使い、どこを人が整えるのかを整理します。私たちが開発の現場で考えている「任せやすい部分」と「人が判断すべき部分」の分け方を、確かめられる形でまとめました。

AIによるUIデザイン生成で、できること・できないこと

何を作れるのか

AIによるUIデザイン生成とは、文章での指示や参考画像をもとに、画面の案を作らせる使い方です。ツールによって出力は異なりますが、おおまかには次のような段階があります。

• ワイヤーフレーム（画面の骨組みを示した簡単な設計図）の生成
• 配色・余白・文字の大きさを含む、見た目の案の生成
• ボタンや入力欄などの部品（コンポーネント）を組み合わせた画面の生成
• 画面を、実際にブラウザで動くコードとして出力するもの

どこまで出せるかはツールごとに違います。導入前に、自分たちの用途で試して確かめることが大切です。

得意なことと苦手なこと

得意なのは、短い時間で複数の案を出すことです。人が一から描くと一案つくるのにも手間がかかりますが、AIなら「検索画面を三つのパターンで」と頼むだけで比べる材料が手に入ります。一般的な画面（一覧、詳細、入力フォーム、ダッシュボードなど）は、世の中に似た例が多いため、それらしい形にまとまりやすい傾向があります。

苦手なのは、事業固有の文脈を読み取ることです。AIには、その事業の利用者が誰で、どんな場面で、何を最優先に操作したいのかが分かりません。指示に書かなければ、それらしく見えるだけの汎用的な画面になります。見た目が整っていることと、事業に合っていることは別の話です。

この違いが、プロトタイプ開発での使い分けの出発点になります。

プロトタイプ開発での使いどころ

プロトタイプとは、構想を実際に触れる形にした試作品のことです。モックアップやMVPとの違いは、プロトタイプとモックアップ・MVPの違いで整理しています。ここでは、プロトタイプの画面づくりでAIが役に立つ場面を四つ挙げます。

1. 構想を画面にして、議論の入口をつくる

新規事業の初期は、頭の中のイメージが人によって違います。文章の企画書だけでは、「何ができるのか」が伝わりにくいものです。AIで画面案を素早くつくれば、「こういう画面のことですか」と見せながら話せます。完成度は低くても構いません。目的は、認識のズレを早い段階で表に出すことです。

実物や画面を見ながらすり合わせると、言葉だけの要件定義で起きやすい認識違いを減らせます。この考え方はシステム開発の認識のズレを防ぐ、実物を見ながらのすり合わせでも触れています。

2. 複数案の比較

画面の構成は、決める前に比べたほうがよい場面が多くあります。たとえば予約の流れなら、「日付を先に選ぶ」案と「メニューを先に選ぶ」案では、利用者の迷い方が変わります。AIで両方の案を出せば、どちらが事業の狙いに合うかを、手を動かす前に検討できます。

3. 画面一覧と遷移の洗い出し

プロトタイプに必要な画面は何枚か。どの画面からどの画面へ進むのか。こうした全体像の整理にも、AIは使えます。事業の流れを文章で渡し、必要な画面の候補を挙げさせると、抜けている画面に気づくきっかけになります。ただし、挙がった候補が正しいとは限りません。最後は事業を知る人が確認します。

4. ダミーの文言やデータを入れた見た目づくり

空の枠だけの画面は、実際の使い心地が分かりません。それらしい商品名、料金表示の枠、利用者の名前などを入れると、画面の密度や文字の収まりが確かめやすくなります。ダミーデータの用意の考え方は、プロトタイプのダミーデータの用意のしかたで詳しく書いています。

AIが作った画面で、人が整える部分

AIの出力は「たたき台」としては優秀です。一方で、そのまま使うと事業の判断を誤らせる場所もあります。人が確認して整えたい点を整理します。

事業の主役となる導線

画面の中で、事業の価値が伝わる一番大事な操作はどこか。申し込みなのか、検索なのか、診断結果の確認なのか。ここをどこまで目立たせ、何手で到達させるかは、AIには決められません。AIは全体をバランスよく整える方向に出力しがちで、事業にとっての優先順位は反映されにくいからです。

人が最初に決めたいのは、「この画面で利用者に最初にしてほしいこと」を一文で言えるかどうかです。言えなければ、画面を整える前に、事業の側の整理が必要です。

文言と用語

ボタンの表記、案内文、エラー文などの言葉は、利用者の理解や安心感に直結します。AIの文言は自然に読める反面、業界で通じる言い回しとずれていたり、表現が少し強すぎたりすることがあります。個人情報の取り扱いや、契約・支払いに関わる表示は、意味を取り違えると事業上のリスクになります。こうした文言は、事業の担当者が自分の目で確かめる必要があります。個人情報に関する設計の確認点は、新規事業の個人情報とシステム設計も参考になります。

画面どうしの一貫性

AIに画面を一枚ずつ頼むと、画面ごとに微妙に違う部品が生まれます。ボタンの形、余白、色の使い方、見出しの大きさなどです。一枚ずつ見ると問題がなくても、並べるとちぐはぐに見えます。

これを防ぐには、人が先に簡単なルールを決めておくのが有効です。

• 主な色（基本色、強調色、警告色）
• 文字の大きさの段階
• ボタンや入力欄の基本の形
• 余白の基準

このルールを指示に含めて出力させ、できた画面を人が並べて確認します。小さな作業ですが、あとで実装に進むときの手戻りを減らせます。

画面の「状態」

AIが出す画面は、データが入っている正常な状態だけであることが多いものです。実際のサービスでは、次のような状態も設計しなければなりません。

• データがまだ一件もない状態
• 読み込み中の状態
• 入力ミスや通信エラーが起きた状態
• 利用者の権限によって表示が変わる状態（管理者と一般利用者など）

プロトタイプでも、事業の核になる操作については、こうした状態を最低限つくっておくと、触った人の反応が現実に近くなります。何を省き、何を作るかの考え方は、MVP開発の機能の絞り方が参考になります。

見やすさ・使いやすさへの配慮

文字の大きさ、色の組み合わせによる読みやすさ、スマートフォンでの操作のしやすさなどは、AIの出力では不十分なことがあります。Webの利用しやすさについては、日本産業規格のJIS X 8341-3が、ウェブコンテンツのアクセシビリティの指針として知られています。プロトタイプの段階で全項目に対応する必要はありませんが、本開発に進む前に確認しておくと、後から画面を作り直す事態を避けやすくなります。

裏側のデータ構造との整合

画面は、裏のデータの持ち方と対になっています。AIが描いた画面に「会員ランク」「過去の利用履歴」といった項目があっても、それを保存し計算する仕組みが想定されていなければ、実物にはなりません。画面の案ができたら、必要なデータは何か、どこから来るのかを確かめます。画面とデータ設計の役割分担は、AI設計でDB設計はどこまで任せる？で整理しています。

権利と情報の扱い

AIに画面を作らせるとき、二つの点に注意が要ります。

一つ目は、入力する情報です。まだ公開していない事業アイデアや、顧客の情報をそのまま指示に含めてよいかは、使うツールの規約や設定によって異なります。確認の観点は生成AI開発の情報漏洩を防ぐ確認点にまとめています。

二つ目は、出力物の権利です。画面の画像、アイコン、フォントなどが、既存のものと似ていないか、利用条件に問題がないかを確かめる必要があります。コードを含む場合の考え方は、AI生成コードの著作権も参考になります。

進め方の手順

実際のプロトタイプ開発で、AIによる画面づくりを組み込む流れの一例を示します。

手順1：確かめたいことを先に決める

画面を作る前に、このプロトタイプで何を確かめたいのかを決めます。「利用者が迷わず申し込めるか」「提携先に事業の姿が伝わるか」など、一つか二つに絞ります。確かめたいことが決まっていないと、画面の出来の良し悪しを判断する基準がありません。

手順2：主役の画面と流れを人が描く

事業の中心になる操作の流れを、紙やメモでよいので人が描きます。AIにはそれを渡し、細部を埋めてもらいます。人が骨格を決め、AIが肉付けする順番にすると、事業の意図がぶれにくくなります。

手順3：指示を具体的に書き、複数案を出す

指示には、利用者の種類、使う場面、最優先の操作、守りたいルール（色・文言のトーンなど）を含めます。曖昧な指示は、毎回違う方向の出力につながります。言葉にする手順はAI開発の仕様の伝え方で詳しく書いています。

手順4：人が選んで整える

出てきた案から、手順1の目的に合うものを人が選びます。そのうえで、ここまで挙げた文言、一貫性、状態、データとの整合を確認して整えます。

手順5：動く形にして、実際に触る

静止画で議論するより、実際に触れる形にしたほうが、気づきの質が変わります。ボタンを押したときの動き、入力のしやすさ、画面が切り替わる速さなど、触らないと分からないことは多いからです。触った人の反応を集める方法は、プロトタイプのユーザーテストで紹介しています。

手順6：実物で出た指摘を反映する

触って出た「ここはこう」「これじゃない」を直し、必要なら画面案を再生成します。このやり取りを早く回せることが、AIを使う価値の大きな部分です。

AIによるプロトタイプの短期間化の仕組みは、AIでプロトタイプを短期間で作れる理由でも解説しています。

つまずきやすい点

見た目が整うと、検証が終わった気になる

AIが生成した画面は、はじめから完成度が高く見えます。そのため、「もう出来ている」という印象が先に立ちやすくなります。しかし、画面が美しいことと、事業が成り立つことは別です。新規事業の判断に必要なのは、利用者が実際に使うか、提携先が興味を持つか、事業として回るかという点です。見た目の良さを、事業性の証拠として扱わないようにします。

案が多すぎて決まらない

AIは案をいくらでも出せます。その分、比べる軸がないと、かえって決められなくなります。比べる軸は、手順1で決めた「確かめたいこと」です。軸に沿って、残す案を二つか三つに絞ります。

画面だけ作って、本開発で作り直しになる

プロトタイプの画面を作ったものの、本開発でほぼ全部やり直しになるケースがあります。画面の見た目だけを先に作り、データの持ち方や権限の設計を後回しにした場合に起こりがちです。どの部分を引き継げて、どの部分を見直すのかは、MVPから本開発は作り直し？で考え方をまとめています。

AIの出力を確認せずに進める

AIは、もっともらしい誤りを出すことがあります。画面でも、存在しない機能の案内文、整合しない項目名、実際には成立しない操作の流れなどが混ざることがあります。AI開発全般について、人の確認が必要な理由はAI開発でも品質には人の確認が必要な理由に書いています。コードまで生成させる場合は、AIコードレビューで指摘される点と人が判断する点も合わせて確認してください。

まとめ

AIによるUIデザイン生成は、プロトタイプ開発で次のような場面に向いています。

• 構想を画面にして、議論の入口をつくる
• 複数案を短時間で出して比べる
• 画面一覧や遷移の抜けを洗い出す
• ダミーの文言やデータで、実物に近い見た目をつくる

一方で、次の部分は人が決め、整える必要があります。

• 事業の主役となる導線と、優先順位
• 文言と用語、とくに個人情報や契約に関わる表示
• 画面どうしの一貫性（色・部品・余白のルール）
• 空の状態やエラーなど、画面の「状態」
• 見やすさへの配慮と、裏側のデータ構造との整合
• 入力する情報の扱いと、出力物の権利

AIは画面案を出す速さを大きく変えますが、「何を確かめるのか」「どの案が事業に合うのか」を決める役割は、人に残ります。私たちは、AIを使う価値は、画面づくりの時間を短くすることよりも、実物を前にした判断の回数を増やせることにあると考えています。

JustFitは、構想をもとに約1ヶ月で、実際に動くプロトタイプを先に開発する受託開発サービスです。開発にはAIを活用した独自の基盤「LAF」を使い、何を作るかを決める部分と品質の最終判断は人が担います。画面をどこまで作り込むか、どの操作を実物で確かめるかといった段階から相談できます。進め方の全体像は、JustFitのサービス紹介でご覧いただけます。