【ターミナル不要】FigmaデザインをClaudeアプリの「Code」タブでコーディングする方法｜初心者でもできます
Figmaでデザインは作れるけど、コーディングができない……」
そんな方に朗報です。
Claudeのデスクトップアプリをパソコンに入れて、「Code」タブを開くだけで、FigmaのデザインをAIが自動でコーディングしてくれます。
ターミナル？ コマンドライン？ 黒い画面？ 一切使いません。
普通のアプリをインストールして、チャット画面に日本語で指示を出すだけです。
━━━━━━━━━━━━━━━━━━
この方法でできること
━━━━━━━━━━━━━━━━━━
・Figmaのデザインを、AIが自動でHTML/CSSに変換
・PC版・スマホ版の両方に対応したページが作れる
・WordPressにそのまま実装できる
・GitHubでコードが自動管理される
・アニメーションもAIに頼める
━━━━━━━━━━━━━━━━━━
かかるお金は月5,000円だけ
━━━━━━━━━━━━━━━━━━
① Figma Devシート：月額 約1,800円
→ Dev Mode（開発モード）が使えるプラン。AIがデザイン情報を読めるようになります。
② Claude Proプラン：月額 20ドル（約3,000円）
→ デスクトップアプリの「Code」タブを使うために必要。
合計：月額 約5,000円。1案件で元が取れます。
【無料で用意するもの】
・Claudeデスクトップアプリ（claude.com/download から無料）
・Figmaデスクトップアプリ（figma.com/downloads から無料）
・FileZilla（FTPソフト・無料）
・GitHubアカウント（無料）
━━━━━━━━━━━━━━━━━━
GitHubってなに？
━━━━━━━━━━━━━━━━━━
「コードのクラウド保存＆タイムマシン」です。
① 履歴が全部残る → 「前のバージョンに戻したい」が一瞬
② クラウドに保存 → PCが壊れてもコードは安全
③ URLで共有 → URLを渡すだけでコードを共有。ZIP不要
━━━━━━━━━━━━━━━━━━
全体の流れ
━━━━━━━━━━━━━━━━━━
① Figmaでデザインを作る
↓
② Claudeデスクトップアプリをインストール ← 普通のアプリと同じ！
↓
③ 「Code」タブを開いてFigmaと接続
↓
④ チャットでコーディングをお願い ← 日本語でOK！
↓
⑤ できたページをPC・スマホで確認
↓
⑥ 崩れてたら日本語で修正をお願い
↓
⑦ GitHubに保存
↓
⑧ WordPressにFTPで実装して公開
ターミナル（黒い画面）は一度も使いません。全部アプリの画面で完結します。
━━━━━━━━━━━━━━━━━━
Step 1. Claudeデスクトップアプリをインストール
━━━━━━━━━━━━━━━━━━
普通のアプリをインストールするのと全く同じです。
claude.com/download にアクセス
「macOS」または「Windows」をクリックしてダウンロード
ダウンロードしたファイルをダブルクリックしてインストール
アプリを起動 →「始める」をクリック
メールアドレスまたはGoogleアカウントでサインイン
完了です。
アプリを開くと、上部に「Chat」「Cowork」「Code」という3つのタブがあります。
今回使うのは「Code」タブです。
━━━━━━━━━━━━━━━━━━
Step 2.「Code」タブでプロジェクトを開く
━━━━━━━━━━━━━━━━━━
アプリの「Code」タブをクリック
「Open folder」をクリック
あらかじめ作っておいたプロジェクト用のフォルダを選ぶ
これでAIがそのフォルダの中を読み書きできる状態になります。
チャット画面が出るので、ここに日本語で指示を書いていきます。
━━━━━━━━━━━━━━━━━━
Step 3. FigmaとClaude Codeを接続する
━━━━━━━━━━━━━━━━━━
AIにFigmaのデザインを読み取ってもらうために「MCP接続」をします。
※現在は、設定→コネクタからMCPへ接続できます。
【Figma側の準備】
Figmaデスクトップアプリを開く（ https://www.figma.com/downloads/ ）
左上のFigmaロゴ → Preferences
「Enable Dev Mode MCP Server」にチェック
【Claude Code側の接続】
Codeタブのチャット画面で、プロンプトボックス横の「＋」ボタン →「Connectors」からFigmaを選んで接続。
または、チャットに直接こう書いてもOK：
Figma MCPサーバーに接続してください。
ローカルのFigmaデスクトップアプリで
Dev Mode MCPサーバーを有効にしています。
http://127.0.0.1:3845/sse に接続してください。
「Figmaに接続できていますか？」と聞けば確認できます。
━━━━━━━━━━━━━━━━━━
Step 4. Figmaデザインの準備
━━━━━━━━━━━━━━━━━━
LPの場合
→ 新規ファイルを作って、実装するデザインだけ配置。ボツ案は含めない。
ホームページの場合
→ コーディングする部分だけを用意。ヘッダー・フッターは含めない。
⚠ Figma右上の「</>」ボタンをクリックして「Dev Mode」を必ずオンにしてください。
━━━━━━━━━━━━━━━━━━
Step 5. コーディングをお願いする
━━━━━━━━━━━━━━━━━━
① Figmaでフレームを選択 → 右クリック → Copy/Paste as → Copy link to selection
② Claude Codeのチャットに以下を貼り付ける（URLだけ差し替え）：
このFigmaのデザインからコーディングしてください。
【お願い】
HTML / CSS / JavaScript で作ってください
レスポンシブ対応をしてください（PC：1920px、スマホ：375px）
確認用のindex.htmlも作ってください
WordPress用のPHPファイルも作ってください
画像はimages/、CSSはcss/、JSはjs/フォルダに分けてください
【FigmaのURL】
ここにコピーしたURLを貼り付ける
⚠「レスポンシブ対応をしてください」は必ず書く！書かないとスマホで崩れます。
💡 一度に全部頼まず、セクションごとに分けるとキレイなコードになります。
━━━━━━━━━━━━━━━━━━
Step 6. デザインを確認する（超重要！）
━━━━━━━━━━━━━━━━━━
【PC版の確認】
フォルダのindex.htmlをダブルクリック → ブラウザで開いてFigmaと見比べる。
【スマホ版の確認】
ブラウザでindex.htmlを開いた状態でF12キーを押す
左上のスマホマークをクリック
幅を375にして確認
【崩れていたら】
チャットに具体的に書いて修正をお願い：
以下を修正してください。
【スマホ版（375px）】
画像がはみ出しています → 画面内に収めてください
カードが横並びのまま → 縦1列にしてください
ボタンの文字が小さい → 16px以上にしてください
⚠ 修正後は Ctrl + Shift + R でブラウザをリロードして確認。
⚠ ファイルが本当に更新されているかもチェックしてください。
━━━━━━━━━━━━━━━━━━
Step 7. GitHubに保存する
━━━━━━━━━━━━━━━━━━
チャットに頼むだけ：
このプロジェクトをGitHubにプッシュしてください。
GitHub連携は「＋」→「Connectors」からGitHubを選んで接続できます。
━━━━━━━━━━━━━━━━━━
Step 8. WordPressに実装する（子テーマ＋FTP）
━━━━━━━━━━━━━━━━━━
子テーマとは？
→ 親テーマ（JIN:R、SWELLなど）のカスタマイズ用フォルダ。親テーマが更新されても消えません。
【FTPでアップする手順】
FileZilla（無料）でサーバーに接続
/wp-content/themes/ に子テーマフォルダをまるごとアップ（ZIPではなく解凍して！）
WordPress管理画面 → 外観 → テーマ → 有効化
固定ページ → 新規追加 → テンプレートで「LPページ」選択 → 公開
URLにアクセスしてデザインが表示されれば完成！
━━━━━━━━━━━━━━━━━━
便利Tips
━━━━━━━━━━━━━━━━━━
📷 画像はWebPに変換して軽くしよう
→ https://saruwakakun.com/tools/png-jpeg-to-webp/に画像をドラッグ → WebPで保存。20〜40%軽くなります。
✨ 動きをつけたいとき
→ チャットで頼むだけ：
スクロール時にフェードインするアニメーションをつけてください。
ボタンにホバーで浮き上がる効果もお願いします。
👀 クライアントに確認してもらうとき
→ 自分のサーバーに仮アップしてURLを共有。OKが出たら本番実装。
━━━━━━━━━━━━━━━━━━
まとめ
━━━━━━━━━━━━━━━━━━
この方法は「ターミナル（黒い画面）」を一切使いません。
やることは3つだけ：
Claudeデスクトップアプリをダウンロード（普通のアプリと同じ）
「Code」タブを開いてフォルダを選ぶ
チャットに日本語で指示を出す
あとはAIがコードを作ってくれるので、確認→修正→WordPress実装。
月額約5,000円で、デザイナーがコーディングまでできる時代です。
まずは小さなプロジェクトで試してみてください。
■ 最後に—デザインの相談はお気軽に。
LP制作・Meta広告運用代行
ホームページ制作
バナー制作
採用サイト構築
セミナー・スクールサイト構築
Elementor / STUDIO 実装
LINE公式ｘエルメ構築
など、あなたの事業に合わせて最適な提案ができます。
「まずは小さく試してみたい」という方も大歓迎です。