Anthropicは2026年4月17日、Claude Designを公開しました。promptでWebサイト、スライド、prototypeを生成できる実験的ツールです。公式発表から24時間以内にXで10万以上のいいねが付き、Figma株は当日9%下落し、コミュニティではすぐに「It is so over」ネタが回り始めました。

この記事では、Claude Designの機能の位置づけ、実際の使い方、v0、Lovable、Figma Makeなど既存ツールとの違いを整理します。内容は公式発表、コミュニティの実測共有、開発者コミュニティの議論をもとにしています。

2分でWebサイトが出るのは本当

Claude Design最大の価値は、「アイデアからdemo」までの時間を圧縮することです。 誰かを置き換えるというより、加速装置です。

コミュニティで共有されている典型的な流れはこうです。作りたいWebサイトの概念を入れる。テーマ、素材、色の好み、layoutの希望も含める。generateを押す。2分後には、hero領域、カテゴリtag、content gridまで入った、動くReactサイトが返ってきます。

初めてWebサイトを作る人にとっては救いになります。以前なら、まずFigmaでwireframeを引き、designerに色票を作ってもらい、engineerにcodeを書いてもらう必要がありました。全部回すと1週間かかることもあります。Claude Designはこの部分を10分以内に圧縮します。

開発の流れを一段押し上げる

Claude Design以前にClaude CodeでWebサイトを書くときは、配色、module、navigation、配置を頭の中でかなり考え、codeの中で少しずつ積み上げる流れになりがちでした。視覚の感覚を頭の中でsimulateする必要があり、考える負担が重くなります。

Claude Designを入れると、次の流れが現実的になります。

  1. 先にClaude Designで土台を生成する。色、layout、moduleを先にそろえる
  2. ファイルをExportする。完成サイトでもwireframeでもよい
  3. Claude Codeへ戻して細部を調整する。animation、interaction、data連携はここで扱う

2つのツールで役割分担します。Claude Designは「視覚の想像」、Claude Codeは「機能の実装」を担当します。それぞれ得意なことをやる形です。Claude Codeの詳細はClaude Code完全チュートリアルにまとめています。

Figma importにも対応しています。すでにFigmaファイルがあるなら、そのまま取り込んで続けられます。既存のdesign assetを持っているteamにとっては、導入のハードルが低いです。

欠点：成果物にはまだ人の仕上げが必要

「動く」と「きれい」の間にはまだ距離があります。色をもう少しグレー寄りにするべきか、見出しの太さは合っているか、hover状態はどう扱うか、余白のリズムは自然か。こうした細部は、今のAIだとまだうまく締めきれません。

開発者コミュニティの表現はかなり的確です。「このツールは今bugが多いが、方向性を予告している」。デザイナー側の反応も似ています。design systemのupload機能は強い一方、生成されるUIは半完成品のように見えることが多く、人がもう一度仕上げる必要があります。

つまり、Claude Designは80点の出発点を作るのに役立ちます。ただし80点から95点へ上げるには、人間の判断が必要です。Webデザイン経験がないと、出てきた成果物に「どこが変か説明しにくいけれど、何か違う」感が残ることがあります。

tip：AIにAI用のpromptを書かせる

「Claude Designにどうpromptを投げればいいか」まったく分からないときは、先に別のAI、たとえばClaude、ChatGPT、Geminiにこう頼むとよいです。「Claude DesignでX種類のWebサイトを作るための完全なdesign promptを書いてください。配色、font、layout、interactionの細部も含めてください。」

出てきたpromptをClaude Designに貼り戻すと、成果物の品質はかなり上がります。裏側の理屈は単純です。明確で構造化されたpromptは、ツール内で何度もtweakするよりAI生成品質に大きく効きます。 先に10分かけてpromptを整えるほうが、あとで30分微調整するより得です。Promptの書き方はPrompt Engineering完全ガイドにまとめています。

v0、Lovable、Figma Makeと何が違うのか

現時点のコミュニティの共通認識は次の通りです。

  • v0.dev：見た目のよさと速度が強く、brand prototypeに向いています。成果物の視覚は強いですが、Vercel ecosystemに寄ります。
  • Lovable：初期アイデアを素早く形にできます。ただし保守性が弱く、vibe-codedな負債の山になりやすいです。
  • Bolt.new：frontendが速い。full-stack統合は少し弱めです。
  • Figma Make：デザイナー向け共同作業ツールです。pixel-perfectは問題ありませんが、codeとの接続が弱めです。
  • Claude Design：「何をしたいのかを理解する」ことと「design system統合」が強みです。Opus 4.7 vision modelを使っていて、ただcodeを出すのではなく、理解してから生成します。Claude Codeへのhandoffも滑らかです。

