Screenshot to Code

### Screenshot to Codeとは Webページや画面のスクリーンショットをアップロードするだけで、その見た目を再現するHTML・Tailwind CSS・Reactコードを自動生成するOSSベースのAIツール。GPT-5.5やClaude Sonnet 4.6を画像解析エンジンに据え、レイアウト・配色・フォント・コンポーネント構造を読み取ってフロントエンドコードへ変換する。デザインカンプからの起こしコーディング、競合サイトのUI再現検証、社内ツールのプロトタイプ化など、「画面はあるが実装はこれから」という状況の制作・開発業務に向く。 ### 主要機能 - 画像→コード変換: PNG/JPGのスクショをドラッグ&ドロップすると、約5〜30秒でHTML+Tailwind CSSコードを出力。Bootstrap・Vue・React・Ionic形式にも対応。 - 動画→コード変換: 画面録画(MP4)をアップロードし、操作フローを含む複数画面のUIを連続生成。 - 生成後の対話編集: 出力後にチャットで「ボタンを大きく」「ヘッダーを固定」といった指示を追加すると、コードを差分修正。手作業の調整工数を抑えられる。 - モデル選択: GPT-5.5 / Claude Sonnet 4.6 / Gemini 3 Flashなどを切り替え可能。複雑なレイアウト再現ではClaudeの精度が高いとする比較レポートが多い。 ### 編集部の検証メモ 公開料金プラン(無料デモ版+Hosted版 **$15/月〜**)と、OSS版をセルフホストした場合の運用コストを比較分析すると、月10件以上の画面起こしが発生するチームは $15 プランがコスト最適。OSS版は無料だがOpenAI APIの従量課金が別途 $5〜/月 程度発生する。競合の **v0.dev**(Vercel)や **bolt.new** が「ゼロからの生成」を強みとするのに対し、本ツールは既存デザインの忠実な再現に特化する点が差別化ポイント。公開仕様から試算すると、1画面の手動コーディング 30〜60分が生成+微修正で 5〜10分に短縮され、月20画面を扱う制作チームなら月10時間以上の工数削減が見込める。 ### 想定ユーザー 受託制作会社のフロント担当、社内システムのUI試作を任されるエンジニア、デザイナーから渡されたカンプを高速にHTML化したいコーダーに向く。一方、デザインシステムが厳格に統一された大企業のプロダクト開発や、アクセシビリティ準拠が必須のプロジェクトでは、生成コードの手直し量が増えやすく不向き。

Screenshot to Codeにはfree(¥100)、チーム(¥2026)のプランがあります。

Screenshot to Codeの代替としてDevin、Bolt.new、Lovable、Replitなどがあります。

無料で始められるので、まず試してみやすい。エラーの原因を教えてくれるのでデバッグが楽。既存のコードの改善点を指摘してくれる。コードの補完や提案でプログラミングが速くなる。

画面が英語のみで日本語対応していない。無料プランでは使える回数や機能に制限がある。最初は使い方を覚えるのに少し時間がかかる。