モックアップの終焉：コードによるデザインが2026年に勝利した理由

モックアップはもはや時代遅れだ。スケッチとしても、思考ツールとしても、ムードボードとしても、もはや意味をなさない。成果物としてのモックアップは、デザイナーが15年間最終成果物として納品してきたフラットなFigmaフレームは、2026年にその座を奪われた。しかも、エンジニアがその日のうちにデプロイできる実行可能なコンポーネントに敗れたのだ。

これは決して突飛な意見ではない。AIは今や、意図を記した段落を、ほとんどのデザイナーがFigmaにヘッダーを配置するよりも速く、動作するReactコンポーネントへと変換できる。デザイントークンは、アートボードに代わって真の情報源となった。2026年になってもなおFigmaデッキを最終成果物として販売しているスタジオは、ライブコードを納品できるチームに仕事を奪われ、価格差は四半期ごとに拡大している。

コードによるデザインの利点、勝利を収めた技術スタック、正直なトレードオフ、そして生き残る役割について。

モックアップは死んだ、ベンチがそれを打ち負かした

モックアップを納品物とする時代は終わり、2026年になっても未だにFigmaのデッキを最終成果物として販売しているスタジオは、自らの予算で顧客を失っている。モックアップのワークフローは15年間、明確な論理に基づいていた。デザイナーはFigmaでフラットフレームを納品し、エンジニアはフレームをコードに変換し、関係者がフレームを承認する。制作は後から追いつくが、場合によっては追いつかないこともある。しかし、制作がボトルネックでなくなった時点で、この論理は崩壊した。

2026年、ボトルネックは出力ではなく、判断力である。AIは数分で制作レイヤーを納品する。フラットなFigmaフレームは、パイプラインの中で最も速い部分ではなく、最も遅い部分となり、クライアントもそれに気づいている。午後に動作するコンポーネントを制作するチームは、ハイファイモックアップを一度納品するチームよりも、4サイクルも早く納品して学習できる。

モックアップが死んだのは、デザイナーのスキルが低下したからではない。ベンチ環境が向上したため、このツールは廃れました。

2026年に実際に何が変わったのか

変化は単一のツールによるものではなく、複数のツールが同時に臨界点に達したことによるものでした。Figma MakeはFigmaフレームを出力可能なReactに変換しました。shadcnを使用したCursorは、デザインに忠実なコンポーネントを低コストで作成することを可能にしました。v0、Bolt、Lovableは、完全なアプリケーションにおけるプロンプトから製品化までのループを完成させました。Claude Codeは、実際のレポジトリに人間が差分を反映する形で、実際のコーディングエージェントを導入しました。W3Cドラフトで正式に定義され、すべての本格的なチームに採用されたデザイントークンは、アートボードに代わって、信頼できる情報源となりました。

これらの要素はそれぞれ、2026年以前にも何らかの形で存在していました。変化したのは、それらがすべて同じ期間に成熟したことです。その結果、実行中のアプリケーションが成果物であり、アートボードがドラフトであるというワークフローが確立されました。その逆ではありません。

Figma MakeはFigmaコードエミッターへと変貌を遂げました

Figma Makeはフレームから直接コンポーネントを生成することで、アートボードとコードベースの間のギャップを解消しましたReact。フレームはFigmaドラフトとして扱われるようになった瞬間から、もはや成果物ではなくなりました。Makeを使用するデザイナーは、エンジニアリングチームにフレームを渡すのではなく、スプリントチームが軽微な修正を加えるだけでリポジトリに組み込める、動作するコンポーネントを渡すのです。

Makeは完璧ではありません。生成されたコードには依然としてシニアレベルのチェックが必要であり、レガシーファイルにおけるトークンマッピングは依然として不完全で、複雑なインタラクティブロジックには人間の手作業が不可欠です。しかし、2026年にフラットフレームが成果物であるかどうかという問いには、これらの問題は一切関係ありません。答えはノーです。Figmaが自らそう判断したのです。

Dev ModeとFigma MCPを組み合わせることで、Figmaから稼働中のアプリに至るまでの全フローが、数日かかっていた引き渡しから、同日中に完了するようになりました。

Cursorとshadcnでデザインに忠実なコードを低コストで作成

