UIの修正って、言葉で伝えるのがホンマ難しいよな。 「ここをもうちょっと大きくして」「このテキスト、なんか左に寄ってる気がする」とか言うても、いまいち伝わらんかったり、期待と違うもんが上がってきたり…。
そんなときに試してほしいんが、スクショに直接書き込んでClaude Codeに投げつける方法だよ。矢印とかテキストボックスで「ここをこうして！」って指示するだけで、めっちゃ正確に意図が伝わるから、騙されたと思って一回やってみて！
一番雑な投げ方
まずは、これだけで動くから試してみて。
このスクショのマークアップに従ってUIを修正して。
これだけで十分通じるから、まずは試してみて。修正したいUIのスクショを撮って、その画像に直接、矢印やテキストボックスで「ここをこの色にして」「このボタンを大きくして」って書き込んでから、このプロンプトと一緒にClaude Codeにアップロードするだけだよ。
もうちょい具体的に投げるパターン
もうちょっとだけ具体的に指示したいときは、こんなプロンプトも使えるよ。
修正対象のファイルを指定する
もし、どのファイルを修正すべきか見当がついてるなら、それを伝えてあげると、Claudeはピンポイントで修正してくれるから、作業が早くなるよ。
このスクショのマークアップに従ってUIを修正して。
修正対象は `app/ui/components/UserAvatar.tsx` だよ。
修正の目的や背景を少し加える
なんでその修正が必要なのか、ちょこっと背景を伝えてあげると、Claudeはより適切な解決策を提案してくれることがあるよ。単に「大きくして」じゃなくて、「タップしやすくしたいから」って理由を添える感じだね。
このスクショのマークアップに従ってUIを修正して。
今、アバターの表示が少し小さすぎるみたいなんだ。
ユーザーがプロフィールをタップしやすくするために、サイズを少し大きくして、タップ領域も広げてほしいな。
実践例 / 実録
実際に「くぐる」アプリで、招待画面のUIを修正したときの例を見せるね。 友達を招待するときに使う「招待コードを共有する」ボタンが、ちょっと小さくて押しにくかったんよ。テキストも背景に埋もれがちで、読みにくいなって感じてたんだ。
言葉で「ボタンの文字を大きくして、ボタン自体をもう少し広くして、アイコンとテキストの間隔も少し開けて」って説明するより、スクショに直接書き込んだ方が早いし正確だと思って、こんな感じでマークアップしたスクショをClaude Codeに投げたよ。
（ここにマークアップ付きのスクショをアップロードしたと想定して読んでね）
友達招待の画面なんだけど、このボタン、ちょっと押しにくくない？
スクショに赤丸と矢印で指示した部分を修正してほしいな。
具体的には「招待コードを共有する」ボタンのテキストをもっと読みやすくして、ボタン自体の幅も広げてほしいんだ。
あと、アイコンとテキストの間隔も少し開けてくれると嬉しいな。
そしたら、Claudeはこんな感じで返してくれたよ。
了解したよ！ `app/components/InviteShareButton.tsx` を見させてもらったよ。
まず、`font-size` を上げて `font-weight` を `semibold` にするね。
それから、`w-full` を追加してボタンの幅をいっぱいに広げるよ。
アイコンとテキストの間隔は `gap-2` を `gap-3` に変更してみようか。
これでどうかな？
まさに期待通りの修正案だったから、あとはClaudeに実行してもらうだけ。 実際に修正されたUIは、ボタンが大きくなって押しやすくなったし、テキストもはっきり読めるようになって、めっちゃ使いやすくなったよ！
言葉で座標とか指定するんじゃなくて、スクショに直感的に書き込むだけでここまで的確に修正してくれるのは、ホンマ感動ものだね。
つまずきポイント
この方法、便利だけどいくつか注意点があるよ。
- マークアップはシンプルに: あまりにもたくさんの指示を詰め込みすぎたり、ごちゃごちゃしたマークアップにすると、かえってClaudeが混乱することがあるよ。シンプルに、直感的に伝わるように指示するのがコツだよ。
- 画像サイズと解像度: スクショのサイズが小さすぎたり、解像度が低すぎると、Claudeがマークアップを正確に読み取れない場合があるから気をつけてね。クリアで分かりやすい画像を用意してあげてね。
- コンテキストを補足: マークアップだけでは伝わりにくいニュアンスや、なぜその変更が必要なのかという背景は、プロンプトで言葉で補足してあげると、より良い結果に繋がるよ。
UIの細かな修正でいちいち言葉で説明するのって、ホンマ大変やん？ そんなときは、このスクショにマークアップして投げるテクニックをぜひ試してみて。きっと作業がめっちゃ楽になるはずだよ！