Figma×Claude Codeで、自分の意図を正確に反映させながらで高品質なWebサイトを構築し公開（ディプロイ）するまで、最新のAI Webデザインワークフローを公開します。
FigmaのデザインシステムとClaude Codeをシームレスに連携させる方法、つまずきやすい「Cursorのセットアップ」「Claude Codeの連携」「Figma MCPの設定」といった事前準備も解説します。
【お知らせ】
■無料プレゼント：ブランディング・ワークフローのチェックリスト
動画の冒頭で解説した「Strategy（戦略）」部分をより深く実践するための資料です。高単価な提案を目指すデザイナーさんは必見！こちらからダウンロードできます。
👉
■ニュースレター登録
デザインやテクノロジー、クリエイターの新しい働き方・生き方、また定期的に開催している「ワークショップ」の優先案内をお届けしています。
👉
【この動画で学べること】
・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コーディングエージェント）
・Cursor（次世代AIコードエディタ）デスクトップアプリ：
・Figmaスキル(Figma MCP)のインストール：
・Awesome Design .md：
・Sanity（ヘッドレスCMS）：
・Cloudflare（ホスティング・デプロイ）：
・Vercel（ホスティング・デプロイ）：
🎯 【こんな方におすすめです】
・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
コメント