【2026年版】Claude Design × Figma × WordPress｜デザインからFTP反映まで完全ガイド

「Figmaでデザインカンプは作ったけれど、コーディングが大変」「デザインをWordPressにどうやって反映すればいいかわからない」――Web制作の現場でよくある悩みです。

2026年4月にリリースされた Claude Design を使えば、Figmaのデザインをインポートして、AIとの対話でレスポンシブ対応や下層ページの作成まで行い、最終的にFTPでWordPressに反映できます。

この記事では、Figmaからのデザインインポート → Claude Designでの調整 → レスポンシブ対応 → 下層ページ作成 → HTML/CSSエクスポート → FTPでWordPressに反映、という一連の流れを解説します。

Claude Designとは

Claude Design は、Anthropic社が2026年4月17日にリリースしたAIデザインツールです。Claude Opus 4.7を基盤としており、チャットで指示するだけでWebサイトのプロトタイプやランディングページを自動生成できます。

最大の特徴は、生成されたデザインが HTML/CSSコードとして出力される 点です。画像ではなくコードなので、そのままWebサイトとして使用でき、WordPressにも反映できます。

料金プラン

⚠ 注意：無料プランではClaude Designは利用できません。Proプランでは週あたりの利用回数に制限があるため、本格的に使う場合はMaxプラン（$100/月〜）が安心です。

アクセス方法

claude.ai/design にアクセスし、Proプラン以上でログインすれば利用開始できます。左メニューの「Design」タブからも開けます。

FigmaのデザインをClaude Designにインポートする

Figmaで作成したデザインをClaude Designに取り込む方法は、大きく分けて 3つ あります。

方法1：.figファイルを直接チャットにインポートする（最も簡単・推奨）

Claude Designでは、Figmaの .figファイルをそのままチャット欄にインポート できます。画像に変換する手間が不要で、デザインの構造情報（レイヤー・カラー・フォントなど）がより正確に読み取られるため、再現精度が高い のが最大のメリットです。

Step 1：Figmaから.figファイルをエクスポートする

Figmaのデザインファイルをローカルに保存します。

1. Figmaでデザインファイルを開く
2. 左上の Figmaロゴ（メニュー） をクリック
3. 「File」→「Save local copy…」 を選択
4. 保存先フォルダを指定して 「保存」 をクリック
5. .fig形式のファイルがパソコンにダウンロードされる

💡 ポイント：保存される.figファイルには、そのデザインファイル内の すべてのページ・フレーム・コンポーネント・スタイル情報 が丸ごと含まれます。

Step 2：Claude Designのチャットに.figファイルをインポートする

エクスポートした.figファイルをClaude Designに直接取り込みます。

1. claude.ai/design を開く
2. 「Prototype」 または 「Other」 モードを選択する（Webサイトなら「Other」がおすすめ）
3. チャット欄に .figファイルをドラッグ＆ドロップ する（またはクリップアイコンからファイルを選択）
4. ファイルが添付されたことを確認し、指示を入力する

添付した.figファイルのデザインを忠実にHTML/CSSで再現してください。

【指示の詳細】
- レイアウト、配色、フォントサイズはデザインに忠実に従ってください
- レスポンシブ対応もお願いします（PC・タブレット・スマートフォン）
- セクション間の余白やパディングもデザイン通りに再現してください
- まずトップページから作成してください

複数ページを含む.figファイルの場合

.figファイル内に複数のページ（トップ・会社概要・サービスなど）が含まれている場合は、最初のプロンプトで構成を指定できます。

添付した.figファイルには以下のページが含まれています。
まずトップページをHTML/CSSで再現してください。

【ページ構成】
- トップページ
- 会社概要
- サービス紹介
- お問い合わせ

ヘッダーとフッターは全ページで共通にしてください。

.figインポートで再現精度を上げるコツ

.figファイルにはデザインの構造データが含まれているため、画像で渡すよりも精度が高くなりますが、さらに精度を上げたい場合は デザインの仕様をテキストで補足 するのが効果的です。

