Screen Ruler

Screen Rulerとは？

Screen Ruler は、Webページを調査・計測するための Chrome 拡張機能です。デザイナーや開発者が、要素のサイズ、余白、セレクタ、computed CSS、色、スクリーンショット、アクセシビリティのコントラスト問題、SEO関連メタデータをブラウザ上で直接確認するのに役立ちます。

この拡張機能は、ツールバーアイコン、右クリックのコンテキストメニュー、またはキーボードショートカットから起動できます。有効にすると、ページ上に調査ツールが重ねて表示され、サイトを離れることなく要素にカーソルを合わせたりクリックしたりして、レイアウトやページメタデータを確認できます。

主な機能

• 要素のサイズと余白を計測: ピクセル寸法、margin、padding、要素間の距離を確認できます。
• 要素情報を調査: ホバーまたは選択時に、タグ名、ID、クラス名を表示します。
• computed CSS を表示してコピー: サイドパネルで現在の要素の computed styles を確認し、CSS をクリップボードにコピーできます。
• ルーラーとカラーピッカーを使用: 正確な計測のために水平・垂直ガイドを配置し、ページ上の任意の場所から色をサンプリングできます。
• 選択したコンテンツをキャプチャ: キーボードショートカットで、選択した要素の切り抜きスクリーンショットを撮影できます。
• ページ品質シグナルを確認: WCAG のコントラスト問題、一般的な SEO 問題、meta tags、Facebook、X、LinkedIn 向けのソーシャルプレビュー情報を検出します。

Screen Ruler の使い方

拡張機能をインストールしたら、ツールバーアイコン、コンテキストメニュー、またはショートカット Alt/Option + Shift + R から有効にします。要素にカーソルを合わせてサイズやメタデータを確認するか、要素をクリックして選択し、周囲のコンテンツと比較します。

サイドパネルからは、computed CSS を表示してコピーしたり、親要素/子要素の選択ショートカットを使ったり、ルーラーや色を確認したり、スクリーンショット、meta tags、ページ分析の各ツールにアクセスできます。また、Chrome の拡張機能設定からカスタムショートカットも利用できます。

使用例

• エンジニアに引き渡す前に、ランディングページやUIモックアップの余白と配置を確認する。
• フロントエンドのデバッグ中に、要素の正確な CSS クラス、ID、computed styles を特定する。
• デザイン参考や実ページから色をサンプリングして、ビジュアルシステムに合わせる。
• ドキュメントや不具合報告用に、単一コンポーネントの切り抜きスクリーンショットを撮影する。
• 公開前に、SEOメタデータの不足、H1の複数設定、コントラスト問題を確認する。

よくある質問

Screen Ruler はどの Webサイトでも使えますか？ 掲載情報では、任意の Webページで動作するとされています。

拡張機能はどのように起動しますか？ 拡張機能アイコン、右クリックのコンテキストメニュー、またはキーボードショートカット Alt/Option + Shift + R から開けます。

要素から CSS をコピーできますか？ はい。サイドパネルに computed CSS の表示と「Copy CSS」ボタンがあります。

調査以外の高度なツールも含まれますか？ はい。掲載情報には、スクリーンショット、カラーピッキング、アクセシビリティチェック、SEO分析、ソーシャルプレビューの調査も含まれています。一部の追加機能は PRO ティアに含まれます。

代替案

• ブラウザの開発者ツール: 特に Chrome の組み込みパネル内で作業する場合、直接的な調査やデバッグに役立ちます。
• 他のブラウザ調査拡張機能: より限定的に、計測、ルーラー、CSS 調査、カラーピッキングに特化したツールがあります。
• デザインハンドオフおよびQAツール: ブラウザ内での要素調査よりも、より広い範囲のビジュアルレビューのワークフローが必要なチームに適しています。
• アクセシビリティおよびSEO監査ツール: 主な目的がライブページ調査ではなく監査ワークフローであれば、より詳細な問題レポートを提供できます。