スクリーンショットからコードへ
UIのスクリーンショットをアップロードすると、貼り付け可能なHTMLとインラインCSSが返され、同じレイアウトが再現されます。Figmaのエクスポート、ウェブページ、アプリのモックアップ、ワイヤーフレームに対応します。Powered by Google Gemini Vision. デザイン成果物を実働コードに変換したり、競合のUI分析を行ったり、レガシーインターフェースを再構築したりするのに最適です。
無制限の利用が必要ですか？
Proにアップグレード — $19/moスクリーンショットからコードへ の結果がここに表示されます
テキスト・物体・人物・場面・注目すべき詳細を網羅した、詳しい説明が得られます。
使い方 スクリーンショットからコードへ
- 再現したいUIの鮮明なスクリーンショットをアップロードしてください。
- ビジョンモデルにレイアウトと要素の分析を任せましょう。
- 結果から生成されたHTML＋インラインCSSをコピーします。
- プロジェクトに貼り付けて、フォント、色、動作を調整しましょう。
使用例
Figmaやデザインのモックアップを、HTMLの出発点に変換します。
参考や再構築のために、既存のウェブページのレイアウトを再現する
手描きのワイヤーフレームを動作するマークアップにすばやく変換します
ロジックを組み込む前に、スクリーンショットからランディングページを試作する
深いコーディングスキルを持たないデザイナーが、HTML の最初の下書きを作るのを支援します
最高の結果を得るためのヒント
- 小さな文字や間隔が読み取れるよう、フル解像度でアップロードしてください。
- 散らかりを避けるため、対象の1つのコンポーネントや画面に切り抜きます。
- ぼやけたスマホ写真ではなく、鮮明でコントラストの高いスクリーンショットを使いましょう。
- 出力は土台（足場）として扱ってください。スタイルを磨き、インタラクティブ性を加える作業が必要になります。
よくある質問
Screenshot to Code は何をするツールですか？
ユーザーインターフェースの画像をアップロードすると、スクリーンショットが許す限り忠実にレイアウト、間隔、色、テキストを再現する、インラインCSS付きのHTMLを返します。
どの画像形式をアップロードできますか？
PNG または JPG のスクリーンショットをアップロードしてください。Figma のエクスポート、実際の Web ページ、アプリのモックアップ、手描きのワイヤーフレームのいずれも利用できます。鮮明でフル解像度のキャプチャほど、最も正確なコードが得られます。
生成されたコードはどれくらい正確ですか？
構造的にしっかりとした出発点を生み出します。レイアウト、色、タイポグラフィは通常かなり近いものになります。ピクセル単位で完璧ではなく、インタラクティブ性やバックエンドのロジックは再現しないため、マークアップの調整が必要になることを想定してください。
JavaScript も生成しますか、それとも HTML/CSS だけですか?
視覚的なレイアウトを描画するインラインCSS付きの静的HTMLを返します。動的な挙動、フレームワーク、イベント処理は生成されません。それらはご自身で追加してください。
生成されたコードを商用利用できますか？
はい。出力はお客様のプロジェクトで利用・改変が可能です。無料プランは登録不要で1日5回利用でき、Proはそれ以上の利用向けに月額$19です。
私のスクリーンショットは処理後も保持されますか？
いいえ。アップロードされた画像はコード生成のために処理された後、破棄されます。保存されることも、学習に使われることもありません。
正確なフォントやブランドカラーに合わせてくれますか？
見えている範囲から色やタイポグラフィを近似します。正確なブランドフォントや厳密なHEX値は、コードを貼り付けた後に手動で調整が必要になる場合があります。
テキストは保存されません。処理はリアルタイムで行われ、結果を生成した後すぐに入力が破棄されます。
無制限のアクセスを解除
無料ユーザー：1日10回の使用 | Proユーザー：無制限
