Claude Design使い方｜プロンプトひとつでプロトタイプを作る方法

こんにちは、プロンプト画伯です。

「Figmaでレイアウト迷ってたら1時間経ってた」「デザインツールで挫折しすぎて、もう手書きラフでいい」——これ、あるあるじゃないですか。

画伯も完全に同じでした。

Figmaのフレームで1時間迷子になって「結局、手書きラフが一番早いんだよな…」とぼやいていた矢先、Anthropic Labsが爆弾を落としてきたんだよね。

その名も Claude Design。

話すだけでプロトタイプもLPもスライドも作れるって、いやいや、それデザイナーの仕事が半分消えるやつじゃん、と思って飛びついてみました。

この記事では、Claude Designの正体・使い方・プロンプト設計のコツ・競合比較まで、画伯目線でガッツリまとめていきます。

「プロトタイプ作りたいけど時間がない」「Figmaは挫折した」「プロンプトで何でも作れる時代を先取りしたい」そんな人はぜひ最後まで読んでみてほしい。

Claude Designって何なの？Anthropic Labsが出した新しいビジュアルAI

Claude Design は、Anthropic Labsが2026年4月17日に発表したビジュアル生成AIツールです。

一言でいうと「Claudeと会話するだけで、プロトタイプ・スライド・ワンページャーが作れる」というやつ。

claude.ai/design にアクセスすればすぐ触れるし、既存のClaudeサブスクリプションに含まれているから追加課金もいらない。

Introducing Claude Design by Anthropic Labs

Today, we’re launching Claude Design, a new Anthropic Labs product that lets you collaborate with Claude to create polished visual work like designs, prototypes, slides, one-pagers, and more.

www.anthropic.com

搭載モデルは Claude Opus 4.7。

Anthropic史上最高性能のビジョンモデルで、ペネトレーションテスト企業XBOWの視覚的鋭敏さベンチマーク（visual acuity）で98.5%という数字を叩き出してます。

ちなみにOpus 4.6は同一評価で54.5%だったので、ほぼ倍のジャンプ。

——想像してみてください。

前の世代が「参考画像をなんとなく見てるレベル」だとしたら、Opus 4.7は「ピクセル単位で参考画像を読み取ってる」くらいの差があるんだよね。

画像解像度も最大2,576px / 3.75MPまで対応していて、前世代比で3倍以上。

つまり「参考画像をガン見しながらデザインを作る」能力が爆上がりしたんです。

Introducing Claude Opus 4.7

Our latest model, Claude Opus 4.7, is now generally available. Opus 4.7 is a notable improvement on Opus 4.6 in advanced software engineering, with particular gains on the most difficult tasks.

www.anthropic.com

そしてここが画伯的に一番グッときたポイントなんだけど、Anthropicが公式に言ってるのは 「デザインツールを使わない人のためのツール」 という思想。

Figmaを開いて秒で閉じた経験のある人、手を挙げてほしい。

画伯です。

Claude Designは、そういう「デザインしたいけどデザインツールが苦手」な人向けに振り切って作られてます。

「でも具体的に何が作れるの？」——次のセクションでそこを全部整理していきます。

Claude Designでできること5つ（プロンプト画伯が試してみた）

公式情報と各レビュー記事から、Claude Designで作れるアウトプットを整理するとこうなる。

インタラクティブなプロトタイプ（Webサイト・アプリUI）

ボタンを押したら画面が切り替わる、みたいな「動く」プロトタイプが作れます。

Figmaのプロトタイプ機能を触ったことがある人ならわかると思うけど、あれを「話すだけ」でやってくれるイメージ。

これの何が嬉しいかっていうと、「クライアントに見せるためだけのモック」を作るのに、もうFigmaの操作を覚えなくていいってことなんだよね。

画伯、最初に試したのは自分のポートフォリオサイトのプロトタイプだったんだけど、「水彩画家のポートフォリオ、ホバーでカードが浮かぶ、ダークモード基調」と伝えただけで、それっぽい雛形が10秒で出てきた。

絵心ゼロでも形になるって、これマジで衝撃だったんだよね。