開発者コミュニティの観察では、Claude Designとv0 / Lovableの最大の違いは出発点です。v0はcodeを出すことに重点を置きます。Claude Designは「先に理解する」ことに重点を置きます。ユーザーの意図を聞き取れるツールと、指示通りに物を生成するツールでは、長く使ったときの感触がかなり違います。Claude Code vs Cursorの比較はClaude Code vs Cursorで読めます。

Figmaは終わるのか

公開当日、Figma株は9%下落し、コミュニティでは「It is so over」ネタが大量に流れました。productの位置づけから見ると、これは過剰反応です。

Figmaの強みは共同作業とpixel-perfectな制御です。team内のdesigner、PM、engineerが同じファイルを見て、commentを残し、仕様を渡す。この部分にClaude Designはまだ踏み込んでいません。

より自然な展開は、Figmaの位置づけが「デザインの出発点」から「デザインの中継地点」へ変わることです。出発点の一部はClaude Designに取られますが、中間の精緻化、共同作業、handoffにはまだFigmaの場所があります。

鍵になるのは、Anthropic全体の配置です。Claude Designを制作ラインの中に置くとこうなります。

  • Design（Claude Design）：アイデアからdemoへ
  • Code（Claude Code）：demoからproductionへ
  • Agent（Claude API）：production公開後の自動化へ

これは一つの完全な制作ラインです。Figma、Lovable、Vercelはそれぞれ一部分を守っています。Anthropicが狙っているのは、その全体です。

向いている場面

コミュニティの実測をまとめると、次の通りです。

  • 向いている場面：アイデアからdemoまでの初期段階、顧客と認識をそろえるwireframe、社内ツールの素早いprototype、blog記事用の小さなdemo画像づくり
  • 向いていない場面：brandサイトの最終版、pixel-perfectが必要なpage、複雑なanimationが必要なinteraction

これは加速装置であって、終点ではありません。Figmaの代替として使うとがっかりします。「0から1までの時短ツール」として使うとかなり自然です。

次に注目したいところ

AnthropicのLabs系列は最近、Imagine、Skills、Agent SDKなど新しいものを出し続けています。Claude Designはその一つです。見るべきなのは、これらのツール間の統合です。Designから出たファイルをCodeへ渡す流れがどれだけ滑らかか、Codeが終わったものをAgentへ渡すとどう動くか。

この制作ライン全体が本当に回り始める日、個人開発者と小さなteamの生産性はもう一段上がるはずです。

関連記事

よくある質問

Q: Claude Designとは何ですか？

Anthropicが2026年4月17日に公開した実験的ツールです。promptでWebサイト、スライド、prototypeを生成できます。Claude Opus 4.7 vision modelを使い、意図を理解してから生成し、Figma importとClaude Codeへのhandoffにも対応しています。

Q: Claude DesignはFigmaを置き換えますか？

完全には置き換えません。Claude Designは「アイデアからdemo」までの初期加速が得意です。一方で、Figmaはpixel-perfectな制御と共同作業でまだ強みがあります。より自然な位置づけは、Figmaが「デザインの出発点」から「デザインの中継地点」へ移ることです。

Q: Claude Designはv0、Lovable、Boltと何が違いますか？

v0はcodeの見た目と速度、Lovableは初期アイデアの素早い形づくり、Boltはfull-stack寄りのfrontendに強みがあります。Claude Designの違いは「先に理解してから生成する」こと、design systemとの統合、Claude Codeへのhandoffの滑らかさです。

Q: 初心者でもClaude DesignだけできれいなWebサイトを作れますか？

「動く」Webサイトなら作れます。ただし「動く」と「きれい」の間には距離があります。色の加減、animationのリズム、細部の見え方は、まだAIが完全には仕上げてくれません。80点を95点にするには、少しWebデザイン経験が必要です。

Claude Designは現在、すべてのClaude購読者が試せます。無料版でも体験できます。公式ページ：anthropic.com/news/claude-design-anthropic-labs

この記事はAnthropic公式発表と公開コミュニティでの議論をもとに整理しています。

こぺんぎんの体験談

Claude Designはまだ日常の作業フローには入っていません。この記事はproductの位置づけ、コミュニティ実測、公式発表をもとに整理したもので、第一手の体験談としては書いていません。主力ツールの失敗談や実用メモを読むなら、Claude Code完全チュートリアルとPrompt Engineering完全ガイドをどうぞ。

— Penchan