Cursorとshadcnを組み合わせることで、アクセシブルでブランドイメージに沿ったコンポーネントの作成にかかる労力が削減されました。これは、モックアップワークフローがこれまで正当化してきたまさにその労力です。「デザインに忠実な」本番用コンポーネントを必要とするデザイナーは、以前はスペーシング、タイプ、色、状態などを注釈付けし、エンジニアリングチームに引き渡すのに1週間を費やしていました。Cursorとshadcnを使えば、トークン対応のバリアントを含むコンポーネントを、デフォルトでアクセシブルな状態で、わずか15分でオンデマンドで作成できます。

この組み合わせが重要です。Cursorは実際のリポジトリを編集し、実際の差分を表示します。shadcnは、依存するパッケージとしてではなく、ユーザーが所有するコードとしてコンポーネントを提供します。 Tailwindトークンはどちらにもきれいにマッピングされます。その結果、Figmaフレームを犠牲にすることで、デザインに忠実な本番コードが実現します。これは、そもそもFigmaを出荷する最も一般的な理由を解消するものです。

v0、Bolt、Lovableがプロンプトから製品化までのループを完成させる

Vercelのv0、StackBlitzのBolt、そしてLovableは、プロンプトから実行可能でデプロイ可能なアプリまでを数分で完成させました。これらのツールはどれも完璧ではありません。しかし、3つとも、同じサーフェスのハイファイモックアップを作成するよりも高速です。

v0は、shadcnとTailwindをネイティブにサポートしているため、デザインに忠実なコンポーネントレイヤーで優れています。Boltは、同じセッション内でバックエンドを構築できるため、フルスタックブラウザプロトタイプで優れています。Lovableは、開発チームを持たない非エンジニアが製品を出荷できるように設計されているため、創業者向けMVPで優れています。それぞれのツールは、クライアントがムードボードに期待するスピードで、意図を具体的な作業環境へと変換します。

クライアントは、ムードボード作成にかかる時間で実際に動作するアプリが完成すると知ると、ムードボードがブリーフの決め手となることはなくなります。

Claude Code は、稼働中のアプリ上でリアルタイムコラボレーションを実現しました。

Claude Code は、実際のレポジトリ上で、デザイナーとエンジニアが共有できる作業環境を提供しました。これは、実際の製品そのものであり、単なる模造品ではありません。その仕組みはシンプルです。デザイナーは稼働中のアプリ上でClaude Codeとペアを組み、コンポーネントを編集します。変更内容は、同じタイミングでブラウザ上でテストされます。エンジニアは差分を確認し、リリースします。

このコラボレーションのループは、CSSの登場以来、業界で最もホワイトボードを使ったデザインに近いものです。ただし、ホワイトボードは本番環境のアプリ、マーカーは実際のコンポーネントの変更、消しゴムはGitの差分です。モックアップワークフローでは、これほど効率的なループには到底太刀打ちできません。

実際のコードベースでこのループがどのように動作するのか、より詳細な分析が必要な場合は、デザイナーのためのバイブコーディング と AIコードエディタの比較 を参照してください。

デザイントークンが真の情報源となる

2026年以降、アートボードではなくトークンが真の情報源となります。この変更により、Figma で採用されていた最終成果物としてのワークフローの大部分が廃止されました。色、間隔、タイポグラフィ、半径、モーション、高さといった要素が、デザインツールとコードベースが読み込むトークンファイルに格納されている場合、アートボードはトークンの定義ではなく、トークンのレンダリング結果となります。

W3Cデザイントークン仕様、スタイル辞書、Tailwindテーマファイル、そしてFigma のトークンプラグインはすべて、同じ考え方に収束しました。トークンは上流、あらゆるサーフェスは下流です。この方法で作業を進めるチームは、トークンファイルを編集し、Figmaの更新を監視し、実行中のアプリの更新を監視し、出荷します。このフローでは、最終成果物として出荷する価値のあるフラットなアートボードは存在しません。なぜなら、トークンファイル自体が既に最終成果物だからです。

これは、Figmaのデッキを販売しているほとんどのスタジオがまだ理解していない部分であり、価格が引き下げられている理由です。アップグレードパスについては、Figmaから開発チームへのデザイン引き渡しを参照してください。

