エンジニアの思い立ったが吉日

このブログでは、「あ、これ面白い!」「明日から仕事で使えそう!」と感じたIT関連のニュースやサービスを、難しい言葉を使わずに分かりやすく紹介しています。ITに詳しくない方にも楽しんでもらえるような情報を発信していくので、ぜひ「継続的な情報収集」の場としてご活用ください。

Figma×Claudeで爆速図解作成!AI生成機能の全貌と活用術

業務フローの整理やシステム設計図の作成、正直なところ「面倒くさい」と感じていませんか? 「頭の中にはイメージがあるのに、ツールで形にするのに時間がかかる」「会議中にササッと図解できれば議論がスムーズなのに……」

そんなエンジニアやPMの方に朗報です。 2026年1月、FigmaがAnthropic社との連携を強化し、生成AI「Claude」との対話から直接「FigJam」のダイアグラムを生成できる機能を発表しました。

これまでの「AI機能」とは一線を画すのは、チャット画面で相談しながら、そのまま裏側で図解を作ってくれるという点。まるで優秀なアシスタントに口頭で指示を出すような感覚です。

本記事では、この新機能の仕組みから具体的な使い方、業務効率を劇的に改善するユースケースまで徹底解説します。

1. FigmaとAnthropicが提携!何がすごいのか?

これまでもFigmaにはAI機能(Figma AI)がありましたが、今回の連携は「ClaudeのインターフェースからFigJamを直接操作できる」という点で革新的です。具体的に何が変わるのか、技術的な背景も含めて解説します。

「Claude for FigJam」連携の仕組み

今回の連携の鍵となるのが、MCP (Model Context Protocol) という技術です。 従来、ChatGPTやClaudeなどのLLM(大規模言語モデル)は、外部ツールの内部データを直接いじることが苦手でした。しかしMCPを使うことで、ClaudeがFigma(FigJam)という「手」を持ち、ユーザーの指示に従って安全にデータを生成・編集できるようになります。

つまり、Figmaを開いてメニューを探す必要はなく、Claudeのチャット画面で「この仕様書のフロー図を作って」と頼むだけで、連携されたFigJam上に図ができあがるのです。

テキスト・画像・PDFから図解を一発生成

この機能の強力な点は、入力ソースの多様性にあります。

  • テキスト: 「〇〇の認証フローを描いて」という指示
  • 画像/スクショ: ホワイトボードの手書きメモの写真
  • PDF/ドキュメント: 数十ページのPRD(プロダクト要求仕様書)

これらをClaudeに投げ込むだけで、内容を解析し、構造化されたダイアグラムとして出力してくれます。

なぜ「Claude」なのか?LLMの特性と相性

エンジニア界隈でClaudeが人気の理由は、その「文脈理解力」と「長文処理能力」の高さにあります。 複雑なシステム要件や入り組んだ業務プロセスを正確に読み解き、論理的な図解に落とし込む作業において、Claudeの推論能力は非常に相性が良いのです。


2. 【実践】FigJamでのAI生成機能の使い方とコツ

では、実際にどのように使うのか、セットアップから実務でのコツまでをステップバイステップで見ていきましょう。

導入手順(セットアップ)

利用には、以下の環境が必要です。

  • Claudeの有料プラン(Pro, Team, Enterpriseなど)
  • Figmaアカウント

  • Claudeの画面を開き、連携アプリ(Integrations)の設定から「Figma」を選択します。

  • 認証画面が表示されるので、Figmaアカウントでログインし、アクセスを許可します。
  • これで準備完了です。Claudeのチャット画面にFigmaアイコンが表示されるようになります。

基本的なプロンプトの型

精度高い図解を出力するための「型」があります。

プロンプト例: 「添付した要件定義書(PDF)を読み込み、ユーザー登録から決済完了までのシーケンス図をFigJamで作成してください。アクターは『ユーザー』『フロントエンド』『APIサーバー』『決済代行会社』の4つに分けてください。」

ポイント:

  • インプット: 何を元にするか明確にする(添付ファイルなど)。
  • アウトプット: 何の図(フローチャートガントチャート等)を作るか指定する。
  • 条件: 登場人物やフェーズなどの制約を与える。

生成された図の調整方法

Claudeが生成した図は、FigJam上で「編集可能なオブジェクト」として配置されます。

  • 配置の修正: 自動生成で重なってしまった線をドラッグで直す。
  • テキストの微調整: 専門用語のニュアンスなどを手動で書き換える。
  • デザイン適用: FigJamのテンプレート機能を使って、色味を一括で整える。

