はじめに
アプリ開発において、画面遷移図の作成から実装まで、どのくらい時間をかけていますか？
「FigJamで描いた画面遷移図 → ClaudeCodeで自動実装」
この組み合わせを使えば、企画段階で作成した画面遷移図から直接アプリの骨組みを生成できます。各画面の詳細実装を並行して進められるため、開発効率が大幅に向上します。
今回は実際に試した手順と結果をご紹介します。
この方法のメリット
- 🚀 開発スピードの向上: 画面遷移図から直接コード生成
- 🔄 並行開発の実現: 全画面の骨組みができるため、チーム開発で各画面を並行実装可能
- 👀 早期検証: 完成形のイメージを早い段階で確認できる
- 🎯 実装漏れの防止: 遷移図に描いた画面がすべてコード化される
前提条件
- Figmaアカウント（FigJam使用）
- ClaudeCode環境
- Xcodeプロジェクト（今回はiOSアプリを例に説明）
手順1: Figmaアクセストークンの取得
まず、FigmaのAPIにアクセスするためのトークンを取得します。
- Figmaの画面左上「アカウント」→「設定」→「セキュリティ」に移動
- 「Personal access tokens」でトークンを作成
- ファイルコンテンツの読み取り権限を設定（今回は全項目読み取りのみで設定）
手順2: MCPサーバーの設定
FigmaとClaudeCodeを連携させるため、MCPサーバーを設定します。
claude mcp add figma-optimized -s user \
-- npx -y figma-developer-mcp --figma-api-key=your_figma_access_token_here --stdio
削除する場合は以下のコマンドを使用：
claude mcp remove figma-optimized
接続が不安定な場合の対処法
稀にFigmaとの連携が不安定になることがあるため、以下のスクリプトを作業前に実行することをおすすめします：
#!/bin/sh
# 現在のfigma-mcp設定を削除
claude mcp remove figma-optimized
# 再度設定を追加
claude mcp add figma-optimized -s user \
-- npx -y figma-developer-mcp --figma-api-key=your_figma_access_token_here --stdio
手順3: FigJamで画面遷移図を作成
画面遷移図作成のポイントは以下の通りです：
画面の描き方
- 正方形のシェイプで各画面を表現
- シェイプ内に記載する情報：
- 画面タイトル
- ファイル名
- モーダル表示の場合は「modalview」と追記
遷移の描き方
- コネクタで画面間の遷移を表現
- アクション系の説明はコネクタにテキストを追加
- 構成の記述：矢印なしのコネクタ（TabBarController、NavigationControllerなど）
- 画面遷移：矢印ありのコネクタ
セクションでの整理
遷移図全体をセクションで括ります。セクションにすることで：
- リンクの取得が可能
- ⌘L（Cmd+L）でURLをコピーできる
手順4: ClaudeCodeでの実装
以下のようなプロンプトでClaudeCodeに指示します：
下記、リンクの内容を取得してiOSアプリの画面構成を作成してください。
画面には仮ボタンとタイトルのみを配置しコメントで仮実装とわかるようにしておいてください。
画面遷移、モーダル表示は本実装でも使用できるようメソッド化してください。
詳細実装は後から実施します。仮画面で一通りの画面遷移がわかるようにしておきます。
また、すべての画面を作成しておくことで、その後の実装を並行して進められるようにします。
各画面の記述は別ファイルで生成してください。
すでに、Xcodeのプロジェクトは作成済みなのでその中で実装を進めてください。
Swift, UIKitでの実装をお願いします。
[ここにFigJamのセクションリンクを貼り付け]
フレームワーク指定の例
Swift, UIKitSwift, SwiftUIReact NativeFlutter
など、お使いの技術スタックに合わせて指定してください。
実装結果
ClaudeCodeが以下を自動生成してくれます：
- 各画面のViewControllerファイル
- 画面遷移メソッド
- モーダル表示のメソッド
- 基本的なUI構成（タイトル、仮ボタン）
すべてコメント付きで「仮実装」であることが明記されるため、後から詳細実装に取り掛かりやすくなります。
まとめ
この方法を使うことで：
- 企画段階の成果物（画面遷移図）を直接コードに変換
- 開発チーム全体で並行作業が可能
- 早期段階でアプリの全体像を把握
特に、複数人での開発やアジャイル開発において威力を発揮します。ぜひお試しください！
参考
もし接続やMCP設定で詳しい方がいらっしゃいましたら、コメントでアドバイスいただけると嬉しいです！