UXデザイナーのワークフローにおけるAI活用：本当に役立つ場面と失敗する場面

火曜日の朝、Slackにメッセージが届きます。「Figma AI試してみた？あれで作業速度を3倍にできるはずだけど」。3年間まともなフローを自分でリリースしていないデザインリードからのメッセージで、先日基調講演を視聴したばかりのようです。

そこで実際に試してみます。「通知設定とセキュリティタブを備えたB2B CRM向けの設定ページ」と入力すると、12秒後に設定ページが出来上がります。技術的には確かに設定ページです。ただ、見た目は2023年のダッシュボードテンプレートそのものです。すべての要素に丸みを帯びたコーナー、特定のインディゴブルー、誰かのdesign systemから流用したトグルコンポーネント、そして「あなたの生産性を解き放つ体験をカスタマイズしましょう」というマイクロコピー。結局一切リリースしませんでした。デザインリードは速度が上がらない理由を尋ねてきます。

本記事はその問いへの回答です。

率直に言えば、AIがUXデザイナーの1日の業務に本当に役立つのは約20%、まったく役に立たないのは30%、そして残りの50%においては積極的に害をもたらす可能性があります。重要なのは、プロンプトを入力する前にその区別ができているかどうかです。AIをうまく使うデザイナーは、「センスも、ブランド文脈も、アクセシビリティ判断力もない、自信満々で作業の速い若手スタッフ」として扱っています。明確にスコープを絞ったタスクを与える。必ずすべて検証する。最初の下書きをそのままリリースしない。この3点が肝心です。

AIがワークフローで真に価値を発揮する場面

リサーチトランスクリプトの統合

これがAIに最も近い「魔法」に見える場面です。ユーザーインタビューのトランスクリプト40件、生テキスト800ページ、かつてはリサーチャーが1週間かけてクラスタリングしていた質的データの山。これをClaudeに貼り付けるか、Dovetail AIやNotion AIを通すと、代表的な引用つきのテーマが約20分で出てきます。

AIが得意なこと：クラスタリング、想定外の周辺テーマの抽出、逐語引用の取り出し、アフィニティマップの初稿生成。AIが誤る傾向があること：頻度の表現。AIは「エクスポートフローが分かりにくいと頻繁に指摘されました」と自信を持って言いますが、実際には12名中2名が1回ずつ言及しただけということがあります。AIは統計的な重みよりも印象的な発言に引きずられます。

機能するプロンプト構成：トランスクリプトを貼り付けてテーマを求め、各テーマについて（a）参加者IDつきの逐語引用と（b）そのテーマを言及した参加者の実数を必須条件として要求します。その後、カウントを手動で原文と照合します。20分で完了した統合作業を5分で検証するだけでも、ゼロから行う場合と比べて5倍の速度向上になります。誤った頻度情報をPMに報告するリスクもなくなります。

マイクロコピーのバリエーション生成

空の状態のメッセージ、エラーテキスト、ボタンラベル、確認ダイアログ。AIは任意の文章について30秒で8つのバリエーションを提示します。これは実際に使えるレバレッジです。

絶対に外せないルール：1つを選んで、必ず自分で書き直すこと。最初の下書きはほぼブランドボイスになっていません。AIはすべてのエラーを「チャンス」として、すべての空状態を「旅」として表現し、句点が適切な場面でコロンを多用するような「LinkedInの投稿風英語」をデフォルトとして生成します。編集なしでリリースすると、どのSaaS製品とも区別のつかない文章になり、個々の文章は間違っていなくても、ブランドとしての失敗です。

1か月を通じて、AIの文章をそのまま採用した割合を追跡してみてください。筆者の場合は約7%です。

代替テキストの初稿作成

これに関しては文句のつけどころがありません。代替テキストは、デザイナーやライターが疲れているときに後回しにしがちな作業です。そして疲れているのは大抵の場合です。だからこそウェブのアクセシビリティが損なわれ続けています。AIで70%の質のものが素早く作れれば、ゼロから書くより速く仕上げられます。残りの30%、つまり本当に重要な部分は自分で手を入れます。装飾画像か情報提供画像かの区別、AIが知らないブランド固有の用語、「グラフのスクリーンショット」と「Q2比22%増を示す棒グラフ」の違い、これらは人間が判断します。

