Figma × Claude Codeではじめる！AI時代のWeb制作ワークフロー入門【Cursor連携/MCP】

📍2026/5/28(木) 12:00~ 無料ワークショップ開催！
フリーランス・駆け出しデザイナーのためのAI x Brand Design Workflow
https://designup-academy.com/1on1-ws-registration-page/

Figma×Claude Codeで、自分の意図を正確に反映させながらで高品質なWebサイトを構築し公開（ディプロイ）するまで、最新のAI Webデザインワークフローを公開します。

FigmaのデザインシステムとClaude Codeをシームレスに連携させる方法、つまずきやすい「Cursorのセットアップ」「Claude Codeの連携」「Figma MCPの設定」といった事前準備も解説します。

【お知らせ】
■無料プレゼント：ブランディング・ワークフローのチェックリスト
動画の冒頭で解説した「Strategy（戦略）」部分をより深く実践するための資料です。高単価な提案を目指すデザイナーさんは必見！こちらからダウンロードできます。
👉 https://designup-academy.com/workflow/

■ニュースレター登録
デザインやテクノロジー、クリエイターの新しい働き方・生き方、また定期的に開催している「ワークショップ」の優先案内をお届けしています。
👉 https://designup-academy.com/newsletter/

【この動画で学べること】
・AI時代におけるWebデザイン＆制作のワークフロー概要
・Cursorの初期セットアップと基本的な使い方
・Claude Codeの導入と開発環境への連携
・Figma MCPの確実な設定方法（Setup）
・Design.mdを活用した一貫性のあるスタイリングとAIコーディング
・Sanity、GitHub、Cloudflareを使ったモダンなデプロイ環境

【目次】
[00:00] - 導入：AI時代のWebデザインワークフロー
[00:30] - 全体の流れの説明（ストラテジー、デザイン＆デベロップ、デプロイ）
[02:25] - ステップ1：ストラテジー（ブランドストラテジー（戦略）とアートディレクション）
[03:29] - ステップ2：デザイン＆デベロップ（デザインシステムとMDファイルの活用）
[04:10] - Claude Codeをターミナルで使う、デスクトップアプリで使う、エディタCursorの中の拡張機能Claude Code VS Codeの違い。「Cursor」と「Claude Code」の推奨設定
[05:03] - Cursorデスクトップアプリのダウンロードと初期設定
[06:08] - FigmaとCursorの連携・セットアップ方法
[06:56] - 実践：Figmaのデザインシステムを読み込ませる
[07:56] - 実践：デザインMDファイルを使ったコード生成
[09:04] - 生成されたコードをFigmaに取り込んでデザインの微調整を行う
[09:56] - Figma上での修正をコード（Cursor）に反映させる
[11:11] - ステップ3：デプロイとCMS（Sanity）の自動設定
[12:03] - GitHubとCloudflareを使った公開手順とターミナル操作
[12:50] - まとめと今後のワークショップのお知らせ

【リンク】
・Claude Code（AIコーディングエージェント）
https://claude.ai/
・Cursor（次世代AIコードエディタ）デスクトップアプリ：https://cursor.com/ja/download
・Figmaスキル(Figma MCP)のインストール：https://github.com/figma/mcp-server-guide
・Awesome Design .md：https://getdesign.md/
・Sanity（ヘッドレスCMS）：https://www.sanity.io/
・Cloudflare（ホスティング・デプロイ）：https://www.cloudflare.com/ja-jp/
・Vercel（ホスティング・デプロイ）：https://vercel.com/

🎯 【こんな方におすすめです】
・AIを使ってWebデザインから公開までを効率化したい方
・モダンなWeb制作のフローを取り入れたいフリーランス・個人事業主の方

🔍 【この動画で解決できるお悩み】
「FigmaとClaude Codeの連携方法がわからない（Figma MCPの使い方）」
「Figmaのデザインデータから爆速でコーディングしたい（Figma to Code / Design to Code）」
「Cursorを使ったAIコーディングの初期設定（Setup）でつまずいている」
「AIを使ってWebデザインからデプロイまでの最新ワークフローを知りたい」

#Webデザイン #AI #Figma #ClaudeCode #Cursor #Web制作 #フロントエンド #フリーランスデザイナー #ワークフロー #webdevelopment

Видео Figma × Claude Codeではじめる！AI時代のWeb制作ワークフロー入門【Cursor連携/MCP】 канала Mayuko Soga