皆さん、こんにちは。
気がつけば師走。街中のイチョウもすっかり黄色くなりました。
さて、今回は12/3（水）に開催されるCSS Niteのセミナー「Figma MCPと生成AIを使った時短コーディング」の登壇にあわせて、マスター編に用意している「生成AI × Figma MCP」関連の動画にコンテンツを新たに10本追加しました（うっかりGemini 3 Proのコーディングを目玉としてしまった手前の本体のコンテンツ調整とも言います）。
ここまで「Figma MCPとは何ぞや」的な概要〜基本的な使い方、より良い結果を得るための「AIにも優しいFigmaファイルの作り方」ときたので、実際にFigma MCPを駆使して作業効率を上げたい方も多いかと思い、ガイドラインの作成方法やプロンプトの指示の仕方など、実装サンプルも使いながらの実践的な内容にまとめました。
※サンプルのプロンプト実行には Node.js が必要です。Node.jsの動作する環境構築がまだであれば「ゼロから始める環境構築（macOS編）」がお薦めです。
ちなみに「Gemini 3 Pro」に関しては、お使いのエディタであったりAIのご契約などの関係で誰もが使える状況にはありません。下記追加分のコンテンツ内でも説明していますが、エディタ側の対応はまちまち、事前にウェイティングリストに登録して順次適用されるのを待つような感じになっています。
使える環境であれば、エディタなりCLIなりでMCPを有効にし、作業環境のガイドラインを作成して同じプロンプトを投げれば問題はありません。世間的には画像生成の「Nano Banana」の方に注目が集まっていますが、コーディングの性能もGemini 2.5 Proよりだいぶ進化している気がします。
ということで、追加されたコンテンツは以下。
後半パートは、ダウンロード可能なサンプルファイル、コマンドの解説、実際に使用できるプロンプト例などが含まれます。
（追記）
GeminiへのFigma MCPの登録が、Geminiの拡張機能経由でできるようになっていたのでその手順なども追加しました（12/3 17:00）
---
12. Copilot／Geminiを使った実践 - 43分41秒
- 前説〜出力結果はエージェント次第（6:38）
- Gemini 3 Proでコーディングするには？（3:13）
- VSCode拡張機能とGemini CLIの導入（7:06）
- 開発環境をガイドラインで理解させる（4:18）
- Copilot向けのガイドライン生成（4:24）
- Gemini用ガイドラインの作り方（2:53）
- サンプルファイルを実行してみよう（4:53）
- プロンプトは簡潔にわかりやすく（4:53）
- 再実行とリファクタリング（3:17）
- まとめ（2:06）
---
Figma Design マスター編（パック含む）の販売価格に変更はございません。
Figma MCP関連の章をまとめた単品販売「生成AI × Figma MCP」は、12/6（土）以降価格を改定いたします（税込: 2,200円 → 3,300円）。検討中の方はお早めにご購入ください
2回目以降のご購入は自動で10%オフ
まだまだこちらのサイトの講座数は多くありませんが、これまでにひとつでもご購入いただいたお客様は、2回目以降のチェックアウト時に自動的に注文全体を10%割引になるようにいたしました。また、公式LINEアカウントの新規友だち登録で10%割引のクーポンコード発行中です。購入前の事前登録で少しだけお得になりますので是非ご利用ください。
https://lin.ee/EOgmkKQ
コンテンツ更新のお知らせは各種ソーシャルメディアなどでもお届けしますが、こちらの公式LINE、または本サイトのお知らせを主体としています（メールでの配信はおこなっておりません）。