ゼロから書くより速く、代替テキストを省略するより格段にアクセシブルで、失敗した場合の結果（多少汎用的な代替テキスト）は、多くのB2B SaaSサイトに見られる「代替テキストなし」という現状よりはるかにましです。

ムードボードと参照画像

Midjourney、Ideogram、Soraは内部向けムードボードやステークホルダー向けピッチに役立ちます。明確な境界線があります。FigJamでPMやEMとのデザイン方針共有に使うなら問題ありません。マーケティングサイト、製品、実際にリリースされる成果物に使うなら論外です。

生成AI画像ツールは学習データの平均値を出力します。「落ち着いたエンタープライズダッシュボードのムードボード」を作るには最適ですが、「実際のヒーロー画像をデザインする」には向いていません。

プロトタイプの初期生成

v0、Galileo、Figma Makeを使えば、ゼロから3時間かかっていたものが10分でクリッカブルなプロトタイプになります。適切なとらえ方は「意見を持ったワイヤーフレーム」であって、完成品ではありません。生成物の約60%は捨てることになります。構造的な判断（このレイアウトは理にかなっている、この階層はおおむね正しい）は残し、視覚的な判断（ボタンはこういう見た目ではない、エラー状態に悲しそうなクラウドイラストは使わない）は捨てます。

編集なしでそのままリリースすると、誰かのdesign systemをわずかに加工して自社製品に組み込んでいることになります。ユーザーは理由を言葉にできないかもしれませんが、何かおかしいと感じます。

AIが役立つ場面と機能しない場面

AIが機能しない場面と代替アプローチ

デザイン感覚

AIは学習データを平均化します。デザイナーの仕事は具体性を持つことです。「AIが作ったUI」の罠は奇妙なほどの一貫性にあります。すべてのボタンが同じ8pxの角丸、すべての空状態が同じイラストのエネルギー、すべてのマイクロコピーが同じコロンのリズム。ユーザーにはなんとなく伝わります。デザイナーには確実にわかります。解決策は「AIを使う頻度を減らす」ことではなく、「プロンプトを入力する前に強い意見を持つ」ことです。自分が何を求めているか分からなければ、AIは他の人々が求めたものの平均値を返してきます。

ブランドボイス

おそらく貴社のブランドはLinkedIn英語ではないはずです。AIのデフォルトはそれです。真剣なB2B製品であれば、「落ち着いた正確さ」（Linear）、「温かく明確」（Stripeのドキュメント）、「シニカルで切れ味がある」（Mailchimpの旧スタイル）のいずれかに近いかもしれません。AIはそのどれも知りません。知っているのはすべてのSaaSコピーの平均値であり、それはどのスタイルにも属しません。AIのマイクロコピーを書き直さずにリリースすると、長年のブランド構築の努力が消えてしまいます。

アクセシビリティ判断

これが最も危険な領域です。AIは美しく見えるアクセシビリティ違反のパターンを生成します。ラベルのコントラスト比3.2:1、タップターゲット12px、色のみによる状態表示（成功は緑、エラーは赤、アイコンなし、テキストなし）、カスタムドロップダウン内のキーボードトラップ、「見た目が悪い」という理由で取り除かれたフォーカスリング。AIはWCAGを知りません。WCAG準拠デザインが「どのように見えるか」の平均値を知っているだけです。これは全く異なることです。

AIが生成したUIをアクセシビリティ確認なしでリリースすると、アクセシビリティに問題のあるUIをリリースすることになります。AIによる画面は必ず、コントラストチェッカー、キーボードのみの操作テスト、スクリーンリーダーによる確認を経てから提出してください。

UXヒューリスティクス