スライドデッキ・ピッチデックの自動生成

プレゼン資料を「中身のある形」で出してくれます。

Gammaとの違いは後述するけど、Opus 4.7の理解力が効いてきて、コンテンツの筋が通ってる。

「資料の中身、どうせAIがつくったな」と透けて見えるような薄さじゃなくて、ちゃんと文脈を読んでくれる。

VCに出すようなピッチデックでも「使える」レベルで仕上がってくる、というのが大きいんです。

ワンページャー・LPの爆速制作

ランディングページが数分で立ち上がります。

しかもHTMLでエクスポートできるから、そのままデプロイもいけるやつ。

「世界観ができたら、あとはドメイン取って公開するだけ」という状態まで、会話だけで持っていけるのが地味にすごい。

マーケティング資材・バナーセット

SNS広告用のバナー、メルマガヘッダー、キャンペーン資材……このあたりも一括生成できます。

ブランドカラーを最初に読み込ませておけば、統一感のあるセットが作れる。

つまり「毎回バラバラな雰囲気で作ってしまう」という問題が、最初の1回で解決できるんだよね。

ブランドの軸を一度定義してしまえば、あとはそこに紐づけて量産できる。

画像・DOCX・コードベースから読み込める入力の広さ

ここがClaude Designの隠れた強み。

テキストプロンプトだけじゃなくて、以下の入力を全部受け取れます。

• 画像（参考ビジュアル）
• DOCX / PPTX / XLSX ファイル
• 既存コードベース（デザインシステムの抽出）
• Webサイトキャプチャ

特に「既存のWebサイトをキャプチャして世界観を揃える」機能は、クライアントワークするクリエイターには地味に効く機能だと思う。

「このサイトっぽい雰囲気で作って」が、画像1枚で伝わるんです。

言語化が苦手でも、画像で伝えれば補完してもらえる——これ、ちょっと革命的じゃないですか。

じゃあ実際どうやって使うのか、4ステップで見ていきます。

Claude Designの使い方4ステップ——話すだけでLPが完成するまで

Step 1. claude.ai/designにアクセスする

Claudeの有料プランに入っていれば、claude.ai/design にアクセスするだけ。

Enterpriseプランの場合だけ、デフォルトで無効になっていて管理者による有効化が必要なので注意。

Step 2. プロンプトで世界観を伝える

ここが画伯の本領発揮ポイント。

「何を作ってほしいか」ではなく、「どんな世界観で作ってほしいか」 を伝えると結果がガラッと変わります。

最初に「ポートフォリオLPを作って」だけ送ってみたら、出てきたのがザ・SaaSランディングページでした。

「これじゃない」感が強くて、すぐに作り直した。

失敗して気づいたんだけど、Claude Designは「あなたの世界観を勝手に補完してくれない」んだよね。

世界観の情報をこちらから渡してやらないと、デフォルトの「それっぽいモダンUI」で埋めてくる。

そこから試行錯誤して、今は画伯こんなプロンプトを使ってます。

水彩画家のポートフォリオLPを作って。
ターゲットは30代の美術好き、客単価5万円以上のコミッション依頼を想定。

世界観：
- ミッドセンチュリーの画廊のような落ち着き
- 背景はオフホワイト、アクセントは水彩のブルー＆オレンジ
- フォントは明朝系でアートブック的な重み

セクション構成：
1. ヒーロー（作品サムネイル3点とキャッチコピー）
2. アーティストステートメント
3. 制作実績（ギャラリー形式）
4. コミッション料金表
5. 問い合わせフォーム

避けてほしい：SaaS的なモダンUI、ネオン、グラデーション多用

「避けてほしい要素」を書くのが画伯流の隠しワザ。

これがないと、デフォルトで「それっぽいSaaS風LP」が出てきて萎える。

Step 3. スライダー・インライン編集で微調整する

初稿が出たあと、Claudeが カスタムスライダー を自動生成してくれます。

色の彩度、余白のゆるさ、レイアウトの密度……そういう抽象的な調整が、スライダーをいじるだけで反映される。

