教材の画像を手動で差し替えていた私が、Claude CodeとFigmaをMCPでつないだら全部自動になった話

コーディングスクール運営者が「もっと楽にできないか」と思った瞬間から始まった、AIとデザインツール連携の話。

きっかけは、地味な作業への小さな疑問だった

パソコンスクールの教材を作るとき、Figmaでデザインを組んで、画像を差し替えて、テキストを直して……という作業を、毎回手作業でやっていました。

内容は大きく変わらない。レイアウトも同じ。変えるのは画像とテキストだけ。

それでも毎回Figmaを開いて、クリックして、差し替えて、確認して。

「これ、Claudeに頼めないかな？」

そう思ったのが、この話の始まりです。

調べてみたら、Figmaが公式でMCPサーバーを出していた

Claude CodeにはMCP（Model Context Protocol）という仕組みがあって、外部のツールと連携できます。MCPについては別記事で詳しく書きましたが、簡単に言うと「ClaudeがFigmaやブラウザなどの外部ツールを直接操作できるようにする規格」です。

そして驚いたのが、FigmaがこのMCPに対応した公式サーバーを提供していたことです。

設定は思ったより簡単で：

1. FigmaのアカウントでAPIアクセストークンを発行
2. Claude CodeのMCP設定にFigmaサーバーを追加
3. あとはClaude Codeに「このFigmaファイルを読んで」と伝えるだけ

それだけで、ClaudeがFigmaのデザインデータを丸ごと読み込んでくれました。

実際に何ができるのか

① Figmaのデザインを「読む」

get_design_context というツールで、FigmaのノードIDを渡すと、そのデザインの構造・テキスト・画像・レイアウト情報が返ってきます。スクリーンショットも自動で撮ってくれるので、視覚的に確認しながら作業できます。

「このFigmaファイルのnode-id=1:4を読んでください」

→ デザイン全体の構造、テキスト、画像URLが返ってくる
→ スクリーンショットで見た目も確認できる

② Figmaのデザインを「書き換える」

use_figma というツールで、JavaScriptのPlugin APIコードを実行して、Figmaのノードを直接編集できます。

• テキストを書き換える
• 画像を差し替える
• 色やレイアウトを変える
• 新しい要素を追加する

つまり、「このパソコンスクールのサイトに合わせて画像とテキストを差し替えて」と指示するだけで、ClaudeがFigmaを直接操作してくれるわけです。

実際にやってみた：教材サイトの差し替え作業

今回は、既存のFigmaデザイン（犬がテーマのサンプルサイト）を、パソコンスクール「Casio PGS」の内容に差し替えるという作業を試みました。

Webサイト（casio-pgs.com/ai-web/）の内容をClaude Codeが自動で読み取り：

• サービス名：Casio PGS / 樫の森シリーズ
• キャッチコピー：「18年の実績であなたの未来をサポート」
• コンセプト：AIを使いこなしながら理解できる力
• 学習アプローチ：実装 → 理解（逆順メソッド）

これらをもとに、Figmaの各セクションのテキストと画像を差し替える指示を出しました。

この仕組みの何がすごいのか

「指示するだけ」で完結する

従来：Figmaを開く → 該当ノードを探す → クリック → 編集 → 確認 → 繰り返し

MCP連携後：「このWebサイトの内容でFigmaを更新して」→ 完了

デザインの構造を理解した上で操作してくれる

ただ置換するのではなく、Claudeはデザインの構造（ヘッダー、メインビジュアル、セクション構成など）を理解した上で、適切な場所に適切な内容を入れてくれます。

テキストだけでなく画像も生成・差し替えできる

画像がない場合は「生成してほしい」と伝えれば、AIが画像を生成してFigmaに埋め込むことも可能です。

なぜこれが「スクール運営者」に刺さるのか

教材を作る人間は、デザイナーではないことが多いです。

「このレイアウトで、この画像に差し替えて、このテキストに変えて」という意図はあるけれど、Figmaを細かく操作する時間も技術も惜しい。

Claude Code × Figma MCP連携は、まさにその「意図だけ伝えれば、あとは自動」を実現する仕組みです。

40代からAIを学ぶ文脈でも、「ツールを覚えるより、ツールに任せる」という発想の転換として、非常にわかりやすい事例だと感じています。

「トークンってどれくらい使うの？」という正直な疑問

実はこの作業をやりながら、ずっと気になっていたことがあります。

「これ、トークンをかなり使ってるんじゃないか」

Claudeには使用量の上限があって、Proプランでは「現在のセッション」と「週間使用量」の2つの制限があります。作業の途中でClaudeに確認してみると、こんな答えが返ってきました。

セッションと週間使用量の違い

週間使用量（大きなタンク）
├── セッション1（月）
├── セッション2（火）← 今ここ 55%
├── セッション3（水）
└── ...金曜1:00にタンク全部リセット

セッションは「短期の使いすぎ防止」、週間は「全体の上限」という関係です。

今回の作業でどれくらい使ったか

実際にFigmaの差し替え作業が終わった時点で、セッション使用量は55%になっていました。

通常の質問1回が200〜500トークンなので、60〜100倍くらいの消費です。

でも、コスト対効果は？

人間がFigmaを手動で操作すると、この作業は1〜2時間かかります。Claudeにやってもらったのは10〜15分。

しかもその作業ログがそのままこの記事の素材になりました。

トークンを使うのは事実ですが、「時間」と「アウトプット」で考えると十分元が取れます。

ちなみに週間制限は9%しか使っていないので、週全体としてはまだまだ余裕があります。セッション制限（数時間でリセット）を気にすればいいだけで、週単位では使い続けられます。

まとめ

「手作業でやってたあの作業、Claudeに頼めるんだ」

そう気づいた瞬間が、このシリーズの出発点です。

このシリーズについて

この記事は 「AI×スクール運営 自動化シリーズ」 の一部です。

関連記事

• 40代からのAI時代の学び方｜コードを書かずにWebサーバーを作る方法
• HTMLが書けても稼げない理由｜副業で月3〜10万円を目指すFigma×AI×WordPress実践カリキュラム
• ObsidianをタスクＭ代わりに使う方法｜Claude Codeで一瞬でノートを量産する

よくある質問

Q: Figmaの有料プランが必要ですか？

A: FigmaのAPIアクセス（MCPで使う機能）は無料プランでも利用できます。ただし、ファイルの共有設定や権限によって一部制限がある場合があります。

Q: アクセストークンの設定はどこでやるのですか？

A: Figmaの「Settings → Security → Personal access tokens」から発行できます。Claude CodeのMCP設定ファイル（claude_desktop_config.json）にそのトークンを記載します。

Q: 画像の差し替えはどんな画像でも対応できますか？

A: ローカルのPC上にある画像ファイルを指定して差し替えることができます。WordPressなどにすでにアップロード済みの画像URLを使うこともできます。

Q: セッションが100%になったらどうなりますか？

A: Claudeがそのセッション内で応答しなくなります。ただし数時間で自動リセットされるので、少し待てばまた使えます。週間制限とは別物なので、セッションが切れても週の残り日数は使い続けられます。

Q: 週間使用量が100%になるとどうなりますか？

A: 週のリセット日（金曜深夜）まで使えなくなります。セッションを何度も繰り返す重作業が続くと消費が速くなるので、Figmaの大規模差し替えのような重い作業は計画的に行うのがおすすめです。