自動化

screenshot-to-code

画面の画像からWebページを再現する

サイトのスクリーンショットを渡すと、そっくりなHTML/コードを生成する。

#画像→コード#Web制作

これは何？黒い画面（ターミナル）で動かすツール

できること

サイトのスクリーンショットやFigmaのデザイン画像を渡すと、レイアウトを解析してHTML/Tailwind/Reactなどのコードをまとめて生成する。画面を録画した動画からの生成にも対応し、ゼロからコーディングする前の「たたき台」作りに向く。

誰に効く？

デザインから素早くページを起こしたい人

用意するもの

、/

時間のめやす

15〜30分(AIに聞きながらコピペ)

使えるようになるまでの手順をひらく

こんな人には向かないかも

🔑 必要な鍵（APIキー）— 下のどれか1社でOK

すでにどこかの鍵を持っていればそれが使えます。まだ無いなら Google（Gemini）が一番かんたんです。

Google（Gemini）の発行ページ↗Googleアカウントがあれば無料で即発行。無料枠も大きく、一番かんたん

OpenAI（ChatGPT）の発行ページ↗発行は無料。APIはChatGPT Plus（月額）とは別勘定で、使った分だけの課金。※Codex等の一部公式ツールは、キーの代わりにChatGPTの月額プランでログインして使える

Anthropic（Claude）の発行ページ↗発行は無料。APIは月額プランとは別勘定で、使った分だけの課金。※Claude Codeは月額プラン（Pro等）のログインでも使える

鍵は「合鍵」の文字列。発行→コピー→ツールの設定に貼り付け、の3手です。迷ったらAIチャットに「画面つきで教えて」と。

迷ったらこれ：いつも使っているAIチャット（ChatGPT・Claude・Geminiなど）にこのツールのGitHubリンクを貼って「これを使いたい。私のPCでの始め方を一歩ずつ教えて」と頼むのが一番の近道です。

むずかしそう？同じジャンルで、もっと始めやすいのはこちら

注意点

再現度は元画像により差がある。

用途が明確で人気も高い。

このツールが活躍する場所

導入の目安：準備がいる

APIキーの取得＋黒い画面に1〜2行コピペ（AIチャットに聞けば手順は出ます）＋ Python（土台ソフト）の導入

判断材料（9項目・自動判定）▾

最終更新日：半年以内（活発）お気に入り数：非常に多い利用ルール：MIT作者：個人派生版：9.1k件未解決の相談・不具合：126件APIキー：必要外部通信：ありターミナル操作：あり（AIに聞きながらコピペでOK）

APIキーが必要外部通信ありターミナル操作あり

このサイトはツールの紹介と公式リンクのみを提供し、ファイルの配布は行いません。

screenshot-to-codeは無料で使えますか？: screenshot-to-code自体は無料で使えますが、動かすのに外部AIのAPIキーが必要です。そのAI側の利用料は別にかかります（無料枠があるものもあります）。
screenshot-to-codeを使うのに、インストールや専門知識は必要ですか？: コマンド入力（黒い画面）での操作が必要です。手順どおりに文字を打ち込む作業に慣れていないと、導入でつまずきやすいツールです。
screenshot-to-codeはスマホでも使えますか？: スマホには対応していません。パソコンが必要です。
screenshot-to-codeは仕事（商用）で使えますか？: ライセンスは MIT で、商用利用も認められています。ただし著作権表示を残すなどの条件が付くので、配布物に含める場合はライセンス本文を確認してください。