aaam
UI/UXデザイン

生成AIはUIデザインをどこまでできる?得意と苦手の境界を実務で線引き

生成AIはUIデザインをどこまでできる?得意と苦手の境界を実務で線引き

アーム代表の伊藤です。
生成AIがUIデザインでできるのは、見た目とたたき台までです。その先は人が見ます。

この秋のAIの進化で動いた境目は4つのうち1つでした。アームの案件でも、ラベルと食い違ったアイコンがもう少しで本番に出るところでした。

生成AIがUIデザインでできるのは見た目とたたき台まで

  • 配色や余白の整った画面はすぐ出る
  • 何を作るかの定義と優先順位は人が担う
  • 本番に出す判断は人に残る

できることとまだ人が担うことを先に表で示します。

領域

AIが得意

人が担う

見た目・トーン

配色と余白の整った画面

現場に合うかの判断

たたき台

初期案を複数出す

何を作るかの定義

情報設計

要素をきれいに並べる

優先と取捨の決定

一貫性

1画面の中の整合

画面をまたぐ規則

責任判断

複数案の提示

「これで出す」の決定

生成AIが圧縮するのは前半の見た目とたたき台で、後半の業務理解と意思決定は人に残ります。右の列を誰も引き受けないまま出すと、「似ているのに使いにくい」画面ができあがります。実際には、検索の実行ボタンのすぐ隣に、同じ見た目のリセットボタンが並んでいたケースもあります。

実務でつまずく4つの穴は生成AIでは埋まらない

  • ラベルとアイコンの食い違いは業務理解の不足
  • 検索とリセットが同じ重さで並ぶと誤操作
  • リリースの判断は事業の当事者が持つ

アームが実案件で繰り返し見てきた、生成AIに渡しきれていないものです。整った画面ほど、穴は見た目に出ません。

境界1

AIは「ブックマーク」にハートを当ててしまう

ある管理画面の改修で、生成された画面はラベルが「ブックマーク」なのにアイコンがハートでした。世の中の事例では「お気に入り=ハート」が多いので、AIは自然にそう補完します。ところがその業務では、ブックマークは後で見返す一時保存で、お気に入りとは別の機能でした。

AIは「それらしさ」は再現できてもその現場の業務は知りません。名前と印がずれると現場は毎回迷います。

AIが知っている

AIが知らない

世の中の事例

その現場の業務

一般的な言葉の意味

担当者が使う言葉

お気に入り=ハート

ブックマーク=一時保存

この画面が何のためにあるかは、業務を聞き取らないと分かりません。

境界2

検索とリセットを同じ重さで並べてしまう

別の案件では、条件検索の実行ボタンのすぐ隣に、同じ見た目のリセットボタンが並んでいました。結果、検索したつもりで入力を全消しする誤操作が続きました。

AIは渡された要素を均等に扱います。どれを目立たせ、どれを引っ込めるかは、業務を知っている人にしか決められません。

ボタン

AIの案

現場の正解

検索の実行

同じ見た目で隣

目立たせる

入力のリセット

同じ見た目で隣

隣に置かない

境界3

閉じるボタンが画面ごとにばらつく

1画面ずつ生成すると、その画面の中では整っていても、画面をまたぐと規則が崩れます。あるプロダクトでは、モーダルを閉じる手段が画面ごとに違っていました。

画面

閉じる手段

ある画面

下部の「キャンセル」

別の画面

右上の「×」だけ

また別の画面

両方あり片方が動かない

画面をまたいだ一貫性は、1枚ずつ作るほど崩れていきます。一貫性はデザインシステムのような全体の規則で担保するもので、1枚の生成では生まれません。

境界4

本番に出してよいかはAIが決められない

見落とされやすい穴です。AIは案も根拠も出せますが、「この画面で本番リリースしてよい」と決める立場にはいません。迷わず使えるか、登録完了率や解約、問い合わせ件数がどう動くかは、公開して測るまで分かりません。

AIができる

人に残る

案と根拠を出す

「これで出す」と決める

詰めるほど案を良くする

外したときに直す

複数案を比べる

公開後の数字を見る

誰がGOを出し、外したときに誰が直すのか。ここは人の仕事として残ります。決める人がいないまま進んだ画面は、責任の空白がそのまま品質の空白になります。

2026年秋の生成AIの新機能で動いた境界は1つだけ

  • 道具は「決まりをAIに読ませる」方向へ進んだ
  • 画面をまたぐ一貫性は道具の側で縮んだ
  • 業務の意味と出す判断は人に残った

この記事を2026年7月に書いてから4か月で、生成AIのUIデザインツールは向きを変えました。画面を1枚出して終わりの道具から、決まりを読みながら画面を直して回るエージェントへ、です。

