01
左右並列
古典的だが最も読み取りやすい方法。スクロール同期で、長いページでも対応位置を見比べられます。
01 / Tool
比較する
A
B
Before
After
— Advertisement —
02 / Features
5つのモードで、見た目とコードを測る。
02
差分ブレンド
CSS の mix-blend-mode を使い、同じ位置の色差をリアルタイムに発光表示。
微妙な色の変更も逃しません。
03
ワイプ
スライダで Before / After を覆い分け。境界線の位置で、ある一点の変化を精密に観察できます。
04
ピクセル ヒートマップ
両方の画面をキャプチャしてピクセル単位で比較し、変化の度合いを熱量で可視化。 変更箇所の発見漏れを防ぎます。
05
HTMLコード差分
表示中のBefore/After HTMLを行単位で比較。追加、削除、変更をコード上でも確認でき、 見た目の変化と実装差分を同じ画面で追えます。
03 / How to use
使い方
-
1
HTMLを2つ用意
変更前・変更後のHTMLを、左右のエディタに貼り付けるか、ファイルをドロップしてください。
styleタグやlinkによる外部CSSも反映されます。 -
2
モードを選ぶ
左右 / 差分 / ワイプ / ヒートマップ / コードから、目的に合った見方を選択。 スクロールは自動で同期します。
-
3
共有 / 保存
「共有URL」で現在の比較状態をURLにコピー、「PNG保存」で画像化できます。 チームレビューやプルリクへの添付に。
04 / Use cases
こんな場面で。
CSSリファクタの安全確認
クラス名を整理した後、レイアウトが崩れていないかを目視 + ピクセル差分で二重確認。
デザインレビュー
デザイナーのカンプ HTML と実装 HTML を並べ、差異の位置と量を共有URLで指摘。
ライブラリ更新の影響調査
UIライブラリのアップデート前後を比較。意図しないスタイルの変化を検知します。
メールHTMLの確認
クライアント間で表示が崩れやすいメールHTMLを、修正前後で並べて検証。
05 / FAQ
よくある質問
HTMLはサーバーに送信されますか?
送信されません。比較処理はすべて、お使いのブラウザ内で完結します。 外部CSSやフォントはそのHTMLが指定する通りに読み込まれますが、Visual Diff Labのサーバへ HTMLが送られることはありません。
URLを直接指定して比較できますか?
ブラウザのCORS制約により、任意のURLからHTMLを取得することは安全に行えません。 対象ページの HTML をブラウザの「ページのソースを表示」(Ctrl+U) でコピーして 貼り付けてご利用ください。
ピクセル差分はどう計算されていますか?
両方のフレームを html2canvas で画像化し、各ピクセルのRGB差を算出します。
差が大きいほど明るく、低差はクールな色で重ね描画します。フォント読み込みやアニメーションの
タイミングによってはスクリーンショットが安定しない場合があり、その場合は「再計算」を押して
ください。
共有URLには何が含まれますか?
HTMLの内容を圧縮してURLハッシュ部に格納します。サーバーには保存されないため、URLを共有した 相手だけが内容を復元できます。HTMLが大きすぎる場合はブラウザのURL長制限を超えてしまうこと があります。
JavaScriptを含むHTMLは比較できますか?
Visual Diff Lab は安全のため、貼り付けられたHTML内の <script> を実行しません。
JS による DOM 操作前のスタイルでレンダリングされます。動的に生成されるレイアウトを比較したい場合は、
ブラウザの「ページのソースを表示」ではなく、DevTools の「Copy outerHTML」で取得した
展開済みのHTMLを貼り付けてください。
商用利用しても良いですか?
個人・商用問わずご利用いただけます。利用規約をご確認ください。