HTML→画像
HTMLコードや実際のWebページURLを、PNG・JPG・PDFに変換できます。ビューポート幅を指定してページ全体をキャプチャし、すぐにダウンロードできます。
SVGを作成したい場合は、HTML to SVGツールをお試しください。
Webページを画像に変換
どんなWebサイトもピクセル単位で正確にキャプチャしたり、HTMLスニペットを共有可能な画像としてプレビューしたりできます。ドキュメント作成、SNSカード、デザインモックアップ、アーカイブ、バグレポートなどに最適です。
Webページを画像に変換すべき場面
スクリーンショットはある瞬間のページの見た目をそのまま残せるため、単なる共有以上の用途があります。サポートチームはバグレポートにページ全体のキャプチャを添付し、開発者が崩れたレイアウトの状況を把握できるようにします。ライターはドキュメントやチュートリアルに、ページを手作業で再現せずにレンダリング済みのスニペットを埋め込めます。マーケターはデザインレビューやビフォーアフター比較のためにランディングページをアーカイブし、研究者は変更・消失する可能性のある記事を保存します。ビューポート幅を自由に指定できるため、同じURLでも数値を変えるだけでデスクトップ・タブレット・モバイルいずれのレイアウトでもキャプチャできます。
PNG・JPG・PDF、どれを選ぶべき？
シャープなテキストやUI要素、単色が多いページにはPNGがおすすめです。ロスレス形式のため、輪郭がくっきり保たれます。写真が多いページで、テキストの精密さよりファイルサイズを重視したい場合はJPGを選びましょう。長い記事を印刷可能でスクロールできる記録として残したい場合はPDFが適しています。いずれを選んでも、ページはサーバー上の実際のヘッドレスブラウザエンジンでレンダリングされるため、CSS・Webフォント・レイアウトは訪問者が実際に見るとおりにキャプチャされます。
よくある質問
HTMLを画像に変換する際に知っておきたいことをまとめました。
公開されているWebページであれば、どんなものでもキャプチャできます。ログインが必要なページや、プライベート・内部アドレスは、セキュリティ上の理由でレンダリングできません。
ページをPNGやJPGのスクリーンショット、または印刷用のPDFとして書き出せます。ビューポート幅を設定すると、レイアウトの表示を調整できます。
はい。「HTMLコードから」タブに切り替えて、インラインCSSを含む任意のHTMLを貼り付ければ、ブラウザで表示されるとおりにレンダリングできます。
幅の設定は、レンダリングに使われるブラウザウィンドウのサイズを指定します。一般的なデスクトップレイアウトには1280px、フルHDには1920px、モバイル版のページをキャプチャするには390pxのような狭い幅を使用してください。
「ページ全体」を有効にすると、画面に表示されている範囲だけでなく、ページの全長を1枚の縦長画像としてキャプチャします。チェックを外すと、最初に表示されるビューポート範囲のみをキャプチャします。
このツールは、実際のブラウザエンジンでページやマークアップをレンダリングし、ピクセル画像またはPDFとして出力します。一方HTML to SVGツールは、ラスタライズを行わず、ブラウザ内でマークアップをそのままスケーラブルなベクターファイルに変換します。