Figmaのデザインから、コーディング経験なしで、1本の午後のうちにClaudeを使ってライブにデプロイされたウェブサイトを作成できます。ワークフローはシンプルです：Figmaでデザインし、デザインをエクスポートまたはClaudeに説明し、コードを生成し、VercelまたはNetlifyにデプロイします。無料ティアを使えば、全体で$0です。
X上で「2時間で$5,000のウェブサイト」というクリップを投稿している人がいますが、ほとんどの人が実際のステップをスキップしています。このガイドはそのギャップを埋めます。すべてのプロンプトが含まれており、すべての決定ポイントが説明されており、トレードオフは正直です。
なぜこれが今機能するのか（1年前はそうではなかった理由）
1年前は、AIでデザインをコードに変換することは、スクリーンショットを貼り付けて、数時間のクリーンアップが必要な粗い近似値を取得することを意味していました。今日、Claudeの100万トークンのコンテキストウィンドウは、デザインシステム全体（色、タイポグラフィ、間隔、コンポーネントの詳細）を供給でき、最初のパスで設計に緊密に一致する本番品質のコードを取得できることを意味します。
重要な洞察：取得するものの品質は、デザインをどの程度上手く説明するかにほぼ完全に依存します。曖昧な説明は曖昧なウェブサイトを生成します。具体的で構造化された説明は、具体的で洗練されたウェブサイトを生成します。
必要なもの
3つのツール、すべて無料ティア付き：
Figma — デザイン用。無料ティアで問題ありません。デザインがない場合は、Figma Communityから無料テンプレートを取得してカスタマイズしてください。
Claude — コード生成用。無料ティアはSonnetを提供し、これでよく機能します。Pro（月額$20）はより複雑なサイトのためにOpus 4.7を提供します。
Vercel or Netlify — デプロイ用。どちらも無料ティアを持っています。GitHubリポジトリに接続し、コードをプッシュして、サイトを公開します。
ステップ1：Figmaデザインを準備する
Claudeを関与させる前に、Figmaファイルを整理してください。このステップは、その後のすべての品質を決定します。
デザインは、明確に定義されたページ（ホーム、について、お問い合わせなど）、一貫した間隔と配置、見える色パレット（正確な16進数値をメモして）、特定されたフォント、およびデスクトップとモバイルが可能な場合のレスポンシブブレークポイントを備えている必要があります。
ピクセルパーフェクトについて心配しないでください。Claudeは実装の詳細をよく処理します。重要なのは、デザインが構造、階層、および視覚的スタイルを明確に伝えることです。
プロのヒント： Figmaレイヤーに意味のある名前を付けてください。「Hero Section」、「Feature Cards」、「Pricing Table」は、プロンプトを書くとき「Frame 247」よりもはるかに便利です。
ステップ2：デザイン情報をエクスポートする
Claudeはじゃ直接Figmaファイルを読むことはできないため、Claudeが機能できる情報にデザインを翻訳する必要があります。最も簡単なものから最も正確なものまで、3つのアプローチがあります：
アプローチA：スクリーンショット＋説明。 デザイン内の各ページのフルページスクリーンショットを撮ります。これらをレイアウト、色、およびインタラクションの書かれた説明とともにClaudeにアップロードします。これは最速のアプローチで、驚くほどよく機能します。
アプローチB：Figma Dev Modeエクスポート。 Figmaの有料プランがある場合は、Dev Modeを使用してCSS値、間隔トークン、およびコンポーネント仕様をエクスポートします。これらをスクリーンショットとともにClaudeに供給して、より正確な出力を得ます。
アプローチC：書かれたデザイン仕様。 すべてのセクション（ヘッダー、ヒーロー、フィーチャー、テスティモニアル、フッター）の詳細な説明を書き出します。これには色、フォント、サイズ、およびレイアウトが含まれます。これはより長くかかりますが、出力に対してより多くの制御を与えます。Figmaデザインなしで構築している場合、これがあなたのパスです。
ステップ3：初期プロンプトを書く
これはほとんどの人が間違っている場所です。彼らは「このスクリーンショットのようなウェブサイトを構築してくれ」と書き、ジェネリック出力を得ます。ここが一貫して品質の結果を生成するプロンプト構造です：
次の仕様で[ページ数]ページのウェブサイトを構築してください：
デザインシステム：
- プライマリカラー：[hex]
- セカンダリカラー：[hex]
- 背景：[hex]
- テキスト：[hex]
- フォント：見出し用[フォント名]、本文用[フォント名]
- ボーダーラジアス：[値]
- 間隔スケール：[値]
ページ1 — ホーム：
- ヒーローセクション：[正確な説明 — ヘッドラインテキスト、サブテキスト、CTAボタンテキスト、背景処理]
- フィーチャーセクション：[数]枚のカード、各々[アイコン/画像、タイトル、説明]
- テスティモニアル：[レイアウト説明]
- CTAセクション：[説明]
- フッター：[リンクとレイアウト]
ページ2 — について：
[同じレベルの詳細]
テクニカル：
- Next.jsとTailwind CSSを使用
- モバイルレスポンシブ
- セクション間のスムーススクロール
- すべての画像をプレースホルダーdivとして背景色で（後で実際の画像を追加します）ユーザーが見るものについて詳しく説明されるほど、出力は良くなります。コードについて説明しないでください — 経験について説明してください。送信する前にこのプロンプトを鋭くする助けが必要な場合、私たちの無料プロンプトオプティマイザーはより良い結果のためにそれを構造化するのに役立つことができます。
ステップ4：レビューと反復
Claudeの最初の出力は通常、デザインの60～80%をキャプチャします。残りの20～40%は反復から来ます。これはほとんどの「vibe coding」チュートリアルが終わるステップですが、実際の品質が起こる場所です。
3つのことをチェックして出力をレビューします：レイアウトはあなたのデザインと一致していますか？色とタイポグラフィは正しく感じられていますか？モバイルで見栄えがいいですか？
次に、具体的なフィードバックで反復します。「より良くしてくれ」と言わないでください。代わりに、言ってください：
- 「ヒーローセクションはより多くの垂直パディングが必要です — 上下に120pxを追加してください」
- 「フィーチャーカードは、デスクトップでは3列グリッド、モバイルでは単一列にする必要があります」
- 「CTAボタンはホバーエフェクトを持つべきです — 背景を10%暗くし、わずかにスケールアップしてください」
- 「フッターリンクは4列で配置する必要があります：Product、Company、Resources、Legal」
各フィードバックラウンドは3～5つの特定の問題に対処する必要があります。3ラウンドは通常、デザインの95%に到達します。
これから価値を得ていますか？ AIワークフロー、ツール、実用的なガイドに関する1つのディープダイブを毎週公開しています。最初にそれを取得する読者に参加してください →
ステップ5：実際のコンテンツと画像を追加する
プレースホルダーテキストを実際のコピーに置き換えてください。プレースホルダー画像divを実際の画像に置き換えてください。ウェブサイトのコピーを書くのに助けが必要な場合、Claudeはこれで優れています — ブランド説明を与えて、あなたの声に合ったホームページコピーを求めてください。
画像については、UnsplashまたはPexelsから無料ストックを使用するか、AI画像ツールでカスタム画像を生成してください。画像ファイルをプロジェクトの/publicフォルダにドロップし、src属性を更新してください。
ステップ6：1クリックでデプロイする
Next.jsを使用した場合（推奨）、Vercelへのデプロイは60秒かかります：
- GitHubリポジトリにコードをプッシュします
- vercel.comに移動してGitHubでサインインします
- 「Import Project」をクリックしてリポジトリを選択します
- VercelはNext.jsを自動検出し、すべてを構成します
- 「Deploy」をクリックします
あなたのサイトは.vercel.app URLでライブです。カスタムドメインがある場合は、Vercelの設定で接続してください。
Netlifyはほぼ同じように機能します — GitHubからインポート、フレームワークを自動検出、デプロイします。両方のプラットフォームはSSL、CDN、および継続的なデプロイメントを自動的に処理します。GitHubにプッシュするたびに、サイトが更新されます。
どのデプロイメントプラットフォームを使用するか確実でありませんか？完全な比較を書きました：Vibe Codingの後どこにデプロイしますか？
人々を引っかかる一般的な間違い
1. 書かれたコンテキストなしのスクリーンショットをClaudeに与える。 スクリーンショットは役立ちますが、Claudeは正確なコードを生成するために色、フォント、間隔、およびレイアウトの書かれた説明が必要です。スクリーンショットは参照です — テキストが指示です。
2. 1つのプロンプトですべてを構築しようとする。 アニメーション、フォーム、CMSを備えた6ページのウェブサイトは1パスには多すぎます。ページごと、セクションごとに構築します。ホームページから開始して、それを正しくして、次のページに移動します。
3. モバイルレスポンシブをスキップする。 プロンプトでモバイルについて言及しない場合、Claudeはデスクトップのみのレイアウトを構築します。常にテクニカル要件に「モバイルレスポンシブ」を含め、375px幅で出力をテストしてください。
4. インタラクションをテストしない。 すべてのボタンをクリックし、すべてのフォームに入力し、すべてのページをスクロールしてください。AI生成コードはしばしば正しく見えますが、壊れたリンク、非機能的なフォーム、または欠落しているホバー状態を持っています。デプロイする前にテストしてください。
5. デプロイ前の完璧主義。 90%で出荷して反復します。最初のデプロイメントは完璧である必要はありません — それはライブである必要があります。数秒で更新をプッシュできます。
クライアント向けに構築していますか？配信する前にvibe coderが行う5つのセキュリティの間違いに関するガイドを読んでください。
要点
Figma-to-Claude-to-deployワークフローは、コードを自分で書かずにデザインを機能するウェブサイトに変える最速の方法です。品質は、コーディングスキルではなく、プロンプトの特異性に依存します。通常、3ラウンドの反復で、最初のドラフトから本番環境対応に到達します。
シンプルなプロジェクト（ポートフォリオまたはランディングページ）で開始し、完全なサイクルを一度実行してください。2番目の時間は半分かかります。なぜなら、プロンプトを構造化する方法を正確に知っているからです。
どのAIツールがワークフローに最適かわかりませんか？60秒のModel Picker Quizを受けて確認してください。または完全なAIモデルの比較状態を参照してください。
これは私たちが毎週行うことです。 AIツール、ワークフロー、および正直な見方に関する1つのディープダイブ — ハイプなし、詰め物なし。参加してください →
開示：この記事のいくつかのリンクはアフィリエイトリンクです。私たちは個人的にテストして定期的に使用するツールのみを推奨します。完全な開示ポリシーを参照してください。