← すべての記事

AIを生き抜くデザインキャリア

ZipRecruiterでプロダクトデザインを12年間リードし、Apple、Disney、Instacart、Marvelのチームと仕事をする中で、一度気づいたら見過ごせないパターンに気づきました。すべてのパラダイムシフトは同じ種類のスキルを淘汰し、同じ種類のデザイナーを評価するということです。

まとめ

ZipRecruiterでプロダクトデザインVPとして12年間務めた後、独立して開発を始めました。その間、3つのパラダイムシフトが特定のデザインスキルを淘汰し、同じ根本的な能力を評価し続けるのを見てきました。このパターンは予測可能です。ツールの習熟は消滅し、判断力は複利的に成長します。AIを生き抜くデザイナーは、次のツールをマスターする人ではありません。システムで思考し、解決策の前に問題を定義し、AIが生成したアウトプットが本当にユーザーの役に立つかを評価できる人です。


パターン:すべてのパラダイムシフトが淘汰するものと残すもの

Don Normanが「ユーザーエクスペリエンス」という用語を生み出したのは1993年のことです。1 この体系化された分野はまだ30年しか歴史がなく、多くのデザイナーのキャリアよりも短いのです。その30年間で、すでに3回のパラダイム刷新を経験しています。

印刷からWebへ(1995-2005)

淘汰されたもの: 印刷レイアウトの精密さ、CMYKカラーマネジメント、固定タイポグラフィ、物理的な製造知識(用紙、製本、校正刷り)。

残ったもの: ビジュアルヒエラルキー、タイポグラフィの基礎、色彩理論、グリッドシステム、情報の構造化。

「Quark XPressを使えます」と言ったデザイナーは苦戦しました。「人間がどのように視覚情報をスキャンするか理解しています」と言ったデザイナーは即座に移行できました。2

Webからモバイルへ(2007-2015)

淘汰されたもの: デスクトップ固有のパターン(右クリックメニュー、ホバーステート、マルチウィンドウワークフロー)、ピクセルパーフェクトな固定幅レイアウト、Flashアニメーション。

残ったもの: 情報アーキテクチャ、ユーザーリサーチの方法論、ビジュアルヒエラルキー、インタラクションデザインの原則。

同じ構図が繰り返されました。ツール固有のスキルは消滅し、原則に基づくスキルは存続しました。3

画面ベースからAIアシストへ(2023年〜現在)

圧力を受けているもの: UIコンポーネントデザイン、ビジュアル制作、ワイヤーフレーミング。AIは自然言語の記述からこれらすべてを処理できます。

残るもの: ユーザー心理学、リサーチ方法論、システム思考、問題定義、評価基準の設計。

新たに求められるもの: プロンプトデザイン、AIアウトプットの評価、会話デザイン、マルチモーダルインタラクションデザイン、AIの振る舞いの設計(制約とガードレール)。4

私はこの最後の変遷を直接体験しました。FastAPIとHTMXで個人サイトを構築し始めた際、Claude Codeを使ってUIコンポーネントを生成しました。コンポーネントは水準に達していました。しかし、システムなしに組み立てられた水準レベルのコンポーネントは、まとまりのない体験を生み出します。AIがパーツを生成し、私がパーツのつながりをデザインしたのです。


今、デザインのレバレッジを生むもの

ソリューションの生産ではなく、問題の定義

ZipRecruiterでVision Sprintをリードしたとき、8人のデザイナーチームは最初の2週間、Figmaを一切開きませんでした。求職者にインタビューし、採用パイプラインをマッピングし、コアとなる問題はジョブ検索のインターフェースではないと特定しました。問題は、候補者が本当に求めているものを自然言語で表現できないことでした。それまで受け取っていた「検索をリデザインしてほしい」というブリーフは、すべて間違った問題を解こうとしていたのです。5

平均的なデザイナーはブリーフを受け取り、モックアップを制作します。本当の価値を生み出すデザイナーはブリーフ自体に疑問を投げかけます。「設定ページをデザインして」は「ユーザーが実際に変更する設定はどれか? 合理的なデフォルト値を設定して、ページ自体をなくせないか?」になります。6

AIは設定ページのバリエーションを数分で50個生成できます。サポートチケットを減らし、アクティベーションを向上させ、ユーザーのメンタルモデルを尊重するバリエーションを選ぶには、どのモデルにも再現できない判断力が必要です。

画面デザインではなく、システム思考

設定ページは、オンボーディング(デフォルトが設定される場所)、通知(設定が反映される場所)、アカウント管理(削除が行われる場所)とつながっています。ページを単体でデザインすれば機能します。システムの一部としてデザインすれば、体験に一貫性が生まれます。7

