日本語

プロダクトデザイナーのワークフローにおけるAI：役立つ場面と限界

どのデザインツールにも「AI」ボタンが付くようになりました。あなたもたいていクリックしてみたはずです。半分は2019年のDribbble投稿がコートを着て現れたような出力で、もう半分は本当に午後の時間を節約してくれました。

違いはツールではありません。ワークフローのどの段階で使うか、それだけです。

この1年間、特定のタスクでどれだけAIを使っているか認めるのが恥ずかしく、他の部分ではどれだけ拒否しているか認めるのが面倒でした。これは、実際に落ち着いた結論を整理したものです。「AIがデザイナーを置き換える」という悲観論もなければ、「AIであなたのクラフトを10倍にする」という誇張もありません。週の中でAIが価値を発揮する部分と、まだ追い払う部分だけをお伝えします。

なぜ今これが重要なのか

PMはv0とCursorを使って、あなたなしでリリースしています。誰かを怖がらせようとして言っているのではありません。「デザイナーはAIを使うべきか」という問いは、デザイナーではない人たちによってすでに答えが出されてしまったからこそ、言っています。

自分のクラフトにおけるAIについて明確な見解を持っていないなら、他の誰かの見解がデフォルトになります。そのデフォルトは、ほぼ必ずTailwindのカードスタックに3つのアイコン、グラデーション、ヒーローのどこかに「Empower」という言葉が入ったものです。あれはわかりますよね。

だからこれは、AIを取り入れることよりも、具体的になることについての話です。AIは実際に何が得意で、何を台無しにするのか。そして今月、それを確かめるための最小限のテストは何でしょうか。

AIが本当に役立つ場面

ここに挙げるのは、週の中でもう細かいことを気にしなくなった部分です。出力は十分で、節約できる時間は現実的で、ここにあった仕事はそもそも給料をもらっている核心ではありませんでした。

リサーチトランスクリプトのクラスタリング

20件のユーザーインタビューは、以前は1週間スプレッドシートと向き合い、タグ列を作り、生きる意欲を少しずつ失う作業でした。今は30分程度です。

Dovetail AI、Notion AI、またはトランスクリプトを貼り付けたClaudeが、どんな人間よりも速くテーマ、頻度、引用クラスターを抽出してくれます。それでも私はすべての引用を読みます。実際のセッションに参加した自分の直感と突き合わせて合成結果を確認します。ただし、スプレッドシートの段階は完全にスキップしていて、節約できた時間をより多くのインタビューに充てています。そこにこそ本当のレバレッジがあります。

落とし穴：最初のクラスターを信用しないこと。異なるプロンプトで2回実行し、意見が食い違う箇所を見る。その食い違いこそが、興味深いリサーチが隠れている場所です。

プロトタイプのシード

v0、Galileo、Figma Make。私はこれらを退屈な足場作りに使っています。誰も2度見しない設定ページ、社内管理ツール用のテーブル、全ステップが同じ見た目のウィザード5画面といったものです。

コツは、出力をワイヤーフレームとして扱い、デザインとして扱わないことです。グリッドは出発点です。階層も出発点です。その後、約70%を再デザインします。AIバージョンは汎用的で、あなたのプロダクトは汎用的ではないからです。ただし、どのスプリントでも最悪の部分である「真っ白なキャンバス」をスキップできます。

コンシューマー向けの画面やブランド主導のものには使えません。それは後で取り上げます。

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

空の状態、エラーメッセージ、オンボーディングのツールチップ、「Save」では素っ気ないが「Apply changes」では長すぎるボタンテキスト。10種類生成して9つ捨て、1つを編集する。

重要なのは「編集する」という部分です。LLMからそのまま使ったものはすべて、本番環境でLLMらしく聞こえました。リズムが違う。抑制が違う。形容詞が常に1つ多い。でもブレインストーミングのパートナーとしては、100回目の「Sorry, something went wrong」の横でカーソルが点滅するのを見つめるよりずっとましです。

代替テキストとアクセシビリティの足場