AIは自社ユーザー、データモデル、エッジケース、既存の情報アーキテクチャを知りません。製品内の5つの既存パターンと矛盾する設定ページを平然と生成します。他のすべての破壊的操作で使っているパターンと合致しない削除確認ダイアログを作ります。単体では美しいが、残りのアプリと並べると支離滅裂なナビゲーションのパラダイムを導入します。システム的な思考はやはり人間の仕事です。

明確な意思決定を要するコピー

オンボーディングの声のトーン。エラーメッセージのトーン。18か月分の業務記録を失う直前にいるユーザーへの削除確認における共感。AIはこれらすべてにおいて曖昧な表現を選びます。学習データ全体で最も安全な出力が曖昧さだからです。ブランドは決断しなければなりません。「本当に削除しますか？」はAI版の表現です。「14か月分の顧客メモを完全に削除します。この操作は元に戻せません。」はブランド版の表現です。意図は同じ、製品の姿勢が異なります。

よく言及される4つのツールについての正直な評価

Figma AI・Make

得意なこと：一般的なパターンの初稿レイアウト。設定ページ、データテーブル、空の状態、モーダル。アウトプットはおおむね2023年のテンプレート（汎用的だが構造的には健全）で、出発点として使うには適しています。

苦手なこと：ブランドボイスが必要なもの、非標準のもの、既存のdesign systemに合わせる必要があるもの。Figma Makeは自社のdesign token、スペーシングリズム、コンポーネントライブラリを知りません。それらしいFigmaフレームを生成しますが、ブランドに即したFigmaフレームではありません。

評価：一般的なパターンでの空白のキャンバス問題を5分で解消するのには役立ちます。アウトプットをそのままリリースしないでください。自社コンポーネントで再構築する前の出発点として使いましょう。

v0（Vercel）

得意なこと：エンジニアリングへのデザインハンドオフ。v0は実際に動作するTailwindとshadcn/uiのコードを生成します。エンジニアに触って確かめてもらいたいフローのプロトタイピングには、Figmaを手動でコードに変換するより格段に速いです。

苦手なこと：視覚的な独自性。v0には一つの美的方言があります。丸みがあり、中立的で、Vercelのマーケティングサイトに少し似ている。視覚的な判断は捨て、構造的な判断は残し、自社のdesign systemに立ち返りましょう。

評価：エンジニアリングと密接に連携する方にとって4ツールの中で最も実用的です。コードを出力する高速ワイヤーフレームツールとして扱うのが適切です。

Galileo AI

得意なこと：発散的思考。レイアウトで行き詰まり、5分で5つの異なるアプローチを見たいときにGalileoは使えます。基調講演でのデモも見栄えがします。

苦手なこと：実際のリリース。Galileoのアウトプットが既存のシステムに対してデザインレビューを通過することはほとんどありません。生成された画面は洗練されて見えますが、残りの製品と組み合わさらず、コンポーネントはライブラリのどれにも対応しません。

評価：UIの外観を持つムードボードツールです。行き詰まりを打破するために使ってください。リリースのために使わないでください。

Midjourney・IdeogramによるUI生成

やめましょう。

これらのツールが生成するのはUIの「画像」であって、UIではありません。ボタンは揃っていません。ラベルは誤字だったり存在しないものが表示されたりします。テキストが含まれるものはすべて架空のものです。指が6本になるのと同じ問題がインターフェースにも起きます。ひと目見るとそれらしく見えますが、2秒見るとスペーシングがおかしく、メニュー項目が意味をなしていないとわかります。

内部向けムードボードで雰囲気を確認するためにMidjourneyを使うのは問題ありません。誰かが実際の画面と間違えるようなUIを生成するために使うなら、品質を無視した仕事をしていることになります。UI作業への使用は責任の放棄です。

「AIデザインUI」の罠、詳細解説

AIによって生成され、一切編集されなかった画面の3つのサイン：

1. 無関係なコンポーネント全体に同一の角丸が適用されている。 ボタン、カード、入力フィールド、モーダル、トースト、すべてが同じ8pxまたは12pxに丸められています。モデルが1つの値を選んで全体に適用したからです。実際のdesign systemでは、階層上の理由からコンポーネントタイプによって角丸を使い分けています。