添付した.figファイルのトップページをHTMLで再現してください。

【補足仕様】
- 使用フォント：Noto Sans JP（見出しBold、本文Regular）
- ボタンのホバー時：透明度0.8に変更
- アニメーション：スクロール時にフェードイン
- ファビコン用のロゴは左上のものを使用

💡 ポイント：.figファイルを使うメリットは、カラーコード・フォント名・余白・角丸などの 数値情報がデザインデータに含まれている ため、画像インポートのように色やフォントが推測でズレるリスクが少ないことです。

方法2：Figma MCP連携でデザインシステムを読み込む（精度重視）

Figma MCP Server（Model Context Protocol）を使うと、Figmaのデザインシステム（色・フォント・スペーシング・コンポーネント）をClaude側に構造化データとして取り込めます。

事前準備

• Claude Code（Anthropic公式のCLIツール）のインストールが必要
• Figmaの有料プランが必要（デザインファイルへのAPIアクセスのため）

設定手順

Step 1：Claude CodeにFigma MCPを追加する

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

claude mcp add --transport http figma https://mcp.figma.com/mcp

Step 2：Figmaアカウントを認証する

Claude Codeで /mcp と入力し、figmaを選択して 「Authenticate」 を選びます。ブラウザが開くので 「Allow Access（アクセスを許可）」 をクリックします。

Step 3：デザイントークンを抽出する

FigmaファイルURL: https://www.figma.com/file/xxxxx/xxxxx
このファイルのデザインシステムを抽出してください。
色変数、タイポグラフィ、スペーシングを
tokens/design-tokens.json にW3C形式で出力してください。

Step 4：DESIGN.mdを生成する

抽出したデザイントークンをもとに、DESIGN.mdファイルを作成してください。
各トークンカテゴリ（色、フォント、余白）の使用ルールも記載してください。

Step 5：Claude Designで読み込む

Claude Designのプロジェクト作成時にリポジトリ（GitHubなど）を指定すると、DESIGN.mdやデザイントークンを自動的に読み込み、以降のデザイン生成に反映されます。

💡 ポイント：この方法を使えば、Figmaで定義したブランドカラーやフォントがClaude Designでも自動的に適用されるため、デザインの一貫性が保たれます。

方法3：Figma Connectorを使う

ClaudeにはFigmaの Connector（コネクタ）も用意されています。

1. Claudeの Settings（設定） を開く
2. Connectors を選択する
3. Figma を見つけて「Connect」をクリック
4. Figmaアカウントでログインし、アクセスを許可する

連携後は、Claude Designのチャットで「Figmaファイル（URL）のデザインを参照して」と指示すると、FigmaのデザインデータをAIが読み取って参照しながらデザインを生成します。

Claude Designでデザインを調整する

Figmaからインポートしたデザインを、Claude Designの3つの編集モードで調整します。

Editモード（直接編集）

テキストをクリックしてそのまま編集できます。右サイドに表示される Style Inspector では、フォント・サイズ・色・余白・角丸などを数値で精密に調整できます。

Commentモード（コメント指示）

デザイン上の特定箇所にコメントを付けて 「Send to Claude」 で修正指示を送ります。「この見出しのフォントサイズを24pxにして」のような具体的な指示が効果的です。

Drawモード（範囲指定指示）

丸や線でデザイン上の範囲を囲み、「この部分の背景色を#f5f5f5に変更して」のように視覚的な修正指示を出せます。

チャットでの調整指示例

- ヘッダーの背景色をFigmaのデザインに合わせて #1a1a2e にしてください
- フォントはNoto Sans JPを使ってください
- ボタンの角丸を8pxにしてください
- セクション間の余白を60pxに統一してください

💡 ポイント：大きな構造変更はチャットで、細かい微調整はEditモード＋Style Inspectorで行うのが効率的です。

レスポンシブ対応にする

Claude Designで生成されたデザインをレスポンシブ（スマートフォン・タブレット対応）にする方法です。

デザイン生成時にレスポンシブを指示する