時期

出たもの

2026年3月

Google Stitchにデザインエージェント

2026年4月

AnthropicのClaude Design(研究プレビュー)

2026年10月

Figmaのエージェントが一般提供に

3社ともAIに決まりを渡す入口を作った

3つとも、デザインの決まりをAIに渡す入口を持っています。StitchはDESIGN.mdという決まりを書いたMarkdownを読み書きします。Claude Designは既存のコードとデザインファイルから部品の決まりを組み立てます。FigmaはSpecs(意図を書く場所)と、ライブラリに添えるAI向けのガイドラインを出しました(どちらもオープンベータ)。

出典は各社の公式発表です(Google「Introducing “vibe design” with Stitch」2026年3月18日/Anthropic「Claude Design」2026年4月17日/Figma「Build by design」2026年10月15日)。Figmaは、正しいパターンと原則を渡せば、エージェントはチームが積み上げてきた作り込みの上に組み立てられる、と説明しています。AIの出来は「何を読ませたか」で決まる方向に3社とも寄せています。

4つの境界のうち縮んだのは一貫性だけだった

ではさきほどの4つの境界に当てはめます。

境界

2026年秋の新機能で

1. 業務の意味

動かない。Specsは書く場所で中身は人が書く

2. 優先順位

動かない。どのボタンを立てるかは業務で決まる

3. 画面をまたぐ一貫性

縮んだ。決まりが先にあればAIがそろえて回る

4. 出す判断

動かない。決める人の席は道具に無い

境界3が縮んだのは本当です。Claude Designは導入時にコードベースとデザインファイルを読み、デザインシステムを組み立てます。以降の案件には色・文字・部品を自動で当てる、と説明しています。Figmaも、エージェントにライブラリの保守を任せる使い方を示しています(Figma「How to lighten design system upkeep with the Figma agent」2026年10月6日)。ただし、そろえる先の決まりが無ければ、AIは世の中の平均にそろえます。

「AIっぽいUI」と言われる画面も同じ根から生まれる

決まりを渡さずにUIデザインを生成すると、AIは世の中の事例で穴を埋めます。境界1でハートが出てきたのと同じ理屈で、配色も余白も部品も、よく見る形に寄っていきます。整っているのにどこかで見た画面になるのは、このためです。

この秋の新機能はその穴をふさぐ器を用意しました。器に入れる中身、たとえば「この業務のブックマークは一時保存」と書くのは、業務を知っている人の仕事のままです。FigmaのCDO(最高デザイン責任者)も、Figmaを「何を作り、何を出すかをチームが決める場所」と位置づけています(TechCrunch 2026年10月14日)。道具がどれだけ賢くなっても、決める席は人の側に置かれたままです。

生成AI時代に外注か内製か、決め手は作業量でなく難しさ

  • 判断軸は作業量ではなく課題の難しさ
  • 定型的な画面は内製、特殊な業務は外部
  • 見る数字は完了率・解約率・問い合わせ工数

「AIで作れるなら、外注をやめて内製に切り替えるべきか」。よくいただく問いです。外注か内製かは作業量ではなく課題の難しさで決めます。生成AIで作業が速くなるほど、残る難所(業務理解・情報設計・一貫性・責任)の比重が上がるからです。

状況

向いている進め方

定型で事例の多い画面

生成AIで内製

業務が特殊

業務理解を持つ設計者

複数画面で一貫性が要る

デザインシステムを組める外部

公開後の数字で直したい

運用まで見る相手

見るべきは画面が動かす数字だった

判断材料はその画面が動かす数字です。オンボーディングの完了率、解約率、問い合わせ工数。たとえば月間300人が登録する製品で完了率が1ポイント動くと、増減は月3人。年間契約単価を仮に5万円とすれば、年間180万円に相当します(仮の前提を置いた試算です)。たたき台を1日早く出す価値と、この1ポイントを取りこぼす損失は、桁が違うことがあります。

安く速く作れても、使われずに解約が増えれば事業の穴になります。

AIに任せる場面とツール

  • 初期案は数十秒で複数パターン出る
  • ログインや設定の定型UIが得意
  • ツールは用途で選ぶ

得意1│初期案は数十秒

差が出るのはここです。デザイナーが数時間かけていた初期のワイヤーフレームや画面案を、生成AIは数十秒で複数パターン出します。白紙に向かう時間が消えるので、議論の出発点を早く用意できます。アームでも、要件が固まった後の初期案出しではスケッチ代わりに使います。

得意2│定型UIの実装

ログイン、設定、一覧とフォームのような事例が大量にある定型UIは、生成AIの得意分野です。v0のようにコードまで出すツールなら、簡単な画面はそのまま実装の下地にできます。

ツールは用途で分かれる

