ビジュアルAIツールはあふれているのに、実務で使いにくいと感じることがありますよね。ピクセルで出力すると修正できないんです。

a16zパートナーのYoko Liはこの問題をズバリ指摘しました。「今日最も興味深いビジュアルAIツールは、最終的な出力物を生成しようとするのをやめている。代わりに、出力物の背後にあるソースコードを生成している。」

3秒まとめ
ピクセルAIの限界 → コードネイティブの登場 → SVG · HTML · Lottie JSON → 編集可能 · 繰り返し修正 → プロダクションワークフローの再編

ビジュアルAIといえばMidjourneyですよね

Midjourney、DALL-E、Stable Diffusion。これらはすべて「ピクセルネイティブ」です。テキストプロンプトを受け取って、完成した画像を直接生成する仕組みです。

ピクセル生成が得意なことは確かにあります。テクスチャ、雰囲気、照明、リアリティ。マーケティングビジュアルやコンセプトアートには今も十分強力です。でも問題は「生成した後」に出てきます。

ピクセルネイティブAIコードネイティブAI
出力形式PNG、JPEG画像SVG、HTML/CSS、Lottie JSON
修正方法再生成またはPhotoshopで手作業IllustratorやコードエディタでそのままE編集
AIによる反復修正AIが自分の出力を見られない（目を閉じて再生成）Code → Render → Inspect → Reviseループ
制約条件の検証不可能（ピクセルに制約はない）色・サイズ・構造をコードで自動検証
プロダクション連携画像ファイルを手動で受け渡しコンポーネント再利用、CI/CD自動化が可能

a16zがコードを書くAIに$8.3Mを投じた理由

2026年、a16zがQuiver AIに$8.3Mのシード投資を実行しました。 Quiver AIが作るのは画像生成AIではありません。テキストプロンプトやラスター画像を受け取り、SVGコードを直接生成するAIモデルです。

なぜこのアプローチが強いのか、Yoko Liは3つの理由を挙げています。

  1. 反復修正ができる
    コードネイティブシステムは「Code → Render → Inspect → Revise」ループを回せます。ピクセルAIは出力を見ても修正する方法がありませんが、コードならAIが自分の作ったものを確認しながらデバッグできます。Liはこれを「AIが視覚的プログラムをクローズドループ環境でデバッグすること」と表現しています。
  2. 検証が可能
    コードには制約条件を設けられます。カラーパレットの遵守、特定のサイズ内に収まるか、コンポーネントの再利用可否――ピクセルでは検証不可能ですが、SVG・HTML/CSSはコードなので自動でチェックできます。
  3. 精度が違う
    3Dアセットが良い例です。「一方向から見てそれらしい」画像では、プロダクション3Dには使えません。一貫したジオメトリ、マテリアル、パーツ階層が必要で、BlenderスクリプトやUSD scene graphのようなコードでのみ表現できます。

結果として、ビジュアルAI市場はランタイム（実行環境）中心に再編されつつあります。ブラウザ（HTML/CSS）、ベクターレンダラー（SVG）、アニメーションプレイヤー（Lottie）、3Dエンジン（Blender、USD）。各ランタイムに特化したAIツールが生まれる構造です。

実際にどんなツールがこれをやっているのか

$8.3M
Quiver AI a16zシード投資額
33%↓
Arrow 1.1 SVG生成コスト削減
50%↓
ベクター化コスト削減

Quiver AI — SVG生成：テキストプロンプトやラスター画像から編集可能なSVGロゴ、アイコン、イラストを生成します。Arrow 1.1モデルでは、テキスト→SVG生成コストが33.3%削減、画像ベクター化は50%安くなりました。[[cite:3][cite:4]] MCPサーバーも提供しているので、CursorやClaudeのようなエージェント環境から直接SVGをプロジェクトに生成・挿入できます。

Paper — HTML/CSSキャンバス：「エージェント時代のためのコネクテッドキャンバス」を掲げるデザインツールです。Figmaのような見た目ですが、ベースがHTML/CSSなので「デザインがコードとしてexportされます。翻訳で失われるものはありません」と言います。 Claude、Cursor、GitHub CopilotなどのAIエージェントがMCP経由でデザインキャンバスに直接アクセスして作業できます。

他にも注目すべきツール

アニメーション領域ではOmniLottieがLottie JSONをAIが直接生成できるコマンドシーケンスに変換します。3D領域ではVIGAがBlenderフィードバックループを使って3Dアセットを生成し、Articraft3Dが関節付き3D生成をセマンティックプログラム記述として扱います。

今すぐ試せる方法

  1. Quiver AIアカウントを作成する
    quiver.aiで無料アカウントを作成してください。ウェブアプリ（app.quiver.ai）でロゴやアイコンをテキストプロンプトから生成してみると、ピクセルAIとの違いをすぐに実感できます。
  2. SVG出力を編集してみる
    生成されたSVGをIllustratorやFigmaにドラッグ＆ドロップで開いてください。ピクセル画像と違い、レイヤー構造がそのまま生きています。色、サイズ、形状を自由に調整できます。
  3. CursorにMCP接続する（開発者向け）
    Cursor Settings → MCPでエンドポイント https://app.quiver.ai/mcp を追加してください。その後、エージェントとの会話中に「このプロジェクト用のアイコン3つをSVGで作って/src/assetsに入れて」と自然言語で依頼するだけです。
  4. Paperでエージェント設計を体験する
    paper.designのデスクトップアプリをインストールしてMCPを接続すると、ClaudeやCursorがHTML/CSSベースのキャンバスで直接デザイン作業をしてくれます。「エージェント時代のFigma」の感触を体験できます。[[cite:5][cite:6]]

ピクセルAIがなくなるわけではありません

MidjourneyやDALL-Eの雰囲気・テクスチャ表現はコードネイティブで代替するのが難しいです。今最も現実的なアプローチは「ピクセルAIでムード・リファレンスを作り、コードネイティブAIで編集可能なアセットを生成する」を組み合わせることです。

🔗

더 깊이 파고 싶다면

The Next Frontier of Visual AI Is Code
a16zパートナーYoko Liの原文。コードネイティブビジュアルAIの理論的フレームワークと市場分類が最も体系的にまとめられています。
Introducing QuiverAI MCP: SVG generation for agent workflows
MCP経由でエージェントワークフローにSVG生成を統合する方法。Cursor連携例も含む。
Introducing Arrow 1.1, a step forward in SVG generation
Arrow 1.1の改善内容と33.3%/50%コスト削減データ。
A Real Space to Design in the Age of Agents
Paperチームのエージェント時代のデザイン哲学。HTML/CSSネイティブキャンバスが必要な理由を解説。
Paper — The connected canvas for teams shipping with agents
Paper公式サイト。HTML/CSSベースの設計とAIエージェント統合方式を確認できます。
QuiverAI — Building the Future of Vector Design
Quiver AI公式サイト。Arrowモデルのデモ、API、MCP連携方式を確認できます。