現在のサイトのデザインシステムを構築した際、すべての決定はシステム的でした。1.2のタイプスケール比率(12px、14、16、18、21、25、30、36、43、52、62、80px)は自己調整するビジュアルリズムを生み出します。8ptのスペーシンググリッド(8、16、24、32、48、64、96、128px)は恣意的なスペーシング判断を防ぎます。3段階のテキスト透明度(100%、65%、40%)は追加の色なしにヒエラルキーを確立します。これらは美的な選択ではありません。将来のすべてのデザイン判断をより速く、より一貫性のあるものにするシステム制約です。

このシステムは複利的に効果を発揮します。同じトークンセットで12のプロジェクトを構築した後、以前はビジュアル実験に数時間かかっていたレイアウト判断が数秒でできるようになりました。

分野横断的な翻訳力

最も価値あるデザイナーは3つの言語を話します。ユーザーの言語(人々が必要としているもの)、ビジネスの言語(収益を生むもの)、エンジニアリングの言語(技術的に実現可能なもの)です。

ZipRecruiterで学んだのは、「このインタラクションパターンはサポートチケットを15%削減し、年間20万ドルを節約でき、APIエンドポイントの変更1つで実現できます」という説明が、モックアップでは決して達成できない合意形成を生み出すということです。8 Apple、Disney、Penguin Random House、Marvel、ZipRecruiter、Instacart、HarperCollins、Introlの8社を通じて、分野間の翻訳ができるデザイナーは、最も洗練されたモックアップを作るデザイナーを常に上回っていました。

プロフェッショナルな注意力

Mike Monteiroは「デザイナーとは、世界に注意を払うことに対して報酬を得る人間である」と書きました。9 10年間のプロフェッショナルな注意の蓄積により、デザイナーは何千ものインタラクションパターン、失敗モード、優れたソリューションをカタログ化しています。AIはトレーニングデータセットを検索できます。熟練したデザイナーは、データセットでは符号化できない文脈的判断力を備えた、10年分の実務経験を検索できるのです。

私は16の優れたプロダクトを詳細に研究してきました。Warp、Vercel、Linear、Raycast、Stripe、Figma、Framer、Notion、Craft、Bear、Arc、Things、Flighty、Halide、Superhuman、そしてPerplexityです。それぞれインタラクションの処理方法は異なりますが、根底にある原則(段階的開示、ビジュアルウェイトの配分、キーボードファーストのレスポンシブ性)は同じです。Superhumanの100msルールとLinearの50msレスポンスターゲットは、恣意的なパフォーマンス仕様ではありません。日々のセッション全体にわたって複利的に効果を発揮するインタラクションコストの設計判断なのです。


複利的に成長するスキル vs. 期限切れになるスキル

複利的に成長:ビジュアルヒエラルキー

ユーザーは予測可能なパターンでインターフェースをスキャンします。テキストが多いページではFパターン、画像が多いページではZパターンです。10 一度内面化されると、この原則はWebサイト、モバイルアプリ、ダッシュボード、メールテンプレート、プレゼンテーションに意識せずとも適用されます。人間のスキャン行動はメディアが変わっても変わらないため、このスキルはすべてのプラットフォームシフトを越えて転用できるのです。

複利的に成長:インタラクションコストの削減

すべてのインタラクションには認知的コストと運動的コストが伴います。クリックはタイピングよりコストが低い。認識は想起よりコストが低い。より少ないクリック、より少ない判断、より少ないモード、より少ない状態にこだわるデザイナーは、時間とともにユーザー満足度を蓄積するプロダクトを生み出します。11 インタラクションコストの高いプロダクトは、解約を促すフラストレーションを蓄積します。

複利的に成長:デザインシステムアーキテクチャ

一貫性のあるデザインシステム(トークン、コンポーネント、パターン、テンプレート)を構築するデザイナーは、将来のすべての機能開発を加速するインフラを作ります。最初の機能はシステムなしの場合と同じ時間がかかります。10番目は30%短縮されます。50番目は60%短縮されます。12 5つのプロダクトチームで共有されるデザインシステムは、その加速を5倍に増幅させます。

期限切れ:ツールの習熟

PhotoshopはSketchに取って代わられました。SketchはFigmaに取って代わられました。Figmaも静的モックアップに代わる何かに取って代わられるでしょう。各ツールの支配期間は5〜10年です。ツールの習熟は現在の雇用には必要ですが、キャリアのレジリエンスには不十分です。

「私はFigmaデザイナーです」は、1998年の「私はQuark XPressデザイナーです」と同じくらい脆いのです。

期限切れ:ビジュアル制作