「もうちょっと余白ほしい」をスライダーで表現できるの、正直すごい。

「余白ほしい」を言葉で説明するって、意外と難しいんですよね。

「もっとゆったり」「空気感を出したい」——こういうふんわりした要望を、スライダーという物理的な操作に変換してくれる発想が面白いんです。

気になる要素にインラインコメントを打てば、その部分だけ再生成もできます。

Step 4. PDF・PPTX・Canvaでエクスポート

完成したら出力。

エクスポート形式は以下。

• PDF
• URL（組織内共有）
• PPTX
• HTML
• Canva へ転送（公式提携あり）

HTMLで吐き出してそのままデプロイもできるし、Canvaに送って仕上げの細かい調整、っていうワークフローも組める。

使い方の流れは以上です。

でも正直、ここまでやっても「全員同じようなアウトプット」が出てくる罠があります。

次のセクションは、そこを突破する話です。

Claude Designのプロンプト設計術——「AIらしさ」を消す画伯流3つのコツ

ここが画伯的に一番語りたいところ。

Claude Designを数時間いじり倒して気づいたのは、デフォルト設定の見た目がどうしても「Anthropicっぽく」なる ということ。

ミッドセンチュリー風の落ち着いた色味、角丸多め、白と黒を強めに使うあの感じ。

悪くはない。

悪くはないんだけど、全員がそれ使ってたら差別化できないんだよね。

「みんな同じAI感」を避けるために、料理で例えると——素材（構造・レイアウト）は同じでも、スパイスの組み合わせで全然違う料理になる、という感覚です。

その「スパイスの使い方」を、画伯が50回くらい試行錯誤して編み出した3つのコツにまとめてみました。

コツ1. 参考画像を必ずセットで渡す（ビジョンモデルを活かす）

Opus 4.7はXBOWの視覚的鋭敏さベンチマークで98.5%を記録したバケモノ精度のビジョンモデル。

これを使わないのはもったいない。

最初、画伯は「言葉だけで完璧に伝えよう」として、プロンプトをめちゃくちゃ長く書いてたんだよね。

それでも出てくるアウトプットがイメージと違う。

「なんで伝わらないんだ」と20回やり直してやっと気づいた。

言葉は曖昧で、画像は正確なんだよね。

プロンプトを書くだけじゃなくて、世界観の参考画像を3〜5枚添付する だけで、アウトプットの再現度が段違いになります。

画伯の場合、Pinterestで「ミッドセンチュリー　ポスター」みたいに検索して、気に入った画像をスクショしてまとめて投げてる。

添付画像5枚の世界観で、水彩画家のLPを作って。
特に2枚目の配色と、4枚目のタイポグラフィの質感を踏襲したい。

画像に「何を参考にしてほしいか」を明示するのが地味に効く。

ただ「参考にして」だと全部平均化されるから、要素を指定するのがコツです。

コツ2. 世界観を形容詞ではなく名詞で指定する

これ、画伯が画像生成AIでも昔から言ってることなんだけど、Claude Designでも同じ法則が効いた。

「モダン」「シンプル」みたいな形容詞は、AIにとって曖昧すぎてデフォルトに寄ります。

具体的な場所・業種・ブランドを持ち出すと、一気に固有の質感が出る。

Before：「プロフェッショナルな雰囲気で」
After：「ボストンの老舗法律事務所の年次報告書の表紙みたいに」

この差、感覚的には3倍くらいアウトプットが変わる。

コツ3. 「Anthropicフレーバー」を避けるキーワードを明記する

デフォルトで出てくる「それっぽいAnthropic風デザイン」を避けるには、プロンプトに明示的に「避けるリスト」を入れるのが効く。

画伯が常備してるNG指定がこれ。

避けてほしい表現：
- SaaSランディングページ風の整いすぎたレイアウト
- 紫〜青のグラデーション
- ストックフォトのオフィス風画像
- 「AIを活用して〜」的な汎用コピーライティング
- 過度な角丸ボタン

「AIっぽい」の正体って、だいたいこのへんに詰まってるんだよね。

