Anthropic から新プロダクトがリリースされた！
こんにちは。株式会社 kikitori の CTO の永谷です。 Anthropic Labs から新プロダクトの Claude Design がリリースされました。 率直に言って、文句のつけようのない素晴らしいプロダクトで、久しぶりに驚きしかなかったので、本来月次のテックブログですが、記事を書いてしまいました。
公開初日からレビュー記事は大量に出ていますが、その多くは AI 生成と思しき、心のない記事ばかり...（最近このパターンが本当に多いですよね）。 せっかくなので、一度触ってみた人に向けて、人の言葉でこの驚きを残しておくのとともに、Claude Design の本質に迫ってみたいと思います。 まだ触っていない方は、読む前にまずサービスを開いてみてください！
Claude Design の位置づけ
まず Anthropic のプロダクトポートフォリオにおける Claude Design の位置づけを整理してみたいと思います。あくまで推測ではありますが、概ね間違っていないはずです。
- Claude Code: Claude のエージェントとしての能力そのもの。すべての核。
- Claude Cowork: Claude Code の能力を VM で包み、技術者による監視なしで安心して走らせられるようにしたプロダクト。
- Claude Design: Claude Code の能力に、フロントエンド開発のワークフローに必要なツール群を付加したプロダクト。
つまり Claude Design は、単独の新プロダクトというより、Claude Code という核に対する、フロントエンドドメイン特化のインターフェースと見るのが自然です。
なぜ Anthropic が「デザインツール」を作ったのか
「SaaS is dead」が叫ばれる中で、Anthropic がデザインツールにプロダクトポートフォリオを拡張した理由はどこにあるのか。 Claude Cowork の場合は「VM によるアイソレーション」という、汎用エージェントでは出せない価値が明快でした。 では Claude Design の強みは何になるのでしょうか。
この理解のため、まずはフロントエンド開発のワークフローを分解して考えてみましょう。
- コードを書く
- 作ったデザインを表示する
- エンジニアが画面を見てレイアウトを調整する
- ステークホルダーが成果物にフィードバックする（以下繰り返し）
Claude Design は、技術的には Figma Make や v0 と同じ「フロントエンド自動開発ツール」の系譜です*1。
しかし多くの競合は 1 と 2 までしか対応しておらず、実用レベルのクリエイティブを作成する能力には限界がありました。そして正直なところ、1 と 2 だけなら Claude Code などの汎用 AI エージェントとローカル IDE によるライブプレビューの方が快適です。私がこの類のツールの使用にこれまで消極的だったのは、これが原因でした。
つまり、3 と 4 にどこまで踏み込めるかが新規サービスとしての価値の分かれ目となることになります。驚くべきことに、Claude Design はここに対し、まさに 100 点満点*2の回答を用意してきました。
3. エンジニアによるレイアウト調整 → 自己フィードバックループで解決
Claude Design は、生成物のスクリーンショットを自ら入力として読み直し、マルチモーダルでレイアウトの崩れを検出・修正する、という自己フィードバックループを備えています。シンプルな機構ではありますが、この機能の有無による成果物の品質の差は絶望的なほど大きいです。
実際に、Figma Make と Claude Design に対し、「ひまわりのイラストを SVG で作って」といった単純なプロンプトを投げてみましょう。結果は下図の通りです。
Figma Make は一発の生成で終わるのに対し、Claude Design はドラフトを作った後、「実際に目で見て」レイアウトを詰めてくれます。この例でも、最初はイラストとしては茎と花が分離していて崩壊していたのですが、自分でそれに気づいて修正が行われました*3。結果、Claude Design のイラストは、本当にイラストレーターが描いたようなイラストになっています。
この仕組みは一見当たり前に見えますが、実装上の制約を考えると、スクリーンショットの取得と再評価はトークンを大量に消費するため、簡単には提供できません*4。
自社モデルを持たない Figma のような企業が、1 ライセンス $20 程度で提供するには、コスト構造的に提供が難しい機能だと思われます*5。自社でモデルを持つ Anthropic だからこそ、ここに踏み込めたのでしょう。Claude Code でも同様の仕組みを構築できはしますが、難しい設定なしでブラウザのみで実行できる点は、とても魅力的です。
4. ステークホルダーからのフィードバック → 圧倒的に使いやすい UI で解決
Claude Design はデザインに対するユーザーからのフィードバックを得るための仕組みとして、2 種類の機能を提供しています。
ひとつは、CSS とテキストのインライン編集です。レイアウトレベルのカスタマイズはできませんが、WebFlow のようにテキストだけでなくスタイルもその場で直接編集できます。「色をもう少し柔らかく」とチャットに書くより、スライダーを動かす方が圧倒的に早い場面は多いため、成果物の最後の編集のために非常に役立ちます。
もうひとつは、AI への直接のフィードバックになります。これには、2つのモードが提供されています。
- ① DOM レベルでの精度の高いコメント。要素を直接指し示した上でメッセージを送信する。
- ② 座標ベースのコメント＋手書きの指示。DOM を気にせず紙に赤ペンでマークするようにラフに指示できる。
UX としても、「Edit（直接編集）」「Comment（DOM を指定してフィードバック）」「Draw（絶対座標でフィードバック）」というわかりやすいメニューになっており、背景知識のないユーザーでも直感的に使えるようにデザインされています。非技術者であるステークホルダーが成果物に直接フィードバックを返すことも容易でしょう。
ここは、エンジニアリングパワーがものを言う領域です。①には WebFlow のような DOM 操作の精度が、②にはラフな指示を正しく解釈する UX 設計が要求されます。
総じて、これら 3 や 4 の機能群は、「ロードマップとしては競合も検討していたが、他社はコストとエンジニアリング能力の両面で実現できていなかった」という類の機能だと思われます。
Anthropic の強さの源泉
触っていて、Anthropic という企業の強さを三つの側面から改めて感じました。
AI プロバイダーとしての戦略の一貫性
AGI という遠い夢を追う OpenAI とは対照的に、Anthropic は 「現在の AI の能力の下で実用的に成立するエージェンティックなユースケース」に一貫してフォーカスしています。トークン課金もすべてのツールで共有されており、課金体系も明快です。返答のトーンも、会話の楽しさよりも実用性に重きを置いています。派手さはないですが、ビジネスとして信頼を寄せやすいです。
プロダクトポートフォリオの巧みさ
Anthropic のプロダクトは、見渡すといずれも「本質的にプロダクトとして提供すべき領域」 を突いてきます。単なるきれいなラッパーや AI ガワのツールではなく、明確なビジョンの下で必要な位置に必要な駒を置いています。一方で、ビジョン先行で終わらず、マーケットが実際に求めているものとの整合性があり、企業価値も着実に積み上げ、理想と市場の双方からプロダクトを組み上げていると感じます。
エンジニアリング組織の強さ
CTO としては、やはり一番気になるところです。Claude Design は、リリース当日から Figma Make や v0 に対して完成度の面で明確な差がついていました。Cowork のときも同様で、macOS や Windows の仮想環境の存在を意識させないレベルの体験が、リリース当日から提供されていました。
普通のプロダクト開発では、MVP と称して機能 1〜3 くらいで見切り発車するのが合理的な判断です。私だったらそうすると思います。しかし、Anthropic は、マーケットへのインパクトを優先して完成度を高め切ってからリリースすることで、意図的に「衝撃」を演出しています。これは、リリースが後ろ倒しになり、競合に先行されるリスクを飲み込めるだけの、圧倒的に強力なエンジニアリング組織が背景にないと戦略として成立しません。
また、開発者ツールを見る限り、Claude Design のフロントエンドは React Router + styled-components という保守的で堅実な技術を使用しています。Anthropic の他のプロダクトも同様なのですが、派手な技術ではなく、枯れた技術で高い完成度を出してくる、成熟したエンジニアリング組織であることが推察されます。
当社はこの AI のビッグウェーブにどう向き合うか
Claude Design に触れることで、改めて Anthropic のような組織の偉大さを再認識しました。 そして、当社 kikitori としては、この AI ムーブメントは、当社の価値を毀損するというより、むしろより当社の価値を最大化するものであると感じます。これは単純なポジショントークというよりも、実際にプロダクト開発の現場に携わる者としての実感です。
当社では、農業流通の現場で使われるプロダクトを作っています。現場がどう動いているのか、何が必要で何が制約になるのか、こういった情報を日々全国から収集し、判断し、プロダクトへと反映しています。現場になくてはならないプロダクトは、AI 時代にも引き続き必要とされ続けるのだと考えています（Anthropic が Claude Design を作ったのと同様です）。
また、当社の nimaru は、日本の農産物流通現場で最も多く使われているプロダクトだと自負しています。全国から、大量の流通データが日々 nimaru の中に蓄積されています。今後は、こうしたデータを活用しながら、プロダクトの今後の戦略を考えていくことになります。
この二つの理由から、私たちは、農業流通という領域で圧倒的な価値を出せるのは当社だけだと本気で考えています。流通の未来をリアルに描きながら作っていくのが楽しいと感じる方、ぜひ当社への応募を、お待ちしています！
おまけ: すごいよ Claude Design
リリース初日でこのクォリティというのに驚きが隠せません・・・
*1:フロントエンドエンジニアというよりはデザイナー向けのツールとしてのポジションですが、生成されたコードなどの技術的詳細は露出されています。
*2:以前社内で、Figma Make などのプロトタイピングツールに対して「こういう機能があったらいいよね」という会話がありました。Claude Design はその期待を軽々と超えてきました。
*3:このフィードバックの生成はバックグラウンドで行われ、利用者はそれを待たずにどんどん次の指示を出すことができます。また、スクリーンショットを見ていただければ分かるように、処理は Claude Code でおなじみのサブエージェントによって実行され、コンテキストを圧迫しないようになっているようです。こういった、ストレスを感じさせない細かい UX の作りこみも流石だと感じます。
*4:実際に、Max ではなく Pro プランで実行すると、あっという間にモデルの制限に達しました。
*5:直近では AI による高度な機能を提供するため、AI の利用量に応じたクレジットを導入する動きが広がっています。実際に、Figma や Notion などでは、AI クレジットが別途課金対象になりました。
