Claude Codeにスクリーンショットを渡すだけで、Webサイトが作れます。
コードは1行も書きません。
画像をドラッグして「これと同じ感じで作って」と伝えるだけ。
この記事は、スクショ1枚からサイトを作る6ステップを、コード経験ゼロの目線で全部書きます。
この記事は「コードは書けないけどWebサイトを作りたい人」向け（CSSもHTMLも触ったことがなくても読めます）。
Claude Codeは画像の中のレイアウト、色、フォントサイズ、ボタンの配置まで全部「見て」理解します。
で、それをそのままコード（HTMLやCSSの命令文）に変換して、フォルダの中にファイルを作ってくれる。
「Webサイト作りたいけど、コード書けないしな…」って思ってる人。
もうコードは要りません。
必要なのは「こういうサイトがほしい」っていうイメージだけ。
「そもそもCSS（サイトの見た目を決めるための命令文）って何？」くらいの人を想定して書いてます。
Claude Codeでスクリーンショットを使うと何が変わる？
ここがこの手法で一番おもしろいところです。
今まで、AIにサイトを作ってもらおうとすると、全部「言葉」で説明してました。
「ヘッダーは青で、左にロゴ、右にハンバーガーメニューで、その下にヒーロー画像を全幅で…」。
正直、めちゃくちゃだるい。
しかも、伝わらないんです。
「青って言ったけどこの青じゃない」ってなるやつ。
スクリーンショットなら、見せるだけで終わり。
| 言葉で説明する | スクリーンショットを見せる | |
|---|---|---|
| 伝達の正確さ | 頭の中のイメージを文字に変換。ズレる | 見たままが伝わる。色も配置も一発 |
| プロンプトの長さ | レイアウト・色・余白を全部書くと20行超え | 「これと同じ感じで作って」の1行 |
| 修正の伝え方 | 「ここのボタンの位置を…」とまた言葉で説明 | バグ画面をスクショして「直して」で10秒 |
| 必要なスキル | Figma等のデザインツールの知識 | スマホでスクショが撮れればOK |
なんでこれができるのか。
Claude Codeは「マルチモーダルAI（テキストも画像もどっちも理解できるAIのこと）」です。
テキストだけじゃなくて、画像も「読める」。
人間が画像を見て「あ、ヘッダーが上にあって、カードが3列で並んでるな」と認識するのと同じことを、AIがやってます。
しかも人間より細かく見てる。
色コード、余白のバランス、ボタンの角丸まで読み取って、それを全部コードに落とし込む。
たとえるなら、美容院で雑誌の写真を見せるのと同じです。
「前髪は眉毛の3mm上で、サイドは耳にかかるくらいで…」って言葉で説明するより、写真1枚のほうが100倍伝わりますよね。
Claude Codeでも全く同じことが起きます。
Claude Code × スクリーンショットはどんな場面で使える？
「あのサイトみたいなの、ほしい」を形にする
ネットで見かけた「このサイトかっこいいな」ってやつ。
スクショ撮って、Claude Codeに放り込む。
「これと同じレイアウトで、私用のポートフォリオサイト作って」と伝えれば、10分で骨格ができます。
丸パクリじゃなくて、色やテキストを私用に変えた「インスパイア版」になります。
私もこの方法でランディングページ（LP。
商品やサービスを紹介する1枚もののWebページ）を1つ作ったんですけど、参考サイトのスクショを3枚渡して「この3つのいいとこ取りで」って言ったら、ちゃんと混ぜてくれました。
1枚だけじゃなくて、複数枚渡せるのがポイントです。
デザインの修正が秒で終わる
サイトを作ってて「ここの余白おかしいな」ってなった時。
該当箇所をスクショして、Claude Codeに貼る。
「ここの間隔が広すぎる。詰めて」。
これで終わり。
CSSの何行目がどうとか、一切考えなくていいんです。
スマホで表示がおかしい時も同じ。
スマホの画面をスクショして「スマホだとここが崩れてる。
直して」って渡せば、レスポンシブ対応（PCでもスマホでもキレイに表示されるように整えること）も勝手にやってくれます。
手書きのラフからサイトを起こす
紙にペンで書いたワイヤーフレーム（サイトの骨組みをざっくり書いた図）。
それをスマホで撮って、Claude Codeに渡す。
「この手書きのデザインをWebサイトにして」で動きます。
完璧な図じゃなくていい。
「だいたいこんな配置」が伝われば、Claude Codeが補完してくれます。
打ち合わせ中にホワイトボードに書いたメモでも、カフェで思いついてナプキンに書いたラフでも。
写真にさえなればOKです。
Claude Codeでスクリーンショットからサイトを作るのに必要なものは？
Claude Codeのサブスクリプション: Claude Pro（月額$20）以上が必要です。
Max 5x（月額$100 / Proの5倍）とMax 20x（月額$200 / Proの20倍）もあり、何ページもあるサイトを一気に作りたい時に向いてます。
無料プランでは使えません。
パソコン: Windows、Mac、Linuxどれでも動きます。
デスクトップアプリ、ターミナル（CLI。
黒い画面に文字を打って操作する画面）、Webアプリ（claude.ai/code）、IDE拡張機能（VS CodeやJetBrainsなど、コードを書くためのエディタに後付けする機能）の4つの方法で使えます。
サイト制作にはデスクトップアプリかターミナルが向いてます。
スクリーンショット: 参考にしたいサイトやデザインのスクショ。
PNG、JPGどちらでもOK。
複数枚渡すこともできます。
GitHubアカウント: 無料で作れます（GitHubは作ったコードをネット上に保管しておける場所）。
必須ではないですが、あると作ったサイトをそのまま世界に公開できます。
Claude Codeの設定画面から接続するだけ。
プログラミングスキル: 不要。ゼロで大丈夫。
日本語対応: Claude Codeは日本語のプロンプトに対応してます。
英語のほうが精度が上がる場面もありますが、ふつうに日本語で全然いけます。
Claude Codeでスクリーンショットからサイトを作る手順は？
ここからが本題です。
1つずつやれば、コード経験ゼロでも最後にはWebサイトが出来上がります。
ステップ1: Claude Codeを開いてモデルを変える
まずClaude Codeを起動します。
デスクトップアプリを使ってる人は「Code」モードを選んでください。
「Chat」でも「Cowork」でもなく「Code」です。
次に、モデルを変えます。
モデルっていうのは「AIの頭脳の種類」です。
Claude Codeの画面で /model と入力すると選択肢が出てきます。
「Opus 4.6」を選んでください。
今一番賢いモデルで、複雑なレイアウトの再現度が段違いです。
期待結果: 画面の下に現在のモデル名が「Opus 4.6」と表示される。
詰まりどころ: モデル一覧にOpus 4.6が出てこない場合、Proプランより下（無料プラン）の可能性が高い。
Proにアップグレードすれば選べるようになります。
ステップ2: 自動承認モードをオンにする
これ、地味だけどめちゃくちゃ大事。
Claude Codeはふつう、ファイルを作るたびに「これ作っていい？」って聞いてきます。
サイト1つで、HTMLファイル、CSSファイル、画像フォルダ…何十回も「はい」を押す羽目になる。
正直、苦行です。
Shift+Tabキーを1回押してください。
これでファイルの作成と編集は全自動で進みます。
ターミナルのコマンド実行だけは引き続き許可を聞かれますが、それは安全のためなのでそのままで大丈夫です。
期待結果: 画面の下に「accept edits on」と緑色で表示される。
詰まりどころ: 何も表示が変わらない時はShift+Tabを2回押してる可能性があります。
3つのモード（accept edits on / plan mode / 通常）をぐるぐる切り替える設計なので、もう1回押すか、表示を見ながら調整してください。
ステップ3: フォルダを選ぶ
サイトのファイルを入れる場所を決めます。
デスクトップに「my-site」とか適当な名前で空のフォルダを作る。
Claude Codeに「このフォルダで作業して」と指定するだけ。
デスクトップアプリなら画面上でフォルダを選べます。
Claude Codeがこの中にファイルを全部作ってくれるので、散らかる心配はありません。
期待結果: Claude Codeの画面の上部に、選んだフォルダのパス（例: /Users/yourname/Desktop/my-site）が表示される。
詰まりどころ: 既存ファイルが入ってるフォルダを指定すると、Claude Codeが既存ファイルを読みに行ってトークン（AIが読み書きする文字数の単位、使うほど課金が進む）を無駄に食います。
**必ず空のフォルダ**を用意してください。
ステップ4: スクリーンショットを渡す
ここが核心です。
参考にしたいサイトのスクショを用意してください。
渡し方は3つあります。
ドラッグ&ドロップ: 画像ファイルをClaude Codeの画面にそのまま引っ張って放り込む。
一番かんたんです。
コピペ: スクショをコピーして、Claude Codeの画面でCtrl+Vで貼り付け。
Macの人も「Ctrl+V」です。
Cmd+Vじゃないので注意。
ここ、けっこうハマるポイント。
ファイルパスを書く: 「この画像を見て: デスクトップ/screenshot.png」とメッセージの中に書く。
どの方法でもOK。
私はドラッグ&ドロップが一番ラクだと思ってます。
期待結果: メッセージ入力欄に画像のサムネイル（小さい縮小画像）が表示される。
詰まりどころ: 画像が10MB超えてると弾かれる場合があります。
スクショは大きすぎなければそのままで大丈夫ですが、デザイン全体を撮った高解像度の画像で弾かれた時は、無料の画像圧縮ツール（TinyPNG等）で軽くしてから渡してください。
ステップ5: プロンプトを書く
画像を渡したら、何を作ってほしいか伝えます。
シンプルでいい。
例えばこう:
「この画像と同じレイアウトで、AIツール紹介のWebサイトを作って。
テキストは日本語で、色はそのまま使って」
もっと具体的にするなら:
「このスクショのヘッダーとカード型のレイアウトを参考にして、ポートフォリオサイトを作って。
名前は○○、職業は○○、実績は○○と○○」
コツが1つあります。
1回のプロンプトで頼むのは、1つだけ。
「トップページもAboutもContactも全部一気に」じゃなくて、まずトップページだけ作る。
できたら「次はAboutページ作って。トップと同じデザインで」と追加する。
1つずつ積み上げるほうが、完成度が高くなります。
期待結果: Claude Codeが「index.htmlを作成しました」「style.cssを作成しました」のように、生成したファイル名を順次表示する。
詰まりどころ: 一気に複数ページを頼むと、各ページの完成度が下がります。
最初の1ページに5〜10分かけるくらいの感覚で、1ページずつ仕上げてください。
ステップ6: 確認して、スクショで微調整する
Claude Codeがファイルを作り終わったら、見た目を確認します。
「ブラウザで開いて」とClaude Codeに言えば、表示用のサーバー（手元のパソコンの中だけで動く一時的なWeb表示装置）を立ち上げて見せてくれます。
気になるところがあったら？
その画面をまたスクショする。
で、Claude Codeに渡して「この部分、スマホだと文字がはみ出てる。
直して」。
これで修正完了。
スクショ → 修正 → スクショ → 修正のループで、どんどん完成度が上がっていきます。
コードの中身は一切触ってません。
やってることは「見て、伝えて、また見る」。
これだけです。
期待結果: ブラウザに作ったサイトが表示される。
スクショを渡して指示を出すと、数十秒で該当箇所が修正される。
詰まりどころ: 「ブラウザで開いて」と言ってもサーバーが起動しない場合、Claude Codeが「Pythonが見つからない」等のエラーを返すことがあります。
その時は「Python使わずにファイルをそのままブラウザで開く方法を教えて」と聞き返せば、HTMLファイルをダブルクリックする手順を案内してくれます。
私はこの方法でランディングページを1つ作りました。
参考サイトのスクショを3枚渡して「この3つのいいとこ取りで」と伝えたら、レイアウト・配色・余白を混ぜ合わせたものが出てきました。
細かい修正もスクショで「ここ直して」だけ。
トータルで30分かかってません。
コードを書けない私にとって、サイト制作の手段が根本的に変わった体験でした。
Claude Code × スクリーンショットのよくある疑問は？
Q. スクショじゃなくてFigmaのデザインでも使える？
使えます。
FigmaからPNGやJPGで書き出して、そのままClaude Codeに渡せばOK。
手書きのラフスケッチでも、PDFのキャプチャでも、画像になっていれば何でも読み取れます。
極端な話、カフェのナプキンに書いた図をスマホで撮ったものでも動きます。
Q. 作ったサイトはどこに公開できる？
GitHubアカウント（無料）があれば、GitHub Pages（GitHubが無料で提供してるWebサイト公開機能）で無料公開できます。
Claude Codeに「このサイトをGitHubにアップして、GitHub Pagesで公開して」と伝えるだけ。
ドメイン代もサーバー代もかかりません。
独自ドメインをつけたい場合も、あとから設定できます。
Q. 動きのあるサイトも作れる？
スクショ自体は静止画なので、アニメーションの情報は伝わりません。
でも、言葉で追加できます。
「このカードにマウスを乗せたら少し浮き上がるアニメーションを付けて」と伝えればOK。
お問い合わせフォームやスライダーみたいなインタラクティブな要素も「フォーム付けて」で作ってくれます。
スクショで「見た目」を渡して、言葉で「動き」を足す。
この組み合わせが最強です。
Q. 日本語と英語、どっちでプロンプト書くべき？
どっちでも動きます。
ただ、デザインの細かいニュアンスは英語のほうが精度が上がります。
私は基本日本語で書いて、うまくいかない部分だけ英語に切り替えてます。
「レイアウト」「マージン」「パディング」みたいなカタカナ語はそのまま英語で書いたほうが確実です。
Claude Codeのスクリーンショット制作で知っておくべき注意点は？
万能ではないです。
先に限界を知っておいたほうが、がっかりしなくて済みます。
元サイトと100%同じにはならない。
あくまで「参考にして似たものを作る」です。
80〜90%の再現度だと思っておいてください。
ピクセル単位で完全一致は期待しないほうがいい。
でも「個人サイト」を作るぶんには、90%で十分すぎます。
フォントは正確に再現しにくい。
画像から「このフォントはNoto Sans JPだ」とは判定しにくいです。
フォントにこだわりがある場合は「フォントはNoto Sans JPにして」と別途指示してください。
Opus 4.6はトークン消費が多い。
Opus 4.6は賢いぶん、使用量の消費が早いです。
サイトの骨格をOpus 4.6で作って、細かい修正はSonnet 4.6（/model で切り替え）に任せると、バランスがいいです。
著作権は自己判断。
参考にするのはいいですが、他社のロゴや画像をそのまま使うのはNGです。
あくまで「レイアウトや配色を参考にする」の範囲で使ってください。
この手法が広まると、「サイトを作れる人」の定義が変わります。
今までは「コードが書ける人 = サイトが作れる人」でした。
これからは「イメージを持ってる人 = サイトが作れる人」になる。
カメラが登場して「絵が描けなくても風景を記録できる」ようになったのと似てます。
スクリーンショット1枚が、みなさんの「カメラ」になるわけです。
まとめ
スクリーンショット1枚で、Webサイトが作れる時代になりました。
「コードが書けない」は、もう「サイトが作れない」の理由にはならないです。
必要なのは「こういうサイトがほしい」っていうイメージだけ。
まずは好きなサイトを1枚スクショして、Claude Codeに渡してみてください。
「これと同じ感じで作って」の1行で、5分後には私用のサイトの骨格が目の前にあります。
このページに出てきた言葉
- CSS
- サイトの見た目（色・配置・余白など）を決めるための命令文。
- HTML
- サイトの中身（文章・画像・リンクなど）を組み立てるための命令文。
- マルチモーダルAI
- テキストだけでなく画像や音声も理解できるAIのこと。
- レスポンシブ
- PCでもスマホでもタブレットでもキレイに表示されるように、画面サイズに合わせて自動調整される作りのこと。
- ワイヤーフレーム
- サイトの骨組みをざっくり書いた図。色や装飾は後回しにして、配置だけ決める下書き。
- LP（ランディングページ）
- 商品やサービスを紹介する1枚もののWebページ。
- CLI
- 黒い画面に文字を打って操作する画面のこと（コマンドラインインターフェース）。
- IDE
- コードを書くための専用エディタ（VS Code、JetBrains等）。
- トークン
- AIが読み書きする文字数の単位。使うほど課金が進む。
- GitHub Pages
- GitHubが無料で提供している、Webサイトをそのまま公開できる機能。
参考リンク
※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。