2026年でもモックアップが依然として優位に立つ理由

モックアップは依然として4つの仕事に就く資格があります。そうでないと主張するのは不誠実であり、この議論の残りの部分を却下させるような誇張表現です。

まず、初期のアイデア出し。発散段階でフラットなFigmaフレームを作成する方が、30分間「もしこうだったらどうなるだろう」というラウンドのためにコードエディタを起動するよりも速いです。次に、ブランドスケッチ。ロゴ制作、アイデンティティの探求、タイポグラフィ研究、カラーシステムの実装前段階などは、トークンファイルが存在する前は、フラットなアートボードやIllustratorに留まります。3つ目は、スタックを使わない純粋なビジュアル探求です。新しい製品カテゴリ、ムードファーストのコンセプト、まだコードベースを持たないものなどです。4つ目は、クライアントへのブランドレベルの意思決定のプレゼンテーションです。この場合、成果物は表面的なものではなく、システムそのものです。

それ以外のすべて、つまり実際のユーザーに提供されるすべての画面、製品に組み込まれるすべてのコンポーネント、インデックス化されるすべてのページは、2026年にはコードの中に存在します。

新しい役割：ライブコンポジションエディターとしてのデザイナー

2026年のデザイナーは、フラットファイルを作成する人ではなく、稼働中のアプリ上でライブコンポジションエディターとして機能します。作品はアートボードではなく、出荷される表面的な部分で評価されます。成果物はフレームではなく、デプロイされたコンポーネントです。

この役割は、以前よりも要求されるものが多くなります。ライブコンポジションエディタは、コードを読み込み、トークンを編集し、実際の差分を出力し、実行中のUIに責任を持ちます。また、作業が本番環境と同じスピードで進み、価値はバリアント数ではなく判断力にあるため、報酬も高くなります。このシフトを担うシニアエンジニアは、ジュニアエンジニアが作成できるようなプレゼンテーション資料ではなく、実際に動作するアプリケーションを納品するため、高額な報酬を得ています。

2026スタック上でコードとして提供される製品UIが必要な場合は、Brainy を雇用するをご覧ください。AppBrainyは、差分の中にデザイナーを配置した完全な製品エンジニアリングを提供します。ClaudeBrainyは、AIを実際のコードベースのプロダクションレイヤーに変換するスキルパックとプロンプトライブラリを提供します。

Linear、Vercel、Anthropic、Anysphereの実際の仕組み

2026年に最高の製品UIを提供するチームは、共通のワークフロー構造を持っています。トークンは上流工程に、コードはキャンバスとして、AIはプロダクションレイヤーとして、デザイナーは差分の中に配置されています。 Linearのデザインチームは、コードベースを真の情報源として扱います。トークンもコンポーネントもリポジトリに存在し、デザイナーは実行中のアプリに対してプルリクエストを送信します。彼らの変更履歴や機能ページはFigmaのエクスポートではなく、製品そのものです。Vercelはホームページとv0サーフェスで同じ構造を採用し、デザイナーはデプロイ済みのアプリに直接プルリクエストを送信し、v0を使用して数分で新しいパターンバリエーションを生成します。Anthropicの製品チームは、デザイナーが実際のアプリコードを読み書きしながらClaudeの製品サーフェスを構築し、多くの場合、Claude Code自体が制作アシスタントとして機能します。CursorチームであるAnysphereは、自社製品を自ら使用しています。デザイナーはCursor内でCursorのコードベース上で作業しており、これはワークフローが実際に機能していることを示す最も強力な証拠です。

構造は一貫しています。これらのチームはいずれもFigmaを最終成果物として納品しません。彼らは皆、アートボードを思考ツールとして扱い、実行中のサーフェスを成果物とみなしています。

教訓：2026年になってもFigmaのプレゼンテーション資料を売り続けるスタジオ

2026年になってもFigmaのプレゼンテーション資料を最終成果物として売り込むスタジオは、ライブコードを納品するチームに案件を奪われています。価格差は四半期ごとに拡大しており、その理由は美的観点ではなく、構造的なものです。

