📌 この記事のポイント

• FramerのWorkshopは対話でインタラクティブなパーツを生成できる

• WorkshopはClaude 4.5搭載で、プロジェクトの色やフォントを引き継ぐ

• ロジックのある部品（フォーム・カウンター）づくりに向く

• MCPを使うとClaudeやCursorからFramerを操作できる

• Workshopは「新しく作る」、MCPは「操作・管理する」役割

2026年7月17日更新

FramerのAIは「Workshop」で対話しながらパーツを作れる

FramerのAIは、公式プラグイン「Workshop」を使って、自然言語で指示するだけでインタラクティブなパーツを生成できる段階まで来ています。コードを書かずに、カーソルに追従する背景やカウンターのような動く部品を、対話で作って調整できます。

この記事では、NOT DESIGN SCHOOLの講座「Framerではじめる Webアニメーション入門」の作例をもとに、FramerのAI活用を解説します。基本のアニメーションはFramerでアニメーションを作る方法に、Framer自体の特徴や料金はFramer入門ガイドにまとめています。

参考動画：Framerではじめる Webアニメーション入門講座【後編】（NOT DESIGN SCHOOL）

FramerのAI機能の全体像

FramerのAI機能とは、サイト生成からパーツ生成、外部エージェント連携までを含む一連の機能のことです。主なものを整理します。

この記事では、動きのあるパーツづくりに直結する「Workshop」と「MCP」を中心に解説します。もちがスクールを運営していて感じるのは、AIで部品を試せるようになったことで、駆け出しでもインタラクションに手が届くようになったということです。

Workshopとは？できること

Workshopは、Framer公式のAIプラグインです。Claude 4.5を搭載し、対話でインタラクティブなコード部品を生成します。生成したパーツは、プロジェクトのフォントや色を引き継ぐため、サイトになじみやすいのが特徴です（Framer公式、2026年）。

向いているのは、ロジックのある部品です。具体的には次のようなものが挙げられます。

• 計算機・見積もりのような計算するパーツ

• 多段のフォームや診断（クイズ）

• カウントダウンタイマー

• 地域ごとに出し分けるバナー

普段コードを書かないと作れないような動きも、対話で生成してキャンバスに置けるのが強みです。

Workshopでインタラクティブなパーツを作る手順

作例では、カーソルに追従して背景画像が微妙に動くテキストコンポーネントをWorkshopで生成しています。手順は次の通りです。

1.ツールバーのプラグインアイコンを開き、「ワークショップ」を検索して起動する

2.日本語で作りたいものを指示する（例：「背景に画像を設定できるテキストコンポーネントを作りたい。画像はアップロードでき、テキストは変更でき、カーソルの動きに追従して背景が微妙に動くようにしたい」）

3.Framerがコードを書いてパーツを生成する

4.うまくいかない部分はチャットで修正を重ねる（例：「画像が見切れないようにしたい」）

5.生成されたパーツをキャンバスに配置する

生成後は、右パネルに設定項目まで自動で用意されます。フォントを差し替えたり（作例ではDM Sansのミディアム／レギュラー、112px）、Unsplashプラグインで画像を入れたりと、通常の要素と同じ感覚で調整できます。「こういう設定項目を作ってほしい」と相談しながら、扱いやすいコンポーネントに育てていけるのがWorkshopの面白さです。

MCPでエージェントと連携する

MCP（Model Context Protocol）プラグインを使うと、Claude DesktopやCursorのような外部のAIエージェントから、Framerのプロジェクトを直接操作できます。これは第三者が提供するプラグインで、安全な接続を通じてFramerとやり取りします。

MCPでできることは、主に次の3つです。

Claude Code・Cursor・Codexのようなエージェントと組み合わせると、繰り返しの作業やCMS管理、SEOの点検などを任せられます。

WorkshopとMCPの使い分け

2つは役割が異なります。混同しないよう整理しておきます。

Workshopは「新しく作る」、MCPは「既存のものを操作・管理する」と覚えると分かりやすいです。部品づくりとサイト運用の両方をやるなら、両方を使い分けることになります。

限界と注意点｜AIは「相談相手」であって丸投げ先ではない

FramerのAIは便利ですが、過信は禁物です。誠実に3つの注意点を共有します。

• 一度で完成しないことが多い：Workshopは対話で修正を重ねて仕上げるものです。作例でも「見切れないようにしたい」と何度も指示を送っています。丸投げではなく、相談しながら育てる前提で使ってください。

• 何を作りたいかを言葉にする力がいる：指示があいまいだと、期待どおりの動きになりません。動きの仕組みを理解しておくほど、指示が的確になります。

• プランや提供条件は変わる：AIプラグインの仕様や料金は変動します。MCPは第三者製のため、提供状況も含めて最新を公式で確認してください。

よくある質問（FAQ）

Q. WorkshopはFramerの公式機能ですか？

はい。WorkshopはFramer公式のAIプラグインで、Claude 4.5を搭載しています。生成したパーツはプロジェクトのフォントや色を引き継ぎます。

Q. Workshopではどんなパーツが作れますか？

計算機・多段フォーム・クイズ・カウントダウンタイマー・出し分けバナーのような、ロジックのあるインタラクティブな部品が得意です。作例ではカーソル追従の背景を作っています。

Q. コードの知識は必要ですか？

生成自体は対話で進むので不要です。ただし、何をどう作りたいかを言葉にできると、指示が的確になり良い結果になります。

Q. MCPとWorkshopの違いは何ですか？

Workshopは新しいパーツを作る公式プラグイン、MCPはClaudeやCursorなど外部エージェントから既存プロジェクトを操作・管理する第三者製プラグインです。

Q. MCPでは何ができますか？

自然言語でのキャンバス操作、CMSの入力やデザイン更新の自動化、選んだコンポーネントのReact書き出しなどができます。

Q. AIに任せれば誰でも同じものが作れますか？

指示の精度で結果が変わります。動きの仕組みを理解し、修正を重ねられる人ほど、狙いどおりのパーツに仕上げられます。