最初の代替テキスト。ARIAラベルの下書き。カラーコントラストチェック。スクリーンリーダーの見出し構造のサニティチェック。

すべて確認します。AIはWCAG AAの明白なことは対応し、繊細なエッジケースはすべて見逃します。それでも、アクセシビリティ作業がすでにほとんどのチームでリソース不足の部分であることを考えれば、白紙の状態は消えます。50%の出発点は0%より優れています。

次のセクションでこれを強く但し書きします。AIが生成した代替テキストをレビューなしでリリースすると、マーケティングサイト全体に「人物の画像」が4,000回並ぶことになります。

開発ハンドオフの足場

CursorがFigmaフレームをエンジニアが修正できるワーキングコンポーネントに変換する。これは、AIデザインツールの中で最も過小評価されているものです。

Cursorとしっかりしたdesign systemを組み合わせると、ハンドオフ時間が半減します。エンジニアがスペーシングトークンを手動で変換する必要がなくなります。金曜の午後4時に「これであってますか?」というSlackメッセージが3回来ることもなくなります。最初のコミットが初回から意図に近い状態になります。

これが機能するのは、出力を制約する厳格なdesign systemがあるからです。なければ、Cursorは勝手に動き出し、勝手なCursorはv0に余分なステップを加えただけです。

AIが限界を迎える場面（外注すべきでないこと）

これは、AIをどれだけ使うかを尋ねるジュニアデザイナーに、モニターに貼っておいてほしいリストです。以下はすべて、仕事でお金をもらって考える部分であり、AIがこれまでのすべての人と同じように考える部分です。それはまさに間違った直感です。

センス

AIは平均化します。あなたの仕事は特定性を持つことです。

AIにSaaSダッシュボードをデザインするよう頼むと、SaaSダッシュボードを渡されます。汎用的で、それらしく、記憶に残らない。上部に3つのKPIカード、チャート、テーブル、サイドバー。他のすべてのSaaSダッシュボードに似ているのは、他のすべてのSaaSダッシュボードで学習されたからです。

でも、あなたが設計しているのは「あの」SaaSダッシュボードではありません。「この」ユーザーのための「この」ダッシュボードです。そのユーザーは「この」コンテキストで働いていて、チャートがメインではないユーザーが実際にページを開くのは特定の1つのタスクをするためで、チャートはそれではありません。AIにはそれがわかりません。あなたにはわかります。

問題のフレーミング

AIは質問に答えます。デザイナーはどの質問が答える価値があるかを決めます。

PMが設定画面のリデザインを依頼し、あなたがClaudeに設定をリデザインするよう頼んだら、両者とも間違えています。面白い動きは、設定はリデザインが必要ないことに気づくことです。必要なのは分解であり、実際に使われる3つの設定をメインフローに浮かび上がらせ、残りを「もっと見る」ドロワーに格納することです。AIはその動きをしません。AIはより良い設定ページを作ります。

フレーミングの判断はあなたのものです。委託しないでください。

アクセシビリティの繊細さ

上でも言いましたが、繰り返す価値があります。AIはWCAG AAのコントラストチェックに対応します。それらしい代替テキストを書きます。正しく見えるARIAロールを生成します。

ドロワーの中のシートの中のモーダルが開くときのキーボードナビゲーションフローはわかりません。カードグリッド全体で「ボタン、ボタン、ボタン、ボタン」とスクリーンリーダーが読み上げることが技術的には準拠していて機能的には不親切であることはわかりません。一時停止コントロールのない自動再生動画が1つの基準以上に違反することはわかりません。

スクリーンリーダーでテストしてください。キーボードだけでテストしてください。モーション低減でテストしてください。AIは実際のテストの代わりにはなりません。出力がどれだけ自信ありげに見えても。

ブランドボイス

AIのコピーはAIのコピーに聞こえます。リズム、内輪のジョーク、抑制、文を本来より短く保つ意志。それはまだあなたです。

私が尊重するブランドはすべて、少し変わった声を持っています。少しリズムが外れている。あなたが驚くような順序で物事を言う。AIはそれを再現できません。AIはその反対になるよう学習されているからです。合理的になるよう学習されています。合理的さはブランドボイスの死です。