レイアウト、スペーシング、色の適用、コンポーネントの組み立ては急速に自動化されています。AIは記述からプロダクションレディなデザインをますます高い精度で生成します。その下にある耐久性のある層とは、レイアウトがプライマリアクション周りにもっと余白を持つべきだと知っていることが判断力です。要素を動かしてその余白を作ることが制作です。判断力は存続します。制作は自動化されます。13


デザインエンジニアという道

最もレバレッジの高い個人貢献者は、デザインの判断力とエンジニアリング能力を兼ね備えています。VercelやLinearのような企業はこのプロファイルを明確に求めて採用しており、デザインとエンジニアリング間のハンドオフがレイテンシ、再現性の損失、調整コストを生むことを認識しています。14

私は偶然このプロファイルになりました。ZipRecruiterを離れた後、すべてを自分で構築しました。Ace Citizenship(App Storeに公開されたiOSアプリ)、このWebサイト(FastAPI + HTMX + プレーンCSS)、そして他の10プロジェクトです。インタラクションを頭の中でデザインし、Claude Codeを実装パートナーとして直接構築します。デザイナーとエンジニアが同一人物なので、ハンドオフはゼロです。

結果として、初回の試行でLighthouseスコア100/100/100/100を達成しました。専任のフロントエンド開発者より優れたエンジニアだからではなく、すべてのパフォーマンス判断がデザイン判断でもあったからです。CSSを75トークンのクリティカルインラインスタイルに削減しました。Webフォントの代わりにシステムフォントを選択しました(100msのレイアウトシフトを排除)。Reactの代わりにHTMXを使用しました(JavaScriptペイロードを95%削減)。各判断は同時にパフォーマンス最適化でありデザイン選択でもありました。ページ読み込みの高速化、視覚的なジャンクの減少、インタラクションループの引き締めです。15

ハンドオフがないということは、再現性の損失がないということです。デザインしたものがそのまま、ユーザーが体験するものになりました。デザインチームの構築では、このデザインエンジニアの統合をチーム規模で機能させる組織構造を解説しています。またデザインスタディ集には、このアプローチに必要なパターン認識を養うために研究した16のプロダクトをまとめています。


反論:エンジニアリングの判断力も依然として重要

「デザインがボトルネックになる」という主張は誇張です。アーキテクチャの決定、パフォーマンスエンジニアリング、セキュリティ設計、システム思考は、AIが支援はしても代替はできない高度に専門的な仕事です。数百万人のユーザーに対応するシステムを設計する10xエンジニアは、10xデザイナーの価値に匹敵する価値を生み出します。16

最も有利なポジションは両方を兼ね備えることです。次の10年を最も上手く乗り越えるデザイナーは、デザインの判断力とエンジニアリング能力の交差点で活動するでしょう。一方の分野がより重要だからではなく、両者の境界を取り除くことがプロダクト開発における最大の摩擦点を解消するからです。


今後10年のキャリア戦略

この記事は、デザインの判断力とエンジニアリング実装の交差点を集めたデザインエンジニアリングのハブに属しています。テイストは技術的なシステムであるでは、この議論をさらに広げています。AIを生き抜く判断力とは直感だけのものではなく、検証可能なインフラとして符号化されたテイストなのです。デザインガイドは、本稿で扱ったデザイン原則の実務リファレンスとなります。

耐久性のある基盤を築く。 学習時間の60〜70%を、過去3回のパラダイムシフトを生き延びたスキルに投資しましょう。人間の心理学、リサーチ方法論、情報アーキテクチャ、システム思考、問題定義です。これらはプラットフォームの変化とともに減価するのではなく、キャリア全体にわたって複利的に成長します。17

ツールの流暢さを維持し、ツールをアイデンティティにしない。 現在のツールはプロフェッショナルなスピードで実行できるレベルまで学びましょう。どのツールにもプロフェッショナルとしてのアイデンティティを委ねてはいけません。

隣接する分野を学ぶ。 パラダイムシフトを最も上手く乗り越えるデザイナーは幅広く読みます。心理学、ビジネス戦略、エンジニアリングの基礎、新興テクノロジーなどです。隣接する知識は、デザインコミュニティがベストプラクティスを公開する前に、新しいテクノロジーがユーザーエクスペリエンスにどう影響するかを見抜くパターン認識を育てます。

制作だけでなく、評価を鍛える。 AIがより多くのデザイン成果物を生成するようになるにつれ、品質を評価し、ユーザーに役立つものを見極め、そうでないものを却下する能力が最も重要なスキルになります。AIが生成した50のバリエーションを評価し、正しいものを選べるデザイナーは、手作業で1つのバリエーションを制作するデザイナーよりも大きな価値を生み出します。


よくある質問

AIによる変化を生き抜くデザインスキルは何ですか?