最も確実な方法は、デザイン生成の段階でレスポンシブ対応を明示する ことです。

以下の仕様でトップページを作成してください。
- デスクトップ（1200px以上）：3カラムレイアウト
- タブレット（768px〜1199px）：2カラムレイアウト
- スマートフォン（767px以下）：1カラムレイアウト
- ハンバーガーメニューはスマホ表示時のみ表示
- 画像は画面幅に合わせて拡縮
- フォントサイズはスマホ時に若干小さく

生成後にレスポンシブ対応を追加する

現在のデザインをレスポンシブ対応にしてください。
ブレークポイント：
- 1200px以上：現在のレイアウトを維持
- 768px〜1199px：サイドバーを下に移動
- 767px以下：1カラム、ナビゲーションをハンバーガーメニューに

Claude Codeでのレスポンシブ強化

Claude Design単独でのレスポンシブ対応が不十分な場合は、Claude Codeハンドオフ でコードレベルの調整が可能です。

レスポンシブ対応を強化してください。
- モバイルファーストのCSS設計に変更
- メディアクエリは min-width で記述
- Lighthouseのモバイルスコアが90以上になるよう最適化
- タッチデバイスでのタップ領域を44px以上に確保

⚠ 注意：レスポンシブ対応の指示は、デザイン生成の最初の段階で入れるのが最も効果的です。後から追加すると、大幅なレイアウト変更が必要になる場合があります。

下層ページを作成する

トップページだけでなく、下層ページ（会社概要、サービス、ブログ一覧など）も作成する方法です。

DESIGN.mdとCONTENT.mdを用意する

複数ページで統一感のあるサイトを作るには、2つのドキュメントを先に準備する のが効果的です。

DESIGN.md（デザイン定義）

# デザイン仕様書

## カラーパレット
- メインカラー：#1a1a2e
- アクセントカラー：#e94560
- 背景色：#f2f1ed
- テキスト色：#26251e

## タイポグラフィ
- 見出し：Noto Sans JP Bold
- 本文：Noto Sans JP Regular, 16px, line-height: 1.8

## 共通コンポーネント
- ヘッダー：ロゴ左、ナビ右、高さ80px
- フッター：3カラム、背景#1a1a2e
- ボタン：角丸8px、パディング12px 24px
- セクション間余白：60px

CONTENT.md（コンテンツ定義）

# サイト構成

## ナビゲーション
- ホーム（index.html）
- 会社概要（about.html）
- サービス（service.html）
- ブログ（blog.html）
- お問い合わせ（contact.html）

## 各ページの内容
### ホーム
- ヒーローセクション：キャッチコピー + CTA
- サービス紹介：3カラムカード
- 実績：数字で表示
- お知らせ：最新3件

Claude Designで複数ページを生成する

DESIGN.mdとCONTENT.mdを準備したら、Claude Designで以下のように指示します。

DESIGN.mdの仕様に従って、CONTENT.mdのホームページを作成してください。
レスポンシブ対応で、HTML/CSSはスタンドアロンファイルとして出力してください。
ファイル名は index.html にしてください。

先ほど作成したトップページと同じデザインシステム（ヘッダー、フッター、
カラー、フォント）を使って、会社概要ページを作成してください。
ファイル名は about.html にしてください。

💡 ポイント：1ページ目を丁寧に作り込めば、2ページ目以降はヘッダー・フッター・デザインが自動的に統一されます。

HTML/CSSをエクスポートする

完成したページをWordPressにアップロードするためにエクスポートします。

スタンドアロンHTMLとしてエクスポート

1. Claude Designの画面右上の 「Export」ボタン をクリック
2. 「Standalone HTML」 を選択
3. HTMLファイルがダウンロードされる

Claude Codeハンドオフでファイル分離

スタンドアロンHTMLは1つのファイルにCSS・JSがすべて含まれています。WordPressへの反映では、ファイルを分離した方が管理しやすくなります。

project/
├── index.html
├── about.html
├── service.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    └── （画像ファイル）

