ClaudeにDesignという新機能が登場しました。
Claude Designは、Anthropicが4月17日にリリースした研究プレビューで、Anthropic Labs製品ラインの一部であり、現在最強のビジョンモデルOpus 4.7上で動作します。 Claudeを使ってビジュアルドラフトを作成するためのもので、Webプロトタイプ、PPT、ピッチデッキ、ランディングページ、ワンページャーなど、さまざまなものが対象です。コードリポジトリや既存のデザインファイルを読み取り、出力にデザインシステムを適用して、既存のプロジェクトとスタイルを一致させることができます。
最も優れているのは最終出力です。PDF/PPTX/HTMLへのエクスポートやCanvaへの送信に加えて、すべてをハンドオフバンドルにまとめ、ローカルのClaude Codeに渡してプロジェクトコードの修正を続けることもできます。
これが発表されるとすぐに、Figmaの株価に影響が出て、6.89%下落して終了しました。
Figmaについて簡単に説明すると、オンライン共同デザインツールを提供する企業で、AdobeやCanvaと競合しています。世界中の何千万ものデザイナーがデザイン作成に使用しています。実は、AIを使ってFigmaを操作できるMCPもすでにありましたが、私の美的感覚があまりにも基本的で、アイデアが浮かばず頭が真っ白だったため、その製品は一度も使いませんでした。
なぜ私には本当に必要だったのか
私がWeChat公式アカウントにコンテンツをプッシュするために作ったObsidianプラグインを覚えていますか？
これまで全チャンネルを通じて、合計0部しか売れていません。なんて嬉しいことでしょう（TAT）。
もちろん、これは私の基本的なデザインセンスに関係している可能性があります（自慢しているわけではありません）。
元のプラグインUIがどのようなものか見てみてください：
2列のツールバー、1列に9個のボタンが詰め込まれています。 フォーマット、アカウント、プリセットアカウント名、アカウント設定、購入アクティベーション、ユーザーガイド、レンダリング更新、HTMLコピー、WeChat公式アカウントに貼り付け、下書き公開…すべてが最も目立つ場所に詰め込まれています。
機能はすべて揃っていますが、見るだけで疲れます。
その下には非常に長いプロンプトがあります：「下のボタンをクリックしてコンピュータから画像を選択してください。空白のままにするとプレースホルダーカバーが使用されます。デフォルトカバーが設定されている場合はデフォルトカバーが使用されます。」友人がそれを見て言いました：「これは誰向け？データベースのフィールド説明？」
そこでClaude Designが登場したのを見て、すぐに試してみました。実際のパフォーマンスを見てみましょう。
使い方
まず、ClaudeのWeb版を開き、左側のDesignをクリックして入ります。上部に「New prototype」という入力ボックスがあるので、プロジェクト名を入力するだけです。
Wireframe（低忠実度）またはHigh fidelity（ブランドアセット付き高忠実度）を選択できます。最初はラフなコンセプトだけなので高忠実度は必要ないと思い、低忠実度を選びました。実際には、完了すると自動的にアップグレードしてくれます。
次に、プログラムのフォルダパスを伝え、修正したいページのスクリーンショットを送ります。
最初にいくつか質問されます：何を変更するか、何を保持するか、主要なアクションは何か、二次的なアクションは何か。正直に告白しました—最も強調したいのは「下書き公開」と「アカウント切り替え」で、残りは折りたたんで構わないと。
質問が終わると、自動的に実行を開始しました。
4つのオプションを提示
すぐに、wireframes.htmlの比較ページを提示してきました。
最初に比較が表示され、現在のUIの「罪」を赤いテキストで一つずつ列挙していました：
- 「2列のバーがプレビューを圧迫」
- 「9個のボタン」
- 「中国語/英語混在＋混乱を招く記号説明」
この機能には本当に驚きました。単に修正を手伝ってくれるだけだと思っていましたが、実際に内容を見て問題点を指摘してくれたのです。冷たいAIではなく、実際のデザイナーと対面でコミュニケーションしているように感じました。
そして4つのオプションが提示されました：
- オプションA: シングル行ミニマル、メインボタン「下書き公開」＋アカウントカプセル、残りはアイコン＋
⋯メニュー - オプションB: カードパンくずリスト＋ドロワー、メタ情報編集のエントリを保持
- オプションC: サイドレール（VSCode風）、トップバーはタイトルのみ
- オプションD: 右下にフローティング公開カード、主要アクションを最も目立たせる
最も興味深かったのはオプションDでした。付箋に「一般的なデザインルール」と「推奨順序」を描いてくれました：
A → 最も省スペース、学習コストが低い D → 視覚的に最も美しく、主要アクションが最も満足感高い C → パワーユーザーに優しい（アイコンライブラリ） B → 安全、メタ情報編集を保持
これは単に「いくつかのオプションがあります」というだけでなく、「いくつかのオプションがあります＋それぞれ誰向けか教えます」というものです。 私は長い間プラグインを作ってきましたが、誰も「このボタンはどこに置くべきか」を真剣に教えてくれたことはありませんでした。
繰り返し改善できる
方向性を選んだ後も、コミュニケーションを続けられます。左側はチャットボックス、右側でEditをクリックすると要素を直接選択して修正できます（ただし、そこでの設定はプロフェッショナルすぎて理解できなかったのでスキップしました）。Drawをクリックするとプレビュー上に丸や矢印を描いて「これをここに移動したい」と伝えられます：
Draw機能は素晴らしいと思います。ボタンから右下へ非常に大雑把な矢印を描いたのですが、実際に理解してくれました—おそらくOpus 4.7のビジュアル認識の大幅なアップグレードに関係しているのでしょう（前述の通り、画像認識精度が3.75メガピクセルに向上しました）。
ツールバーからレイアウトへ
メニューバーを修正した後、いくつかの記事レイアウトスタイルを作成するよう依頼しました—何しろ私のプラグインの主な仕事は、MarkdownをWeChat公式アカウントで公開可能な形式に整形することですから。
新しいページが開き、タイトルは「Markdownを読む価値のあるWeChat記事にフォーマット」でした。右上にはTweaksボタンがあり、クリックするとフォントサイズ、太さ、色、行間などを調整できます。まるでFigmaのようです：
これは実際にクリック可能で切り替え可能なページであり、偽物ではないことに注意してください。このインタラクションは、ターミナルでClaude Codeを使って行うよりもはるかに優れています。Claude Codeでは、完了するまで待ってから効果を確認し、修正を依頼する必要があります。ここではリアルタイムプレビューが得られます。
最終決定したら、右上のExportをクリックします。いくつかのオプションが表示されます：PPTダウンロード、PDFエクスポート、スタンドアロンHTMLエクスポート、または最後のオプションとして**‘Handoff to Claude Code’**があり、デザインファイル全体をローカルのClaude Codeに送信してコーディングを続けます。
これが全体のチェーンの中で最も優れた部分です。
Web上でデザインした後、コマンドを生成してくれます。それをターミナルにコピー＆ペーストすると、ローカルのClaude Codeが引き継ぎます：
> Fetch this design file, read its readme,
and implement the relevant aspects of the design.
Implement: option-b-hifi.html
その後、デザインパッケージを読み込み、現在のコードを確認し、どのファイルを修正すべきかを理解し、最終的に私のプラグインのソースコードをすべて直接変更します。デザインページはoption-b-hifi.htmlを提供しました（結局オプションBの高忠実度版を選びました）。Claude Codeはデザインファイルから色、フォントサイズ、間隔を読み取り、私のReactコードに適用します。
このプロセス全体を通じて、私は一行もコードを書きませんでした。
最終結果
とにかく、元のものよりずっと良くなったと思います。プロのデザイナーならもっと上手くやったかもしれませんが、個人のプラグインとしては十分すぎるほどです（元のデザインと比べて）。
タイトル＋メタ情報が1行にまとめられ、アカウントはカプセル（緑色のアクティブドット付き）になり、主要アクションは右側の紫色の「下書き公開」ボタン一つだけ、残りはすべて⋯メニューに格納されています。
つまり、私の「機能」の山はデザインセンスが欠けていたのではなく、誰もトレードオフを手伝ってくれなかっただけだったのです。
ボタンを追加するのは簡単ですが、UIからボタンを削除するのは開発者にとって直感に反します—常に「誰かが必要としたらどうしよう？」と考えてしまいます。しかしデザイナーはその決断をしてくれます：「これはセカンダリメニューに入れましょう。ユーザーは最初の一度以降はクリックしませんから。」
今回は、Claude Designがその決断をしてくれました。
コスト
リソースを大量に消費する
Claudeのサブスクリプションプランでは、Designには独自のクォータがあります（言わざるを得ませんが、Claudeの個別クォータは本当に増えています）。
この一連の作業—4つのオプション比較＋5つの記事テーマ＋高忠実度実装—で、1日のクォータの36%を消費しました。私は5x Maxアカウントを持っていますが、Proアカウントなら1日分のクォータをすべて使い切ってしまうでしょう。
私の友人はProアカウントを持っています。昨夜、Designを使って30ページのPPTを作成したところ、1日分のクォータが完全に枯渇しました。
時々発生する不具合
作業中に時々、次のような状況に遭遇することがあります：メッセージを送信すると、<empty>と返信されます。もう一度送信しても、やはり<empty>：
対処法はページをリフレッシュして「続けてください」と伝えることで、通常は再開します。ただし、コンテキストが少し失われます。重要なデザインの反復作業中は、定期的にスクリーンショットをバックアップとして撮っておくことを忘れないでください。最後のステップで壊れた場合に最初からやり直さなくて済むように。
最後に
基本的なデザインだった私のObsidianプラグインが、ようやくまともな製品に見えるようになりました。
でも正直なところ、コンピュータの前に座って「下書き公開」をクリックしたとき、完全に興奮していたわけではありません。一つだけはっきりしていることがあります—デザインの訓練を受けていない私のような人間が2時間でまともなUIを作れるのであれば、「まとも」で生計を立てている人々はこれから数年厳しい時期を迎えるだろうということです。
以前は、AIによって作家が文学的センスのある対話相手を失うのではないかと心配していました。今回はその逆です—デザイナーは市場の最も厚い部分、つまり初級から中級の範囲を失おうとしています。
AIが一歩前進するたびに、歓声を上げる人もいれば、静かに去っていく人もいます。今回は私が歓声を上げている側ですが、背後でため息が聞こえます。
最近、AIに多くの時間とお金を費やしてきました。いつか自分を置き換えるのではないかと心配しながらも、これまでのところ打開策は見つかっていません。本業の役には立っていますが、根本的な変化はありません。最も重要なのは、それでお金を稼げていないことです。
もしあなたも私のように、小さな製品やプラグイン、ウェブサイトをほこりをかぶったまま放置しているなら、Claude Designを試してみてください。
最初の販売にはつながらないかもしれませんが、少なくとも見栄えは良くなります。そしてそれ自体が大きな進歩です。