はじめに
いま超話題のClaude Designを雑に試してみました。
Claude Designを試してみた結論
- UI案の生成はかなり優秀（デザイナーの叩き台として使える）
- ただし「実装への落とし込み」はかなり不安定
- 利用制限が厳しく、連続使用が難しい
- 現時点では「デザイン生成ツール」として割り切るのが良さそう
とりあえず実際に触ってみた結果をまとめていきます。
できたもの
今回リデザイン対象としたアプリ：
- 英語のセッションを聞くことに特化したリアルタイム翻訳アプリ (自作)
現状 (Claude Codeデザイン)
Claude Design 提案
実際にできたもの
実際にやってみた
デザイン生成
Claude Designの画面から新しいプロトタイプを作成します。
「コードベースを添付する」を選択します。
「翻訳アプリのUIデザインを行けてる感じにしてほしい。」（誤字）とプロンプトに入力して動かしてみました。
「デザイン案を何通り提示するか」などいろいろ質問されるため回答していきました。
今回は４～５案を提案してもらった中から選択しました。
以下がClaude Designで作成したデザインになります。
おお！カッコいい！！イケてますね！
これはキャプチャですが、実際は動く様子を見せてくれます。
デザイナーの仕事はわかりませんが、これを基の顧客とデザインを詰めていくことができそうです。
ちなみに私が選択しなかった残り４つのデザインは以下になります。
デザインが確定したので、このデザインで実装してもらおうと思います。
・・・と、実装を開始したところで、残念ながら利用料上限を迎えてしまいました。（早）
モデルを確認したところ、Opus4.7がデフォルトで選択されていました。あー、なるほどねぇ…
とりあえずSonnetに変更しました。
24時間後にリトライしてと書かれてましたが、24時間後ではダメでした。
何度かリトライしていたら1週間後の火曜日にリトライして、とポップアップには出ましたが、何故か土曜日には使えるようになってました。
↓公式では7日でリセットされると公言されています。
Claude Designのサブスクリプションの利用方法と料金
以下の画面で現在の使用量が確認できます。
使用量
実装
時が経ち、使用制限が解除されたため実装を開始してもらいました。
ローカルフォルダへのアクセスを許可しました。
実装が完了したかのような表示が出て処理が止まりました。
ワクワクしながら画面を更新しましたが、デザインが変わらないため聞いてみました。
さっきローカルフォルダへのアクセス許可したのは何だったのか分かりませんが、書き込めないようです。
提示されたファイルをダウンロードしてローカルのファイルに上書きしました。
おお！！なんかデザイン変わってる！！
・・・あれ？デザインこんなんだっけ。。
↓最初に提示されたデザイン
全然違う。。
ほぼ色しか変わってないじゃん。。
現在の画面キャプチャをみせて、デザインがあまり変わっていないことを指摘します。
再びファイルの差し替えを指示されたのでやってみましたが、あまり変わりませんでした。
この後、何度かリトライした結果が↓こんな感じ。
うーん、最初のデザインを上辺だけパクッて作ったようなデザイン…。
単純に見づらくなったのとバグが出てきました。
Claude Designの利用上限に達したため、今回の検証はここで終わります。
使ってみた感想
リデザインは大量のコードを読ませるため、やはり難しそうです。
最初にClaude Designでデザインを決めてからClaude Codeでコーディングすればもっとうまくいくと思います。
私もまだ全然試せていませんが、いったん現状で情報共有しておきます。
まだClaude Designの情報があまり出回っていない理由は、
すぐに利用上限を迎えてしまい試しきれていない人が多いためと予想します。
自分もまさにその状態でした。
私の検証が誰かの役に立てば幸いです。