「画像」として生成されるのではなく、あくまで「FigJamの付箋やコネクタ」として生成されるため、後からの修正が非常に容易です。


3. 業務効率が変わる!具体的な活用ユースケース3選

「機能はわかったけど、実際にどう使うの?」という方へ、明日から使える具体的なシーンを3つ紹介します。

① PRD(仕様書)からガントチャートを瞬時に作成

PMやリーダー層に特におすすめです。 長大なテキストの仕様書をClaudeに読ませ、「このプロジェクトを3ヶ月で完了させるためのガントチャート案を作成して」と指示します。

  • 効果: タスクの依存関係やクリティカルパスの洗い出しが数秒で完了。ゼロから線を引く時間がなくなります。

② 手書きホワイトボードの清書・構造化

会議室のホワイトボードに書いた殴り書きの図。これをスマホで撮影し、Claudeにアップロードします。 「この画像を解析して、きれいなシステム構成図としてFigJamに書き出して」と依頼。

  • 効果: 「会議の後の清書」という虚無な作業から解放されます。AIが文字を認識し、適切な図形に変換してくれます。

③ 複雑なコードからのシーケンス図生成

エンジニアにとって最強の使い方がこれです。 GitHub上のコードスニペットや、複雑なロジックのファイルをClaudeに貼り付け、「この処理のデータの流れをシーケンス図にして」と指示します。

  • 効果: 新しくプロジェクトに参加したメンバーへの説明資料作成や、レガシーコードの解析(リバースエンジニアリング的な図解)が爆速化します。

4. 競合ツール比較:Miro vs FigJam (Claude連携)

図解ツールとしてシェアを争うMiroも「Miro Assist」という強力なAI機能を持っています。どちらを使うべきか、比較表で整理しました。

特徴 FigJam (Claude連携) Miro (Miro Assist)
AIの操作場所 Claudeのチャット画面 Miroのボード内
得意な入力 長文ドキュメント、コード、複雑な文脈 キーワード、ボード内の付箋
推論能力 極めて高い (Claude 3.5 Sonnet等を使用) 標準的 (GPTベース等)
編集の自由度 生成後はFigmaのエコシステムでデザイン連携が容易 図解テンプレートが豊富でリッチ
開発との連携 Figma Dev Modeとシームレスに接続可能 Jira等との連携は強いがデザインとは別

結論:どちらを選ぶべき?

  • FigJamがおすすめな人: 普段からFigmaでUIデザインをしているチーム、エンジニア(コードや仕様書ベースで図を作りたい人)。
  • Miroがおすすめな人: ビジネス職がメインの組織、デザインカンプとの連携よりもワークショップのファシリテーション機能を重視する人。

今回のClaude連携により、「文脈を理解した図解」に関してはFigJamが一歩リードした印象です。


5. 知っておくべき注意点と今後の展望

最後に、プロとして押さえておくべき注意点をお伝えします。

AI特有の「ハルシネーション」に注意

Claudeは優秀ですが、完璧ではありません。特にシステム図において、存在しないAPIエンドポイントを捏造したり、矢印の向きを逆にしたりすることがあります。 出力された図は「あくまでたたき台」と捉え、必ず人間の目でレビューを行ってください。

セキュリティとデータプライバシー

企業で利用する場合、「社内の仕様書をClaudeにアップロードして大丈夫か?」という懸念があるでしょう。 AnthropicとFigmaエンタープライズレベルのセキュリティを謳っていますが、各社のセキュリティポリシー設定(学習への利用拒否設定など)を必ず確認してから利用しましょう。

今後のロードマップ

現在は「図の生成」がメインですが、今後は逆に「FigJamの図を読み込んで、仕様書(テキスト)に逆変換する」機能や、Figmaのデザインデータ自体を操作する機能へとMCPの活用範囲が広がっていくと予想されます。


まとめ:AIを「手」として使う時代の到来

FigmaとClaudeの連携は、単なる「便利機能」ではありません。 「思考(チャット)」と「実行(作図)」がシームレスに繋がったことを意味します。

これまで「図を作るのが面倒でテキストだけで済ませていた」ような複雑な仕様も、これからはAIにたたき台を作らせることで、チームの共通認識を簡単に視覚化できるようになります。

まずは、手元の仕様書PDFをClaudeに投げ込み、「これを図解して」と頼んでみてください。その精度の高さと便利さに、きっと驚くはずです。

当サイトは、アフィリエイト広告を使用しています。