読者です 読者をやめる 読者になる 読者になる

日常最適化の計画

今日より明日。生きる知恵を蓄えていくための、ただの雑記です。

ツール不要で簡単!Webコンテンツや画像の比較をサクッとこなせる小ネタ。

技術・制作

【スポンサーリンク】

画像やテキストやコンテンツ等など。

2つのものを並べて文字やデザインが同じかどうか見比べたい時って時々ありますよね??

 

例えば、私の場合ですと「この辺のレイアウト、若干違うくないけ?」とか、

「うーん、大体同じっぽいけどどこか違うような気がする~(テキトー)」なんていうようなシーンが良くあります。

 

Winmargeやその他フリーソフトなど比較対象に見合ったソフトを導入済みの方であれば、それらを活用する方が正確な結果が得られるはずですので、特に1ピクセル違わず厳密な比較を実施したい場合はそちらの使用を推奨します。

今回小ネタとして紹介するのは、有用な比較ツールを使用せずに視覚的にざーっくりと比較を行いたい時に有用な手法です

 

ツールをウェブで探してダウンロードする程の事でもないかなぁ」

とか、

「厳密さは求めなくても良いので手早く比較したい」

とか、

「えーと、画像比較するツールどこだっけか?アレでもない、これでもない。。えぇいメンドクサイ」

という場合にご活用下さい。

(※ちなみに私は3番目の理由で良く使います)

 

それでは2つの方法をまとめて以下にご紹介しますので、上記前提を踏まえた上で覧ください。

(いずれもかなり手動的な方法ですが、結構やっている人は多そう。)

 

1.Webコンテンツ同士の比較

【用途】

WebページAとWebページBの比較など、Webコンテンツ同士の見た目を比較したい場合。主にWebコンテンツ同士の比較に用いる。

※テキストファイルや画像ファイルの比較も可能。

【手順】

①ブラウザのタブ機能を有効にする。

②タブを2つ開く

③一方に「WebページA」、もう一方のタブで「WebページB」を開く

④Ctrl + [tab] を押下してタブを切り替え、両ページを交互に表示して目視で比較。

 

※Ctrl + [tab] を連続押下、または押し続けることでコンマ何秒レベルの切り替えが行えるため差分を摘出しやすい。(差分箇所が点滅した様な見え方となります)

※手順③にて、.txtファイルや、jpg、pngファイルなどを開くと同様の手順でテキストファイル同士の比較や画像の比較も可能。

 

以上が一つ目の方法です。

私の場合、Webページのデザインイジっている時に、意図した箇所以外が変わってしまっていないかなどをざっくりチェックする際にこの手法を活用しています。目視とはいえども注視することで殆どの違いは検出できます。

画像やテキストファイルの比較も可能ですが、表示位置揃っていないと比較困難でファイル内の異なる部分間での比較は難しいでしょう。

(ウィンドウ2個開いて、Alt + [tab] で表示切り替えれば見れなくもないですが、ウィンドウの位置微調整が手間かも。)

 

 

2.画像、その他色々の比較

【用途】

・主に画像、テキスト、その他色々の比較を行いたいとき。

※条件:比較物の画面キャプチャが取得可能であること。

   :Excel(ないしはOpenOfficeでも可)がインストールされていること。

 

【手順】

①比較するものを個別にスクリーンショットを取得し、Excelに貼り付けます。

 ※対象が元々画像ファイル同士の場合はスクリーンショットの取得は不要です。

Excelのシート上で、双方の画像が被らないように配置します。

③片方の画像をドラッグ(★ドロップはしない!)し、もう片方の画像に重ねます。

    ⇒ドラッグ中の画像が透過状態となるため、もう片方の画像と重ねて表示することで両者の違いが視認できる状態となります。

 

↓エクセル操作イメージ

まるおくんと西郷どんの比較

f:id:yourlifehack:20150610023233j:plain

f:id:yourlifehack:20150610023311j:plain

f:id:yourlifehack:20150610023330j:plain

※ドラッグ時の半透過状態中に画像を重ねることで、まるおくんと西郷どんの差分が目視で摘出できます。

 

これが2つ目の方法です。

1の方法では難しい場合に比較対象を画像化し、エクセル上でドラッグして重ねて比較するという、こちらもなんともハンドパワー的(手動の意味で)な方法。

スクリーンショットにより画像化して比較するので、元データはバイナリとか視認出来ないものを除けばtxtでもpdfでも何でもあり。

業務中はExcelは常に開いてるので「スクショ取るー」、「エクセルに貼るー」、「重ねるー」でパパッっと手早く比較できちゃいます。

 

 

という感じで。

以上2つの方法をご紹介させていただきましたが、

「比較ツールを使わず」かつ「テクニカルなことは一切無し」のお手軽な比較方法として、今後もし機会がありましたら是非お試し下さいっ。

 

以上、本日の小ネタコーナーでした。

 

伝わるデザインの基本 よい資料を作るためのレイアウトのルール

伝わるデザインの基本 よい資料を作るためのレイアウトのルール