Claude DesignでLPを生成してみた｜実測レポート

2026年4月17日、AnthropicがClaude Designをリリースしました。プロトタイプ・スライド・ワンページャーをチャットで作れる新機能で、前日に一般公開されたClaude Opus 4.7を基盤としています。

SE歴20年・Claude Max 5x契約の筆者が、リリース翌日に2件のプロトタイプを実測しました。BtoB比較サイトのLP改善案と、モバイルWebアプリのマッチング画面です。URL参照の挙動・Tweaks機能・Export形式・クォータ消費量まで一次体験で記録したレポートをまとめます。

Claude Designは画像生成AIではない

「Design」という名前から画像生成ツールを想像しがちですが、Claude Designが作るのはプロトタイプ・スライド・LPなどのHTMLベースの成果物です。Anthropicの公式Xアナウンスでも「prototypes, slides, and one-pagers」と位置づけられており、Figma・Canvaに近い立ち位置になります。

2026年4月17日リリースの研究プレビュー

Claude DesignはAnthropic Labs（同社の実験的プロダクト部門）から公開された研究プレビュー機能です。Pro・Max・Team・Enterpriseの有料プランで段階的に利用可能となり、Web版のclaude.ai/designからアクセスできます。

前日の4月16日にはClaude Opus 4.7が一般公開されており、Claude DesignはこのOpus 4.7の視覚理解能力を前提に設計されています。Opus 4.7は最大解像度が従来の1568pxから2576pxへ大幅に拡張され、デザイン用途のスクリーンショット解析が現実的になったモデルです。Opus 4.7自体の位置づけとコスト感はOpus 4.7と副業開発への影響を整理した記事で詳しく扱っています。

作れるもの・作れないもの

Claude Designで作れるのはWebページ・アプリのプロトタイプ、スライドデッキ、ワンページャー、マーケティング資料などです。いずれもHTMLベースで生成され、ExportメニューからZIP・PDF・PPTX・standalone HTMLで書き出せます。

一方で作れないものもはっきりしています。MidjourneyやStable Diffusionのような写真風画像生成、動画・アニメーションの生成、実データと連携した動的ダッシュボードなどは範囲外です。

モデル選択はOpus 4.7がデフォルト、切替も可能

Claude Designの入力欄左下の歯車アイコン（Change model）からモデルを切り替えられます。選択肢はClaude Haiku 4.5・Opus 4.7（デフォルト）・Sonnet 4.6・Opus 3・Opus 4.6・Sonnet 4.5の6種類。筆者の3件の検証はすべてデフォルトのOpus 4.7で実施しました。軽めの編集指示ならHaiku 4.5やSonnet 4.6に落とすことでクォータ節約が可能な設計になっています。

検証1｜BtoB比較サイトのLP改善

1件目は「SaaSツールを比較する情報サイトのLP」を題材にしました。現状サイトのURLを参考情報として渡し、コンバージョン重視のリデザイン案を依頼する形です。

投げたプロンプトと事前準備

Claude Designの新規プロジェクト作成は、Prototype（プロトタイプ）／Slide deck（スライド）／From template（テンプレート）／Otherの4タブから選びます。Prototypeの下にはWireframe（ラフ）とHigh fidelity（高精度モックアップ）の2モードがあり、今回はHigh fidelityを選択しました。

Createボタンを押すと、左ペインにチャット入力欄、右ペインにキャンバスが表示される作業画面に遷移します。コンテキスト追加ボタンとしてDesign System／Add screenshot／Attach codebase／Drag in a Figma fileの4種が用意されており、ブランド資産やコードベースを事前に紐付けられる設計です。

今回は事前アセットは渡さず、プロンプト本文内にURLだけを含めて投げました。実際に使ったプロンプトの骨格は次の通りです。サイト情報・現状課題・ターゲット・依頼内容・バリエーション数を明示しています。

https://example.com を参考にして、このLPを改善してほしい。

【サイトの目的】
SaaSツールを探している人向けの比較・レビューサイト

【現状の課題】
- ファーストビューで何のサイトか伝わりにくい
- CTA（資料請求・比較ボタン）の導線が弱い

