FigmaデザインをClaude Codeでコーディングする完全ガイド

「Figmaでデザインは作れるけど、コーディングができない……」

そんな方に朗報です。Claudeのデスクトップアプリをパソコンに入れて、「Code」タブを開くだけで、FigmaのデザインをAIが自動でコーディングしてくれます。

「ターミナル？コマンドライン？」という方も安心してください。黒い画面は一切使いません。 普通のアプリをインストールして、チャット画面に日本語で指示を出すだけです。

この記事では、アプリのダウンロードから Figma連携 → コーディング → GitHub保存 → WordPress実装 までの全手順を、初心者にもわかるようにやさしく解説します。

この方法でできること

• Figmaのデザインを、AIが自動でHTML/CSSに変換してくれる
• PC版・スマホ版の両方に対応した（レスポンシブ）ページが作れる
• WordPressにそのまま実装できる
• GitHubでコードが自動管理される
• スクロールアニメーションなどの動きもお願いできる

かかるお金は月5,000円だけ

① Figma プロフェッショナルプラン Devシート：月額約1,800円
Figmaの「Dev Mode（開発モード）」を使うための課金です。Claude CodeがFigmaのデザイン情報（色・サイズ・余白など）を読み取れるようになります。2025年3月のプラン改定でDevシート（Dev Mode専用のシート）が新設され、デザイン機能が不要なら以前よりも安くDev Modeを使えるようになりました。

② Claude Pro プラン：月額20ドル（約3,000円）
Claudeデスクトップアプリの「Code」タブを使うために必要な課金です。Proプラン以上でClaude Codeが使えるようになります。

合計で 月額約5,000円前後 から始められます。1案件こなせば元が取れます。

無料で用意するもの

• Claudeデスクトップアプリ ：claude.com/download から無料ダウンロード
• Figmaデスクトップアプリ ：figma.com/downloads から無料ダウンロード
• FTPソフト「FileZilla」 ：WordPress実装時に使用。無料。
• GitHubアカウント ：コード保存・共有に使用。無料。

GitHubとは？なぜ使うのか

GitHub（ギットハブ） は、一言で言うと 「コードのクラウド保存＆タイムマシン」 です。

GitHubを使う3つの理由

1. 履歴が全部残る（バージョン管理）
コーディングの変更履歴がすべて記録されます。「やっぱり前のデザインに戻したい」というとき、いつでも過去のバージョンに戻せます。Claude Codeで何度もやり直しをしても、それぞれの状態が保存されているので安心です。

2. クラウドに保存される（バックアップ）
自分のパソコン（ローカル）だけに保存していると、万が一のときにデータが消えるリスクがあります。GitHubにプッシュ（アップロード）しておけば、クラウド上にバックアップが残ります。PCが壊れても5分で復旧できます。

3. URLで簡単に共有できる
GitHubのリポジトリ（プロジェクトフォルダ）には固有のURLがあります。このURLを相手に渡すだけで、コードの中身を見てもらったり、ダウンロードしてもらうことができます。ZIPで送る手間がゼロになります。

GitHubリポジトリのフォルダ構成例

project-name/
├── style.css                  # テーマ宣言（WordPress子テーマ必須）
├── page-lp.php                # LPページテンプレート
├── css/
│   └── lp-style.css           # LPスタイルシート + アニメーション
├── js/
│   └── lp-script.js           # アニメーションスクリプト
├── images/                    # 画像ファイル（WebP形式推奨）
├── index.html                 # ローカル確認用（本番では使用しない）
└── README.md                  # プロジェクト説明

全体の流れ

① Figmaでデザインを作る
　↓
② Claudeデスクトップアプリをインストール（普通のアプリと同じ）
　↓
③ 「Code」タブを開いてFigmaと接続
　↓
④ チャットでコーディングをお願いする（日本語でOK）
　↓
⑤ できたページをPC・スマホで確認する
　↓
⑥ 崩れてたら日本語で修正をお願いする
　↓
⑦ GitHubに保存する
　↓
⑧ WordPressにFTPで実装して公開

ターミナル（黒い画面）は一度も使いません。全部アプリの画面で完結します。

Step 1. Claudeデスクトップアプリをインストールする

普通のアプリをインストールするのと同じです。 ターミナルは使いません。

1. claude.com/download にアクセス
2. 「macOS」または「Windows」 のボタンをクリックしてダウンロード
3. ダウンロードしたファイルをダブルクリックしてインストール
4. アプリを起動 → 「始める」 をクリック
5. メールアドレスまたはGoogleアカウントでサインイン

これでインストール完了です。

アプリを開くと、上部に 「Chat」「Cowork」「Code」 という3つのタブがあります。今回使うのは 「Code」タブ です。