2. すべての空状態に3語の見出しと1文のサブテキスト。 「プロジェクトがまだありません」「最初のプロジェクトを作成して始めましょう」という具合に、あらゆる空状態が同じ視覚的エネルギーと漠然と明るいトーンで統一されています。

3. 句点で十分な場面でのコロン使用。 「接続できませんでした。もう一度お試しください。」ではなく「接続できませんでした：再試行してください」という表現。このコロンの使い方は特徴的です。モデルが好んで使い、人間は慎重に使います。

他のサインとして、低コントラストのパステルトースト（Dribbble映えはするがWCAG AAに不合格）、背景に溶け込むゴーストボタン、意味をなさない汎用的な共感表現（「問題が発生しました」）、あらゆる状態のストックイラスト、そしてすべてのAI生成B2Bインターフェースのデフォルトになってしまったあの特定のインディゴブルーがあります。

これらのうち3つが自分の画面に見つかれば、生成して編集していない状態です。編集してください。

同じ空状態に対する3種類のマイクロコピー

CRM連絡先リスト、まだ連絡先なしの状態：

AIが生成する汎用バージョン（最初のプロンプトで得られるもの）：

連絡先がまだありません 最初の連絡先を追加して、CRMのフルパワーを引き出し、顧客と意味のある関係を築き始めましょう。 [連絡先を追加]

これで十分です。ただし、記憶に残らず、やや大仰で（「フルパワーを引き出す」）、どの製品にも当てはまります。このままリリースしてもブランドに何も加えていません。

ブランドボイスに書き直したバージョン（落ち着いた正確なB2Bブランドを想定）：

連絡先がまだありません。 CSVからインポート、Gmailから同期、または手動で追加できます。多くのチームはCSVから始めます。 [CSVをインポート] [Gmailを同期] [手動で追加]

同じ空状態です。ユーザーが取るべき行動を示し、最も一般的な方法を明示し、誰かを奮い立たせようとしていません。CTAが仕事をし、コピーは邪魔をしません。

却下バージョン（遊び過ぎ）：

CRMがお腹を空かせています。 連絡先を入力して成長を見守りましょう。 [入力する]

それはしません。

パターンは明確です。AIは最初のバージョンを確実に提供します。2番目のバージョンは自分の仕事です。3番目のバージョンは、AIにトーンを自由に決めさせ、編集なしでリリースした結果です。

デザイン感覚を失わずにAIを導入する30日間プラン

このプランの目的は、AIが実際に何時間を節約してくれるか、どこでやり直しが発生するかを実データで把握することです。一度実施すれば、自動化を続けるべき20%と、そのままにしておくべき80%がわかります。

1週目：リサーチ統合のみ

次のリサーチ統合をDovetail AI、Notion AI、またはClaude（生のトランスクリプトを直接貼り付け）で実施します。逐語引用と件数つきのテーマを生成します。すべての頻度に関する主張をトランスクリプトと手動で照合します。通常の統合ペースと前後で時間を計測します。

成果物：検証メモ付きの統合ドキュメント1件と、デザインジャーナルへの時間記録。検証コストを引いても3〜5倍の速度向上が期待できます。

2週目：マイクロコピーのバリエーション生成

次の3つのフローについて、各文字列につきお好みのツール（ChatGPT、Claude、ブランドボイスが設定済みであればWriter）で8つのマイクロコピー候補を生成します。最良のものを選び、ブランドボイスに書き直します。実際にそのまま採用したAIの文章数を記録します。

成果物：各文字列に3列（AIバリエーション、自分の書き直し、理由）のマイクロコピードキュメント。週末にはそのまま採用した割合を計算します。15%以下が普通です。

3週目：代替テキストと社内向けムードボード

