ブログ

スクリーンショットから色と余白を測る方法

公開 2026年10月25日 · カラーピッカー, 余白, デザイン, スクリーンショット

デザインツールを開かずに、HEX 値、1 ピクセルの枠線、要素間の正確な余白をスクリーンショットから確認する方法。拡大鏡、カラーピッカー、選択範囲のサイズ表示を使い分けます。

スクリーンショットは、しばしば唯一の正解の源です。顧客からのバグ報告、競合他社の UI、モックアップと違って実装されたデザイン。そこから正確な色と距離を読み取るのは小さなスキルですが、InSnap は画像がすでにあるキャプチャオーバーレイの中にツールを用意しています。

ポインタの下の色を取得する

InSnap では、設定 › スクリーンショット でカラーピッカーを有効にしてからキャプチャします。静止した画像の上を動かすと、カラーパネルにポインタの下の値が表示されます。

• Shift で RGB と HEX を切り替えます。
• C で現在の値をクリップボードにコピーします。
• サンプルはライブ画面ではなく、静止したスクリーンショットから取得します。下で動画やアニメーションが再生されていても値は変わりません。

最後の点はデザイン QA で重要です。測っているのはキャプチャされたピクセルであり、それはファイルに含まれる内容そのものです。

拡大鏡で 1 ピクセルを読む

拡大鏡は、ポインタの周囲を拡大したグリッドで表示し、中心のピクセルに印を付けます。「この領域は何色か」ではなく「この正確なピクセルで何が起きているか」を知りたいときに使います。

• それは 1 ピクセルの枠線 か、影か
• 区切り線は 1 ピクセル か、2 ピクセルか
• アイコンはテキストのベースラインと 揃っている か
• 角の丸みは四隅すべてで 均一 か

通常のズームでは、こうした細部はアンチエイリアスに埋もれます。ピクセルグリッドがあれば数えられます。

選択範囲で余白を測る

定規ツールはありませんが、選択範囲が定規になります。測りたい隙間をまたいでボックスをドラッグし、サイズ表示を読みます。

1. キャプチャを開始し、一方の要素の端から次の要素の端までドラッグします。
2. サイズ表示の幅または高さを読みます。物理ピクセルで表示され、ファイルに含まれる値と一致します。
3. Esc でキャンセルするか、画像も必要な場合は選択範囲をコピーします。

実用上の注意が 2 つあります。

• 要素全体ではなく隙間を測ります。 あるボタンの左端から次のボタンの左端まで選択すると、ピッチが分かります。隙間が必要ならボタンの幅を引きます。
• ディスプレイのスケールに注意します。 Retina ディスプレイでは、20 物理ピクセルは 10 ポイントです。デザイン仕様がポイント単位なら、スケール係数で割ります。スクリーンショットは常にピクセル単位です。

デザイン QA の短いチェックリスト

スクリーンショットだけでは足りないとき

ピクセルは「何が描画されたか」を教えてくれますが、「なぜそうなったか」は分かりません。色がおかしいと感じたら、バグを報告する前にディスプレイプロファイルとアプリのテーマを確認してください。隙間がずれて見えるなら、ページのズームレベルを確認します。ブラウザのズーム 90% で撮ったスクリーンショットは、CSS と一致しないサイズを報告します。

比較するなら、2 つの状態を別々にキャプチャして両方をピン留めします。ピン留めしたウィンドウはアプリの上に残るので、モックアップと実装を行き来しても場所を失いません。

よくある質問

色の値をそのままコピーできますか？

はい。カラーピッカーを有効にし、ピクセルにカーソルを合わせ、Shift で RGB か HEX を選んでから C を押します。値がクリップボードに入り、チケットやデザインファイルにそのまま貼り付けられます。

ポイント単位で隙間を測るには？

選択範囲のサイズを物理ピクセルで読み、ディスプレイのスケールで割ります。Retina ディスプレイは 2、標準ディスプレイは 1、拡大表示モードならシステムのディスプレイ設定に表示される値です。

カラーピッカーはライブ画面とスクリーンショットのどちらを読みますか？

スクリーンショットです。ホットキーを押した時点でキャプチャは静止し、ピッカーはそのピクセルをサンプリングするので、値は保存または共有するファイルと一致します。

ブログのほかの記事