コピペだけでプロ級デザインLPが作れる｜Claude Design完全ガイド！実証済み

🎯 この記事の約束

① コピペだけで完成。

② 仕上がりはプロ級デザイン。

この記事に載っているプロンプトを Claude Design にそのまま貼り付け、Claude Codeに「デプロイして」と日本語で頼むだけ。

コード知識、デザインスキル、一切不要。これは技術書ではなく「手順書」です。

この記事を閉じる頃には、あなたのオリジナルLPが、Figma・Photoshopで数日かけて作るレベルのクオリティで、本番URLに稼働しています。

どのくらいプロ品質？ → 今すぐ実物を触ってみてください：
SaaS LP（WriteFlow）
（本記事の手順通りに作ったもの。このクオリティを、あなたも作れます。
別ジャンル2本（会員制サロン／フォトグラファー）
の本番URLは有料パートで公開。）

📅 情報更新日：2026年4月19日（Claude Design リリース2日目時点）

2026年4月17日、Anthropic LabsからClaude Designが研究プレビュー公開されました。リリースから数日、日本語での実演レビュー記事はまだほとんど出ていません。本記事は、Claude Design と Claude Code だけで、コード1行も書かずに本格LPを3本作って本番公開するまでの全手順を、再現できる形で公開します。

結論を先にお伝えします。「アイデア→本番稼働URL」まで、AIだけで完走できました。それも、1人の作業で、3本のLP（異なるジャンル）を並行制作して。1本あたりの所要は10分前後。3本＋動くSaaSデモ全部込みでも70〜80分。コーヒー2杯で収まる時間です。

「コード書けないから無理」と思っていた方、安心してください。React化も、サーバーデプロイも、エラー対処も、全部 Claude Code が代行してくれます。あなたは「これをデプロイして」と日本語で頼むだけ。この記事では、その全工程を、スクリーンショットとともに余さず公開します。

読めば出来る。それだけを約束する記事です。

まずは結論：本番で動いているデモを見てください（無料公開）

🌐 実際に触れる公開URL（無料公開：1本）

SaaS LP（WriteFlow）：

Claude Designで生成 → 本番公開までAIだけで到達した実例。今この瞬間、PC・スマホどちらでもアクセス可能。クオリティをご確認ください。

📦 有料パートでは、別ジャンルの実物LPをさらに2本公開：オンラインサロン（権威感ある会員制）／フォトグラファー（静謐な海外風ポートフォリオ）。いずれも本番URLで稼働中。

⚠️ お断り：このサンプルLPは「架空サービス」です
WriteFlow・ひとり経営ラボ・Studio Stillness は実在のサービスではありません。Claude Designの実力を示すデモとして制作しました。読者様ご自身の実在するサービスに対して、同じクオリティのLPが作れることを示すための実例です。

今回、AIだけで作り上げた3本のLP＋動くSaaSデモ

LP ①4分で初稿

SaaS LP「WriteFlow」：ブロガー向け記事自動生成SaaSのLP。ヒーロー・特徴3つ・利用者の声・料金プラン・FAQ・最終CTA を含む本格構成。ネイビー＋オレンジのモダンなSaaSトーン、日本語フォント対応。→ 公開中

📦 他にも別ジャンルのサンプル2本
（会員制サロン／フォトグラファー）を制作済み。
本番URLと制作プロンプトは 有料パートで公開 しています。

リファイン実演1〜4分で反映
LP生成後の微調整を2パターン検証。リファイン1（note/WordPress切り分け）は複数箇所の複合修正で4分、リファイン2（料金プランに「人気No.1」バッジ追加）は局所的な指示で1分という爆速で完了。「小刻み・具体的」な指示ほど速く反映される傾向を実証。

エクスポート3形式検証
HTML / PDF / PPTX を実際に出力。HTMLはスタンドアロン動作可能。PDFはブラウザ印刷ダイアログ経由で縦長11ページに分割。PPTXは4種類のフォントオプション（カスタム／汎用／Googleスライド／スクショベース）から選択可能。

Claude Code連携＋公開ハンドオフ→本番URL
WriteFlow LPを Claude Code にハンドオフ → 動くSaaSデモに拡張 → 本番公開：React + TypeScript + Vite + Tailwind CSS のSPAに変換。6ページ構成（LP／登録／ログイン／ダッシュボード／新規生成／生成結果）。Claude APIでの実AI生成＋APIキー未入力時のデモモード実装。最終的に tothink.jp 配下で3本まとめて公開。

これ、全部AIだけで作っています

3本のLPも、追加で構築した動くSaaSデモも、Figma・Photoshop・Canvaテンプレートには一切触れていません。私がやったことは、

1. Claude Design に自然な日本語で依頼（コピペ可能なプロンプト1本）

2. 気になる箇所をClaude Codeモードで直接指示

3. ハンドオフバンドルをClaude Codeに渡す

4. React実装完了したら Vercel CLI で1コマンドデプロイ

それだけです。デザインスキル・手描きの熟練・Figma操作スキル・要らず。唯一必要なのは、「対話で意図を伝えるプロンプトのセンス」だけ。

衝撃ポイント 5行まとめ：

• LP初稿が4分で完成。リファイン1回は1〜4分で反映される

• 日本語も美しい（Noto Sans JP が自動適用された）

• 配色指定・フォント指定・セクション構成指定がすべて忠実に反映された

• ハンドオフバンドル→Claude Code で本番React実装まで一気通貫

• SSH経由で tothink.jp に一括アップロード → 3本のLP全て本番URL稼働

Claude Designの基本情報

