日頃より株式会社SMO南小国のホームページをご覧いただき、誠にありがとうございます。
この度、当社公式HPにて、デザイン案の変更箇所や画像補正前後の違いを、様々な比較モードで視覚的にチェックできるツール「COMPARE STUDIO — 画像の比較・差分チェックツール」を公開いたしました。
「Webサイトやチラシの修正前後の変更点を見落とさずに確認したい」「2枚の画像を重ねて微妙な位置ズレや色味の違いを検出したい」「画像同士の比較画像を綺麗な1枚の画像として出力したい」といった、デザイン・広報・Web制作の現場における校正・点検作業を大幅に効率化するツールです。
画像データはお使いのブラウザ内だけで処理され、外部サーバーへ送信・保存されることは一切ありません。未公開のデザイン案や社内資料も安心・安全にご利用いただけます。
COMPARE STUDIOの主な特徴
- 5つの比較モードで様々な角度から検証 ・スワイプ：境目のつまみをドラッグし、左右の画像を直感的にスワイプ比較。 ・透過重ね：B画像の透明度を自由に変更し、重ね合わせて位置ズレ等を検出。 ・切り替え（フリッカー）：AとBを高速（または手動）で交互切り替え。変化のあった部分が動いて見えます。 ・差分（自動枠囲み・ナビゲーション）：変更箇所を赤色で強調し、枠で囲んで提示。「次の変更箇所」ボタンで1か所ずつズーム確認できます。 ・並べて（同期移動）：2枚を左右に並べ、拡大・縮小・移動を連動させて比較。
- クリップボード貼り付け＆ドラッグ対応 スクリーンショットを Ctrl+V（Macは Cmd+V）でそのまま貼り付けて比較可能。2枚まとめてドラッグ＆ドロップすることでも即座に読み込めます。
- 解像度の異なる画像の幅合わせ＆微調整 「BをAの幅に合わせる」機能により、解像度が異なる画像同士も比較可能。矢印キーで1ピクセル単位の位置ズレ補正も行えます。
- カラーコード＆ピクセル座標表示 カーソルを合わせた位置の座標とRGBカラーコードを表示。色味の微細な変化も数値で確認できます。
- 比較・差分画像の出力機能 検出された差分画像や、2枚を綺麗に並べた比較画像をPNGファイルとしてダウンロード・保存できます。
基本的な使い方
【1】2枚の画像を選択する
- 「画像A（変更前）」と「画像B（変更後）」のドロップエリアに画像をドラッグ＆ドロップするか、クリックしてファイルを選択します（Ctrl+V / Cmd+V での貼り付けも可）。
- 「比較を始める」ボタンを押します。
【2】比較モードを選んで確認・調整する
- 上部のツールバーから目的の比較モード（スワイプ、透過重ね、切り替え、差分、並べて）を選択します。
- 差分モード：許容差スライダーで検出感度を調整し、「次の変更箇所」ボタンで順番にチェックします。
- 位置ズレがある場合は、矢印キーで1pxずつ移動させて位置を合わせます。
【3】比較結果を保存する
- 「並べた画像を保存」または「差分画像を保存」ボタンを押すと、検証結果が1枚の画像としてダウンロードされます。