← VibeFront トップに戻る
スクリーンショットやデザインカンプからHTMLを作る方法
公開: 2026年10月7日 ／ Mojosoft
「このデザインをWebページにしたい」「手描きのラフからたたき台のHTMLを作りたい」——画像からHTMLとCSSを作る方法は、大きく分けて3つあります。この記事では、それぞれの向き・不向きと、AI HTMLエディタ VibeFront を使った具体的な手順、うまく再現させるコツを紹介します。
画像からHTMLを作る3つの方法
| 方法 | 向いている人・場面 | 気をつけること |
|---|
| 手で書く | HTML・CSSに慣れていて、細部まで自分で決めたい | 時間がかかる。たたき台づくりには不向き |
| AIチャット（Web版）に画像を貼る | まず無料で試したい、1ページだけ作りたい | 生成されたコードをコピーしてファイルに貼り、別のブラウザで表示を確認する往復が必要。修正のたびに全文を貼り直しがち |
| AI HTMLエディタ（VibeFront） | 画像から作ったHTMLを、そのままプレビューしながら直して仕上げたい | Windows用のデスクトップアプリ。AIの利用には各AIのAPIキーが必要（Google Geminiには無料枠あり） |
デザインツールで作ったデータがある場合は、そのツールのコード書き出し機能やプラグインを使う方法もあります。ここでは、画像（スクリーンショット・デザインカンプの書き出し画像・手描きのラフの写真）しか手元にない場合を前提にしています。
AIチャット（Web版）で作る手順と注意点
ChatGPT・Claude・Gemini などのAIチャットの多くは、画像を添付できます。もっとも手軽なのはこの方法です。
- AIチャットに画像を添付し、「この画像のデザインをHTMLとCSSで再現して。1つのHTMLファイルにまとめて」のように頼む
- 出力されたコードをコピーし、テキストエディタで
index.html などの名前で保存する
- ブラウザで開いて確認し、気になる点をAIに伝えて直してもらう
つまずきやすい点
修正を重ねると「どの版が最新か」が分かりにくくなり、毎回コード全体をコピーし直す手間が増えます。長いページでは出力が途中で切れることもあります。
VibeFrontで作る手順
VibeFrontは、AIチャットとHTMLコードエディタ、リアルタイムプレビューを1つにしたWindows用のアプリです。画像からHTMLを作り、そのまま見た目を確認しながら仕上げられます。
- AIを設定する — メニューの「AI → AI設定」で、画像を読み取れるAI（Google Gemini、OpenAI、Anthropic Claude のいずれか）とAPIキーを設定します。初めての方には無料枠のある Gemini（既定は Gemini 3.8 Flash）がおすすめです。設定方法はヘルプにあります。
- 画像を添付する — AIチャットパネルの「🖼 画像」ボタンを押すか、画像をチャット欄にドラッグ＆ドロップします。添付した画像はサムネイルで確認でき、「✕」で外せます。
- 目的に合ったテンプレートを選ぶ — 「テンプレート」から、元の画像を忠実に再現したいときは「画像→HTML変換」、手描きのラフをもとにデザインを整えたページにしたいときは「ラフスケッチ→Webデザイン」を選びます。どちらも「追加指示」欄に、色・フォント・載せたい文章などの要望を書き足せます。テンプレートを使わずに画像だけを送ると、「この画像のデザインをHTML+CSSで再現」として処理されます。
- 生成されたHTMLを適用する — 返ってきたコードの「適用」ボタンを押すと、エディタに反映され、プレビューにすぐ表示されます。
- プレビューを見ながら直す — 「見出しをもっと大きく」「スマホで縦並びに」のようにチャットで頼むと、AIは変更点だけを提案します。内容を確認して「適用」を押すだけで直せます。モバイル（375px）・タブレット（768px）・デスクトップ（1200px）の表示切り替えで、レスポンシブも確認できます。
- 保存する — HTMLファイルとして保存します。文字コード（UTF-8・Shift-JIS など）も指定できます。
うまく再現させるコツ
- 解像度の高い画像を使う — 小さな文字や細い線が読み取れるよう、拡大しなくても読める大きさの画像にします。
- 長いページは分けて送る — ヘッダー、メインビジュアル、料金表…とセクションごとに作り、最後につなげると崩れにくく、出力が途中で切れることも防げます。
- 画像から読み取れない情報は言葉で補う — 色のコード、フォント名、リンク先、実際に載せる文章などは「追加指示」に書きます。
- レスポンシブ対応は明示する — 「スマホでは1列に並べて」など、画面幅ごとの希望を書いておくと、手直しが減ります。
- モデルを使い分ける — 速さと費用を重視するなら Gemini 3.8 Flash、仕上がりの精度を重視するなら Claude Opus 5.5 や GPT-6.1 Sol が候補です（いずれも VibeFront 1.3.0 の AI設定で選べます）。
費用とデータの扱い
- VibeFront は買い切り（個人版 ¥2,950）で、月額料金はかかりません。AIの利用料は、お使いのAIの料金体系に従います（Google Gemini には無料枠があります）。
- 添付した画像と指示文は、AI設定で選んだAIのAPIに送信されます。APIキーはお使いのPCにのみ保存されます。
- ローカルLLM（Ollama・LM Studio）を使えば外部に送信せずにHTMLを作れますが、多くのローカルモデルは画像を読み取れません。画像からの作成には、上記の3社のAIをおすすめします。
権利について
他社のWebサイトのデザイン・画像・文章を、許可なくそのまま複製して公開しないでください。ご自身のデザインカンプや手描きのラフ、権利を持っている素材からの作成にご利用ください。
よくある質問
Q. 出来上がるのは HTML と CSS だけですか？
はい。1つのHTMLファイル（CSS込み）として作るのが基本です。画像ファイル（ロゴや写真）は、生成後に差し替えてください。ファイルエクスプローラーから画像をエディタにドラッグ＆ドロップすると、<img> タグを自動で挿入できます。
Q. 生成されたHTMLは、そのまま公開できますか？
たたき台としてはそのまま使えることが多いですが、公開前にリンク先・文章・画像の差し替えと、各画面幅での表示を確認してください。
Q. 出力が途中で切れてしまいました
AIが一度に出力できる量の上限に達しています。VibeFront ではその旨が表示されます。「続けて」と送るか、セクションごとに分けて作ってください。
Q. 無料で試せますか？
ダウンロード版は15日間、すべての機能を試用できます。AIは、Google Gemini の無料枠を使えば費用をかけずに試せます。