ツール

向いている場面

Figma Make

生成から動くサイトまで一貫

Figmaエージェント

既存のデザインを決まりに沿って直す

Google Stitch

発想出し・方向性の比較

Claude Design

自社の部品で試作し実装へ渡す

v0 by Vercel

動く画面を早く用意

Uizard / Relume

構成レベルのたたき台

仕様や料金は頻繁に変わるので、導入前に各公式で確かめてください(2026年11月時点)。Figma公式はFigma Makeについて「UI要素はすべて編集可能です」と説明しています(Figma公式「AI UIジェネレーター(Figma Make)」(2026年11月確認))。生成はゴールではなく、人が手を入れる出発点だと、ツール側も位置づけています。

AIと人の5工程の分担

  • 5工程のうちAIが担うのは1つ
  • 課題定義から検証まで人が担当
  • たたき台をそのまま載せるのが最多の失敗

工程

担う

1. 課題定義

人

2. たたき台生成

AI

3. 情報設計の再構成

人

4. 一貫性の担保

人が決まりを書きAIがそろえる

5. 検証と意思決定

人

1で誰のどの困りごとを解くかを言葉にし、2でプロンプトにして画面案を複数出します。3で優先順位を組み替え、4で画面をまたぐ規則を人が書いてAIにそろえさせます。5で使ってもらい、数字で確かめて直します。

AIが主役になるのは2の一箇所。4は手伝えても決まりを書くのは人です。1がずれると、後工程を速くするほど間違いに速く着きます。

たたき台をそのまま製品に載せるのはよくある失敗です。見た目が整っているぶん、検証を飛ばしてしまいます。

生成AIに渡すUIデザインの決まりを整えるデザインハーネス構築

  • 色・字・余白の決まりをAIが読む形にする
  • 月15万円〜(税別)・約1ヶ月・縛りなし
  • 要らない会社には初回の面談でそう伝える

最後にアームの売り物を並べます。アームは、検索とAIに見つかるホームページを作って運用する個人のデザインスタジオです。この記事の境界3、画面をまたぐ一貫性をAIに任せられる状態を作るのがデザインハーネス構築です。決まりを書く側の仕事をこちらで引き受けます。

AIで作る画面の困りごと

アームのやり方

作るたびに色と余白がずれる

色・字・余白をFigmaの変数とCSS変数にそろえる

AIに何を渡せばいいか分からない

AIが読むルール文書(DESIGN.md)を書いてツールに組み込む

業務の意味をAIが知らない

画面の目的と前提もルール文書に書き出す

レビューで毎回同じ指摘をしている

トークン外の値はFigmaのプラグインで自動検出する

部品が増えすぎて誰も使っていない

使う部品10個から始め、足りない分は運用で足す

止めたくても止めにくい

初期費用なし。1ヶ月前の通告で解約でき違約金なし

UIデザインのうち、業務の意味と出す判断は決める席ごと貴社に残します。決めた中身を、AIが毎回読める形にするのがこちらの仕事です。

デザインハーネスを頼まないほうがいい会社

苦手もあります。部品のコード実装(Reactなど)と、画面そのもののデザインは範囲に含みません。

サイトが1つで更新が月に数回なら

サイトが1つで更新が月に数回なら、ハーネスまでは要りません。代行プラン(月22万円・税別)の中で、色・字・余白の決まりと更新手順だけを整えます。要らない状態なら初回の無料面談でそう言います。

AIで作った画面を1枚と、いまのFigmaを見せてください。どこからそろえるかと、要るか要らないかを初回の面談(30〜60分・無料)でお返しします。

よくある質問

生成AIで作った画面を、そのまま本番に使って大丈夫ですか?

定型的で事例の多い画面なら下地に使えます。業務が特殊な画面や、複数画面で一貫性が要る場合は、人による再設計を前提にしてください。

生成AIを使うと、UIデザインのコストは下がりますか?

たたき台の工程は下がります。ただし使われなければ解約や問い合わせ増で損失になるので、動かす数字から逆算してどこにコストをかけるかを決めます。

デザインシステムをAIに読ませれば、一貫性の問題は解決しますか?

UIデザインの画面をまたぐ揃いは、決まりが先にあればAIに任せられる範囲が広がりました。ただし決まりを書くことと、業務に合わせて例外を決めることは人の仕事です。決まりが無いまま読ませると、AIは世の中の平均にそろえます。

生成AIのUIデザインは、見た目は速く作れても線引きは人の判断に残る

  • 生成AIは見た目とたたき台まで/本番に出す判断は人が持つ
  • 業務理解・優先順位・画面をまたぐ一貫性は人が担う
  • 外注か内製かは作業量でなく課題の難しさで決める

関連するお悩み

関連するコラム