Claude Codeにスクリーンショットを渡すだけで、
Webサイトが作れます。
コードは1行も書きません。
画像をドラッグして「これと同じ感じで作って」と伝えるだけです。
この記事では、
スクリーンショット1枚からWebサイトを作る手順を、
コード経験ゼロの目線で全部書きます。
Claude Codeは画像の中のレイアウト、
色、
フォントサイズ、
ボタンの配置まで全部「見て」理解します。
で、それをそのままコードに変換して、フォルダの中にファイルを作ってくれる。
「Webサイト作りたいけど、コード書けないしな…」って思ってる人。
もうコードは要りません。
必要なのは「こういうサイトがほしい」っていうイメージだけ。
「そもそもCSSって何？」くらいの人向けです。
Claude Codeでスクリーンショットを使うと何が変わる？
ここがこの手法で一番おもしろいところです。
今まで、AIにサイトを作ってもらおうとすると、全部「言葉」で説明してました。
「ヘッダーは青で、
左にロゴ、
右にハンバーガーメニューで、
その下にヒーロー画像を全幅で…」。
正直、めちゃくちゃだるい。
しかも、伝わらないんです。
「青って言ったけどこの青じゃない」ってなるやつ。
スクリーンショットなら、見せるだけで終わり。
| 言葉で説明する | スクリーンショットを見せる | |
|---|---|---|
| 伝達の正確さ | 頭の中のイメージを文字に変換。ズレる | 見たままが伝わる。色も配置も一発 |
| プロンプトの長さ | レイアウト・色・余白を全部書くと20行超え | 「これと同じ感じで作って」の1行 |
| 修正の伝え方 | 「ここのボタンの位置を…」とまた言葉で説明 | バグ画面をスクショして「直して」で10秒 |
| 必要なスキル | Figma等のデザインツールの知識 | スマホでスクショが撮れればOK |
なんでこれが可能なのか。
Claude Codeは「マルチモーダルAI」です。
テキストだけじゃなくて、画像も「読める」。
人間が画像を見て「あ、
ヘッダーが上にあって、
カードが3列で並んでるな」と認識するのと同じことを、
AIがやってます。
しかも人間より細かく見てる。
色コード、
余白のバランス、
ボタンの角丸まで読み取って、
それを全部コードに落とし込む。
たとえるなら、美容院で雑誌の写真を見せるのと同じです。
「前髪は眉毛の3mm上で、
サイドは耳にかかるくらいで…」って言葉で説明するより、
写真1枚のほうが100倍伝わりますよね。
Claude Codeでも全く同じことが起きます。
Claude Code × スクリーンショットはどんな場面で使える？
「あのサイトみたいなの、ほしい」を形にする
ネットで見かけた「このサイトかっこいいな」ってやつ。
スクショ撮って、Claude Codeに放り込む。
「これと同じレイアウトで、
自分のポートフォリオサイト作って」と伝えれば、
10分で骨格ができます。
丸パクリじゃなくて、色やテキストを自分用に変えた「インスパイア版」になります。
自分もこの方法でランディングページを1つ作ったんですけど、
参考サイトのスクショを3枚渡して「この3つのいいとこ取りで」って言ったら、
ちゃんと混ぜてくれました。
1枚だけじゃなくて、複数枚渡せるのがポイントです。
デザインの修正が秒で終わる
サイトを作ってて「ここの余白おかしいな」ってなった時。
該当箇所をスクショして、Claude Codeに貼る。
「ここの間隔が広すぎる。詰めて」。
これで終わり。
CSSの何行目がどうとか、一切考えなくていいんです。
スマホで表示がおかしい時も同じ。
スマホの画面をスクショして「スマホだとここが崩れてる。
直して」って渡せば、
レスポンシブ対応も勝手にやってくれます。
手書きのラフからサイトを起こす
紙にペンで書いたワイヤーフレーム。
それをスマホで撮って、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アカウント: 無料で作れます。
必須ではないですが、
あると作ったサイトをそのまま世界に公開できます。
Claude Codeの設定画面から接続するだけ。
プログラミングスキル: 不要。ゼロで大丈夫。
日本語対応: Claude Codeは日本語のプロンプトに対応してます。
英語のほうが精度が上がる場面もありますが、
ふつうに日本語で全然いけます。
Claude Codeでスクリーンショットからサイトを作る手順は？
ここからが本題です。
1つずつやれば、コード経験ゼロでも最後にはWebサイトが出来上がります。
ステップ1: Claude Codeを開いてモデルを変える
まずClaude Codeを起動します。
デスクトップアプリを使ってる人は「Code」モードを選んでください。
「Chat」でも「Cowork」でもなく「Code」です。
次に、モデルを変えます。
モデルっていうのは「AIの頭脳の種類」です。
Claude Codeの画面で /model と入力すると選択肢が出てきます。
「Opus 4.6」を選んでください。
今一番賢いモデルで、複雑なレイアウトの再現度が段違いです。
ステップ2: 自動承認モードをオンにする
これ、地味だけどめちゃくちゃ大事。
Claude Codeはふつう、
ファイルを作るたびに「これ作っていい？」って聞いてきます。
サイト1つで、
HTMLファイル、
CSSファイル、
画像フォルダ…何十回も「はい」を押す羽目になる。
正直、苦行です。
Shift+Tabキーを1回押してください。
画面の下に「accept edits on」と表示されたらOK。
これでファイルの作成と編集は全自動で進みます。
ターミナルのコマンド実行だけは引き続き許可を聞かれますが、
それは安全のためなのでそのままで大丈夫です。
ステップ3: フォルダを選ぶ
サイトのファイルを入れる場所を決めます。
デスクトップに「my-site」とか適当な名前で空のフォルダを作る。
Claude Codeに「このフォルダで作業して」と指定するだけ。
デスクトップアプリなら画面上でフォルダを選べます。
Claude Codeがこの中にファイルを全部作ってくれるので、
散らかる心配はありません。
ステップ4: スクリーンショットを渡す
ここが核心です。
参考にしたいサイトのスクショを用意してください。
渡し方は3つあります。
ドラッグ&ドロップ: 画像ファイルをClaude Codeの画面にそのまま引っ張って放り込む。
一番かんたんです。
コピペ: スクショをコピーして、
Claude Codeの画面でCtrl+Vで貼り付け。
Macの人も「Ctrl+V」です。
Cmd+Vじゃないので注意。
ここ、
けっこうハマるポイント。
ファイルパスを書く: 「この画像を見て: デスクトップ/screenshot.png」とメッセージの中に書く。
どの方法でもOK。
自分はドラッグ&ドロップが一番ラクだと思ってます。
ステップ5: プロンプトを書く
画像を渡したら、何を作ってほしいか伝えます。
シンプルでいい。
例えばこう:
「この画像と同じレイアウトで、
AIツール紹介のWebサイトを作って。
テキストは日本語で、
色はそのまま使って」
もっと具体的にするなら:
「このスクショのヘッダーとカード型のレイアウトを参考にして、
ポートフォリオサイトを作って。
名前は○○、
職業は○○、
実績は○○と○○」
コツが1つあります。
1回のプロンプトで頼むのは、1つだけ。
「トップページもAboutもContactも全部一気に」じゃなくて、
まずトップページだけ作る。
できたら「次はAboutページ作って。トップと同じデザインで」と追加する。
1つずつ積み上げるほうが、完成度が高くなります。
ステップ6: 確認して、スクショで微調整する
Claude Codeがファイルを作り終わったら、見た目を確認します。
「ブラウザで開いて」とClaude Codeに言えば、
表示用のサーバーを立ち上げて見せてくれます。
気になるところがあったら？
その画面をまたスクショする。
で、
Claude Codeに渡して「この部分、
スマホだと文字がはみ出てる。
直して」。
これで修正完了。
スクショ → 修正 → スクショ → 修正のループで、
どんどん完成度が上がっていきます。
コードの中身は一切触ってません。
やってることは「見て、伝えて、また見る」。
これだけです。
自分はこの方法でランディングページを1つ作りました。
参考サイトのスクショを3枚渡して「この3つのいいとこ取りで」と伝えたら、
レイアウト・配色・余白を混ぜ合わせたものが出てきました。
細かい修正もスクショで「ここ直して」だけ。
トータルで30分かかってません。
コードを書けない自分にとって、
サイト制作の手段が根本的に変わった体験でした。
Claude Code × スクリーンショットのよくある疑問は？
Q. スクショじゃなくてFigmaのデザインでも使える？
使えます。
FigmaからPNGやJPGで書き出して、
そのままClaude Codeに渡せばOK。
手書きのラフスケッチでも、
PDFのキャプチャでも、
画像になっていれば何でも読み取れます。
極端な話、
カフェのナプキンに書いた図をスマホで撮ったものでも動きます。
Q. 作ったサイトはどこに公開できる？
GitHubアカウント（無料）があれば、
GitHub Pagesで無料公開できます。
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分後には自分のサイトの骨格が目の前にあります。
参考リンク
- Ruben Hassid — How to set up Claude Code（X）
- Ruben Hassid — Claude Code.（Substack）
- Claude Code公式ドキュメント — Work with images
※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。