Claude Code × Figma MCP実践ガイド：AI感を消すWebサイト・UIの作り方

AIでWebサイトを作ると「AIっぽさ」が出てしまう。グラデーションが不自然、余白が均一すぎる、フォント選びが無個性。その原因はデザインの不在だ。Claude CodeとFigma MCPを連携すれば、プロがデザインしたテンプレートをそのままコードに変換できる。しかも所要時間は数分。

Figma MCPとは

Figma MCP（Model Context Protocol）は、Claude CodeがFigmaのデザインデータを直接読み取るための接続機構だ。Figmaデスクトップアプリ側でローカルMCPサーバーを有効化すると、Claude Codeがデザインファイルの色・フォント・レイアウト・画像配置をすべて取得し、忠実なHTMLコードに変換する。

Figmaの月額料金は約3,000円。MCP接続にはデスクトップアプリの有料プランが必要になる。CursorなどのAIエディタとFigma、どちらに課金するかは用途次第だが、Claude Code + Figma MCPの組み合わせはコストパフォーマンスが高い。

セットアップ手順（3ステップ）

ステップ1: Figma側のMCPサーバーを有効化

Figmaデスクトップアプリを開き、以下の手順で設定する。

1. 左上のFigmaアイコンをクリック
2. 「基本設定」（Preferences）を開く
3. 「ローカルMCPサーバーを有効化」にチェックを入れる

これだけでFigma側の準備は完了だ。ブラウザ版ではなく、必ずデスクトップアプリを使うこと。

ステップ2: Claude CodeにFigma MCPを追加

ターミナルで以下のコマンドを実行する。

claude mcp add figma -- npx -y figma-developer-mcp --stdio

追加後、接続を確認する。

claude mcp list

figma が一覧に表示されていれば接続成功だ。

ステップ3: 接続テスト

Claude Codeを起動し、Figmaでデザインファイルを開いた状態で動作確認する。Figmaデスクトップアプリが起動していないとMCP接続が機能しないため、作業中は常にアプリを立ち上げておく。

テンプレート活用法：ゼロからデザインしない

AI感を消す最大のコツは、プロが作ったテンプレートを出発点にすることだ。

Figmaコミュニティでテンプレートを探す

1. ブラウザで Figma Community にアクセス
2. 検索バーに作りたいもの（例: 「Landing Page」「Portfolio」「SaaS」）を入力
3. フィルターで「Free」を選択
4. 「Figmaデザイン」で絞り込む（プラグインやウィジェットを除外）

質の高い無料テンプレートが大量に見つかる。ダウンロード数やLike数でソートすれば、実績のあるテンプレートを選べる。

テンプレートをFigmaに取り込む

気に入ったテンプレートを見つけたら、「Open in Figma」や「Duplicate」でFigmaデスクトップアプリにコピーする。コピー後は色やテキストを自分のブランドに合わせて調整するだけでいい。

デザイン→コード変換の実践手順

ここからが本番だ。Figmaのデザインを実際にHTMLコードに変換する。

手順1: Figmaで選択範囲のリンクを取得

1. Figmaデスクトップアプリでテンプレートを開く
2. 変換したいセクション（またはページ全体）を選択する
3. 右クリック → 「選択範囲へのリンクをコピー」

ページ全体を変換する場合は、すべての要素をドラッグで選択してからリンクをコピーする。

手順2: Claude Codeにリンクを渡す

Claude Codeのプロンプトに、コピーしたリンクを貼り付けて以下のように指示する。

これを1つのHTMLファイルで忠実に完全に再現してください

Claude CodeがFigma MCPを通じてデザインデータを読み取り、HTML + CSSのコードを生成する。

手順3: Tailwind CSS CDNで忠実度を上げる

生のCSSで生成するよりも、Tailwind CSS CDNを使った方がデザインの再現度が高い。以下のように指示を追加する。

Tailwind CSS CDNを使って、1つのHTMLファイルで忠実に再現してください

Tailwind CSSのユーティリティクラスは、Figmaのスペーシング・カラー・タイポグラフィと相性が良い。padding、margin、font-sizeなどが体系化された値で出力されるため、AI臭いランダムな数値が出にくい。