Figmaのプレゼンテーション資料に4万ドルを提示するスタジオは、同じサーフェスをコードとして納品するチームに5万ドルを提示しています。クライアントは、同じビジュアル成果物に加えて、デプロイ済みのアプリ、トークンシステム、そして実行中のデザインシステムを、わずか25セント高いだけで手に入れることができるのです。計算は厳しいものです。Figmaのみを提供するスタジオは、案件を逃すことになります。これを1年間繰り返すと、スタジオは価格改定か方向転換を余儀なくされます。そして、ほとんどのスタジオは方向転換が遅れています。

これは予測ではありません。Calendlyの予約状況を見れば、まさに今起こっていることです。Figmaの成果物を製品そのものとして扱っているスタジオは、クライアントに次のベンダーを探すよう促しているのです。

よくある質問

モックアップは本当に時代遅れなのでしょうか？

2026年には、出荷される製品のUIにおける最終成果物としてのモックアップはもはや不要になります。しかし、初期段階の思考ツール、ブランドスケッチの場、そしてアイデアの発想を広げるためのキャンバスとしては、依然として有効です。変化しているのは成果物そのものであって、モックアップの役割の有無ではありません。

コードによるデザインとは具体的にどういう意味ですか？

コードによるデザインとは、デザイナーがフラットなアートボードではなく、実際のコードベースに変更を加えることを意味します。トークンを編集し、コンポーネントを編集し、アプリを実行し、差分を確認し、デプロイします。成果物はフレームではなく、実際に動作するサーフェスです。

デザイナーはエンジニアリングを学ぶ必要があるのか​​？

デザイナーはコードを読み、トークンを編集し、開発サーバーを稼働させ、差分を確認する必要があります。しかし、本番環境レベルのReactをゼロから書く必要はありません。本番コードの面倒な作業はAIが担います。デザイナーの仕事は、構成、判断力、センス、そして動作面を提供することです。

Figmaは終わったのか？

Figmaは終わっていません。Figma Make、Dev Mode、そしてFigma MCP Make Figmaは、新しいワークフローの出口ではなく、入り口です。アートボードは下書きであり、コードは成果物であり、Figmaはパイプラインの最前線に位置します。

ブランドワークとアイデンティティデザインはどうなるのか？

ブランドとアイデンティティデザインは、依然としてフラットデザインのツールに依存しています。ロゴ、フォント、カラーシステム、アイデンティティスケッチなどは、コードが作成される前の段階では、Figma、Illustrator、あるいはスケッチブックに描かれるべきものです。変化の焦点は、ブランドデザインではなく、プロダクトUIにあります。

この変化を最も早く実現するには？

3つのステップがあります。まず、shadcnとTailwindトークンを習得します。次に、CursorまたはClaude Codeとペアデザインを行い、実際のレポジトリで作業を進めます。そして、今四半期中に、デプロイ済みのプルリクエストとしてコンポーネントを1つリリースします。重要なのは、3つ目のステップです。

この変化の正しい側に立つには？

モックアップワークフローは長きにわたり活躍してきました。しかし2026年には、稼働中のアプリとの競争に敗れ、コードでプロダクトUIをリリースするチームは、より高い料金を請求し、より速く学習し、かつてFigmaデッキで制作していたスタジオが独占していた案件を獲得しています。

この変化の正しい側に立つための3つのステップ。まず、トークンを上流に移動してください。色、タイプ、間隔、半径、モーション、高さ。1つのファイルで、両方のツールが読み込み、アートボードが所有することはありません。次に、実際のレポジトリでshadcnまたは同等のツールを実行し、CursorまたはClaude Codeと組み合わせ、今四半期中にコンポーネントを1つデプロイ済みのプルリクエストとして出荷してください。3つ目に、成果物を変更してください。Figmaのデッキを最終版として販売するのはやめてください。出荷済みのコンポーネント、デプロイ済みのアプリ、実行中のサーフェスを販売してください。

2026スタック上でコードとして出荷される製品UIが必要な場合は、Brainy を雇用するを使用してください。AppBrainyは、差分にデザイナーを含む完全な製品エンジニアリングを出荷しています。ClaudeBrainyは、AIを実際のコードベースのプロダクションレイヤーに変換するスキルパックとプロンプトライブラリを出荷しています。Figmaのデッキを最終版として価格設定しているスタジオは、次の四半期のブリーフには含まれません。ブリーフに載るようにしてください。