【ターゲット】
情報収集段階の中小企業のIT担当・個人事業主

【依頼】
- コンバージョンを意識したLPトップページのデザイン案
- クリーンで信頼感のあるテック系（BtoB寄り）
- バリエーションは2案まで（トークン節約のため）

Fetching挙動｜URLを渡すと実際にサイトを読みに行く

プロンプト送信後、Claude Designは逆質問をせず即座に生成フェーズに入りました。左ペインには「依頼内容がかなり具体的（方向性・必須要素・バリエーション数まで指定済み）なので、前提をまとめて即着手します」という宣言が表示され、続いてデザイン方針（アプローチ・タイポグラフィ・カラー・構造）を明示したうえでProgress 0/4のタスクリストを展開します。

進行中のアクション表示には「Fetching page ×2, Copying starter」の文言が出ました。URLを渡すとClaude Designがweb capture toolでサイトを実際に取得しに行くことが、この表示で確認できます。ただし丸ごとコピーはせず、「著作権に配慮し、コピーではなく『BtoB向けSaaS比較サイト』として一般的なパターンで新規設計します」と宣言したうえで、参考サイトの雰囲気だけを汲む挙動でした。

数分で完成したLPファーストビュー

プロンプト送信から完成まで数分。筆者が別で実測した軽量LP案件では約6分で完走しました。右ペインにindex.htmlとして1ファイルのLPが出力され、ファーストビューのコピーは「『使うべきSaaS』が、30秒で見つかる。」。ターゲット文言（中小企業のIT担当・個人事業主）はプロンプトから引用され、CTA2種（無料で比較をはじめる／比較シートをダウンロード）・信頼数値（320+ 掲載SaaS／18 カテゴリ／月間 42k 意思決定者）・比較表サンプル・カテゴリ導線・代表ツールの横スクロールまで、依頼した必須要素がすべて1ページに収まっています。

注意点として、比較表に記載されたツール名（Notion・Confluence・Coda等）は実在するサービスですが、料金・スコア数値はダミーです。Claude Designは実データ連携を持たないため、具体的な数値を使う最終版には必ず自力で差し替えが必要になります。

Tweaks機能｜配色とコピー文言まで変わる

右上の「Tweaks」トグルをONにすると、生成された2バリエーション（案A / Navy・案B / Ink）を即時切替できます。面白いのは配色だけでなくコピー文言まで変わる点で、案Aの「『使うべきSaaS』が、30秒で見つかる。」に対して案Bは「SaaS選びの、最短ルート。」と別のメッセージが自動生成されていました。

単なるテーマ切替ではなく、各案が独立した別デザインとして成立するように設計されている点が特徴です。プロンプトで「王道BtoB」「モダン・差別化志向」という2方向を事前に指示できれば、2案を並べて社内議論のたたき台にする使い方が現実的になります。

検証2｜モバイルWebアプリのマッチング画面

2件目はポケモンGOの個体交換マッチングサービスを想定し、マッチング結果一覧画面（/matches）を言語説明だけで起こしました。URL参照ではなく、複雑な業務仕様をテキストで指示したときにどこまで再現できるかの検証です。

言語だけでの指示プロンプト

プロンプトには、サービス概要（何を何とマッチングさせるか）、画面構成（上部タブフィルター・セクション見出し）、マッチカードの2カラム構造、バッジ・状態表現のルール、アクションボタンの表示条件、モバイルファースト（375px想定）などを詳細に記述しました。ドメイン固有の用語（双方向マッチ／片方向マッチ／フレンドレベル不足／ほしのすな消費量）がどこまで伝わるかもチェックポイントです。

375px固定のiOSフレーム付きUIで完成

送信から完成までは数分。Progressタスクは0/7まで分解され（iOSフレーム取り込み・マッチデータ設計・カード実装・タブフィルター実装・リクエストモーダル実装・状態遷移管理・仕上げ検証）、生成ファイルはapp.jsx・modal.jsx・card.jsx・components.jsx・data.jsx・ios-frame.jsxの6つのReactコンポーネントに分割されていました。