過去のあらゆるパラダイムシフト(印刷からWeb、Webからモバイル)を生き延び、AIの時代も生き抜くスキルは、ユーザー心理学、リサーチ方法論、システム思考、問題定義、評価基準の設計、そして分野横断的な翻訳力です。ツールの習熟とビジュアル制作は圧力を受けています。AIが自然言語の記述からコンポーネントデザイン、ワイヤーフレーミング、レイアウトをますます高い精度で処理できるようになったためです。

デザインエンジニアという道とは何ですか?

デザインエンジニアは、デザインの判断力とエンジニアリング能力を兼ね備え、レイテンシ、再現性の損失、調整コストを生むデザインとエンジニアリング間のハンドオフをなくします。VercelやLinearのような企業は、このプロファイルを明確に求めて採用しています。著者はZipRecruiterを離れた後にこのプロファイルとなり、Claude Codeを実装パートナーとしてすべてを直接構築してLighthouseスコア100/100を達成しました。すべてのパフォーマンス判断がデザイン判断でもあったからです。

デザイナーは学習時間をどう配分すべきですか?

60〜70%は、キャリア全体にわたって複利的に成長する耐久性のあるスキルに投資しましょう。人間の心理学、リサーチ方法論、情報アーキテクチャ、システム思考、そして問題定義です。ツールの流暢さは維持しつつ、どのツールもプロフェッショナルとしてのアイデンティティにはしないこと。隣接する分野(ビジネス戦略、エンジニアリングの基礎)も学びましょう。分野横断的なパターン認識こそが、デザインコミュニティがベストプラクティスを公開する前に、新しいテクノロジーがユーザーエクスペリエンスにどう影響するかを見抜くからです。

なぜソリューションの生産より問題の定義が重要なのですか?

AIはどんなデザインでも数分で50個のバリエーションを生成します。サポートチケットを減らし、アクティベーションを向上させ、ユーザーのメンタルモデルを尊重するバリエーションを選ぶには、どのモデルにも再現できない判断力が必要です。ブリーフに疑問を投げかけるデザイナー(「ユーザーは本当に設定ページを必要としているのか、それとも合理的なデフォルト値でなくせるのか?」)は、間違ったソリューションの最も洗練されたモックアップを作るデザイナーよりも大きな価値を生み出します。


参考文献


  1. Norman, Don, “The Term ‘UX’,” 2016. 用語の起源と変遷。 ↩

  2. Zeldman, Jeffrey, Designing with Web Standards, New Riders, 2003. ↩

  3. Wroblewski, Luke, Mobile First, A Book Apart, 2011. ↩

  4. Nielsen, Jakob, “AI and UX: The Future of User Experience,” Nielsen Norman Group, 2024. ↩

  5. ZipRecruiterにおけるVision Sprintデザインチームリードとしての著者の経験、2024年。 ↩

  6. Norman, Don, The Design of Everyday Things, Basic Books, 2013. 問題定義とソリューションデザイン。 ↩

  7. Meadows, Donella, Thinking in Systems, Chelsea Green, 2008. ↩

  8. Greever, Tom, Articulating Design Decisions, O’Reilly, 2015. ↩

  9. Monteiro, Mike, Design Is a Job, A Book Apart, 2012. ↩

  10. Nielsen, Jakob, “F-Shaped Pattern of Reading on the Web,” Nielsen Norman Group, 2006. ↩

  11. Krug, Steve, Don’t Make Me Think, New Riders, 2014. ↩

  12. Frost, Brad, Atomic Design, self-published, 2016. ↩

  13. Figma, “AI-Powered Design: From Production to Evaluation,” 2024. ↩

  14. Rauchg, Guillermo, “Design Engineers,” 2024. ↩

  15. 著者のLighthouse監査データ、“How I Got a Perfect Lighthouse Score”に記録。 ↩

  16. Brooks, Frederick P., The Mythical Man-Month, Addison-Wesley, 1975. エンジニアリングのレバレッジと10x開発者の概念。 ↩

  17. Cross, Nigel, Design Thinking, Bloomsbury, 2011. ↩

関連記事

エージェントのインターフェースこそ制御基盤です

エージェントのインターフェース設計は、権限、記憶、実行記録、証拠、復旧、判断基準を扱う運用層です。自律型AIエージェントが信頼に値するかどうかは、そこで決まります。

13 分で読める

エージェント型デザインは制御インターフェースのデザインです

エージェント型デザインは、見た目のよいチャットボックスではありません。自律的に動くソフトウェアを可視化し、中断でき、監査でき、信頼に値するものにする制御インターフェースです。

15 分で読める

16のデザインケーススタディ:私が取り入れた4つのパターン

16のプロダクトを深く研究した結果、4つの横断的なパターンがインターフェースの作り方を変えました。そこで学んだこと、そして盗んだものを紹介します。

12 分で読める