Claude Codeに画面を直してもらったら。スクショとプレビューで確認する順番

AIにサイトを直してもらい、「修正しました」と返ってきた。ここで見たいのは、どの画面で何が直ったのかです。見た目の相談にはスクリーンショット、ボタンや入力欄の確認には実際に動くプレビューを使うと、次の指示を出しやすくなります。

まず、目標の画面を1枚用意する

自分のサイトの修正前画面や、利用する権利のあるデザイン画像を用意します。「これに近づけて」だけでなく、直す場所を絞るのがコツです。

たとえば「スマホで見たとき、予約ボタンの文字が2行になっている。1行に収めたい。写真と本文の大きさは変えない」と伝えます。名前やメールアドレス、管理用の情報が映っていたら、共有前に隠しておきましょう。

Claude Codeは画像の添付やファイルの指定に対応しています。画像を送った後は、「この画像のどの部分を直すと理解しましたか」と一度確認すると、違う場所を変更する行き違いを減らせます。公式の画像の扱い方（英語）

公式デモで、プレビューの使い方を見る

ClaudeアプリのCodeタブで作業フォルダを開いたセッションが対象です。そこには、作っているアプリを表示するBrowserペインがあります。ペインは、アプリ内で並べて表示する画面のこと。公式資料では、Claudeが画面を撮り、要素をクリックし、問題を確認する流れが紹介されています。Desktopの公式説明（英語）

動画では、動いている画面を見ながら作業する様子を確認できます。まだ対象のサイトを動かせていなければ、「このフォルダのサイトをプレビューするための準備と、費用や外部送信が必要かを説明して。インストールや公開はまだしないで」と先に相談します。使っている環境でプレビューを開けない場合は、表示できない理由を聞き、自分で撮った画像を渡す方法に切り替えます。表示できていない画面を、確認済みに含めないことが大切です。

そのまま使える依頼例

添付画像の予約ボタンだけ直してください。スマホ幅390pxとパソコン幅1440pxで、修正前後を同じ条件で撮って比較してください。文字切れ、横にはみ出す部分、ボタンの押しやすさを確認し、変えた点と残っている問題を教えてください。写真、本文、予約先は変えないでください。まだ公開しないでください。

390pxと1440pxは確認条件の例です。普段のお客さんが見る端末に合わせて変えてください。画面サイズだけでなく、表示しているページや拡大率、入力内容もそろえると比較しやすくなります。

見た目の次に、自分で一度押してみる

最後は、予約ボタンを押して目的の画面が開くか、戻る操作ができるかを自分でも確認します。入力フォームがあるなら、空欄のときの案内も見ましょう。本番の予約や注文が発生する操作は避け、用意されたテスト環境やダミー情報を使います。

AIには、次の3点を分けて報告してもらうと判断しやすくなります。

• 画面を見て確認できたこと
• 実際に操作して確認できたこと
• 権限や環境の都合で確認できなかったこと

Anthropicも、比較できる画像やテストなど、結果を確かめる手段を渡すことを勧めています。公式の推奨事項（英語）

公開前のプレビューで問題がなくても、公開先のURLで同じ画面を一度確認しておきましょう。公開してよいかを決める材料として、画像と操作結果を残しておくと安心です。

※2026年10月12日に確認した公式資料をもとにした使い方の提案です。掲載の依頼文は本記事の例で、筆者による実機テストの報告ではありません。

画面に加えて通信の失敗やエラーも調べたい場合は、Chromeで確認を頼む方法で確認する項目を整理しています。