完成画面はiPhoneフレームに9:41の時刻表示とノッチが再現され、内部のUIは375px固定幅で収まっています。タブフィルター（すべて8／アクション可能2／交渉中2）の件数バッジ、双方向マッチセクション（4件）の緑バッジ、マッチカード2枚の左右2カラム表示（自分のリスティング／相手のリスティング）、トレーナー名＋取引実績バッジ、ほしのすな消費量、スケジュール重複時間、黄色の「リクエストする」CTAボタン、下部タブバーのチャットアイコンに付く通知バッジまで、指示した仕様がほぼそのまま反映されています。

著作権配慮のガードレール｜固有名詞は許容、公式UIは回避

興味深かったのは、ポケモン名（ラルトス・ヨーギラス・ヒトカゲ・ゼニガメ）と図鑑番号はサンプルデータとして採用しつつ、「ポケモンGO自体の画面やロゴは使わず、オリジナルの『個体交換マッチングサービス』としてデザインします」と宣言したうえで公式UIの模倣を回避した点です。実際、マッチカード内のポケモン画像はオリジナルのモンスターボール風プレースホルダ（タイプ色で塗り分け）に置き換えられていました。

固有キャラ名の例示は許容、公式UIやロゴの模倣は回避というガードレールの粒度が、検証1（BtoBサイトの丸コピー回避）と合わせて見えてきます。商用利用前の最終確認は必要ですが、著作権リスクへの一定の配慮が組み込まれている設計です。

日本語フォント選定の文化的配慮

フォント選定は検証1と検証2で明確に違いました。BtoB LP（検証1）ではPlus Jakarta Sans＋IBM Plex Monoという英文ベース、モバイル・カジュアル・日本ユーザー想定の検証2ではZen Maru Gothic＋M PLUS Rounded 1cという丸ゴシック系日本語フォントが選ばれています。プロンプトに「日本語フォント」とは書いていないにもかかわらず、文脈から自動で使い分ける挙動です。

追加検証で見えた、アフィリLPとTweaksの多軸性

上記2件とは別に、アフィリエイト記事向けのVPN比較LPを3件目として検証しました。この検証はトピックが重複するので本記事には含めませんが、2点の新発見があったので補足します。1件あたりのClaude Design枠消費は+15%、生成時間は実測で約6分でした。

景表法・PR表記を自発的に挿入

アフィリエイト目的のLP生成では、プロンプトで明示していないにもかかわらず「PR・景表法表示：本ランキングはアフィリエイト広告を含みます。評価は編集部の独自基準によるもので、広告料によって順位は変動しません」というステマ規制対応の注記がファーストビュー直下に自動挿入されていました。依頼内容から「アフィリエイト収益化視点」というキーワードを汲み、景表法・ステマ規制への配慮を自発的に入れる挙動です。

Tweaksはコンテンツに応じて多軸化する

検証1のTweaksは「案A/案B」の2バリエーション切替でしたが、VPNランキングLPでは「デザイン方向（A・ネイビー/B・ダークグリーン）」「見出し言語（日本語/日+英併記）」「ランキング密度（詳細(Pros/Cons)/コンパクト）」の3軸同時カスタマイズに変化していました。固定のUIパターンではなく、生成物の性質に応じてカスタマイズ軸が動的に組み立てられている挙動です。ランキングLPなら密度軸、2方向のデザイン比較なら方向軸、といった最適化が入っていると見られます。

できること・できないことの整理

3件の検証から見えた範囲を整理します。2026年4月時点の研究プレビュー版での筆者検証範囲内での結果です。

できること

機能	内容
URL参照生成	プロンプト内のURLをweb captureで取得し雰囲気を汲む
言語説明生成	複雑な業務仕様を文章だけで指示してUIを起こす
Tweaks多軸カスタマイズ	コンテンツに応じた複数軸のスライダー型調整
景表法・PR表記の自動挿入	アフィリ文脈ではステマ規制対応の注記を自発的に追加
文脈に合うフォント選定	BtoBは英文系、日本語カジュアルは丸ゴシック系を自動選定
著作権ガードレール	参考サイトの丸コピー回避、公式UIの模倣回避を自発的に実施
React分割出力	複数コンポーネントの.jsxファイル構成で生成
多様なExport形式	ZIP・PDF・PPTX・standalone HTML・Canva・Claude Code連携

