CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
あらゆる Web ページ上でピクセル単位の距離とグリッドを測定します。
Image from store
Description from store
ピクセル精度は、優れたデザインの静かなるヒーローです。たった1ピクセルのずれが、グリッドのリズムを崩したり、テキストが中心からずれたように感じさせたり、コンポーネント全体が「ほぼ正しい」ように見えても、完全には一致しないといった問題を引き起こす可能性があります。Grid Ruler Liteは、フロントエンド開発者、UI/UXデザイナー、QAテスター、そしてビジュアルの洗練度を重視するすべての人々に、ブラウザ内で即座に計測できるツールキットを提供します。重いデザインソフトウェアや、雑然とした開発ツールパネル、外部アプリに取り込まれたスクリーンショットなどは一切不要です。この拡張機能は、ワンクリックで、サイズ変更可能なルーラー、グリッドにスナップするガイド、そしてオプションのベースライングリッドを任意のWebページ上に重ねて表示します。これにより、間隔のチェック、8ポイントグリッドの検証、レイアウトバグの証拠のキャプチャを数秒で行うことができます。
Grid Ruler Lite が優れている点は何ですか?
ワンクリックで起動、ワンクリックで解除
ツールバーアイコンをクリックするか、ブラウザのキーボード設定で設定したショートカットを呼び出すと、拡張機能が軽量の<canvas>オーバーレイは独自のShadow-DOMにカプセル化されています。ページのCSSは干渉できず、オーバーレイはテスト対象のDOMツリーを変更することはありません。もう一度クリックすると、すべてのガイド、グリッド、ラベルが消えます。ページのリロードやイベントリスナーの滞留は発生しません。
ツールキットにこれを加えたい理由
時間を節約：DevToolsでパディングを測定するには、ネストされたボックスをドリルダウンして、境界線と余白の値を頭の中で入力する必要があります。Grid Ruler Liteなら、ドラッグ1回で距離を視覚的に確認できます。
バグの削減: ステージングや、さらに悪いことに本番環境に到達する前に、特に QA の目が届かないレスポンシブ ブレークポイントで、小さな間隔の回帰を検出します。
コラボレーションの改善: デザイナーは、デプロイされたビルドに 8 ポイント グリッドを直接オーバーレイしてスクリーンショットを共有できるため、Figma のコメントなしで開発者に正確なピクセル フィードバックを提供できます。
集中力を維持：ボタンを測定するためだけに、Altキーを押しながらPhotoshopを起動したり、Sketchファイルを開いたりする必要はありません。すべてはライブページ上で行われ、エンドユーザーが見ているものと全く同じです。
教育と文書化: 製品マネージャーとテクニカル ライターは、定規のスクリーンショットを使用してレイアウトの動作をデモンストレーションできるため、すべての関係者にとって仕様ドキュメントが明確になります。
対象ユーザーグループ
ユーザーグループ
フロントエンド開発者
CSS の間隔、フレックスボックスのギャップ、ブレークポイント間のコンポーネントの配置を検証する必要があります。定規をドラッグし、端にスナップし、ガイドをロックし、PR レビュー用にスクリーンショットをエクスポートします。
UI/UXデザイナー
開発ビルドが 8 ポイントまたは 10 ポイントのデザイン システムに準拠していることを確認する必要があります。ベースライン グリッドを重ね、パディングを測定し、注釈付き PNG を共有します。
QAテスター
明確な証拠とともにピクセルパーフェクトなバグを報告する
クイック測定とワンキースクリーンショットキャプチャはバグトラッカーに直接保存されます
コンテンツ編集者とPM
CMS 駆動型ページで見出しの折り返し、広告スロットの間隔、カードのレイアウトを確認します。技術的なオーバーレイを使用しないため、DevTools の複雑さを回避できます。
教育者と学生
ブラウザでデザイン原則、グリッド理論、レスポンシブレイアウトをライブで教える 外部ツールを使わずに視覚的にリアルタイムのデモンストレーション