Claude Designの開発者本人が明かす誕生秘話と、現場で使える10のテクニック
- エンジニアがAIを活用して開発スピードを飛躍的に上げる中、デザイナーは従来通りの速度にとどまっていました。この落差に直面したAnthropicのプロダクトデザイナーNate Parrottが開発したのが「Claude Design」です。本記事では、彼が日常的に実践している10のノウハウを余すところなく解説します。
- 彼が行き着いた答えは「HTML」でした。Webページのフォーマットと思われがちですが、スライドや動画、PDFでできることはWebページでもすべて実現でき、ClaudeはHTMLの記述を非常に得意としています。
- 10のテクニックを作業順に整理：着手前4つ、案の作成時4つ、仕上げ2つ。最も直感に反するのは仕上げのステップで、微調整は自分でドラッグして直接編集することでトークンを消費せずに済みます。
- 見た目を明確に指示しないと、一目でそれとわかるデザイン（オフホワイトの背景、サビオレンジのアクセント、大きな斜体セリフ体）が生成されます。Anthropicの公式ドキュメントもこのデフォルトの存在を認めており、「クリーム色を使うな」といった大雑把な指示では別の固定カラーパレットに切り替わるだけです。
Claude Design诞生秘话：エンジニア2人に追いつけなかったデザイナー
この記事の著者Nate Parrottは、Claude Designの設計者本人です。本記事では「彼自身の課題からこのツールがどのように生まれたか」「彼が普段どのように活用しているか」「毎日使っている10のテクニック」の3点について、順番に解説していきます。
まずは彼の直面した課題から紹介します。2025年秋、Nate ParrottはClaude CodeのVS Code版を担当する唯一のプロダクトデザイナーとして、2人のエンジニアと共に作業していました。9月末にベータ版が公開され、11月にOpus 4.5がリリースされると、チームは次々と新機能をリリースしていきました。2人のエンジニアはAIを活用して開発速度を飛躍的に向上させましたが、彼は従来のスピードのまま、設計図を1点ずつ手作業で描き続けていたのです。
彼が最初に試した解決策はごく自然なものでしたが、うまくいきませんでした。ターミナル上で動くClaude Codeの画面はテキストで埋め尽くされていたため、彼はテキストの文脈に沿ってターミナルの出力をコピーし、スクリーンショットを添えて「この機能を追加したいのでデザインしてほしい」と指示しました。しかし、出力結果は期待外れでした。彼は終業後の時間を使って1ヶ月ほど試行錯誤を続けました。
最終的に行き着いた答えは、誰もが知っていながら見落としがちな事実でした。ClaudeはHTMLの記述が非常に得意であるということです。私たちはHTMLをWebサイト専用のフォーマットと考えがちですが、Webページにはスライド、動画、PDFなどあらゆる要素を盛り込め、クリックやアニメーションにも対応できます。そこで彼は静的な設計図を求めるのをやめ、Claudeに直接HTMLを出力させ、左側にチャット、右側にプレビューを表示する専用インターフェースを構築しました。
単にHTMLを出力するだけでは不十分で、プロダクトデザインには自社ブランドの理解が必要です。そこで彼はAnthropicのフォント、カラー、アセット、設計原則をプロンプトとして組み込み、生成物が最初から規約に沿うようにしました。このツールをチームに共有すると、デザイナーたちは即座にクリック可能なプロトタイプ（clickable prototype）の作成に活用し始めました。従来のツールでは画面の全状態を描いて手動でワイヤーフレームを繋ぐ必要がありましたが、このツールならアセットを渡して「クリック可能にして」と伝えるだけで完了します。
その後、Anthropic Labsチームのアイディア提案ミーティングで、参加者全員がこのツールを使ってその場でスライドを作成しました。自分の発表順を待つ間に会議の合間で作った人も多くいました。この会議をきっかけにLabsチームに人員が割り当てられ、正式な製品として開発が進められたのがClaude Designです。
彼は2つの限界についても明確に述べています。画像の生成は行わない：画像モデルを搭載していないため、ロゴの作成には適していません。既存のロゴを読み込ませるのが正しい使い方です。本番環境のソフトウェア開発にはClaude Codeを使用する：Claude Designは初期の構想や方向性のすり合わせを担当し、両者の間で行き来が可能です。