これを明示的に外してやると、出てくるアウトプットに急に「個性」が宿る。

プロンプトは「何を出してほしいか」だけじゃなくて「何を出してほしくないか」まで書く。

これが画伯の結論です。

センスじゃない、言語化なんだよね。

Claude DesignとGamma・Figma・Canvaを正直に比較する

画伯、正直に言います。

Claude Designは万能じゃない。

他のツールとは得意領域が違うし、むしろ組み合わせて使うのが賢い選択だと思う。

主要AIデザインツール比較マトリクス

Gammaと比べると何が違うか

Gammaは「60秒でスライド生成」が売り。

画伯も使ってるし便利なんだけど、正直コンテンツが薄くなりがち。

Claude DesignはOpus 4.7の理解力で、コンテンツの筋が通ってる。

「ピッチデックでVCに通るレベルの内容」を求めるならClaude Design、「社内で共有する資料を秒で作る」ならGamma、という棲み分けかなと。

Figma AIとの役割分担

Figmaはプロデザイナー向けのツール。

Dev Handoffとかコンポーネントライブラリとか、プロの現場で必要な機能が揃ってる。

Claude Designは「Figmaを使わない人向け」に振り切ってるから、そもそも競合していないというのが画伯の見立て。

ただFigma側もAI機能を強化中で、株価が約7%下がったって報道もあるくらいには焦ってる。

Canva AIとは補完関係にある理由

Anthropicが公式にCanvaとパートナーシップを結んでいて、Claude DesignからCanvaへ直接エクスポートできます。

つまりこの2つはガチで 補完関係。

画伯おすすめのワークフローはこんな感じ。

1. Claude Design で世界観とレイアウトを作る
2. Canva に転送して、テンプレ・素材で仕上げ
3. 画像素材はMidjourneyやStable Diffusionで生成して差し込む
4. 最後にClaudeに「このLPのコピーをブラッシュアップして」と頼む

1つのAIで完結させるより、得意領域を組み合わせるのが賢い。

Claude Design 料金と制限——Proプランで使えるのか

ここが気になる人も多いはず。

結論から言うと、Proプラン（$20/月）で使えます。

追加課金なし。

ただしProプランのユーザーからは「週次利用枠の50%くらいをClaude Designで持ってかれる」という報告もあがってる。

Opus 4.7がビジョンモデルとして重いので、画像解析を伴うタスクはトークンをゴリゴリ食う。

ガッツリ使うならMaxプランも視野に入れたほうがいいかも。

あと、これは全員に言っておきたいんだけど、リサーチプレビューなので仕様変更の可能性あり。

今の使い勝手が保証されてるわけじゃないので、頻繁に使う人はスクショなりエクスポートで成果物を手元に残しておくこと推奨。

まとめ——言葉でデザインする時代、プロンプト設計力が武器になる

Claude Designを触ってみて、画伯が一番感じたのは「デザインの制約が、言語化の精度に移った」ということ。

Figmaの操作を覚える時間が、プロンプトを磨く時間に変わった。

ツール依存のスキルが、言語化スキルに置き換わった。

これ、画伯みたいに「センスないけどクリエイティブなことやりたい」人にとっては、マジで朗報なんだよね。

絵心ゼロでも、言葉を積み重ねれば、世界観のあるアウトプットが出せる時代がきた。

ここで一つだけ言わせてほしい。

最初の1枚、5分で作れます。

claude.ai/design にアクセスして、「自分のポートフォリオLPを作って。雰囲気は〇〇系で」くらいの軽いプロンプトを1行投げてみるだけでいい。

ProプランでもMaxプランでも追加課金なしで使える。

「どんなアウトプットが出てくるか」を見ることがスタートで、その出てきたものに「何を足したいか、何が違うか」を言葉にしていく。

それを繰り返すだけで、プロンプト設計力が筋トレみたいに育っていくんです。

センスがないことは関係ない。

語彙があれば形になる。

センスじゃない、言語化だ。

画伯は今日もそう信じて、プロンプトを書き続けます。

一緒にAI画像職人、やっていきましょう。