FTPでWordPressに反映する

完成したHTML/CSSファイルをFTPソフトでWordPressサーバーにアップロードします。ここでは FileZilla（無料FTPソフト）を使った手順を詳しく解説します。

FileZillaのインストール

1. FileZilla公式サイト にアクセス
2. 自分のOS（Windows 64bit / 32bit / Mac）に合ったバージョンをダウンロード
3. インストーラーを起動する
4. 利用規約に同意 → ユーザー選択で 「Only for me」 を選択
5. スポンサー広告のチェックは 外す
6. インストール完了

FTP接続情報を確認する

FTPでサーバーに接続するには、以下の 3つの情報 が必要です。契約しているレンタルサーバーの管理画面またはサーバー契約時のメールで確認できます。

主要レンタルサーバー別の確認方法：

• エックスサーバー：サーバーパネル →「FTPアカウント設定」。または契約時の「サーバーアカウント設定完了のお知らせ」メールに記載
• ConoHa WING：コントロールパネル →「サイト管理」→「FTP」
• さくらサーバー：会員メニュー →「契約情報」。またはサーバー設定完了メールに記載
• ロリポップ：ユーザー専用ページ →「アカウント情報」

FileZillaでサーバーに接続する

1. FileZillaを起動する
2. メニューの 「ファイル」→「サイトマネージャ」 を開く
3. 「新しいサイト」 をクリックし、わかりやすい名前を付ける
4. 右側の設定を入力する

⚠ 注意：FTP情報（特にパスワード）は絶対に他人に共有しないでください。サーバーのすべてのファイルにアクセスできる重要な情報です。

WordPressのディレクトリ構造を確認する

/（ルート）
└── public_html（またはwww）
    ├── wp-admin/
    ├── wp-content/
    │   ├── themes/        ← テーマファイルはここ
    │   │   ├── jin/       ← 親テーマ（例：JIN:R）
    │   │   └── jin-child/ ← 子テーマ（※ここにアップロード）
    │   ├── plugins/
    │   └── uploads/
    ├── wp-includes/
    └── wp-config.php

方法A：子テーマにカスタムページテンプレートとして反映する（推奨）

WordPressの標準的な方法です。Claude Designで生成したHTMLをWordPressの カスタムページテンプレート として使用します。

Step 1：子テーマを確認する

すでに子テーマを使っている場合は、そのフォルダを使います。子テーマがない場合は作成します。

子テーマのstyle.css：

/*
Theme Name: JIN Child
Template: jin
*/

Template: の値は、お使いの親テーマのフォルダ名に合わせてください。

子テーマのfunctions.php：

<?php
// 親テーマのスタイルを読み込む
add_action('wp_enqueue_scripts', 'child_enqueue_styles');
function child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}

FileZillaで子テーマフォルダを /wp-content/themes/ にアップロードし、WordPress管理画面で子テーマを有効化します。

Step 2：カスタムページテンプレートを作成する

page-about.php（会社概要ページの例）：

<?php
/*
Template Name: 会社概要ページ
*/
get_header(); ?>

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/custom-pages.css">

<main class="custom-page about-page">
  <!-- ここにClaude Designで生成したHTMLのコンテンツ部分を貼り付ける -->
  <!-- ヘッダーとフッターはWordPressテーマのものを使うので除外する -->
</main>

<?php get_footer(); ?>

Step 3：CSSと画像をアップロードする

jin-child/
├── style.css          ← 子テーマの基本CSS
├── functions.php      ← 子テーマの機能定義
├── page-about.php     ← 会社概要テンプレート
├── page-service.php   ← サービステンプレート
├── page-contact.php   ← お問い合わせテンプレート
├── css/
│   └── custom-pages.css  ← Claude Designで生成したCSS
├── js/
│   └── custom.js
└── images/
    └── （画像ファイル）

Step 4：WordPressの固定ページでテンプレートを適用する

