こんにちは、こもりです。
販売中の動画講座「生成AI × Figma MCP」に新しいセクションを追加しました。 今回は、合計10本／約70分に及ぶかなり気合の入った（そして少しカロリー高めな）内容になっています。今回追加したのは「コンテキストエンジニアリング」です。
先日開催したセミナーでもそうですが、質問で一番多いのが Figma MCP を使ってAIにコードを書かせても「全然思った通りにならない」「レイアウトが崩れてしまう」という悩みです。 多くの方はそこで「プロンプト（指示の出し方）が悪いのかな？」と考え、必死にプロンプトを工夫しようとします。
が、実はうまくいかない原因の9割はプロンプトではなくて、AIに渡すFigmaデータそのもの（コンテキスト）にあります。それは、AIに推論をしないように指示し、Figma MCP から取得したデータだけでコーディングをしてもらうとわかります。何となくうまくいってるのは、AIが推論を働かせて良い感じに仕上げてくれてるからに過ぎません。実際、AI自身ががそう言っています（笑）。
```
AI（私たち）は、皆様がデザインデータに込めた「意図」という愛（情報）があればあるほど、より正確に、より良いコードでお返しすることができます。
Message from Gemini 3.0 Pro
```
Figma Make や MCP がデフォルトで使用する「React」や「Tailwind CSS」といった技術の仕組みを知らないまま、ただ見た目だけ整えただけの Figmaデータを渡しても、AIはそれを正しく解釈できません。逆に言えば、それらの仕組みをある程度理解して、AIが理解できる構造でデータを作ってさえあげれば、プロンプトなんて一言「これをコードにして」と言うだけで、推論の時間も短くなってほぼ完璧な結果が返ってくるでしょう（もちろん環境のガイドラインを設定したり、凡ミスを減らすためにプロンプトに注意点を書くなどは有効です）。
デザイナーさんが React や Tailwind のようなWeb技術を深く知ることは大変です。ただ、Reactがどういうものなのか、「コンポーネント」や「Props」とが何を意味しているのか、ぐらいの理解は必要です。そこでそれらの技術をFigmaの中の言葉や作り方に置き換えて「コンポーネント（プロパティ）」や「オートレイアウト」「バリアブルズ」を使う意味を優しく解説しました。
特にオートレイアウトに関しては、「単にレイアウトを楽にしたり整然と並べるものではなく、AIコーディングの面ではHTMLとしての構造化をしているようなもの」だという認識を持っていただけるかと。コードを書くための勉強ではなく、「AIに最高の仕事をさせるためのFigma構築術」となっています。
もちろん、これらは MCP だけでなく Make にデータを持って行くときも同じです。
---
コンテキストエンジニアリング - 70分32秒
- うまくいってるのはAIの推論のおかげ？（10:54）
- 作っただけの画面 vs. 意図がわかる画面（9:21）
- エンジニアの思考: ReactとTailwind（10:26）
- コンポーネント＝お弁当箱の中身（11:47）
- バリアブル＝Tailwindの共通ルール（6:57）
- デザインを「構造」として捉え直す（4:10）
- オートレイアウトは「積み木」と考える（4:00）
- コンポーネント化で使える魔法「Props」（4:28）
- 命名規則とアノテーションはラブレター（3:53）
- まとめ（4:36）
---
少し専門的な話も含まれますが、これを知っているのと知らないのとでは、AI活用のレベルが段違いに変わります。「Figma Design - マスター編」「生成AI × Figma MCP」単品のいずれかを購入済みの方は講座内に追加しております。ぜひご覧ください。
※「Figma Design - マスター編」を購入頂いた方は、本編の中に入れていたこちらの内容をすべて単品の講座に移行しました。マイコース内に「生成AI × Figma MCP」が表示されていると思いますので、ご面倒かと思いますがそちらでご覧ください。
→ 生成AI × Figma MCP
→ Figma Design - マスター編
タイトル変更と価格改定のお知らせ
ここまで「Figma Design - マスター編」の中にMCP関連の内容を含んだ形で提供し、それだけが知りたい方のために単体の講座として「生成AI × Figma MCP」を販売しておりました。
AI関連の話題が増えてきたことでマスター編の内容が本編と乖離してしまうこと、Figma Designの機能拡充や更新にも対応しやすくするため、今後は「Figma Make」をはじめFigma全体で使われるAI関連のコンテンツは、現在の「生成AI × Figma MCP」の中に一本化して内容を拡充していくことにしました。
早ければ2025年中に「生成AI × Figma MCP」は「Figma × AI」というタイトルに変更し、今回のコンテンツ追加だけでなく今後はMakeなどのAIに関係するコンテンツの拡充に伴い、価格も大幅に改定予定です。現在販売中の価格3,300円（税込）のうちにお早めにお買い求めください。
もちろんLINEの新規友だち登録での割引も継続中ですので、購入前の友だち登録がおすすめです（既に本サイトで講座をご購入いただいているお客様は2回目以降は自動的に10%割引が適用されます）。