Claude × Figma Makeで高品質サイトを爆速構築｜実践プロンプト集

なごみ

2026/02/16

はじめに

「LP作るのに1週間もかかった…」「デザイナーに依頼すると高いし、自分でやると微妙になる…」

そんな悩み、AIで解決できる時代になりました。

Claude + Figma Make（FigmaのAI機能）を組み合わせると、2時間以内でプロ級のWebサイトが作れます。

この記事では、実際に使えるプロンプトを紹介します。

この方法のメリット

爆速: 従来1週間→2時間以内
低コスト: 外注50万円→ほぼ無料（ツール代のみ）
高品質: プロのデザインシステムを適用
再現性: プロンプトをテンプレ化すれば何度でも使える

使うツール

ツール

役割

料金

Claude

設計・コピー・仕様書生成

$20/月

Figma Make

デザイン自動生成

無料〜

Supabase（任意）

バックエンド

無料枠あり

全体の流れ

1. アーキテクチャ設計（Claude）
   ↓
2. デザインシステム生成（Claude）
   ↓
3. コンテンツ・コピー作成（Claude）
   ↓
4. Figma Makeでデザイン生成
   ↓
5. 実装・デプロイ

プロンプト集

1. アーキテクチャ・ストラテジスト

サイト全体の設計図を作るプロンプト。

あなたは「Principal Architect」（主任アーキテクト）です。

以下の情報をもとに、Webサイトの完全なアーキテクチャを設計してください。

【プロジェクト情報】
サービス名: [サービス名]
業種: [業種]
ターゲット: [想定ユーザー]
主な目的: [リード獲得/販売/認知向上など]

【出力してほしいもの】
1. サイトマップ（全ページ構成）
2. 各ページの目的とゴール
3. ユーザーフロー（どの順番でページを見るか）
4. 必要なコンポーネント一覧
5. 技術要件（必要な機能）

出力形式: Markdown構造化

用途: 最初の設計フェーズ、要件定義

2. デザインシステム・ジェネレーター

ブランドに合ったデザインルールを自動生成。

あなたは「Design System Architect」です。

以下のブランド情報をもとに、完全なデザインシステムを生成してください。

【ブランド情報】
ブランド名: [ブランド名]
業種: [業種]
ブランドの印象: [モダン/信頼感/親しみやすさ など]
参考にしたいサイト: [URL（任意）]

【出力してほしいもの】
1. カラーパレット
   - プライマリカラー（HEX）
   - セカンダリカラー
   - アクセントカラー
   - 背景色、テキスト色
   
2. タイポグラフィ
   - フォントファミリー推奨
   - 見出し（h1〜h4）のサイズ・ウェイト
   - 本文のサイズ・行間
   
3. スペーシングシステム
   - 基本単位（4px or 8px）
   - マージン・パディングの規則
   
4. コンポーネント仕様
   - ボタン（プライマリ/セカンダリ）
   - カード
   - フォーム要素

出力形式: JSON + CSS変数

用途: デザインの一貫性確保、Figmaへの適用

3. コンテンツ・アーキテクト

ページごとのコピーを自動生成。

あなたは「Conversion Copywriter」（コンバージョン特化のコピーライター）です。

以下のページのコンテンツを作成してください。

【ページ情報】
ページ: [トップページ/LPなど]
ターゲット: [想定ユーザー]
ゴール: [問い合わせ/購入/登録など]
差別化ポイント: [競合との違い]

【作成してほしいセクション】
1. ヒーローセクション
   - キャッチコピー（10語以内）
   - サブコピー（30語以内）
   - CTA文言
   
2. 課題提起セクション
   - ユーザーの悩み3つ
   
3. 解決策セクション
   - 提供価値3つ
   
4. 特徴・ベネフィット
   - 機能ではなくベネフィットで
   
5. 社会的証明
   - 実績・数字
   - お客様の声（想定）
   
6. FAQ
   - よくある質問5つ
   
7. 最終CTA
   - 行動を促す文言

【トーン】
[信頼感/親しみやすさ/プロフェッショナル など]

用途: LP作成、トップページ作成

4. レスポンシブ仕様ジェネレーター

デバイス別の表示ルールを定義。

以下のコンポーネントのレスポンシブ仕様を定義してください。

【ブレイクポイント】
- Mobile: 〜767px
- Tablet: 768px〜1023px
- Desktop: 1024px〜

【コンポーネント】
[ヒーローセクション/ナビゲーション/カード など]

【出力内容】
各ブレイクポイントでの：
- レイアウト変更点
- フォントサイズ変更
- 非表示にする要素
- スタック方向の変更

用途: モバイル対応の仕様書

5. テクニカル仕様ジェネレーター

開発者向けの実装仕様を生成。

以下のコンポーネントの技術仕様書を作成してください。

【コンポーネント】
名前: [コンポーネント名]
説明: [何をするコンポーネントか]

【出力内容】
1. Props定義（TypeScript形式）
2. 状態管理の要件
3. イベントハンドリング
4. アクセシビリティ要件（ARIA属性）
5. アニメーション仕様（あれば）
6. エッジケースの処理

用途: エンジニアへの引き継ぎ、実装仕様

6. SEO最適化チェッカー

作成したコンテンツのSEO改善点を提案。

以下のページコンテンツをSEO観点でレビューしてください。

【ターゲットキーワード】
メイン: [キーワード]
サブ: [関連キーワード]

【コンテンツ】
[作成したコピーを貼り付け]

【チェック項目】
1. タイトルタグ提案（60文字以内）
2. メタディスクリプション提案（120文字以内）
3. 見出し構造（H1〜H3）の最適化
4. キーワード配置の改善点
5. 内部リンク提案

用途: SEO対策、公開前チェック