再現したいページをアップロード
Webサイト、画面、コンポーネントの鮮明なスクリーンショットを選びます。レイアウト全体と読める文字を含め、特に注意してほしい点があれば短く入力してください。
スクリーンショットをブラウザで開けるWebページに変換します。レイアウトを確認し、文章を編集して、CSSを含むレスポンシブHTMLファイルをダウンロードできます。
Webページや画面のスクリーンショットを1枚アップロードしてください。
ここに画像を貼り付けることもできます。大きい画像は変換前に縮小します。
表示やスマートフォン向けレイアウトを確認し、文章を変更してHTMLファイルを保存できます。
白紙から作るのではなく、画像に写ったページを再現します。ダウンロード前に実際の表示を確認できます。
Webサイト、画面、コンポーネントの鮮明なスクリーンショットを選びます。レイアウト全体と読める文字を含め、特に注意してほしい点があれば短く入力してください。
生成したHTMLをその場で表示します。元画像と比較し、スマートフォン表示や、素材の不足・近似再現に関する注記を確認できます。
ツール内で文章を変更し、.htmlファイルをダウンロードします。ブラウザで開く、開発者に渡す、ページ制作を続けるといった用途に使えます。
GPT-6 Lunaによる実際の変換結果です。元のスクリーンショットと生成ページを比較し、クレジットを使わずにプレビューやHTMLのダウンロードを試せます。
最初の3枚は、この例のために制作したオリジナルのデモ画面です。モデルには画像だけを渡し、元のHTMLは渡していません。サンプルの出力は元画像の英語を保持しています。
ナビゲーション、2列のメインビジュアル、製品の図解、3枚の紹介カード。
図はCSSとSVGで再現しています。元の画像素材を抽出したものではありません。
3つのプラン、おすすめプランの強調、機能一覧、比較表。
料金とラベルを保持しています。購入ボタンは見た目の再現で、決済には接続していません。
商品ギャラリー、選択肢、価格、配送案内、商品の詳細。
商品画像は代替表示であることを明記しています。カートや決済の処理は含まれません。
4つの指標、3つの可視化エリア、ナビゲーション、5行の注文表。
グラフの形状は近似です。この例はレスポンシブ表示の確認後、モデルで1回修正しています。
成果物はHTMLページです。結果を見るために開発環境を用意する必要はありません。
スタイルを含む単独のHTML文書です。ダウンロード後、Chrome、Safari、Firefox、Edgeなどで直接開けます。
スクリーンショットから元の写真、独自フォントのファイル、バックエンドは取得できません。差し替えや接続が必要な箇所を注記します。
保存する前に、スマートフォン幅を含めたページの表示を確認できます。
見出し、ラベル、本文をブラウザ内で変更できます。コードを書く必要はありません。
ダウンロードしたページを開くためのビルドやフレームワークの導入は不要です。
代替表示の素材や、推測したレスポンシブ動作・グラフを確認できます。
画像からHTMLへの変換は、写っている内容を手がかりにします。少し準備するだけで、結果を扱いやすくなります。
LP、料金エリア、画面の鮮明なスクリーンショットを使います。縦に長いサイトは全体を小さく圧縮せず、意味のある領域に分けて変換してください。
できるだけ元のスクリーンショットを使い、ナビゲーション、見出し、カードの端まで含めます。切れたラベル、小さすぎる文字、画面を撮影したぼやけた写真は再現を難しくします。
商品ページの見た目は再現できますが、在庫、決済処理、APIは画像に含まれません。静的HTMLを出発点に、必要な機能を接続してください。
PCの画像だけでは元サイトのスマートフォン向けルールは分かりません。カードの並び、ナビゲーションの使いやすさ、表が自身の領域内でスクロールするかを確認します。
Webページや画面の鮮明なスクリーンショットをアップロードし、必要なら希望を入力して「HTMLに変換」を選びます。生成ページをPC・スマートフォンの両方で確認し、HTMLをダウンロードしてください。結果を使うためにコードをコピーする必要はありません。
実際に表示されたページのプレビューと、CSSを含む.htmlファイルを受け取れます。ファイルをダブルクリックすればブラウザで開けます。文字やレイアウトは本物のHTML要素で構成し、スクリーンショットをそのまま貼り付けただけのページにはしません。
ゲストは登録せずに1日2回まで変換できます。サービス全体の処理枠にも上限があります。回数はネットワーク単位で管理し、UTCの午前0時にリセットされるため、同じネットワークの利用者は枠を共有する場合があります。ログイン後は完了1回につき4クレジットです。失敗や使用できない結果では試用枠またはクレジットが戻ります。4つの既存例は無料で確認・ダウンロードできます。
はい。「文章を編集」から内容を変更し、適用してください。プレビューとダウンロードの両方に反映されます。「生成時の文章に戻す」で元に戻せます。変更はブラウザ内で行い、AIの再実行やデータベースへの保存は行いません。
HTMLとCSSで画像を再現し、狭い画面向けの配置も作成します。ただし画像は1つの画面幅しか示さないため、スマートフォンでの動作は推測です。両方のプレビューとダウンロードしたページを必要な幅で確認してください。特に情報量の多い表やダッシュボードでは確認が重要です。
いいえ。画像には元の素材ファイル、フォント、ソースコード、バックエンドが含まれません。取得できない写真や複雑なイラストは注記付きの代替表示になり、グラフは近似の場合があります。ログイン、決済、検索などは接続されません。折りたたみ表示などHTML標準の操作はスクリプトなしでも動作します。
LP、料金ページ、商品ページ、ダッシュボードなどの鮮明なPNG・JPG・WebP画像が適しています。1回に1ページか1領域をアップロードしてください。細かい文字、長いスクロール画像、画面を撮影した写真、切れた操作部品は再現が難しくなります。最大15 MBで、大きな画像は処理前に縮小します。
書き出したファイルを制作の出発点にしたり、開発者に渡したりできます。公開前に使用権のある素材を追加し、本物のリンク、フォーム、業務機能を接続してください。出力は静的HTML文書であり、Reactプロジェクト、WordPressテーマ、公開済みサイトではありません。
戻った後、タスクパネルからバックグラウンド処理の結果を復元できます。ゲストの結果は最大1時間、ログインユーザーの結果は最大24時間の一時保存です。残したいHTMLはダウンロードしてください。ブラウザ内だけで編集した文章は保存済みタスクには反映されません。