アクセス方法

Claude Designは、リサーチプレビュー期間中はclaude.ai/design（Webブラウザ）からのみ利用可能です。デスクトップアプリ・モバイルアプリ・VSCode拡張などの単体版はありません。

利用対象プラン（追加料金なし）

既存のClaude契約があれば、Figma・Canva・Adobe のサブスクとの二重課金を解消できる可能性すらあります。

この記事を購入すると、あなたに何ができるようになるか？

✅ 自分のサービスの、プロ級デザインLPを本番URLで公開できる

記事内のプロンプトテンプレ（6ジャンル）に【】の中を自分の情報に置き換えるだけで、SaaS／会員制／ポートフォリオ／店舗／ピッチデック／ワンページャーが数分で仕上がります。

具体的にできるようになること：

• Claude Designにコピペ1回で、4〜12分で高品質LP生成

• 気になる部分を自然な日本語で微調整（色・テキスト・レイアウト）

• HTML／PDF／PPTXでエクスポートして手元に保存

• Claude Codeに「デプロイして」と頼むだけで本番URLに公開

• 問い合わせフォーム・Google Analytics・OGP画像も指示文コピペで実装

• 独自ドメインに接続・Lighthouse90点超えの最適化も、Claude Codeが自動で実行

記事収録コンテンツ：

• ✅ 実際に稼働中の3本のサンプルLPの、使用プロンプト全文公開（WriteFlow／オンラインサロン／フォトグラファー）

• ✅ 汎用プロンプトテンプレ6本（あなたのサービス用に書き換えるだけ）

• ✅ Claude Code指示文テンプレ10本（デプロイ〜運用まで全シーン対応）

• ✅ 本番運用チェックリスト10項目（抜け漏れ防止）

• ✅ ハマりどころ11選（公式未記載の週間制限情報含む）

• ✅ 初回セットアップ〜本番公開の完全手順

• ✅ Figma・Canvaとの使い分け指南

🎁 購入者限定特典：

• Claude Code用「自動実行手順書」.md：記事本編と別に、Claude Codeにそのまま貼り付けるだけで本番公開まで全自動で進む手順書を配布（記事末尾でダウンロード可）

• 追加プロンプトテンプレ定期配信：コーチ・スクール・イベント・EC・モバイルUI等、新ジャンルを順次追加

• Claude Design大型アップデート時の記事追記：一度買えば継続的に価値が増えていきます

⏰ 情報の鮮度について：本記事は2026年4月19日時点の情報です。Claude Designはリサーチプレビュー中のため、機能・UI・制限仕様がアップデートされる可能性があります。大きな変更を確認次第、本記事の該当箇所を追記・修正します（購入者は更新版をそのまま閲覧可能）。

⚠️ 誤解防止のため、正直に書きます：この記事だけでは作れないもの

本記事で作れるのは、Claude Designが生成する「デザイン（LP・ページのビジュアル）」までです。以下のような「動くサービスの中身」は作れません：

• データベース／ユーザー認証／ログイン処理

• 決済システム（Stripe／PayPal等）

• 商品在庫管理・予約システム・メール通知の仕組み

• AI記事生成・データ分析のような「内部ロジック」

つまり、「LP（静的ページ）まで自分で作って本番公開できる」のがゴールです。動くサービスとして機能させるには、追加で Claude Code による実装が必要で、本記事の「Claude Code指示文テンプレ10本」がその導線をカバーしています。
「LPだけ作れて何になる？」と思うかもしれませんが、LPは営業・広告・集客の入口。ここが自分で作れるだけで、外注費年間数十万円の節約＋リリーススピードが跳ね上がります。

🧰 事前準備：購入前に環境をご確認ください

本記事の手順で本番URL公開まで到達するには、以下が必要です。ご購入前に環境をご確認ください。これが揃っていないと記事の内容を再現できませんので、不足がある場合は先に準備してからご購入いただくことをおすすめします。

※ Claude Pro未契約でも、claude.ai からすぐに契約できます。月額$20で Claude Design と Claude Code の両方が使えるようになります。
※ VSCodeは公式サイトから無料ダウンロード可能。Claude Code拡張もVSCodeのExtensions検索から無料で入ります。

🔒 ここから先は有料パート（¥2,980）

📦 購入後すぐに見られるもの：
① 追加サンプルLP 2本の本番URLと制作プロンプト全文
　・オンラインサロン（権威感ある会員制スタイル）
　・フォトグラファーポートフォリオ（静謐な海外風）
② 汎用プロンプトテンプレ6本
③ Claude Code指示文テンプレ10本
④ 本番運用チェックリスト10項目

購入後の全コンテンツ一覧：

▸ 追加サンプルLP 2本の本番URL（会員制・ポートフォリオ）
▸ 3本分の制作プロンプト全文＋実測データ（4分／5分／12分）
▸ 汎用プロンプトテンプレ6本（SaaS／会員制／ポートフォリオ／店舗／ピッチデック／ワンページャー）
▸ Claude Code指示文テンプレ10本（デプロイ〜運用）
▸ 本番運用チェックリスト10項目
▸ 初回アクセス〜デザインシステム構築の全手順
▸ リファイン・エクスポート完全通し
▸ Claude Codeハンドオフ→React実装→本番公開の完全通し
▸ 日本語フォント・日本語プロンプトの挙動レポート
▸ ハマりどころ11選と回避策（週間制限含む）
▸ Figma・Canvaとの正直な使い分け
▸ 購入者限定：今後のClaude Designアップデート時に記事追記＋追加テンプレ配信