HTML を PNG・JPG 画像に変換

HTML コードを貼り付けるか .html ファイルを開くだけで、PNG・JPG 画像に変換できます。倍率は1倍・2倍・3倍、背景を透明にすることもできます。無料、インストール不要で、何もブラウザの外に出ません。表示中の Web ページ、ログインが必要なページ、JavaScript で作られるページには、無料のFullPage Capture 拡張機能を使ってください。HTML の画像化に、ソフトのインストールは要りません。

更新日 2026年10月15日執筆： FullPage Capture チーム

HTML コード

<!doctype html>
<html>
<head>
<style>
  body { margin: 0; font-family: system-ui, sans-serif; background: #0b0f19; color: #f3f5f9; }
  .card { margin: 48px; padding: 40px; border-radius: 24px; background: linear-gradient(135deg, #1d9bf0, #7856ff); }
  h1 { margin: 0 0 12px; font-size: 44px; letter-spacing: -0.02em; }
  p { margin: 0; font-size: 20px; opacity: .9; }
  ul { margin: 24px 48px 48px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  li { padding: 20px; border-radius: 16px; background: #161b26; font-size: 18px; }
</style>
</head>
<body>
  <div class="card">
    <h1>Hello from HTML</h1>
    <p>Edit this code, then press Convert to image.</p>
  </div>
  <ul><li>PNG or JPG</li><li>1x, 2x or 3x</li><li>Nothing uploaded</li></ul>
</body>
</html>

または .html ファイルを開く画像や CSS ファイルも一緒に選ぶと、ファイル名で読み込まれます。

幅（px）倍率形式背景

HTML を PNG・JPG に変換する方法

HTML を貼り付けるか、ファイルを開く. ページ全体でも一部分でも、ボックスに貼り付けます。パソコンの .html ファイルを開くこともでき、画像や CSS も同じダイアログで選べばファイル名で使われます。

幅と倍率を決める. 幅は、コードを並べる CSS 上の幅（ブラウザのウィンドウ幅に相当）です。2倍なら高精細なディスプレイや印刷でもくっきり、小さな文字には3倍。

変換してダウンロード. 「画像に変換」を押してプレビューを確認し、PNG（劣化なし、透過も可）か JPG（軽い、背景は白）をダウンロードします。

HTML を PNG に変換するツール。ピンクから紫のセールバナーのコードを入れ、幅 900、2倍、PNG で変換した 1,800×1,082 ピクセルの画像と Download PNG ボタン。 — HTML で書いたセールバナーを幅 900 px・2倍で変換：1,800×1,082 ピクセルの画像に。

こんなときに

HTML メールのテンプレート：レビューやクライアント、デザインファイル用のメールの画像に。
HTML と CSS で作った SNS 用画像やバナーを 2倍の PNG で書き出す。
コードの説明や資料：HTML をテキストではなく、見た目どおりの画像で。
パソコンのファイル：書き出したレポート、請求書、.html で保存したページ。
透過 PNG：背景のないバッジやボタンなどのパーツ。

変換ツールと拡張機能、どちらを使う？

変換ツールは、手元にあるコードを描きます。拡張機能は、スクリプト・フォント・画像が読み込まれたあとのページを、ログイン中の画面も含めてブラウザに見えているとおりに撮影します。

	HTML→PNG 変換（このページ）	FullPage Capture 拡張機能
HTML コードやパソコンの .html ファイル	はい	はいファイルの URL へのアクセスを許可
アドレスで開く表示中のページ	いいえ	はい
ログインが必要なページ、Web アプリ	いいえ	はい
JavaScript で作られる中身	いいえスクリプトは停止	はい
とても長いページ	約 32,000 px まで	はいそれ以上はパーツに分割
改ページ付きの PDF	いいえ	はい
インストール不要	はい	いいえ無料、アカウント不要

よくある質問

HTML はどこかにアップロードされますか？

いいえ。変換はお使いのブラウザの中で行われます。コードはこのページの非表示のフレームで組み立てられ、そのままキャンバスに描かれます。当社のサーバーにも、ほかのどこにも送られません。コードがリンクしている画像は、ブラウザと同じようにそれぞれのサーバーから読み込まれます。

HTML の中の JavaScript は動きますか？

いいえ。安全のため、また毎回同じ画像になるように、フレームではスクリプトを止めています。JavaScript で中身を作るページ（React アプリや、スクリプトで描くグラフ）は、Chrome で開いて拡張機能でキャプチャしてください。スクリプトの実行後のページを撮影できます。

画像やフォントが抜けるのはなぜ？

画像を結果に入れるには、このページが先にその画像を読み込む必要があります。一部のサーバーはほかのサイトからの読み込みを禁止しています（CORS）。読み込めなかった件数はツールが表示します。パソコンの画像は .html ファイルと一緒に選んでください。同じ理由で、そうしたサーバーの Web フォントはシステムフォントに置き換わります。

PNG と JPG、どちらにすべき？

PNG はすべてのピクセルを保ち、背景を透明にもできます。画面のスクリーンショット、文字、メールのテンプレートに向いています。JPG は軽く、背景は常に白です。写真や手早く送るプレビューならこちらで十分です。

HTML メールのテンプレートを画像にできますか？

はい、代表的な使い道のひとつです。テンプレートを貼り付けて幅を 600〜640 px にすれば、ブラウザが組んだとおりのメールの画像になります。メールソフトによって表示が違う部分もあるので、重要なソフトでも確認してください。

表示中の Web ページを PNG にするには？

拡張機能を使います。Chrome か Edge でページを開いてアイコンをクリックすれば、スクリプトもフォントもログイン後の画面も含めて、ページ全体が1枚の PNG・JPG・PDF になります。 Web ページを PNG・JPG で保存する

拡張機能でパソコンの .html ファイルを撮れますか？

はい。Chrome は許可するまで拡張機能をパソコンのファイルに近づけません。chrome://extensions を開き、FullPage Capture の「詳細」で「ファイルの URL へのアクセスを許可する」をオンにしてから、ファイルを Chrome で開いてアイコンをクリックします。

表示中のページ全体を画像にしたいときは、拡張機能をインストールしてアイコンをクリックするだけです。

Chrome に追加

画像ではなく文書で残したいなら、Web ページを PDF で保存できます。

HTML を PNG・JPG 画像に変換

HTML を PNG・JPG に変換する方法

こんなときに

変換ツールと拡張機能、どちらを使う？

よくある質問

関連ページ