あなたのブランドボイスがLLMで再現できるなら、あなたのブランドには声がありません。

新しいインタラクションパターン

AIは存在するものについて学習されています。プロダクトが新しいものを必要とするなら、AIは平均的なものへとあなたを引っ張ります。

かつてGalileoに、本当に新しい機能のフローをモックアップするよう頼みました。最も近い既存パターンの完璧なバージョンを出力しましたが、それは間違ったパターンでした。1時間かけて新しいことをさせようとしましたが、どこにも辿り着けませんでした。タブを閉じ、15分で紙にスケッチしました。

答えが新しい場合、AIはアンカーです。戦わないこと。その部分には使わないこと。

正直なツール評価

よく開く順番でおおよそ：

  • Figma AI。レイヤーの名前変更（これだけでも価値あり）、「Lorem ipsum」ではないプレースホルダーコンテンツの生成、後で描き直す最初のアイコン案に使えます。「この画面をデザインして」は平凡です。雑務に使いましょう。
  • v0 / Galileo。デザイナーなしで社内ツールを立ち上げるエンジニアに最適。コンシューマー向けやブランデッドな体験では、縫い目がすぐに見えます。v0はインスピレーションの足場として使い、その後ゼロから作り直します。Galileoはあまり使いません。
  • Cursorによるデザインtoコード。最も過小評価されているAIデザインツール、文句なし。しっかりしたdesign systemと組み合わせれば、ハンドオフのループが意味のある速さになります。このリストの中でROIが最も高い単一の変更です。
  • ChatGPT / Claudeを思考パートナーとして。批評、コピー、命名、自分の論理の圧力テストには、上記のビジュアルツールよりも優れています。ビジュアル出力ではすべてに劣ります。夜11時に邪魔できる同僚のように扱いましょう。

それが、普通の週に実際に開くリスト全体です。

「AIが作った」とわかるサイン

このリストをFigmaにピン留めしています。これらが3つ以上リリースしようとしているものに現れたら、作り直します。

  • ヒーローやバリュープロップセクションに3つのアイコンが並ぶ3カードレイアウト。
  • 必要のなかったCTAのグラデーション。
  • 「Unlock」「Empower」「Seamless」を皮肉なしに使ったコピー。
  • ビジュアルウェイトを無視した完璧に均等なスペーシング（プロンプトに「一貫したスペーシングを使って」と書いたから全部16px）。
  • 多様な人々がノートパソコンを指差すストック写真風ヒーローイラスト。
  • 3段階の料金ページで真ん中が「最も人気」とラベル付けされ、誰も読まないチェックマークの比較表。
  • 「動詞+名詞」パターンの見出し。（「ワークフローを効率化する。」「チームを加速する。」「スタックをシンプルにする。」）
  • 「In today's fast-paced world.」で始まる本文コピー。

これらが3つあれば、誰もファイルを見る前にデザイン自体が告白します。作り直してください。

30日間プラン

この記事を読んでうなずくこともできますし、本当のテストを実行することもできます。後者の最もコストが低いバージョンを示します。

第1週：リサーチプロジェクト1つをクラスタリングする。 10件以上のユーザーインタビュートランスクリプトがあるプロジェクトを選びます。AIクラスタリング（Dovetail AI、Notion AI、またはClaude）で実行します。並行して自分で手動合成のパスを実施します。2つを比較します。AIが正しかったところ、自信満々に間違えたところ、自分が見落としていたことを発見したところを書き留めます。目的は合成を置き換えることではなく、信頼度を較正することです。

第2週：社内画面1つのプロトタイプをシードする。 v0、Figma Make、またはGalileoを使って、社内向けの画面をエンドツーエンドで1つ作ります。設定、テーブル、管理パネル、ブランドの磨きが必要ない何でも。通常のフローと比べてかかった時間を計り、最初からやり直さなければならなかった箇所を書き留めます。どの70%を残せて、どの30%を再構築しなければならなかったかをすぐに学べます。

