ボトルネックは「翻訳」だった
プロダクト開発で本当に時間がかかっていたのは、アイデアを形にすることではない。**各工程間の「翻訳」**だった。
- 戦略 → 要件定義
- 要件 → デザイン
- デザイン → チケット
- チケット → コード
- コード → フィードバック
- フィードバック → 再設計
工程が変わるたびにコンテキストが失われる。これが開発の本当のボトルネック。
AIが変えたのは、この翻訳レイヤーの削減だ。同一人物が意図・制約・実行をコントロールすると、プロダクトは指数関数的に速く、そして一貫性を持って進む。
3ツールスタック：Claude → Figma → Lovable
この翻訳レイヤーを最小化するスタックとして、以下の組み合わせがXで紹介されていた。
1. Claude — 戦略・分析フェーズ
プロジェクトはClaudeから始まる。「アプリを作って」ではなく、問題空間の理解から。
Claudeで行うこと：
- 市場・競合分析
- ユーザージャーニーのマッピング
- 不要な機能の早期発見
- 現実的なMVPスコープの定義
出力は「アイデア」ではなく、ビルド可能な構造：
- 機能リスト
- 受入基準
- エッジケース
- ユーザーフロー
- 構造化された指示
これがそのままデザイン・実装のインプットになる。
2. Figma — デザインシステム定義
ここが最大の変化点。
従来のFigma：40画面をピクセルパーフェクトに作成 AI時代のFigma：デザインシステムと制約を一度定義し、再利用
Figmaで定義するもの：
- コアコンポーネント（ボタン、カード、テーブル、入力）
- スペーシングルール
- タイポグラフィスケール
- レイアウトロジック
- インタラクションパターン
「アウトプットをデザインする」から「ルールをデザインする」への移行。ルールが明確であれば、下流のすべてが一貫する。
3. Lovable — 実装・統合
ClaudeとFigmaで定義したものをLovableに投入：
- 戦略がUIになる
- デザインルールが実コンポーネントになる
- ロジックがライブ機能になる
- データが使えるプロダクトになる
フロントエンド生成、バックエンド接続、DB構造化、認証・状態管理—すべてがここで統合される。
違和感があればチケットではなくプロンプトを調整する。フィードバックループが即時。
Figmaが「デザイン契約」になる理由
AIコードジェネレーター（Lovable, v0, Bolt等）に必要なのは、40画面のピクセルパーフェクトなモックアップではない。
必要なのは：
- コンポーネントリファレンス
- 明確な命名
- 一貫した構造
- ビジュアル制約
少数の、意図が明確なコンポーネント群のほうが、全状態を網羅したポリッシュされたモックアップよりも良い結果を生む。
Figmaは「成果物」から「デザイン契約」になる。
このワークフローで消えるもの
- 長いデザインハンドオフ
- エンジニアリングへの翻訳作業
- スプリントのボトルネック
- 早期の過剰エンジニアリング
- 合意形成の待ち時間
フィードバックループが短くなる。プロダクトを考えているその瞬間に、それを見ることができる。
デザイナーが有利な理由
デザイナーはすでに以下の思考様式を持っている：
- システム
- 制約
- ユーザー意図
- エッジケース
- インタラクションフロー
不足していたのは実行レバレッジ。AIがそれを与える。
デザイナーをエンジニアに変えるのではなく、デザイン意図が歪みなくプロダクションまで届くようになる。
実践のポイント
Figma側でやること
1. デザイントークン定義（色・スペーシング・タイポグラフィ）
2. コアコンポーネント作成（5-10種類で十分）
3. レイアウトパターンの確立（グリッド、カード配置）
4. 命名規則の統一（Button/Primary, Card/Product等）
Claude側でやること
1. 問題空間の明確化（誰の、何の問題か）
2. 競合分析（何が足りていて、何が足りないか）
3. MVP機能リスト（必須/あると良い/不要の3分類）
4. 受入基準の言語化（完了条件を明確に）
Lovable側でやること
1. Figmaコンポーネントのスクリーンショット投入
2. Claudeで作成した構造化指示の投入
3. 生成→確認→プロンプト調整のサイクル
4. 即座にデプロイして実機確認
まとめ
AI時代のFigmaは「40画面を作るツール」から「デザインルールを定義するツール」に変わった。
これにより：
- 翻訳レイヤーが減る
- 一貫性が保たれる
- 少人数でもスケールするプロダクトが作れる
MVP、内部ツール、SaaS v1—これらを一人で作れる時代。デザイナーが有利なのは、システム思考が最初から身についているから。
参考リンク
- Lovable公式: lovable.dev
- Claude: claude.ai
- Figma: figma.com