スクリーンショットから、開けるWebページへ

画像をHTMLに変換

スクリーンショットをブラウザで開けるWebページに変換します。レイアウトを確認し、文章を編集して、CSSを含むレスポンシブHTMLファイルをダウンロードできます。

スクリーンショット

Webページや画面のスクリーンショットを1枚アップロードしてください。

ここに画像を貼り付けることもできます。大きい画像は変換前に縮小します。

1日2回無料 · 登録不要
失敗した変換は回数を消費しません。

実際の結果を試す

HTMLページ

実際のHTMLページを確認

スクリーンショットがHTMLページに

表示やスマートフォン向けレイアウトを確認し、文章を変更してHTMLファイルを保存できます。

スクリーンショットからWebページへ

3つの手順で、1つのHTMLファイルに。

白紙から作るのではなく、画像に写ったページを再現します。ダウンロード前に実際の表示を確認できます。

01

再現したいページをアップロード

Webサイト、画面、コンポーネントの鮮明なスクリーンショットを選びます。レイアウト全体と読める文字を含め、特に注意してほしい点があれば短く入力してください。

02

生成されたページを確認

生成したHTMLをその場で表示します。元画像と比較し、スマートフォン表示や、素材の不足・近似再現に関する注記を確認できます。

03

文章を調整してダウンロード

ツール内で文章を変更し、.htmlファイルをダウンロードします。ブラウザで開く、開発者に渡す、ページ制作を続けるといった用途に使えます。

実際のスクリーンショット → HTML変換例

さまざまなレイアウトを、確認できるHTMLに。

GPT-6 Lunaによる実際の変換結果です。元のスクリーンショットと生成ページを比較し、クレジットを使わずにプレビューやHTMLのダウンロードを試せます。

最初の3枚は、この例のために制作したオリジナルのデモ画面です。モデルには画像だけを渡し、元のHTMLは渡していません。サンプルの出力は元画像の英語を保持しています。

01 / マーケティングサイト

ランディングページ

ナビゲーション、2列のメインビジュアル、製品の図解、3枚の紹介カード。

変換前 · 元のスクリーンショット画像
元のスクリーンショット:ナビゲーション、2列のメインビジュアル、製品の図解、3枚の紹介カード。
変換後 · 実際のHTML表示AIの結果
実際に生成したHTML:ランディングページ

図はCSSとSVGで再現しています。元の画像素材を抽出したものではありません。

02 / プランと比較

料金ページ

3つのプラン、おすすめプランの強調、機能一覧、比較表。

変換前 · 元のスクリーンショット画像
元のスクリーンショット:3つのプラン、おすすめプランの強調、機能一覧、比較表。
変換後 · 実際のHTML表示AIの結果
実際に生成したHTML:料金ページ

料金とラベルを保持しています。購入ボタンは見た目の再現で、決済には接続していません。

03 / ECサイトのレイアウト

商品詳細ページ

商品ギャラリー、選択肢、価格、配送案内、商品の詳細。

変換前 · 元のスクリーンショット画像
元のスクリーンショット:商品ギャラリー、選択肢、価格、配送案内、商品の詳細。
変換後 · 実際のHTML表示AIの結果
実際に生成したHTML:商品詳細ページ

商品画像は代替表示であることを明記しています。カートや決済の処理は含まれません。

04 / データを扱う画面

分析ダッシュボード

4つの指標、3つの可視化エリア、ナビゲーション、5行の注文表。

変換前 · 元のスクリーンショット画像
元のスクリーンショット:4つの指標、3つの可視化エリア、ナビゲーション、5行の注文表。
変換後 · 実際のHTML表示AIの結果
実際に生成したHTML:分析ダッシュボード

グラフの形状は近似です。この例はレスポンシブ表示の確認後、モデルで1回修正しています。

受け取れるもの

開いて見られるページ。手元に残せるファイル。

成果物はHTMLページです。結果を見るために開発環境を用意する必要はありません。

.html

your-page.html

スタイルを含む単独のHTML文書です。ダウンロード後、Chrome、Safari、Firefox、Edgeなどで直接開けます。

スクリーンショットから元の写真、独自フォントのファイル、バックエンドは取得できません。差し替えや接続が必要な箇所を注記します。

  • まず実際の表示を確認

    保存する前に、スマートフォン幅を含めたページの表示を確認できます。

  • 文章を直接編集

    見出し、ラベル、本文をブラウザ内で変更できます。コードを書く必要はありません。

  • HTMLとCSSをまとめて保存

    ダウンロードしたページを開くためのビルドやフレームワークの導入は不要です。

  • 確認すべき点を明示

    代替表示の素材や、推測したレスポンシブ動作・グラフを確認できます。

