minto.tech スマホ（Android/iPhone）・PC（Mac/Windows）の便利情報をお届け！ 月間アクセス160万PV！スマートフォン、タブレット、パソコン、地デジに関する素朴な疑問や、困ったこと、ノウハウ、コツなどが満載のお助け記事サイトはこちら！
※本ページにはプロモーション(広告)が含まれています
Webデザインやアプリ開発をしているとき、「この要素の幅は何ピクセルだろう？」「このボタンとテキストの間隔はどのくらい空いているの？」と気になったことはありませんか？Windowsの無料ツール「PowerToys」に含まれる「Screen Ruler（スクリーンルーラー）」を使えば、画面上の任意の場所をドラッグするだけでピクセル単位の正確な計測ができます。この記事では、PowerToysのScreen Rulerの導入から活用テクニックまで、初心者でもすぐに使いこなせるよう丁寧に解説します。
この記事でわかること
- PowerToys Screen Rulerとは何か・できること
- PowerToysのインストール方法（Microsoft Store / GitHub）
- Screen Rulerの起動・基本操作と計測方法
- 4種類の計測モード（クロスヘア・水平/垂直ライン・矩形）の使い方
- 計測結果の確認とコピー方法
- デザイン・開発作業での実践的な活用例
PowerToys Screen Rulerとは？
PowerToysはMicrosoftが提供する無料のWindowsユーティリティツール集です。その中の「Screen Ruler」は画面上の距離・サイズをピクセル単位で計測できる定規ツールです。
| 機能 | 詳細 |
|---|---|
| 計測単位 | ピクセル（px） |
| 計測モード | クロスヘア・水平ライン・垂直ライン・矩形（4種類） |
| 対応OS | Windows 10 / Windows 11 |
| 価格 | 無料（Microsoft提供） |
| ショートカット起動 | Windows + Shift + M（カスタマイズ可） |
Screen Rulerでできること
- Webページ上の要素の幅・高さをピクセルで計測
- アプリのUI要素間のマージン・パディングを計測
- スクリーンショット上のサイズを確認
- デザインカンプと実装結果のズレを確認
- ドラッグした矩形領域のサイズを計測
PowerToysのインストール方法
方法1：Microsoft Storeからインストール（推奨）
- スタートメニューから「Microsoft Store」を開く
- 検索バーに「PowerToys」と入力
- 「Microsoft PowerToys」を選択
- 「入手」または「インストール」ボタンをクリック
- インストール完了後、スタートメニューから「PowerToys」を起動
方法2：GitHubからダウンロード
- ブラウザで「PowerToys GitHub releases」と検索
- 最新のリリースページを開く
- 「PowerToysSetup-x.xx.x-x64.exe」をダウンロード
- ダウンロードしたexeファイルを実行してインストール
PowerToysの初回起動と設定
- PowerToysを起動するとシステムトレイ（タスクバー右端）にアイコンが表示される
- アイコンをダブルクリックして設定画面を開く
- 左側メニューから「Screen Ruler」を選択
- 「Screen Rulerを有効にする」のトグルをオンにする
Screen Rulerの起動方法
ショートカットキーで起動（推奨）
デフォルトのショートカット：Windows + Shift + M
このキーを押すと計測カーソルがアクティブになります。
ショートカットのカスタマイズ
- PowerToys設定 →「Screen Ruler」
- 「アクティベーションショートカット」横の鉛筆アイコンをクリック
- 好みのキーの組み合わせを設定
4種類の計測モードの使い方
Screen Rulerには4つの計測モードがあります。ショートカットキーを押してモードを切り替えながら使います。
| モード名 | 切り替えキー | 計測できること |
|---|---|---|
| クロスヘア（十字線） | O | カーソルからエッジまでの距離（上下左右4方向） |
| 水平ライン | H | 水平方向の長さ（左右にドラッグ） |
| 垂直ライン | V | 垂直方向の長さ（上下にドラッグ） |
| 矩形（ドラッグ） | D | ドラッグした領域の幅×高さ |
モード1：クロスヘア（O）の使い方
- Windows + Shift + M で Screen Ruler を起動
- O キーを押してクロスヘアモードに切り替え
- マウスカーソルを計測したい場所に移動
- カーソルから画面の端（または色が変わるエッジ）までの距離がリアルタイムで数値表示される
クロスヘアモードは、ある要素から別の要素（または画面端）までの距離を確認するのに適しています。
モード2・3：水平/垂直ライン（H/V）の使い方
- H または V でモード切り替え
- 測りたい部分の一端にカーソルを置き、ドラッグして他端まで引っ張る
- ドラッグ中にピクセル数がリアルタイムで表示される
モード4：矩形（D）の使い方
- D キーでドラッグモードに切り替え
- 計測したい領域の左上にカーソルを置き、右下方向にドラッグ
- 選択した矩形の「幅 × 高さ」がピクセルで表示される
矩形モードは、ボタン・画像・カードなどUI要素全体のサイズを一度に把握するのに最適です。
計測中の便利な操作
- Esc：Screen Rulerを終了
- Page Up / Page Down：ルーラーの太さ変更
- Alt を押しながら移動：1ピクセル単位の精密移動
Screen Rulerの設定カスタマイズ
計測線の色・透明度の変更
- PowerToys設定 →「Screen Ruler」
- 「枠の色」をクリックして好みの色を選択
- 「透明度」スライダーで見やすい透明度に調整
計測値をクリップボードにコピー
計測結果は自動的にクリップボードにコピーされる設定が可能です。
- PowerToys設定 →「Screen Ruler」
- 「計測値をクリップボードにコピー」をオンにする
- 計測完了時に「幅 × 高さ」の値が自動コピーされる
ディスプレイスケールへの対応
4Kモニターや高DPIディスプレイを使用している場合、Windowsの「テキストやアプリのサイズ変更」スケール設定（125%・150%など）によって実際のピクセル数と表示上のピクセル数が異なる場合があります。Screen RulerはWindowsのスケール設定を考慮した値を表示するため、CSS設計などでのピクセル数確認に安心して使えます。
実践的な活用例
活用例1：WebデザインのCSS調整
ブラウザで表示したWebページの要素サイズを確認したいとき：
- ブラウザでページを表示
- Screen Rulerを起動（Win+Shift+M）
- 矩形モード（D）でボタンや画像をドラッグして計測
- 計測値をCSS（width / height / margin / padding）に反映
活用例2：デザインカンプと実装の照合
FigmaやXDのデザインカンプと実装済みのUIを並べてサイズを比較する際、Screen Rulerで両方を計測して差異を確認できます。
活用例3：スクリーンショット内の要素計測
他のアプリやWebサイトのスクリーンショットを参考にデザインする際、Screen Rulerを使ってそのUIの各要素サイズを計測できます。
活用例4：バナー・サムネイルの推奨サイズ確認
SNS投稿用の画像やYouTubeサムネイルなど、推奨サイズに合わせて作成する際に、既存の画像サイズをScreen Rulerで確認して基準にできます。
PowerToysの他の便利ツールも紹介
PowerToysにはScreen Ruler以外にも多くの便利ツールが含まれています。
| ツール名 | 機能概要 | ショートカット |
|---|---|---|
| Color Picker | 画面上の色を取得（HEX・RGB・HSV対応） | Win+Shift+C |
| FancyZones | ウィンドウを自由なレイアウトにスナップ配置 | Win+Shift+` |
| PowerRename | 正規表現を使った一括ファイル名変更 | 右クリックメニュー |
| Image Resizer | 右クリックから画像を一括リサイズ | 右クリックメニュー |
| Text Extractor | 画面上の任意のテキストをOCRで取得 | Win+Shift+T |
| Peek | ファイルをアプリ不要でプレビュー | Ctrl+Space |
よくある質問（FAQ）
Q1. PowerToys Screen Rulerは無料ですか？
A. はい、完全無料です。PowerToys自体がMicrosoftが無料で提供するオープンソースツールです。Microsoft StoreまたはGitHubから無料でダウンロードできます。
Q2. Screen Rulerの計測値はCSSのピクセルと一致しますか？
A. Windowsの表示スケールが100%の場合は一致します。125%・150%などのスケール設定をしている場合、Screen Rulerは「論理ピクセル」（CSS px）単位で値を表示するため、CSSの設計に直接使えます。ただし環境によって差異が生じる場合があるので、ブラウザの開発者ツールと併用して確認することをおすすめします。
Q3. 複数モニター環境でも使えますか？
A. はい。メインモニターだけでなく、接続した全ての外付けモニター上でもScreen Rulerを使えます。ショートカットキーを押したときにカーソルがある画面でアクティブになります。
Q4. Screen Rulerの起動中に他のアプリを操作できますか？
A. Screen Rulerはオーバーレイ表示のため、起動中でも通常通り他のアプリを操作できます。計測後はEscキーで終了するか、ショートカットキーを再度押すと非表示になります。
Q5. Windows 10でも使えますか？
A. はい。PowerToysはWindows 10（バージョン1903以降）およびWindows 11の両方に対応しています。Microsoft Storeからインストールする場合はWindowsのバージョンが自動的にチェックされます。
Q6. Screen Rulerで取得した計測値をテキストとして保存する方法は？
A. PowerToys設定で「計測値をクリップボードにコピー」をオンにすると、計測完了時に自動でクリップボードにコピーされます。あとはメモ帳やスプレッドシートに貼り付けて記録できます。
Q7. PowerToysをアンインストールすると設定はリセットされますか？
A. PowerToysの設定は `%LOCALAPPDATA%\Microsoft\PowerToys\` フォルダに保存されます。アンインストール時にこのフォルダを残しておけば、再インストール時に設定が引き継がれます。完全に初期化したい場合は、このフォルダも削除してください。
まとめ
PowerToysのScreen RulerはWindowsで画面上の要素を正確にピクセル計測できる無料ツールで、WebデザイナーやUI/UXデザイナー、フロントエンドエンジニアにとって非常に役立ちます。インストールもMicrosoft Storeから数クリックで完了し、Win+Shift+Mのショートカット一発で即座に起動できます。
クロスヘア・水平ライン・垂直ライン・矩形の4つの計測モードを使い分けることで、要素の幅・高さ・間隔など様々な計測に対応できます。Color PickerやFancyZonesなど他のPowerToysツールと組み合わせることで、デザインや開発作業の効率がさらに向上します。ぜひ日々のPC作業に取り入れてみてください。