Step 2. 「Code」タブでプロジェクトを開く

1. Claudeデスクトップアプリの 「Code」タブ をクリック
2. 「Open folder」（フォルダを開く）をクリック
3. あらかじめ作っておいたプロジェクト用フォルダを選択

これでClaude Codeがそのフォルダの中を読み書きできる状態になります。チャット画面が表示されるので、ここに日本語で指示を書いていきます。

Step 3. FigmaとClaude Codeを接続する

Claude CodeにFigmaのデザインを読み取ってもらうために、Figma MCP（エムシーピー） という接続をします。MCPとは、AIが外部サービスのデータにアクセスするための「橋渡し」の仕組みです。

※現在は、設定→コネクタからMCPへ接続できます。

Figma側の準備

1. Figmaデスクトップアプリ をダウンロードして開く（https://www.figma.com/downloads/）
2. 左上のFigmaロゴをクリック
3. 「Preferences（設定）」を選ぶ
4. 「Enable Dev Mode MCP Server」にチェック を入れる

Claude Code側の接続

Claudeデスクトップアプリの「Code」タブで、プロンプトボックスの横にある 「＋」ボタン → 「Connectors」 をクリックします。一覧が表示されるので、Figmaを選んで接続してください。

または、Codeタブのチャット画面に以下のように入力するだけでも接続できます：

Figma MCPサーバーに接続してください。
ローカルのFigmaデスクトップアプリで
Dev Mode MCPサーバーを有効にしています。
http://127.0.0.1:3845/sse に接続してください。

接続できたか確認するには、チャットに「Figmaに接続できていますか？」と聞けば教えてくれます。

GitHub接続

「Code」タブの 「＋」→「Connectors」 からGitHubも接続できます。接続しておけば、チャットで「GitHubにプッシュしてください」と頼むだけで保存できます。

Figmaデザインデータの準備

コーディング対象によって、Figma側のデータの準備方法が変わります。

LPの場合

LPをコーディングする場合は、Figmaで新規ファイルを作成し、コーディングするデザインだけを貼り付けましょう。 ボツ案や検討中のデザインが混在しているとAIが混乱します。

ホームページの場合

既存サイトのページをコーディングする場合は、コーディングするデータのみ をFigmaに用意します。ヘッダー・フッターなどWordPressテーマで既に実装されている部分は含めず、実装対象のセクションだけに絞りましょう。

Claude Codeでコーディングを依頼する手順

1. Dev Modeをオンにする

Figmaの画面右上にある 「Dev Mode」ボタン（</>マーク） をクリックしてオンにします。必ずDev Modeをオンにしてからコーディングを依頼してください。

2. フレームのURLをコピーしてClaude Codeに渡す

Figma上でコーディングしたいフレーム（セクション）を選択し、以下のどちらかの方法でClaude Codeに指示を出します。

方法A：MCPプロンプト例をコピーして使う
Dev Mode画面に表示されるMCPプロンプト例をコピーして、Claude Codeのチャットに貼り付けます。

方法B：FigmaのURLを貼り付ける
フレームを右クリック →「Copy/Paste as」→「Copy link to selection」でリンクをコピーし、Claude Codeのチャットに貼り付けます。

3. レスポンシブ対応を必ず依頼する

Claude Codeへの指示には、必ず「レスポンシブ対応をしてください」と明記しましょう。以下のプロンプトをそのままコピーして、URLだけ差し替えてください。

このFigmaのデザインからコーディングしてください。

【お願い】
- HTML / CSS / JavaScript で作ってください
- レスポンシブ対応をしてください（PC：1920px、スマホ：375px）
- 確認用のindex.htmlも作ってください
- WordPress用のPHPファイルも作ってください
- 画像はimages/、CSSはcss/、JSはjs/フォルダに分けてください

【FigmaのURL】
ここにコピーしたURLを貼り付ける

💡 一度に全ページ頼まず、セクションごとに分けてお願いすると精度が上がります。

コーディング後の確認手順（超重要！）

コーディングが終わったら、必ず以下の確認を行いましょう。 ここを飛ばすと、本番で崩れたデザインを公開してしまうことになります。

1. PC版（1920px）での確認

フォルダの中の index.html をダブルクリックでブラウザに表示し、ウィンドウを最大化した状態でFigmaのデザインと見比べます。

2. スマホ版（375px）での確認

index.html を開いた状態で F12キー を押し、デベロッパーツールを開きます。左上の スマホマーク をクリックし、幅を 375 にしてスマホサイズで確認します。

3. Claude Codeに修正を依頼する

崩れている箇所があれば、具体的に Claude Codeのチャットに書いて修正を伝えます。