画像の取り扱い：リンク切れを防ぐ

Figma MCPを使う上で最も注意すべきポイントが画像だ。

Figmaデスクトップアプリを閉じると、MCP経由で取得した画像リンクが切れる。 生成したHTMLをそのままデプロイすると、画像が表示されなくなる。

対策1: Figmaから画像をエクスポート

1. Figma上で画像を選択
2. 右パネルの「Export」セクションでPNGまたはJPGを選択
3. エクスポートしてプロジェクトのimagesフォルダに保存
4. HTMLの画像パスをローカルファイルに差し替える

対策2: Unsplash APIを使う

ダミー画像やヒーロー画像には、Unsplash APIの画像URLを使う方法もある。こちらはリンクが永続するため、デプロイ後も問題ない。

<img src="https://images.unsplash.com/photo-xxxxx?w=1200" alt="ヒーロー画像">

デプロイ：Netlifyで10秒公開

生成したHTMLファイルをすぐに公開したいなら、Netlifyが最速だ。

1. Netlify Drop にアクセス
2. 生成されたHTMLファイル（またはフォルダ）をドラッグ＆ドロップ
3. 数秒で公開URLが発行される

独自ドメインの設定やSSL証明書も無料で提供される。プロトタイプの共有やクライアントへのプレビュー提示に最適だ。

応用テクニック: 外部サイトのクローン

既存のWebサイトのデザインを参考にしたい場合、HTML2FIGプラグインが使える。

1. FigmaでPluginsメニューを開く
2. 「HTML2FIG」を検索してインストール
3. プラグインにURLを入力
4. 外部サイトのデザインがFigmaのオブジェクトとして取り込まれる

取り込んだデザインを編集してから、前述のMCPワークフローでコード化すれば、参考サイトの良い部分を取り入れつつオリジナルのデザインに仕上げられる。

AI感を消す3つのポイント

1. テンプレートのデザインシステムをそのまま使う

Figmaテンプレートにはプロが設計したデザイントークン（カラーパレット、タイポグラフィ、スペーシングの体系）が含まれている。MCPはこれらを忠実にCSSに変換する。AIが推測した値ではなく、デザイナーが意図した値がそのまま適用される。

2. コンポーネントの一貫性

Figmaのコンポーネントがそのまま再利用可能なHTML要素に変換される。ボタン、カード、ナビゲーションのスタイルがページ全体で統一されるため、「部分的にAIっぽい」という違和感が出ない。

3. Tailwind CSSによる体系化

生CSSだとAIがランダムな数値（margin: 37pxなど）を生成しがちだが、Tailwind CSSならユーティリティクラス（p-4、mt-8、text-lgなど）に強制される。結果として、人間のデザイナーが書いたような整然としたコードになる。

実践例: LPを10分で作る

具体的なワークフローをまとめる。

1. Figmaコミュニティで「SaaS Landing Page」を検索、Freeフィルターで絞り込み
2. 気に入ったテンプレートをFigmaにDuplicate
3. ロゴ・テキスト・カラーを自社ブランドに変更（5分）
4. 全体を選択 → 右クリック → 「選択範囲へのリンクをコピー」
5. Claude Codeに「Tailwind CSS CDNを使って1つのHTMLで忠実に再現して」と指示（2分）
6. 画像をFigmaからエクスポートしてローカルに差し替え（2分）
7. Netlify Dropにドラッグ＆ドロップで公開（1分）

合計10分。デザインスキルがなくても、プロ品質のLPが完成する。

まとめ

AI感の正体は「AIがデザインを推測すること」にある。Figma MCPを使えば「プロのテンプレートを選び、AIがコーディングする」という分業が実現する。デザインの品質はテンプレートが保証し、コーディングの速度はClaude Codeが担う。

セットアップは3ステップ、変換は数分。月額3,000円のFigma課金で、AI感のないWebサイトを量産できる環境が手に入る。

関連記事

• Claude MCP ブラウザ自動化の手順と実装例
• Claude Code CLIの実践活用ガイド
• AIワークフロー自動化の始め方