AnthropicがClaude Code以来最も注目すべき新製品Claude Designをリリースした。これはClaude Opus 4.7を搭載したデザインパートナーツールであり、デザイン、プロトタイプ、スライド、アニメーションなどの視覚的作品を協働で作成できる。製品発表と同時にFigmaの株価が約8%下落したことは、Anthropicが蓄積した市場への影響力の大きさを示している。ユーザーは企業のデザインシステムをClaudeに提供し、それに基づいた資産を作成できるほか、完成したデザインをPDF、PPT、HTML、さらにはClaude Codeへと書き出すことが可能だ。実際の使用例では、Linearのスタイルを参考にしたウェブサイトの再デザインが短時間で実現され、数か月前のAI生成物とは比較にならないほどの進化を見せている。AnthropicがLovableやRepのような競合を目指すのではなく、本業であるコーディングエージェントとモデル開発に注力し続けることが期待される。
Claude Designの衝撃的なデビュー
これはおそらく、Claude Codeのリリース以来、Anthropicから見た中で最もクールなもののひとつでしょう。彼らはClaude Designという新製品をリリースしました。これはClaudeと協力して、デザイン、プロトタイプ、スライド、アニメーションのような洗練された視覚的な作品を作成できるものです。
これをClaude Opus 4.7を搭載したデザインパートナーだと考えてください。Opusはマルチモーダルな推論が非常に得意で、特にこの新しいバージョンは優れています。そして、この新製品はそのモデルによって動いているようです。さて、製品発表自体について言えば、Figmaの株価が今日ほぼ8%下落しました。これはちょっと異常なことです。過剰反応だと思いますが、Anthropicが蓄積してきた力を本当によく示していますね。彼らが新製品をリリースするたびに、市場でかなり強い反応があるようです。
このビデオでは、この新製品が正確にどのようなものか、どんな体験なのかをお見せしたいと思います。まだいくつか荒削りな部分はありますが、本当に良いスタートだと思います。
製品の概要と機能
さて、こちらがAnthropic LabsによるClaude Designを紹介するブログ投稿です。彼らのアイデアは、リアルなプロトタイプ、製品のワイヤーフレームとモックアップ、デザイン探索、ピッチデッキとプレゼンテーションを作成できるというものです。
これは実際にかなりうまく機能します。試してみました。マーケティング資料やフロンティアデザインにも使えます。主なポイントは、会社がデザインシステムを持っている場合、それをClaudeに提供して、その特定のデザインに基づいた資産を作成できるということです。これはかなり素晴らしいことです。
claude.ai/designにアクセスすると、UIやインターフェースはこのように見えます。プロトタイプ、スライドデッキ、フォントテンプレートがあり、独自のデザインシステムを設定している場合はそれも使えます。これは特定の会社向けにデザイナーや製品担当者が持っているものですが、Claudeで独自のものを構築することもできます。では、私ができたことをいくつかお見せして、それから実用的な例をいくつか見ていきましょう。
実例:セッション管理のアニメーション作成
簡単な例をお見せしましょう。私はClaude Codeでのセッション管理の方法に関するビデオを作成中です。このブログ投稿をClaude Designに提供しただけです。そして、そのブログ投稿に基づいてアニメーションを作成するよう単純に依頼しました。そして、こういったものを思いついたんです。
すべてのアセット、アニメーションを作成し、さらにAnthropicモデルのデザイン言語や彼らの作品の提示方法まで見ているんです。これはかなり素晴らしいですよね。実際にはClaude製品だと明示的に伝えていないのに、そのブログ投稿を読むだけで、Anthropicが使用するデザイン言語を使えているようです。
これでもっと多くのことができますが、アセットを作成したら、そのアセットをzipファイルとして書き出したり、PDF、PPTに書き出したり、Canvaに送ったり、スタンドアロンのHTMLとして書き出したり、さらに作業を続けたい場合はClaude Codeに引き渡すこともできます。
これはかなり素晴らしいことです。デザインやプロトタイプを思いついたら、それをエンジニアに引き渡して、そのエンジニアがそれを基に作業を続けるようなものですから。これは本当にクールです。
新規プロジェクトの開始
では、全く新しいプロジェクトから始めましょう。実際に、Claudeが従うべきデザインシステムを整理できるシステムがありますが、ここにはかなり素晴らしい例もいくつかあります。
これらはすべてClaude Designによって作成されたアニメーションやアセットです。そして、実際にこれらのいくつかをインスピレーションやテンプレートとして使うことができます。これはサインアップフローを持つシンプルなiOSアプリのモックアップです。これは、エンジニアに引き渡す前にFigmaで行うようなことですが、今では実際にここで作成できるんです。
そして、これらは始めるための非常にシンプルなプロンプトです。製品を構築している場合、Claude DesignでUI/UXがどのように見えるかのさまざまなアイデアを探索し、満足したらエンジニアに渡すだけです。この場合はClaude Codeですが、Claude Codeがそれを洗練し実装するのを助けてくれます。
実践:ウェブサイトのリデザイン
実際にライブテストを行って、何をするか見てみましょう。私は自分のmacOSアプリであるWriteのウェブサイトを再デザインしたいと思っています。これは音声テキスト変換用の完全にローカルなアプリです。macOS上のすべての異なるアプリケーションで動作します。実際、Windows版もかなり近日中に登場します。これを、例えばLinearのようなスタイルで再デザインしたいと思います。
これ用のプロジェクトを作成しましょう。作成をクリックします。そして、プロンプトを提供する必要があります。UI全体がかなり素晴らしいですね。このウェブサイトをlinear.appのスタイルで再デザインできますか、と尋ねます。write.comをlinear.appのスタイルで再デザインするよう依頼し、Linearからのスクリーンショットもいくつか提供しました。正確に何をするか見てみましょう。
何らかの理由でアップロードフォルダが開きました。これはスクリーンショットを提供したためだと思います。さて、フードの下でClaude Codeのバージョンを実行しているようです。ウェブリンクを取得して内容を読むことができるからです。
わあ、すごい。つまり、これは協働ツールなんです。私のユーザープロンプトに基づいて、いくつか質問してきています。答えを提供しましょう。いくつかのオプションを提示するだけでなく、必要に応じて自由形式のテキストも提供できます。わあ、これだけでも実際にかなり素晴らしいです。
いくつかのものについては、ここのように複数の異なるオプションを選択できます。他のものについては、そのうちの1つだけを選択できます。読むだけではどちらができるかが明確ではないので、彼らは間違いなくそこに取り組む必要があると思います。いくつかランダムなものを選択して、何をするか見てみましょう。
続けるをクリックします。実際に比較的速いです。UI自体は改善の余地がありますね。これが通常のClaude.aiの時間あたりの制限に対して使用量がカウントされるかどうか気になっていました。まだそれが含まれているのを実際には見ていません。これは非常に興味深いです。更新されるかもしれませんが、今のところプロフィールを使用しているようには見えません。
デザインの初期実装が完了しました。さて、フルスクリーンで見たり、新しいタブで開いたりできます。では、ウェブサイトがどのように見えるか見てみましょう。実際にかなり素晴らしいです。
生成されたデザインの評価
数か月前なら、これらのモデルから単純なAIのゴミを期待したでしょうが、私たちが成し遂げた進歩は本当に信じられないものです。このアニメーションスタイルが気に入っています。自動文字起こしを有効にするさまざまなキーストロークが何であるかを追加したからです。そして、これは私たちが提供した視覚的な参照に基づいています。
実際、今考えているのは、おそらくこれらのデザインインスピレーションのいくつかを取って、実際にウェブサイトに入れるだろうということです。これらはよくある質問です。ウェブページからすべてのコンテンツを読み取って、ここにすべてを実装したようです。そして、これも機能的です。つまり、これを出発点として使って、デザイン自体を洗練させることができます。
そのためのオプションがいくつかあります。3つの調整を有効にすると、作成したデザインの特定の要素にコメントを追加できます。新しいCodexアプリを見たことがあれば、彼らはウェブブラウザを持っていて、それも非常に似た機能を提供しています。特定の要素を正確に指定して、それについてフィードバックを提供できるんです。
では、何か言ってみましょう。このロゴを音波形に置き換えてください、と。そして、Claudeに送信するだけで、作業を続けます。同様に、デザイン要素を変更できます。例えば、背景スタイル、ここのフォントなどです。そして実際に、私の場合、これらの背景要素も実装されていて、選択するだけで自動的にウェブページに適用されます。
また、直接選択または描画して、フィードバックを提供する機能もあります。これはAI Studioがやっていることと非常に似ています。このキャンバスを提供して、そこで直接フィードバックを提供できるんです。かなり素晴らしいですね。このデザインシステムの実装は本当に良いと思います。
今後の展望と懸念
私が見てきた会話から、人々はAnthropicがLovableやRepのような何かに対する競合を作ろうとしていると考えています。原理的には潜在的にできるかもしれませんが、それははるかに大きな努力になると思います。フロントエンドだけの問題ではないからです。人々が構築しようとしているアプリのために、バックエンド認証、データベース、すべてをサポートするインフラストラクチャが必要です。
Anthropicがその方向に行かないことを願っています。なぜなら、それは彼らの焦点が、おそらく現在業界で最高である主要なコーディングエージェントから変わることを意味するからです。OpenAIでもこれを見ました。あまりにも多くのことをやろうとして、ある種焦点を失い、製品が劣化しましたよね。
ですから、願わくはAnthropicが集中し続けて、主にこれらの信じられないほどのコーディングエージェントとモデルを作り続けてくれることを期待します。でも、あなたがどう思うか教えてください。これをもっと探索するつもりですし、これは実際に日常業務やYouTubeチャンネルでも使えるものだと感じています。
このビデオが役に立ったことを願っています。ご視聴ありがとうございました。いつものように、次回お会いしましょう。
コメント