ハクソク

世界を動かす技術を、日本語で。

クロードデザイン

3時間前原文(www.anthropic.com)

概要

  • Anthropic Labsが新製品Claude Designを発表
  • Claude Opus 4.7を搭載し、デザイン制作の効率化を実現
  • 直感的な操作とチームコラボレーション機能を強化
  • プロトタイピング・資料作成・マーケティング素材の作成が容易
  • Claude Pro、Max、Team、Enterpriseのサブスクユーザー向けに提供開始

Claude Designの概要

  • Anthropic Labsによる新サービス、Claude Designのリリース
  • Claudeと協力し、デザイン・プロトタイプ・プレゼン資料などのビジュアル制作が可能
  • Claude Opus 4.7搭載で高精度なビジョンモデルを活用
  • Claude Pro、Max、Team、Enterpriseのサブスク利用者向けリサーチプレビューで段階的に展開
  • デザイナー以外でも直感的にアイデアを形にできる支援

Claude Designの主な機能

  • プロトタイプ作成：静的モックアップをインタラクティブなプロトタイプへ変換、簡単なユーザーテストやフィードバック収集を実現
  • ワイヤーフレーム・モックアップ作成：プロダクトマネージャーが機能フローを設計し、実装やデザイン調整に活用
  • デザインバリエーション探索：複数方向性のデザイン案を迅速に生成
  • プレゼン資料・ピッチデック作成：アイデアからブランドに沿ったスライドまで短時間で作成、PPTXやCanvaへエクスポート
  • マーケティング素材作成：ランディングページ、SNS用ビジュアル、キャンペーン素材の制作
  • 最先端デザイン：音声・動画・シェーダー・3D・AI組み込みプロトタイプの構築

Claude Designの利用フロー

  • ブランド一体化：オンボーディング時にコードベースやデザインファイルからデザインシステムを自動構築
    • 色・タイポグラフィ・コンポーネントを各プロジェクトに自動適用
    • システムの継続的な改善や複数管理も可能
  • 多様なインポート：テキストプロンプト、画像、ドキュメント（DOCX、PPTX、XLSX）、コードベース指定、Webキャプチャで要素取り込み
  • 細かな調整：要素へのインラインコメント、直接編集、ノブでレイアウトや配色・間隔をライブ調整
    • 変更内容を全体デザインへ一括反映指示も可能
  • コラボレーション：組織内共有・編集権限付与・グループチャットによる共同作業
  • 多様なエクスポート：組織内URL、フォルダ保存、Canva・PDF・PPTX・HTMLファイルへのエクスポート
  • Claude Codeへのハンドオフ：完成デザインをワンクリックでClaude Code用バンドルに変換

Claude Designの導入事例と評価

  • Canvaとの連携強化で、Claude DesignからCanvaへのスムーズな移行と高度な編集・共有が可能
  • Brilliantでは複雑なインタラクションやアニメーションを2つのプロンプトで再現、従来の20回以上の手間を大幅削減
  • 会話中のライブデザイン実現で、アイデアから動作するプロトタイプ作成までのスピードが劇的向上
    • 従来1週間かかった作業が1回の会話で完了

利用開始方法・注意点

  • Claude Pro、Max、Team、Enterpriseサブスクユーザーは追加料金なしで利用可能
  • サブスク利用枠を超える場合は追加利用のオプションあり
  • EnterpriseではデフォルトOFF、管理者が組織設定で有効化
  • claude.ai/designから利用開始

関連情報

  • Claude Opus 4.7：コーディング・エージェント・ビジョン・多段階タスクで性能向上
  • Anthropicのパートナーシップ：Google、Broadcomとの次世代コンピューティング強化
  • 組織向け統合・API連携も今後拡充予定

Hackerたちの意見

