デザイン画像を手打ちでマークアップする時間を、AIに任せられます。

この記事では、スクリーンショットやFigmaデザイン、画面録画からフロントエンドのコードを生成するオープンソース「Screenshot to Code」の機能と使い方を解説します。

この記事でわかること

  • Screenshot to Codeが解決する課題と対応スタック
  • Gemini・GPT・Claudeを切り替えて使う方法
  • セルフホストと公式ホスト版の違い
  • 画面録画からプロトタイプを作る仕組み

Screenshot to Codeとは

https://github.com/abi/screenshot-to-code

Screenshot to Codeは、UIのスクリーンショットやモックアップ、Figmaデザイン、画面録画をAIで解析し、動くフロントエンドコードに変換するツールです。GitHubリポジトリはMITライセンスで公開されており、2026年6月時点でスター数は7万3000超です。2023年11月に公開され、フロントエンド開発の入り口を短縮するOSSとして注目を集めています。

公式のホスト版は screenshottocode.com から利用できます。APIキーの設定なしで試せる一方、カスタマイズや自社環境での運用にはGitHub版のセルフホストが向いています。

どんな課題を解決するか

デザインから実装へ移るとき、最初のマークアップ作業がボトルネックになりやすいです。レイアウトの骨組み、配色、コンポーネントの配置を一から書くと、実装の大半が「見た目の再現」に費やされます。

Screenshot to Codeは、ビジョン対応の大規模言語モデル（LLM）に画像を渡し、HTMLやReactなどのコードを生成します。生成結果はブラウザ上でプレビューでき、自然言語での修正指示にも対応します。デザインの初稿を素早くコードに落とし込み、人間がロジックや細部を詰める流れに使えます。

対応スタックと入力形式

READMEに記載された対応スタックは次のとおりです。

  • HTML + Tailwind
  • HTML + CSS
  • React + Tailwind
  • Vue + Tailwind
  • Bootstrap
  • Ionic + Tailwind

入力はスクリーンショットやモックアップ画像に加え、Figmaデザインの取り込みにも対応しています。さらに、Webサイトの操作を録画した動画をアップロードし、動くプロトタイプへ変換する機能も備えています。静止画では拾えない画面遷移や操作の流れを、コードのたたき台にできます。

対応AIモデルとGeminiの強み

コード生成には複数のAIモデルを使えます。READMEでは次のモデルがデフォルトとして挙げられています。

  • Gemini 3 Flash Preview、Gemini 3.1 Pro Preview
  • GPT-5.5、GPT-5.4 Mini
  • Claude Opus 4.6、Claude Opus 4.8

OpenAI、Anthropic、Googleのいずれか1つ以上のAPIキーが必要です。複数のキーを登録すると、同じ入力に対して異なるモデルの結果を並べて比較できます。

READMEではGeminiの利用を強く推奨しています。理由は2つあります。1つ目は、コード生成の精度が高い点です。2つ目は、スクリーンショット内のロゴや画像をGeminiが抽出し、生成コードに実素材として再利用する機能です。架空のプレースホルダー画像ではなく、元デザインに近い見た目を保ちやすくなります。画面録画モードの利用にもGeminiキーが必要です。

画像の編集や背景除去にはReplicateのAPIキーが推奨されています。REPLICATE_API_KEYを設定すると、画像生成や背景除去ツールが使えます。

セルフホストの手順

ローカル実行はReact/ViteのフロントエンドとFastAPIのバックエンドで構成されています。バックエンドはPoetryで依存関係を管理し、フロントエンドはYarnで起動します。

バックエンドの.envにAPIキーを設定します。

OPENAI_API_KEY=sk-your-key
ANTHROPIC_API_KEY=your-key
GEMINI_API_KEY=your-key
REPLICATE_API_KEY=r8_your-key

バックエンドはポート7001、フロントエンドはポート5173で動作します。Docker Composeでの一括起動にも対応しており、ルートディレクトリで.envを置いてdocker-compose upするだけで試せます。

フロントエンドの設定画面（歯車アイコン）からもOpenAI、Anthropic、Geminiのキーを登録できます。Replicateキーはバックエンドの.envでのみ設定可能です。

スクリーンショットプレビュー機能

バックエンドにChromium（Playwright）をインストールすると、スクリーンショットプレビュー機能が有効になります。AIが生成したページをヘッドレスブラウザで描画し、見た目を自己検証します。Chromiumが未インストールの場合はこの機能がスキップされますが、コード生成自体は動作します。設定画面でプレビュー機能の有効/無効を確認できます。

ホスト版とセルフホストの使い分け

方式 向いている用途
ホスト版（screenshottocode.com） すぐ試したい、APIキーを自分で用意したくない
セルフホスト（GitHub版） 自社APIキーで運用したい、カスタマイズや貢献をしたい

ホスト版はセットアップ不要で手軽です。一方、セルフホスト版はAPIキーの管理を自分で行う代わりに、モデルの選択やプライバシーの制御がしやすくなります。社内デザインを外部サービスに送りたくないチームには、セルフホストが現実的な選択肢です。

v0やClaudeとの違い

UI画像からコードを生成するツールは他にもあります。Vercelのv0はチャットベースでUIコンポーネントを生成するサービスで、Screenshot to Codeは画像やFigma、画面録画を直接入力源にする点が異なります。Claude単体でもスクリーンショットからコードを書けますが、Screenshot to Codeは複数モデルの並列比較、スタック選択、プレビュー、画面録画対応を1つのUIにまとめています。

いずれもプロダクション品質のコードをそのまま出力するわけではありません。生成結果はたたき台として使い、状態管理やアクセシビリティ、パフォーマンスの調整は開発者が行う前提です。

使うときの注意点

生成コードの品質は入力画像の解像度やモデル選択に左右されます。READMEではOllamaなどのローカルモデルにも対応していますが、品質が低いため非推奨と明記されています。精度を重視するならGemini 3系かClaude Opus 4.8を選ぶのが妥当です。

画面録画からの変換は実験的な機能です。複雑なインタラクションやデータ連携までは再現できない場合があります。単一画面のレイアウト再現と、操作フローの大まかな再現で期待値を分けて使うと効果的です。

デザインの初稿をコードに落とし込む作業を大幅に短縮できるツールです。スクリーンショット1枚からReactやVueのコンポーネントを試し、複数モデルの出力を比較しながら最適なたたき台を選べます。フロントエンド開発の入り口を速くしたいチームに試す価値があります。