第3週：マイクロコピーのバリエーションパスを実施する。 現在のプロジェクトのすべてのマイクロコピー（空の状態、エラー、ツールチップ、ボタンテキスト）をAIバリエーションジェネレーターで実行します。良い方を残し、悪い方を捨てます。AIが一貫して助けになったパターンと、一貫してボイスを平坦化したパターンを記録します。これが次のスプリントの個人的なチートシートになります。

第4週：開発ハンドオフをペアで進める。 このスプリントでエンジニアリングに渡すコンポーネント1つを選びます。エンジニアをCursorと厳格なdesign systemの制約でセットアップします。前スプリントの同等コンポーネントと比較して、ハンドオフ時間と手戻りのループを計測します。より速くクリーンであれば、これが最もレバレッジの高い変更です。永続的なものにしてください。

4週間。週1回の本物のテスト。終わる頃には、私の意見ではなく、あなた自身の意見が得られます。

補足：ACEフレームワークへの対応

チームがACEの語彙（Ingest、Analyze、Predict、Generate、Execute）を使っている場合、デザインAIがどこに当てはまり、どこに当てはまらないかを名付ける価値があります。

  • Ingest：リサーチトランスクリプト、サポートチケット、セッション録画を扱えるコーパスに取り込む。AIは大いに役立ちます。
  • Analyze：テーマのクラスタリング、頻度の浮かび上がらせ、定性データの外れ値の発見。AIは確認パスを経て役立ちます。
  • Generate：プロトタイプのシード、マイクロコピーのバリエーション、代替テキストの下書き、開発ハンドオフの足場。AIはガードレールの中で役立ちます。
  • Predict：次にどの問題を解くか、どのバージョンをリリースするか、どのトレードオフが重要か。あなたです。AIではありません。
  • Execute：実際のリリース決定とローンチ後のオーナーシップ。あなたとあなたのチームです。AIではありません。

これを言葉にしておくと、PMが「なぜAIにやらせなかったのか」と聞いてきたときに役立ちます。正直な答えは、AIは5つの能力のうち3つで役立ち、残り2つはデザイナーがテーブルに座る席を稼ぐ部分であるということです。AIにPredictやExecuteをやらせることは、AIにプロダクトをデザインさせることです。それは汎用的なプロダクトをリリースすることとも言え、デザイナーを持たない競合他社がすでにやっていることとも言えます。

よくある落とし穴

おおよそ自分が各ミスをした順番で、短いリスト：

  • 「完成して見えるから」という理由でAIの出力への批評をスキップする。 完成して見えます。完成していません。チームに通してください。
  • 評価を得る仕事の部分にAIを使う。 センス、フレーミング、新しいパターン。これらを外注すると、あなたは代替可能になります。そしてあなたを置き換えるのはAIではありません。そうしなかった次のデザイナーです。
  • 仕事のどの部分がAI支援かを隠す。 チームに伝えてください。透明性は信頼を築きます。誰かが気づいた日に隠蔽は信頼を壊します。
  • 自分の直感よりAIの自信を信じる。 AIは間違っているときでも自信ありげに聞こえます。あなたの直感は1,000のデザインで較正されています。直感を信じてください。
  • 週の間違った30%を最適化する。 月に1回しかしないタスクで30分節約するAIは、統合する価値がありません。繰り返す痛みを見つけてください。

成功の測り方

私が自分のAI使用に設定している基準を示します。

足場作りの仕事では速くリリースする：リサーチ合成、社内ツールのレイアウト、マイクロコピーの最初の下書き、開発ハンドオフ。重要な部分ではゆっくりと、より慎重にリリースする：フレーミングの判断、新しいパターン、ブランドボイス、アクセシビリティの繊細さ。

あなたのチームは、デザインの週次作業のどの20%が今や取り戻された時間かわかります。あなたはそれをより多くのインタビュー、より多くの批評、より多くの思考、繰り返しが積み重なる仕事のより多くの反復に使っています。

そして最も重要な指標：誰もあなたの仕事を見て「AIが作った」と思わない。

それが基準です。それに満たなければ、仕事の間違った部分にAIを使っています。

関連リンク