デザインハンドオフのチェックリストにAIによる代替テキスト作成を追加します。次の作業バッチのすべての画像とスクリーンショットについて、AIで代替テキストの初稿を生成し、具体性の観点で編集します。社内向けムードボード（リリース成果物ではない）に対して、MidjourneyかIdeogramで12枚の参照画像を生成します。どれが汎用的な方向に引っ張り、どれが何か有用なものを解放したかを観察します。

成果物：チームのハンドオフテンプレートに更新された代替テキストチェックリスト、AI画像のどれが汎用的と感じたかの自己評価つきFigJamムードボード1件。

4週目：プロトタイプの初期生成

通常は手でワイヤーフレームを描く低リスクのフローを1つ選びます。v0またはFigma Makeで初期生成します。クリッカブルになるまでの時間を通常プロセスと比較します。何を削除して何を残したかを正確に記録します。完了と判断する前に、コントラストチェッカーとキーボードのみの操作テストを実施します。

成果物：AI初期生成と自分が洗練させたバージョンの比較成果物（時間差と削除リストつき）。

月末レビュー

紙に書き出す3つの問い：

1. AIが実際に時間を節約した場所は？（おそらくリサーチ統合、代替テキスト、マイクロコピーのバリエーション）
2. やり直しが発生した場所は？（おそらくブランドボイス、アクセシビリティ判断、システム思考が必要な場所）
3. AIが汎用的な方向に引っ張った場所は？（おそらくリリース成果物に使ったムードボード、削除ステップを省略したプロトタイプの初期生成）

このレビューのアウトプットが、自分個人のAIワークフロー方針です。書き留めておきましょう。ツールの変化に合わせて四半期ごとに見直します。

参考：ACE Frameworkの観点から

デザインリード、PM、あるいは懐疑的なCTOに対して、自分のワークフローにAIがどう当てはまるかを説明したい場合、ACE Frameworkがクリアな語彙を提供してくれます。

UXデザイナーのAI活用は主にGenerate（マイクロコピーのバリエーション、代替テキストの初稿、ムードボード、プロトタイプの初期生成）とAnalyzeの一部（リサーチトランスクリプトの統合）に位置します。Predict（予測、MLモデル、これはPMとデータ領域）やExecute（自律的なエージェントワークフロー、これはエンジニアリングとオペレーション領域）には当てはまりません。

ワークフローにおけるAIの位置を明確にすることで、リーダーシップとの対話が誠実になります。「すべてのアウトプットに人間のレビューを伴うGenerate層のタスクにAIを活用しています」と言えば共感を得られます。「AIでデザイン速度を10倍にします」と言えば品質の低い成果物を届けることになります。

まとめ

AIはセンスも、ブランド文脈も、アクセシビリティ判断力もない、自信満々で作業の速い若手コラボレーターです。自社ユーザーを知りません。自社のdesign systemを知りません。それらしく見えるが汎用的なアウトプットを生成し、失敗は気づかれないまま蓄積します。

あなたが指示し、検証し、最初の下書きをそのままリリースしない。

AIをうまく使うデザイナーとは、プロンプトを入力する前に自分が何を求めているかわかっている人です。強い意見を入力すれば、有用なレバレッジが得られます。曖昧なプロンプトを入力すれば、インターネットの平均値が返ってきます。上記の30日間プランは主に、自分のワークフローでその違いを見分けることを学ぶ練習です。

デザインリードが来週「なぜ速度が3倍にならないの？」とSlackで聞いてきたら、今や誠実な回答ができます。AIは特定のタスクを3〜5倍速くしました。統合、代替テキスト、マイクロコピーの下書き。他のタスクは、検証と書き直しに実際のコストがかかるため遅くなりました。正味では適切な作業で約20〜30%の速度向上、不適切な作業ではゼロ向上、書き直しを省略すると速度は下がって品質も落ちます。それが事実です。違う数字を売り込んでくる人は、何かを売ろうとしています。

関連記事

• ロードマップを動かすユーザーリサーチ
• B2B SaaSにおけるUXデザイナーの1日
• Design Systemへの貢献：「担当者」になりすぎずに関わるには
• プロダクトデザイナーの求人票テンプレート