鮮明な元画像が、使いやすい結果につながります

レイアウトが伝わる画像を用意しましょう。

画像からHTMLへの変換は、写っている内容を手がかりにします。少し準備するだけで、結果を扱いやすくなります。

1ページか1つの領域を撮る

LP、料金エリア、画面の鮮明なスクリーンショットを使います。縦に長いサイトは全体を小さく圧縮せず、意味のある領域に分けて変換してください。

文字を鮮明に、途中で切らずに残す

できるだけ元のスクリーンショットを使い、ナビゲーション、見出し、カードの端まで含めます。切れたラベル、小さすぎる文字、画面を撮影したぼやけた写真は再現を難しくします。

見た目と機能を分けて考える

商品ページの見た目は再現できますが、在庫、決済処理、APIは画像に含まれません。静的HTMLを出発点に、必要な機能を接続してください。

公開前に狭い画面も確認

PCの画像だけでは元サイトのスマートフォン向けルールは分かりません。カードの並び、ナビゲーションの使いやすさ、表が自身の領域内でスクロールするかを確認します。

変換前によくある質問

画像からHTMLへの変換について

画像をHTMLに変換するには?

Webページや画面の鮮明なスクリーンショットをアップロードし、必要なら希望を入力して「HTMLに変換」を選びます。生成ページをPC・スマートフォンの両方で確認し、HTMLをダウンロードしてください。結果を使うためにコードをコピーする必要はありません。

受け取るのはHTMLページですか、コードだけですか?

実際に表示されたページのプレビューと、CSSを含む.htmlファイルを受け取れます。ファイルをダブルクリックすればブラウザで開けます。文字やレイアウトは本物のHTML要素で構成し、スクリーンショットをそのまま貼り付けただけのページにはしません。

無料で使えますか?

ゲストは登録せずに1日2回まで変換できます。サービス全体の処理枠にも上限があります。回数はネットワーク単位で管理し、UTCの午前0時にリセットされるため、同じネットワークの利用者は枠を共有する場合があります。ログイン後は完了1回につき4クレジットです。失敗や使用できない結果では試用枠またはクレジットが戻ります。4つの既存例は無料で確認・ダウンロードできます。

コードを書かずに結果を修正できますか?

はい。「文章を編集」から内容を変更し、適用してください。プレビューとダウンロードの両方に反映されます。「生成時の文章に戻す」で元に戻せます。変更はブラウザ内で行い、AIの再実行やデータベースへの保存は行いません。

レスポンシブなHTMLとCSSを生成しますか?

HTMLとCSSで画像を再現し、狭い画面向けの配置も作成します。ただし画像は1つの画面幅しか示さないため、スマートフォンでの動作は推測です。両方のプレビューとダウンロードしたページを必要な幅で確認してください。特に情報量の多い表やダッシュボードでは確認が重要です。

すべての画像、フォント、操作を再現できますか?

いいえ。画像には元の素材ファイル、フォント、ソースコード、バックエンドが含まれません。取得できない写真や複雑なイラストは注記付きの代替表示になり、グラフは近似の場合があります。ログイン、決済、検索などは接続されません。折りたたみ表示などHTML標準の操作はスクリプトなしでも動作します。

どんな画像が向いていますか?

LP、料金ページ、商品ページ、ダッシュボードなどの鮮明なPNG・JPG・WebP画像が適しています。1回に1ページか1領域をアップロードしてください。細かい文字、長いスクロール画像、画面を撮影した写真、切れた操作部品は再現が難しくなります。最大15 MBで、大きな画像は処理前に縮小します。

HTMLファイルを自分のサイトに使えますか?

書き出したファイルを制作の出発点にしたり、開発者に渡したりできます。公開前に使用権のある素材を追加し、本物のリンク、フォーム、業務機能を接続してください。出力は静的HTML文書であり、Reactプロジェクト、WordPressテーマ、公開済みサイトではありません。

生成中にページを離れたらどうなりますか?

戻った後、タスクパネルからバックグラウンド処理の結果を復元できます。ゲストの結果は最大1時間、ログインユーザーの結果は最大24時間の一時保存です。残したいHTMLはダウンロードしてください。ブラウザ内だけで編集した文章は保存済みタスクには反映されません。