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

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-g... ・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