できないこと・注意点

項目	内容
PNG/JPG直接出力なし	Exportはzip/PDF/PPTX/HTMLのみ。画像はHTML→ブラウザスクショの手順が必要
実データ連携なし	比較表の価格・スコア等はダミー数値。実運用には差し替えが必須
独自PPTテンプレ不可	社内ブランドPowerPointテンプレのアップロード機能はなし
undoの全消失リスク	PCWorld記事の報告ではundo押下で全作業が消失するケースあり

エンジニアの現実的な使い道3パターン

副業SEや週末起業家の視点で、実務に組み込める使い方を3つ整理しました。

クォータ設計の実測ガイド

研究プレビュー期間中のClaude Designで最も重要なのがクォータ設計です。Claude Designには通常のClaude利用枠とは別のトークン枠が設定されており、消費ペースが想像以上に速いことが報告されています。

Claude Design枠は通常枠と別カウント

Claudeの設定画面の使用量タブを開くと、「すべてのモデル」「Sonnetのみ」に加えて「Claude Design」の独立した枠が確認できます。リセット時刻も通常のモデル枠（筆者環境では金曜7:00）と異なり、Claude Designは土曜21:00と別設定。Designをヘビーに使っても通常のチャット枠は残る、逆にチャット枠を使い切ってもDesignは動く、という住み分けです。

Max 5x実測：検証1本あたり約9〜15%消費

Claude Max 5xプランでの実測値を3件並べると、検証1（LP 2バリエーション＋URL fetch）で13%消費、検証2（モバイル画面1案）で9%消費、追加検証のVPNランキングLP（3軸Tweaks付き）で15%消費でした。合計37%で3本のプロトタイプを完走しています。単純換算で、Max 5xなら週次で6〜10本程度の本格プロトタイプが作れる計算になります。

一方Proプランの実測については、PCWorldのBen Patterson氏の検証記録が参考になります。同氏は3バリエーションのプロトタイプ生成を25分で完走したものの、その時点でProの週次Claude Design枠の80%を消費。誤操作のundoで全作業が消えた後5分間の再生成で残り枠もゼロになったとレポートしています。本格的にプロトタイプを作り続けるならMax以上、たまに1本試すだけならPro、という目安になりそうです。

トークンを節約するプロンプト設計

消費を抑える最大のコツは、最初のプロンプトで情報を出し切ることです。Claude Designは具体的な指示が足りないと逆質問を繰り返すので、その往復だけでトークンが消えます。筆者の検証では事前に方向性・必須要素・バリエーション数を明記したため、Claude側から「依頼内容がかなり具体的なので即着手します」と宣言されて逆質問ラッシュをスキップできました。

よくある質問

まとめ

3件の検証でわかったことを3点に整理します。

• Claude Designは「数分で初稿が出る」プロトタイピングツールで、画像生成AIでもFigma代替でもない独自の立ち位置にある
• URL参照・多軸Tweaks・景表法表記の自発的挿入・日本語フォント自動選定・著作権ガードレールなど、実用レベルの機能が研究プレビュー時点で揃っている
• PNG直接出力なし・実データ連携なし・Pro枠はタイトなど制約もあり、完成品ツールではなく「議論と実装のたたき台生成器」として捉えるのが現実的

副業エンジニアの視点では、LP草案・UIプロトタイプ・スライド初稿といった「議論を前に進めるための素材」を数分で揃えられる価値が大きいツールです。最終成果物ツールではなく、思考を可視化する道具として使うと効きます。記事制作ワークフロー全体にAIをどう組み込むかはClaude記事制作ワークフローの全記録にまとめています。

外部情報としては、Anthropic公式のClaude Design発表記事、Opus 4.7の詳細を扱ったAnthropic APIドキュメント、Proプランでのクォータ消費実測を含むPCWorldの検証レポートが参考になります。