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