Anthropicが新プロダクト「Claude Design」をリリース！
Claudeと対話しながら、Webサイトやスライド資料などの制作ができるツールらしい。
筆者もいくつかWebサイトを運営しているので、早速Webサイトのデザイン改修を試してみた。
Claude Design はどこで使える？
まず https://claude.ai/design/ にアクセス。
Claudeのアカウントでサインインすると、以下のようなページが開く。
Project nameを入力 → Wireframeタイプを選択 → + Createで進めていく。
Wireframeはレイアウトなどを決めるための下書きみたいなデザインが作られ、High fidelityはより高品質なデザインが作られる。後々わかったことだが、Wireframeで作ったデザインをベースにHigh fidelityで仕上げることができたので、Wireframeで進めのが良いかも。
実際にWebページのデザインを作ってもらった
「+ Create」で進めると、まずはどんなデザインを作るかの設定画面が開く。
「Design System」をクリックして、作りたいものを選ぶ。
今回はWebページなので、「Save as standalone HTML」を選んでみる。
スクリーンショットを添付したり、Figmaからファイルをアップしたりもできるよう。
今回は特にないので、こちらはスルー。
左下のチャットでは、Claudeのモデルを選ぶこともできる。
今回は、これも最近リリースされたばかりの「Claude Opus 4.7」でやってみる。
チャット欄にはデザインを改良したいページのURLを渡し、「メイン部分の見せ方を改良したい」と打ってみた。
チャットを送信すると、ページの改良にあたっていくつもの質問が表示される。
ちゃんと送ったページの内容が取り込まれているようで、質問内容も適切だ。
一つずつ、希望のデザインになるよう回答を選択していく。
参考にしたいサイトも入れられたので、以下のように入力して「Continue」。
5分ほど待つと、4つのデザインができ上がりました！
おお、イメージを掴むためのモックアップ作成が、いとも簡単に。
右上の「Tweaks」で、余白や色などを調整することもできる！
ちなみに、気になるのがトークン使用量。
筆者は一番やすいProプランなのだが、この時点では以下のようになっていた。
なんと、週間制限に「Claude Design」が加わっている。
これをみると、4つのページデザイン作成で4割ほどが使用された模様。
やはり、Proプランではあまり乱用できなさそう。
さらにここから、気に入ったデザインを仕上げていく。
個人的に「04 Gallery」が気に入ったので、チャット欄で04 Galleryのハイファイ（High fidelity）を依頼してみる。
また数分待つと、以下のようなデザインができあがった！
おお、本物のページみたいですごい！
ちなみにこの時点での使用制限はこんな感じ。
すでに8割も使ってしまった。
ただ、現在のセッションとすべてのモデルの使用量が変わっていないので、Claude Designで消費されるトークンは別枠になっているのかもしれない。今後変わる可能性は十分あるが。
完成したデザインは、「Export」でPDFやPPTX、HTMLなどとしてダウンロードができる。
試しにPDFでエクスポートしてみた。
これだけでも十分だが、さらにClaude Codeに引き継ぎできる機能も。
先ほどの「Export」から、「Handoff to Claude Code」を選択。
このコマンドをコピーして、Claude Codeに貼り付ければ良いらしい。
Claude Designで作ったデザインをベースに、Claude Codeで実装する。
素晴らしい連携である。
Claude Codeでデザインを実装してみた
ということで、先ほどのコマンドをClaude Codeに貼り付けて、デザインを実装してもらった。
細かな動きの修正は必要だったものの、Claude Designで作成したデザインにかなり忠実に実装できたと思う。
参考までに、以下が元々のページである。（Claude Codeのみで実装したページ）
デザインセンスには全く自信はないが、Claude Designを採用した方が洗練されたデザインと思う。
おわりに
以上、Claude DesignにサクッとWebページのデザイン改修を依頼してみた。
思った以上にあっさりできてしまい、改めてClaudeの凄さを実感。
なお、最終的な使用制限は以下のようになり、ほぼ1週間分を使い切ってしまった。
Proプランの人、あまり乱発はできないので注意。
リセットされたら、また別ページのデザインを刷新してみよう！
