Claude × Figma Makeで高品質サイトを爆速で作る9つのプロンプト術

はじめに

AIを使えば、プロ級のウェブサイトを数時間で構築できる時代になった。特に Claude（Opus） と Figma Make の組み合わせは強力で、従来なら数十万円かかるようなサイトを短時間で形にできまさう。

ポイントは「役割を与えたプロンプト」。AIに専門家の視点を持たせることで、出力の質が格段に上がります。

9つの実践プロンプト

1. サイト設計の専門家

あなたは大手テック企業のプリンシパルアーキテクトです。
以下のウェブサイトを設計してください。

【サイト種別】ポートフォリオ / SaaS / ECなど
【ターゲット】（具体的に記述）
【必須機能】3〜5個リストアップ
【技術要件】レスポンシブ / SEO / パフォーマンス

出力してほしいもの：
1. サイト全体の構造図
2. 各ページの目的と役割
3. 技術スタックの推奨

2. デザインシステム生成

あなたはAppleのデザインディレクターです。
【ブランド名】のデザインシステムを作成してください。

ブランドの雰囲気：ミニマル / 大胆 / 高級 / 遊び心

生成してほしいもの：
1. カラーパレット（プライマリ、セカンダリ、ダークモード対応）
2. タイポグラフィ（9段階のスケール、フォント指定）
3. スペーシングのルール
4. コンポーネントのスタイルガイド

3. コンテンツ設計

あなたはOgilvyのコンバージョンコピーライターです。
【サイト種別】の全コピーを書いてください。

ブランドボイス：プロフェッショナル / カジュアル / 大胆
ターゲット：（具体的に）
目標：コンバージョン / 認知拡大 / リテンション

各ページに必要なもの：
1. ヒーローセクション（見出し6語以内、サブ見出し）
2. 特徴・ベネフィットの説明
3. CTA（行動喚起）のコピー
4. 社会的証明（testimonial）の配置

4. インタラクティブ機能の設計

あなたはフロントエンドアーキテクトです。
以下のインタラクティブコンポーネントのロジックを設計してください。

必要なコンポーネント：
1. マルチステップフォーム（バリデーション、進捗表示、状態管理）
2. 料金計算ツール（入力項目、計算式、リアルタイム更新）
3. 検索・フィルター機能
4. ダッシュボード要素

5. Figma Make用プロンプト変換

あなたはFigma Make専門のプロンプトエンジニアです。
以下の技術仕様を、Figma Makeで使える5つのプロンプトに変換してください。

【Claudeからの出力を貼り付け】

各プロンプトのルール：
1. プロセスではなく「完成形」から始める
2. ブランドの文脈を含める
3. 具体的な数値・サイズを指定する

6. アニメーション・インタラクション設計

あなたはAppleのモーションデザイナーです。
【セクション名】のインタラクションを設計してください。

必要な要素：
- ページ読み込み時のアニメーション（順序、時間、イージング）
- スクロール挙動（パララックス、ピン留め、出現効果）
- ホバー状態の変化
- マイクロインタラクション

7. レスポンシブ設計の最適化

あなたはモバイルファーストのUXエキスパートです。
以下のデザインをレスポンシブ対応してください。

ブレークポイント：
- モバイル（〜767px）
- タブレット（768〜1023px）
- デスクトップ（1024px〜）

各サイズで：
1. ナビゲーションの変形パターン
2. グリッドレイアウトの変化
3. タッチ操作への最適化
4. 画像・フォントサイズの調整

8. SEO・パフォーマンス最適化

あなたはテクニカルSEOの専門家です。
以下のサイトをSEO・パフォーマンス両面で最適化してください。

チェック項目：
1. メタデータ（タイトル、ディスクリプション、OGP）
2. 見出し構造（H1〜H6の階層）
3. 画像最適化（alt、サイズ、フォーマット）
4. Core Web Vitals対策
5. 構造化データの実装

9. 最終チェック・品質保証

あなたはQAエンジニアです。
公開前の最終チェックリストを作成してください。

カテゴリ：
1. 機能テスト（フォーム、リンク、インタラクション）
2. クロスブラウザ確認
3. アクセシビリティ（WCAG準拠）
4. セキュリティ基本チェック
5. アナリティクス設定確認

実践のコツ

1. 役職ロールプレイが鍵 - 「あなたは〇〇の専門家です」と明示することで、AIの出力品質が劇的に変わる
2. 具体性を上げる - 曖昧な指示より、数値や具体例を含めた指示の方が良い結果が出る
3. 段階的に進める - 一気に全部やろうとせず、設計→デザイン→実装と段階を踏む
4. 出力を次の入力に - Claudeの出力をFigma Makeのプロンプトとして再利用する流れを作る

まとめ

AIツールの組み合わせ方次第で、Web制作の生産性は10倍にもなる。大事なのは「AIに何をさせるか」を明確にすること。このプロンプト集を起点に、自分のワークフローに合わせてカスタマイズしていきましょう