これ、すごいね！クロードが実際にレイヤー化されたFigmaのワイヤーフレームみたいなものを作ってて、後から細かい調整ができるみたい（例えば、フォントサイズの調整とか）。Canvaがサポートの引用を出したのも面白いね。差別化については詳しくないけど、これでCanvaから直接顧客を奪うことになるんじゃない？
└
Claude Designには「Canvaにエクスポート」ボタンがあるから、新しいユーザーを取り込むための手段として期待してるのかもね。もしくは、Claudeユーザーのデフォルトのデザインソフトとして「固定」したいのかも。
こんなのが開発できるのは、インターネットのデザインが均一化されてきたからだと思う。ガラス効果やドロップシャドウがWeb 2.0で流行って、Twitter Bootstrapが登場してからね。手間をかけずにちゃんとしたUIが手に入るけど、真にユニークで驚くようなものはない。技術的にはすごいけど、昔のアーティザナルな変わった感じは、ますます価値が高まって懐かしくなるね。
└
> 手間をかけずにちゃんとしたUIが手に入るけど、真にユニークで驚くようなものはない。これがまさに私がUIに求めるものだ。
└
均一で明白であることに恥はないよ。例えば、病院の弁護士が医療過誤訴訟を検索するための内部ツールを作っているなら、最も親しみやすく、明白で、驚きのないUI/UXが欲しい。邪魔にならず、ちゃんと機能してくれればいい。もちろん、人間が均一であることが許される時と、プレゼンテーションに本当の価値がある時を知る責任がある。例えば、ミュージシャン向けのVSTプラグインのウェブサイトを作るなら、ターゲットオーディエンスに魅力的に見えるように、もう少し「華やかさ」が必要かもしれない。
└
でも、まだまだ信じられないくらいダサくて使いにくい、最悪なアプリがたくさんあるよね。消費者向けのアプリでは競争が激しいから、人気のあるものはだいたいデザインもいいけど、企業向けは？マジで、まだまだひどい状況だよ。面白いのは、10年後も企業向けはまだひどいままだと思う。企業ソフトウェアの問題は、良いデザインがそんなに難しいわけじゃなくて（ただ気を使えばいいだけ！）、作ってる人たちのセンスがひどくて、自分たちが作ったものがダサくて使いにくいってことに気づいてないんじゃないかって思う。
└
> 労力をほとんどかけずに、まともなUIが手に入るけど、本当にユニークだったり驚くようなものはない。これがまさに私が欲しいものなんだ。まともなUIを手に入れるのがどれだけ大変か知ってる？デスクトップアプリで一貫性や均一性を称賛して、プラットフォームのイディオムやガイドラインに従わない開発者を責めるのに…ウェブアプリになると突然「本当にユニーク」だったり「驚くような」ものを求める人たちって、どういうことなんだろう？労力をほとんどかけずにまともなUIが得られるのは神の恵みだよ。
└
音楽も新しいわけじゃなくて、既に作られたリフを再構成してるだけなんだよね。でも、その再構成が新しい体験を生むんだ。デザインも同じかも？
└
> 労力をほとんどかけずに、無難なUIは手に入るけど、本当にユニークで衝撃的なものは得られないよ。ユニークで衝撃的なUIを作ろうとする90%以上の試みは、逆に衝撃的にひどいUIを生む。0.5秒の「おお！」という感動のために、余計な摩擦を増やしてるだけ。アートプロジェクトみたいに、その「おお！」が目的なら別だけど、そうじゃないなら、適切なスキルがない人が試みるべきじゃない。昔のアーティザナルな奇妙さは、意図的なスタイル選択じゃなくて、みんながクソみたいなツールでできる限りのことをしようとしてた結果なんだ。大衆に受け入れられることで失われる何かがあるかもしれないけど、これらのデザイントレンドが大衆に受け入れられた理由は、客観的に優れていたからだよ。
└
均質なデザインは良いことだよ。実際、インターネットはもっと均質であるべきだと思う。90年代中頃のデスクトップアプリは正しかったし、それ以降はウェブデザイナーがクレヨンを持った子供みたいに退化してる。
└
Claude Designに複雑なUIを生成してもらうように頼んでみた？それとも、Web 2.0以前の「2000年代の美学」とか（でも、もっと詳細を提供しないと、一般的な2000年代の美学しか得られないけど）。
└
でも、それが良いデザインなんだよ。ユーザーは一貫性を求めてる。真にユニークなデザインは素晴らしいけど、体験的なものにこそ合うべきで、CRUDアプリには向かないよ。Windows 95のアプリの均質さを嘆くのと同じことだよね。ウィンドウの右下にある灰色のボタンたち。
└
98.cssほどオールドスクールなものはないね。 https://jdan.github.io/98.css/
考えれば考えるほど、これはデザインにとって良くないと思う。理由はいくつかあるけど： - 最高のデザインはオリジナルで、革新的で、しばしば直感に反するもの。AIモデルにはそれができない。インスピレーションがなくて、絶対にノルムや均一性に収束してしまう（今やどこでも見かけるし、ShowHNをスクロールしてUIを見てみて）。 - 良いデザイナーはこれを拒否する。彼らは手を動かして、複数のインスピレーションを引き出すのが好きで、それがFigmaボードやCanvaの良いところでもある。 - クリエイターはAIに対して非常に高い拒否感を持っている。 - 非デザイナーはこのツールの目的を見出せないだろう。基本的なデザインはすでにClaude CodeやClaude.aiでできるし、もっとクリエイティブでユニークなモデルを活用しない限り、これが何を提供できるのか理解できない（クリエイティビティを促すことはできない、信じてほしい、試したことがあるから）。 - デザインはUIだけじゃない。こういうツールは、モーションやタイポグラフィ、画像、重さ、ホワイトスペース、音、感触など、他の重要な側面を無視している。
└
> 最高のデザインはオリジナルで、革新的で、しばしば直感に反するもの。ユーザーインターフェースをデザインするには、何千もの小さな決断が必要だ。これらの決断の利点と欠点を天秤にかけると、99%のケースで正しい答えは「親しみやすさを最適化する」だ。だからAndroidとiOSは似たような見た目になっていて、その小さな違いが争点になる。既存のパターンを採用すれば、ユーザーはすぐにアプリに慣れるし、デザインが邪魔になることもない。
└
データは異なる結果を示している。インターフェースを標準化する方法は常にあったし、Twitter Bootstrapからshadcnまで続いている。ユニークなデザインを求めている人は少ないし、ウェブの70%はまだWordPressを使っている。大多数は親しみやすさを好み、ユニークさを評価していると思う。
└
「AIモデルにはそれができない。」 「良いデザイナーはこれを拒否する。」 ^ 有名な最後の言葉だね。
└
ウェブデザインやデジタルデザインは衰退してる分野だね。企業は3〜4役をこなす人にお金を払うようになるだろうし（PM、UXリサーチ、デザイン、UI開発）。AIツールがコードでデザインを生成するのに、ウェブ関連でデザインツールを使う意味はあるのかな？さらに、デジタル体験の未来はユーザーインターフェース、つまりウェブなのか、それともすべてがロック画面で行われるAIフォンになるのか（AIがテキストや会話に応じてビジュアルを生成する）？UIが少ないテキストと音声のデジタル体験になるのかも。1月に解雇されて、17年のUXリサーチ/デザイン/開発のキャリアを経て、50代前半でキャリアチェンジのために学校に通い始めたところだよ。
└
あなたのリストにはアクセシビリティが含まれていないことに気づいたよ。個人的には「オリジナルで画期的、しばしば直感に反する」デザインよりも、アクセシブルなデザインの方がいいな。ここにいるのはその結果だね。
└
PowerPointと高品質なマーケティング部門についても同じことが言えるよ。「プロはこれを望まない」っていう主張はあまり説得力がないね。これはデザイナーじゃない人が、少ない労力で雑なものを作るためのものだよ。彼らはキラキラしたノブに影響されて、自分がコントロールしてる気になれるんだ。
└
さらに、優れたユーザーインターフェースデザインの多くは、実際の人間がその感覚システムでテストしたフィードバックを元に繰り返し改良されてるんだ。目と手を持った十分な精度のAIが登場するまで、人間の経験に基づくデザインはボトルネックのままだよ。
└
ジェネレーティブAIツールに何かを渡すのは嫌だけど、素晴らしいデザインは型を破るけど、非常に良いデザインはどんなアクションに対しても最も期待される結果を引き出すことに関するもので、それが摩擦を減らして人々が仕事を進めるのを助けるんだ。この世代のジェネレーティブツールは、プロンプトに対する最も一般的で期待される反応を特定するのが得意なんだよね。
Figmaの株価を見てみると、このニュースが出た11時ちょうどから下がり始めたね。とにかく、これは100% Figmaへの挑戦だし、Lovableも巻き込んでる。Anthropicの人がこれを読んでるなら、Figmaや他のデザインツールの機能を取り入れて開発を続ければ、大ヒットすると思うよ。
└
これってFigmaが簡単に統合できることじゃない？そうすれば、両方の良いところを手に入れられるよ。
└
ウォールストリートの人たちは、これがFigmaを置き換えるわけじゃないって理解してないね。Figmaは、考え抜かれたデザインシステムや一貫性のあるUIを作るデザイナー向けで、コーディングしない人たち向けだけど、これはデザインできないバイブコーダー向けだよ。二つの異なるサークルがある程度交差してるけど、あなたが言ったように、AnthropicがFigmaにツールを追加したら、その時に初めてFigmaから顧客を奪えると思う。
└
これを見ると、Lovableは確実に66億ドルの価値はないね。
└
一方で、CanvaがClaudeと提携したのは天才的な動きだと思う。デザイナーじゃない私のお気に入りの製品の一つだよ。
└
IPO以来の株価の動き（継続的な下落）の方が、11時以降に何が起こったかよりも心配だね。
└
でも、Figmaがこれを乗り越えるのって、そんなに大きな障壁なのかな？AIを統合する方が、逆にやりやすいと思うけど。
└
UIデザインにPencilを使い始めたんだけど、最近アニメーションが追加されて、Figmaを蹴り飛ばした感じだよ。FigmaもまたBlockbusterになっちゃうかもね。
これって、どれだけが完全に生成されたもので、どれだけがテンプレートウィジェットのノブをいじってるAIによるものなの？その地球儀は完全に新しく作られたものなのか、それとも特注の「テレコム地球儀」ウィジェットが使われてるの？同じ精度のノブで、原子サイズの分子のモックアップを頼むことはできるのかな？
└
生成されるもので、試してみると、これは主にClaude Opus 4.7の周りのハーネスで、良いデザインプランを作るのを助けてくれるものだよ。進める中で質問をしてくれたり、モックアップに対するレビューやフィードバックもできるけど、結局生成されるものを見てみると、ただのコードだね。
面白い！このアプローチ（だいたいデザインシステムを抽出して、テンプレートを作って、エクスポートする）を前に書いたことがあって、信じられないくらいパワフルだと思ってる：https://martinalderson.com/posts/how-to-make-great-looking-c.... 毎日Claude Codeを使ってる。過去のコードを振り返ると、これが日々の生産性に一番影響を与えたかも。悪い見た目のレポートで妥協するか、デザイナーに頼む（これが遅い）かのどちらかだからね。Figmaにはちょっと同情する部分もあるけど、いろんな「パートナーシップ」（MCPを強調してる）やAnthropicとのケーススタディをやっておいて、これをリリースするのはね。今回は彼らからの推薦文がないのも気になる。Figmaが「AI」を使うのがこんなに下手だとは驚きだよ。新しい技術（WASMとか）を取り入れて素晴らしい製品を作ってたのに。Figma Makeは期待外れだったし、システムプロンプトを抽出したら、基本的にデザインプロンプト付きのGemini 3 Proだった。元のチームが去ったのかも？彼らはかなり危機的な状況だと思う。UI/UXデザイナーたちはしばらく使い続けるだろうけど、PMや開発者がファイルを見たりエクスポートしたりコメントしたりするための追加席からの収益が多かったんじゃないかな。デザイナーのコアな使用はあまりないと思う。これからはFigmaでそんなことはあまり起きないと思う。
└
まさにその通りだと思う。AdobeやFigmaの売上の大半は、フルツールが必要ない人たちが占めてるんじゃないかな。彼らは基本的にビューワーとして使ったり、ちょっとした調整やメモをするためだけに使ってる感じ。
今のところ、Anthropicの製品分野はかなり手を広げすぎてる気がする。もし彼らが無制限に横に広がりたいなら、無限の集中力が必要だけど、エージェントじゃそれは無理だよね。いろいろなことが抜け落ちちゃうよ。2年、3年後にAnthropicがこの製品を大事にするって信じる理由は何？その点、Figmaはその時期にしっかりと製品を大事にすると思うけど。
うちのエージェンシーでは、これがFigmaやデザイナーの代わりにはならないよ。ただ、自分を表現したり意図を伝えたりするのにすごく便利なツールなんだ。これらのツールがなかった頃は、クライアントが特定のセクションを作りたいって言ったら、ウェブ中から参考を探すのに何時間もかかってた。出てくるものはいつも2、3サイトの寄せ集めみたいで、全然ユニークじゃなかった。さらに、クライアントのデザイナーや開発者に意図を説明するのにもっと時間がかかって、言葉じゃレイアウトをうまく伝えられないから、何度もやり直しになってた。今は、ClaudeやLovableでさっとモックアップを作って送るだけ。デザイナーは45分の電話の代わりに30秒でアイデアを理解できて、その後は自分のセンスやクライアントのブランディングでさらに進めてくれる。デザイナーの代わりになるわけじゃないよ。ほとんどのクライアントは、実際に見てみないと自分が何を求めているかわからないからね。このツールのおかげで、フィードバックのループが数週間から数分に短縮されて、デザイナーは人間のセンスが必要な部分に時間を使えるようになるんだ。
LovableはTailwindCSSのレコムビネーターだった、それだけ。最近はShadCNっぽくなってきてるね。TailwindCSSは傑作だけど、皮肉なことに「TWの上に構築する」フレームワークが利益を上げる一方で、あまり注目されてない。TailwindCSSは、他のフレームワークが持っていた利点と大きな制限を乗り越えた最終進化形なんだ。BEMなんてどう？TWは本当にエレガントで、純粋な意味での新しいパラダイムで、見事に実行されてる。何年も穴を開けられなかったし、その拡張性がどれだけ素晴らしいかを示してる。Bootstrapはいつまでも大切にされるだろうけど、最初はブラウザの癖とかが中心だったからね。重要なマイルストーンだけど、TWには敵わないよ。
彼らはリンクがclaude.ai/designだと言ってるけど、今は「ページが見つかりません」って表示されるよ。Claudeはいろんなことを手伝えるけど、このページを見つけるのはそのうちの一つじゃないみたい。ログインしてるときにね。