【超簡単】Claude Code×Figmaで「AI感なし」のWebサイト・UIを一瞬で制作する方法【WEB制作・コーディング】

概要

Claude CodeとFigma、Cursorを連携させ、AI感のないプロ品質のWebサイトを短時間でコーディング・公開する手順を実演する動画。MCP(Model Context Protocol)を使ってツール間を接続する設定方法から、Figmaテンプレートの取り込み、HTML/CSS/JS実装、Netlify Dropでの公開までを一通り解説している。

主なポイント

• MCPは複数のAIツール(Claude Code・Figma・Cursor)を共通のルールで接続する仕組みで、USBのように様々なものを繋げられると例えられる
• Claude CodeはCLIツールのためターミナルでのインストール・API認証・パス設定が必要だが、公式サイトの手順に沿えば導入できる
• インストール中にエラーが出たら、エラーメッセージやスクリーンショットをそのままClaude Codeに貼って質問すると原因(Node.jsのバージョン不一致など)と対処法を教えてくれる
• Cursor(VSCodeベースのAIコーディングエディタ)にClaude Code拡張機能を入れることで、ターミナルではなくチャット画面から指示を出してコーディングできる
• FigmaのデスクトップアプリでMCPサーバーを有効化し、個人アクセストークン(ファイルコンテンツ読み取り権限のみ)を発行してCursorのMCP設定に登録することでFigma連携が完成する
• Figmaのデザインへのリンクをコピーしてチャットに貼り、「まず内容を確認して」と指示してから「HTML/CSSで実装して」と依頼すると、画像ダウンロードからコーディングまで自動で行ってくれる
• 完成後も「オーバーレイをかけて」などピンポイントで部分修正を指示でき、対象ファイルをチャットに追加して微調整できる
• Netlify Dropに完成フォルダをドラッグ&ドロップするだけで、ものの数分でWebサイトを公開できる(画像リンク切れなどの不具合もChatに聞けば修正可能)

実践に使えること

• Figmaの無料テンプレートサイトからデザインを探し、Figma上にコピーしてMCP経由でClaude Codeに読み込ませることで、ゼロからデザインを起こさずにコーディングを開始できる
• コーディング指示を出す前に「まず内容を確認して」と一段階挟むことで、誤解のない実装につなげられる
• エラーに遭遇したら文章またはスクリーンショットをそのままAIに貼って質問する、というトラブルシュート手順を日常のAI活用にも応用できる
• 簡易的な1ページLPであればNetlify Dropを使い、独自ドメインを設定して即座に公開する運用が可能
• ブログなど拡張性が必要なサイトは、この手法ではなく従来通りWordPressなどを使う判断基準も参考になる