
デザイナーのためのClaude Code入門 | 操作できるUI体験をAIでデザイン
作ったものに、修正を頼んでいきます。
背景の色が今グレーになっているので、白に変えたいと思います。普通に打てばいいのですが、具体的に書けば書くほど、正確に理解してやってくれます。
「背景の色をグレーから白に変えたいです」でも全然いいのですが、僕は、それに加えて「今日・明日・すべてと切り替わっても、白にしてほしいです」のように頼みました。
「白になりました」と返ってきたら、ブラウザを再読み込みします。HTMLなので、再読み込みしないと変わりません。白に変わっていました。
白にしたぶん、タスクのカードの感じが薄れてしまいました。「しまったな」と思ったら、「やっぱり戻してください」と頼めば、簡単なものならサクッと戻してくれます。再読み込みすると、元通りになっていました。
「こういうパターンにしたらどうなるかな」「ここをこうしたらどうなるかな」というのを、気軽にガンガン作って試せます。
「ここを変えたい」と言葉で指示しにくいときは、スクリーンショットを貼ると簡単に指示できます。
黒に変わりました。ボタンの色と連動していたので、ちょっと変な感じになりましたが、こういう修正もできます。
画像を読み込む方が、AIの使用量(トークン)の消費は少し激しいと思います。使い方次第ですが、言葉で伝えるのが難しいときには、画像での指示もできます。
あとは、自分のやり方や発想次第で、機能を追加したり、デザインのパターンを作ったりしていけます。