以下を修正してください。

【スマホ版（375px）】
- ヒーローの画像がはみ出しています → 画面内に収めてください
- カードが横並びのまま → 縦1列にしてください
- ボタンの文字が小さい → 16px以上にしてください

4. ファイルの更新を必ず確認する

Claude Codeに修正をお願いしたら、必ず連携するファイル（CSS、PHP、JSなど）が実際に更新されているか確認してください。 ブラウザで Ctrl + Shift + R（スーパーリロード）を押して最新の状態で確認しましょう。

GitHubに保存する

Claude Codeのチャットに頼むだけです：

このプロジェクトをGitHubにプッシュしてください。

GitHub連携がまだの場合は、「Code」タブの「＋」→「Connectors」からGitHubを接続してください。

WordPressへの実装方法（子テーマ + FTP）

コーディングが完了したら、WordPressサイトに実装します。ここでは 子テーマ を使った方法を紹介します。

子テーマとは？

親テーマ（SWELLやJIN:Rなど）の機能をそのまま引き継ぎつつ、カスタマイズ用のファイルを追加できる仕組みです。親テーマがアップデートされても、子テーマのカスタマイズは上書きされずに残ります。

FTPを使った実装手順

Step 1. FTPソフトでサーバーに接続
FileZilla（無料）などのFTPソフトを使い、Webサーバーに接続します。

Step 2. 子テーマフォルダをアップロード
以下のパスに、子テーマのフォルダを 解凍した状態で まるごとアップロードします。

/wp-content/themes/あなたの子テーマ名/

Step 3. WordPress管理画面でテーマを有効化
WordPress管理画面 → 外観 → テーマ → アップロードした子テーマを有効化します。

Step 4. 固定ページを作成してテンプレートを割り当て
固定ページを新規作成し、右サイドバーの「テンプレート」からLPページのテンプレートを選択して公開します。

画像はWebPに変換して軽くしよう

コーディング時に使用する画像は、WebP形式に変換する ことをおすすめします。WebPはGoogleが開発した画像フォーマットで、JPEGやPNGと比較してファイルサイズが20〜40%小さくなります。

Squoosh（https://squoosh.app/）という無料ツールに画像をドラッグするだけで変換できます。品質は75〜85%がおすすめです。

モーションをつけたい場合

スクロールアニメーションやホバーエフェクトなど、動きをつけたい場合は Claude Codeのチャットにお願いするだけ で追加してくれます。

各セクションにスクロール時のフェードインアニメーションを追加してください。
画面に入ったら下からふわっと浮き上がるように表示してください。
ボタンにホバー時の浮き上がりエフェクトも追加してください。

CSSアニメーションやJavaScriptのIntersection Observerを使った実装を自動で行ってくれます。

クライアントに仮実装して確認してもらう場合

クライアントに「本番に近い状態」で見てもらいたい場合は、自分の持っているホームページのサーバーを使って仮実装 しましょう。

自分のサーバーの適当なサブディレクトリにFTPでアップロードし、仮URLを共有すれば、クライアントがスマホやPCから実際のブラウザで確認できます。確認が終わったら仮データを削除し、本番のクライアントサーバーに正式に実装します。

まとめ

この方法の良いところは、ターミナル（黒い画面）を一切使わない ことです。やることは3つだけ。

1. Claudeデスクトップアプリをダウンロード（普通のアプリと同じ）
2. 「Code」タブを開いてフォルダを選ぶ
3. チャットに日本語で指示を出す

あとはAIがコードを作ってくれるので、確認して、直してもらって、GitHubに保存して、WordPressにアップするだけ。

Figma × Claude Code × GitHubのワークフローをまとめると、以下の流れです。

1. Figma でデザインを作成（LP：新規ファイル、HP：コーディングデータのみ）
2. Claudeデスクトップアプリ の「Code」タブでFigma接続し、レスポンシブ対応でコーディング
3. ローカル のindex.htmlで1920px・スマホサイズを確認、修正依頼
4. GitHub にプッシュしてバージョン管理・共有
5. WordPress子テーマ としてFTPでサーバーにアップロード、テーマを有効化
6. 必要に応じて WebP変換・モーション追加・仮実装確認

月額約5,000円で、デザイナーがコーディングまでできる時代です。 まずは小さなプロジェクトで試してみてください。

猫乃手デザイン所｜IGA

猫の手も、デザインの手も。 中小企業・個人事業主の 「丸っとデザインします。

XFacebookInstagramLINEContact

猫乃手デザイン所は、 「専門用語はできるだけナシ」「現場感のある提案」を大切に、ホームページ・LP・バナー・資料デザインまで あなたの事業にそっと寄り添うWEBパートナーです。