1. WordPress管理画面で 「固定ページ」→「新規追加」 を選択
2. ページタイトルを入力する（例：「会社概要」）
3. 右サイドバーの 「テンプレート」 セクションを開く
4. ドロップダウンから 「会社概要ページ」 を選択する
5. 「公開」 をクリック

Step 5：ナビゲーションメニューに追加する

1. 「外観」→「メニュー」 を開く
2. 作成した固定ページをメニューに追加する
3. 表示順をドラッグ＆ドロップで調整する
4. 「メニューを保存」 をクリック

方法B：静的HTMLをサブディレクトリに直接配置する

WordPressのテーマ構造を使わず、生成したHTMLファイルをそのままサーバーに配置する方法です。ランディングページなどの独立したページに向いています。

public_html/
├── （WordPressファイル群）
└── lp/
    ├── index.html
    ├── about.html
    ├── css/
    │   └── style.css
    ├── js/
    │   └── main.js
    └── images/
        └── （画像ファイル）

⚠ 注意：方法Bでは、WordPressのテーマヘッダー・フッターが適用されず、独立したページになります。サイト全体の統一感を持たせたい場合は方法Aが適しています。

FTPアップロード時の注意事項

• バックアップを取る：アップロード前に、変更するフォルダのバックアップをパソコンにダウンロードしておく
• ファイル名は英数字：日本語のファイル名は文字化けの原因になるため、英数字とハイフンのみにする
• パーミッション：アップロードしたファイルのパーミッションは通常644、フォルダは755が標準
• 上書き確認：既存ファイルを上書きする場合は、FileZillaが確認ダイアログを表示するので、内容を確認してからアップロードする

FTPアップロード後の確認

1. ブラウザでWordPressサイトにアクセスする
2. 作成した固定ページ（会社概要、サービスなど）を開く
3. パソコン（デスクトップ表示） でレイアウトを確認する
4. スマートフォン（またはブラウザのデベロッパーツール） でレスポンシブ表示を確認する
5. ナビゲーションリンクが正しく動作するか確認する
6. 画像が正しく表示されるか確認する

💡 ポイント：ブラウザのキャッシュが残っている場合、変更が反映されないことがあります。Ctrl + Shift + R（Windowsの場合）でキャッシュをクリアして確認してください。

全体ワークフローのまとめ

デザインからWordPress反映までの全体の流れをまとめます。

全手順

1. Figmaでデザインカンプを作成（または既存のデザインを用意）
2. Claude DesignにFigmaデザインをインポート（.figファイルインポート or MCP連携）
3. Claude Designでデザインを調整（Edit / Comment / Draw モード）
4. レスポンシブ対応を指示（ブレークポイントを明示）
5. 下層ページを生成（DESIGN.md + CONTENT.mdで統一感を維持）
6. HTML/CSSをエクスポート（スタンドアロンHTML → ファイル分離）
7. FileZillaをインストール・設定（FTP接続情報を入力）
8. WordPressの子テーマにファイルをアップロード（テンプレートファイル + CSS + 画像）
9. WordPress管理画面で固定ページにテンプレートを適用
10. 動作確認（デスクトップ＋スマホで表示チェック）

所要時間の目安

従来のコーディング作業と比較すると、大幅な時間短縮が期待できます。

まとめ

Claude Designを使えば、Figmaのデザインをベースに、AIとの対話だけでレスポンシブ対応のWebサイトを構築し、FTPでWordPressに反映できます。

• Figmaのデザインシステム をClaude Designに読み込ませることで、デザインの一貫性を保てる
• レスポンシブ対応 は生成時にブレークポイントを指示するのが効果的
• 下層ページ はDESIGN.mdとCONTENT.mdを事前に用意することで効率よく生成できる
• FTPアップロード はFileZillaを使えば、ドラッグ＆ドロップで完了
• WordPressの 子テーマ＋カスタムページテンプレート を使うのが安全で管理しやすい

デザインとコーディングの間にある壁を、Claude Designが埋めてくれます。ぜひ試してみてください。

猫乃手デザイン所｜IGA

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

XFacebookInstagramLINEContact

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