Figma MCPでAI感のないUIを作る方法

TL;DR

FigmaのデザインをClaude CodeへMCP経由で読み込ませ、選択範囲のリンクと再現指示を渡すと、画一的なAI風UIを避けながらHTMLやTailwind CSSへ実装できる。公開前には余白や配置をセクション単位で直し、Figma由来の画像をローカル保存して参照先を変更する。

Transcript

はい、どうもしです。今回はですね、 フィグマとクロードコードを連携してAI っぽさを出さないウェブサイトの作り方、 デザインの作り方、え、そういったものを ですね、今回解説していこうかなと思い ます。ま、え、クロードコードが履き出し たウェブサイトってどうしてもですね、 一ぺになりがちというかサ風系な感じでね 、え、ま、AI感が出ちゃうと思うんです けど、これね、FIGMAと連携すれば ですね、フィグマで作ったデザインをその ままね、クロードコードで、え、完全に 忠実に再現できますので、え、今回そちら をね、紹介していきます。今お見せしてる ウェブサイトなんですけど、クロード コードとフィグを使って30分程度で作り ました。他にもこういったウェブサイト 作りまして、ま、かなりAI感抜けてます... Read More

Key Insights

• Figma MCPは、選択したデザインのリンクをClaude Codeへ渡し、その構造や見た目をコード生成の参照情報として利用する仕組みである。
• 事前準備は、FigmaデスクトップアプリでローカルMCPサーバーを有効化し、Claude Code側に接続先を登録して状態を確認することである。
• 無料テンプレートは、Figma CommunityでWebサイトやランディングページに絞って探せるが、商用利用やクレジット表記の条件確認が必要である。
• 実装指示は、選択範囲のリンクを貼り、単一HTMLで忠実に再現することやFigma内の画像を使うことを明記する形で与えられる。
• 再現精度は、一度にページ全体だけを直させるより、ずれた箇所をセクション単位で指定し、余白や配置を反復調整することで高められる。
• Tailwind CSSは、動画内の作例では生のCSSから書き直した際に中央寄せなどを改善でき、話者は忠実な再現に向く可能性を示している。
• 静的なHTMLサイトは、ファイル名をindex.htmlに変更してフォルダーごとNetlify Dropへアップロードすれば、割り当てられたURLで公開できる。
• Figma MCPのローカルURLを参照した画像は、Figmaアプリを閉じるとリンク切れになるため、PNGやJPEGとして書き出して永続的なパスへ差し替える必要がある。
• 🎬 このチャンネルの他の動画:
  • Next.js App Routerを最適設計する方法
  • AI時代にNext.jsの基礎を学ぶ方法
  • CursorのProject Rulesを設定する方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Figma MCPとClaude CodeでUIを再現する方法は？

Figmaで対象のフレームを選び、「選択範囲へのリンク」をコピーしてClaude Codeへ貼り付け、デザインの確認と忠実な実装を指示します。最初は単一のHTMLファイルとして生成し、表示を確認した後、余白や配置などをセクション単位で修正すると精度を高められます。

Q: Figma MCPをClaude Codeへ接続する方法は？

Figmaデスクトップアプリの基本設定からローカルMCPサーバーを有効化し、公式ドキュメントに示されたコマンドでClaude Codeへ接続先を登録します。その後、MCP一覧を表示するコマンドやClaude CodeのスラッシュMCPを使い、Figmaとの接続が有効になっているか確認します。

Q: AIっぽく画一的なWebデザインを避ける方法は？

完成度の高いFigmaデザインを先に選び、それをClaude Codeの実装基準として使う方法が紹介されています。AIへ抽象的にサイト制作を任せるのではなく、具体的なレイアウト、配色、画像、セクション構成をMCP経由で読ませることで、出力の方向性を固定できます。

Q: Figmaの無料Webテンプレートを探す方法は？

Figma Communityをブラウザで開き、Webサイトやランディングページを対象にして、無料のFigma Design素材へ絞り込んで探します。気に入った素材をFigmaで開き、必要なページやセクションを自分のファイルへコピーします。利用前には商用利用や制作者のクレジット表記などの条件も確認します。

Q: Figmaから生成したUIの再現精度を上げる方法は？

生成結果をLive Serverで表示し、元のFigmaデザインと比較しながら、余白、中央寄せ、画像位置などのずれを個別に指示します。ページ全体を一度に再生成させるだけでなく、対象範囲のリンクを再度渡してセクションごとに修正させると、細部を調整しやすくなります。

Q: HTMLとTailwind CSSのどちらで実装すべきですか？

手早く静的サイトを作る場合は、CSSを含む単一HTMLファイルから始められます。動画内の作例では、生のCSSで生成した後にTailwind CSS CDNを使う構成へ書き直し、中央寄せなどを改善しています。話者は、ReactとTailwind CSSの既存環境へ反映する方法も候補として挙げています。

Q: 生成したHTMLサイトをNetlifyで公開する方法は？

公開対象のファイルを新しいフォルダーへ入れ、メインのHTMLファイル名をindex.htmlへ変更します。そのフォルダーをNetlify Dropのブラウザーアップロードで指定すると、自動的に割り当てられたURLで公開できます。動画では、この流れにより静的なホームページを簡単に公開しています。

Q: 公開後にFigmaの画像が表示されなくなるのはなぜですか？

生成されたHTMLがFigmaのローカルMCPサーバー上にある画像URLを参照しているためです。FigmaデスクトップアプリやMCPサーバーを停止すると参照先へ接続できず、画像が切れます。画像をPNGやJPEGで書き出してサイト内へ保存し、HTMLの参照パスを差し替える必要があります。

Q: Webサイトにスクロールアニメーションを追加する方法は？

Claude Codeへ、ヒーローや各セクションをふわっと表示させるよう具体的に指示します。動画内では最初に一部のセクションだけへ効果を加え、その後ヒーローセクションも対象にして修正しています。ReactやNext.jsを使う場合の選択肢として、話者はFramer Motionにも言及しています。

Q: 既存Webサイトの構造をFigmaへ取り込む方法は？

FigmaのHTML取り込み用プラグインを使い、対象サイトのURLを指定してHTMLの骨格をデザインへ反映する方法が紹介されています。取り込み後は選択範囲のリンクをClaude Codeへ渡して再実装できます。ただし画像をそのまま利用するのは難しい場合があり、必要な素材は別途用意しなければなりません。

Summary & Key Takeaways

• まずFigmaデスクトップアプリとClaude Codeを用意し、Figmaの基本設定からローカルMCPサーバーを有効化する。続いてClaude Code側へMCPサーバーを登録し、MCP一覧やスラッシュMCPで接続状態を確認する。動画内では、この機能の利用にFigmaの月額約3,000円のプランが必要だと説明されている。

• Figma Communityなどから利用条件を確認したテンプレートを選び、自分のデザインファイルへコピーする。対象フレームを選択して「選択範囲へのリンク」を取得し、Claude Codeへ貼り付けてデザインの確認と実装を依頼する。最初は単一HTMLでもよく、再現性を高めたい場合はTailwind CSSやReactとの組み合わせも候補になる。

• 生成後はLive Serverで表示を確認し、余白、中央寄せ、画像位置、アニメーションなどをセクション単位で修正する。静的サイトはindex.htmlを含むフォルダーとしてNetlify Dropへアップロードできる。ただしFigmaのローカルMCP URLを参照する画像はアプリ終了後に切れるため、画像を書き出してローカルパスを設定する必要がある。