オンライン定規

画面上の物体のサイズや角度を推測するのはもうやめましょう!オンライン定規は、画面を現実世界の測定リファレンスに変えるために設計されたプロフェッショナルなツールです。

🎉 v2.2.0 アップデート:Web定規のキーボード操作とピクセル単位の微調整に対応。

オンライン定規

画面上で現実世界の寸法を測定

オンライン定規を使って、画面上の長さをセンチメートル、ミリメートル、またはインチ単位で測定できます。既知の寸法の基準物を使って校正を行うことで、正確な1:1の測定が可能です。

今すぐオンラインで试す →

オンライン分度器

バーチャル分度器で角度を測定

画像、図表、またはデザイン案上の角度に、オンライン分度器を重ね合わせます。分度器の中心を角の頂点に合わせるだけで、目盛りから角度を読み取ることができます。拡張機能のインストールは一切不要です。

今すぐオンラインで试す →

三点式角度測定ツール

2本の調整可能なアームを使って角度を測定

頂点の位置を決め、2本のアームをドラッグして、測定したい角の辺に合わせます。ツールが自動的にその間の角度を計算するため、画像や図表、デザイン案に含まれる様々な不規則な角度を簡単に測定できます。

今すぐオンラインで试す →
オンライン定規

主な機能

✨

実物レベルの校正

クレジットカード、A4用紙、あるいは硬貨などの身近な実物を使用して、画面の正確なPPIを自動的に算出します。+/- ボタンによる1ピクセル単位の微調整にも対応。

📏

3つの主要測定ツール

画面定規:メートル法とヤード・ポンド法の両方に対応し、長さ、間隔、要素サイズを測定。
標準分度器:PPI校正データに基づく実寸サイズでレンダリングされる、360度回転可能な半透明分度器。
三点式動的分度器:頂点と2つの端点で任意の角度を測定。リアルタイム角度表示、アーム延長、扇形ビジュアライズに対応。

⌨️

キーボード操作による微調整とフォーカス切り替え

精密な位置調整:Web定規を選択した状態で、矢印キーを使って1ピクセル単位の微調整が可能です。また、Shiftキーを押しながら矢印キーを使用すると10ピクセル単位で移動でき、マウスドラッグ時の手ブレやズレを防ぐことができます。
複数の定規の切り替え:複数の定規が配置されている場合、定規にフォーカスを当てた状態でTabキー(またはShift + Tabキー)を押すと、操作対象の定規を順次切り替えることができます。

🧩

複数ツールの同時表示

同一ページ内に複数の定規、標準分度器、三点式分度器を追加でき、複雑な比較測定や幾何学的なポジショニングのニーズに応えます。

📏

2つの測定モード

独立ウィンドウモード:画面の最前面に常に表示される、すっきりとした定規ウィンドウを開きます。
ページオーバーレイモード:ウェブページ上に定規や分度器を直接重ねて表示。透過率の調整も可能です。

🔄

回転、スナップ、角度合わせ

回転ハンドルを使用して定規や標準分度器の角度をリアルタイム調整。45°/90°などの主要な角度へのスナップ機能に対応。
三点式分度器のアームも45度ごとのスナップに対応しています。

📐

ゼロ点オフセット&リセット

実物の定規にある「ゼロ点」の端を再現し、任意の開始位置(mm)を設定可能。ワンクリックで基準点をリセットできます。

🎨

リアルな材質、カラー、透過率

定規は木目調、プラスチック、金属の各テクスチャ(動的SVGフィルター)をサポート。
分度器は複数の半透明カラースキーム(クラシックブルー、テックグリーン、バイタルオレンジ等)により、背景を選ばず見やすく表示されます。
三点式分度器は扇形部分の透過率を個別に設定可能です。

📏

充実した目盛り表示

メートル法:センチメートル(CM)およびミリメートル(MM)。
ヤード・ポンド法:インチ単位。1/16インチ単位までの高精度な分割表示。

🔄

柔軟な操作ロジック

エッジ全体でのサイズ調整:定規の端であればどこをドラッグしても長さを調整できます。
精精密な連携:マウスドラッグとキーボードの矢印キーによる、ピクセル単位の微調整がシームレスに連携します。
リアルタイム同期:Popupでの設定、材質、カラーの変更は即座に反映されます。

💾

プライバシーとローカル保存

すべてのキャリブレーションデータ(PPI、単位設定、オフセット等)は、ブラウザのローカル環境内にのみ保存されます。

使い方とヒント

プレビュー

オンライン定規の使い方 - ステップ 1
オンライン定規の使い方 - ステップ 2
オンライン定規の使い方 - ステップ 3
オンライン定規の使い方 - ステップ 4
オンライン定規の使い方 - ステップ 5

使い方

1

初回使用

拡張機能アイコンをクリックし、「校正モード」に入ります。

2

位置合わせと校正

参考物(例:クレジットカード)を選択し、赤い枠が実物と一致するように調整します。

3

測定開始

「定規を追加」または「分度器を追加」をクリックして測定を開始します。

4

スタイルの切り替え

ツールバーのアイコンをクリックして、素材や色の切り替え、透明度の調整が可能です。

5

位置と角度の調整

本体をドラッグして移動し、端にある回転ハンドルをドラッグして角度を調整します。

よくある質問

はじめに

インストール後、どのように「オンライン定規」を開きますか?

ブラウザ右上のパズルアイコン 🧩 をクリックし、「オンライン定規」を見つけて、その横にあるピンアイコンをクリックしてツールバーに固定します。その後、アイコンをクリックするだけでいつでも定規を開くことができます。

この拡張機能で本当に画面を本物の定規にできますか?本物の定規と同じくらい正確ですか?

はい。モニターごとに解像度が異なるため、通常の画像は不正確です。この拡張機能は「物理校正」技術を使用しており、クレジットカードやA4用紙で一度合わせるだけで、画面の実際のサイズを記憶し、1:1の正確な測定を実現します。

クレジットカードを持っていないのですが、校正できますか?

はい。システムはA4用紙や硬貨など、複数の基準物に対応しています。将来的には、A5用紙や一般的なスマホの画面サイズなどの基準も追加する予定です。

操作・機能

「独立ウィンドウ」と「ページ注入」モードの違いは何ですか?

「独立ウィンドウ」は、画面上のどこにでも配置でき、他のソフトの上に重ねて表示できるクリーンでサイズ調整可能な定規ウィンドウを表示します。「ページ注入」は、閲覧中のウェブページに定規を直接「貼り付け」ます。透明度調整が可能で、コンテンツの邪魔になりません。

同じページに複数の定規を追加できますか?

はい!v2.0.0より、複数の定規と分度器を同時に使用できるようになりました。「定規を追加」または「分度器を追加」を複数回クリックすることで、各ツールを独立して移動、回転、サイズ調整、素材・色の設定ができ、比較測定や幾何学的な配置に最適です。

定規の素材や色を変更するにはどうすればいいですか?

定規の端にあるツールバーまたはポップアップメニューで素材の切り替えが可能です。現在、木製、プラスチック、金属に対応しています。「プラスチック」を選択すると、配色をカスタマイズしてウェブ背景に合わせることができます。

測定したい物の端が定規の先端で隠れてしまう場合はどうすればいいですか?

「ゼロ点オフセット」機能を使用してください。本物の定規の保護端をシミュレートし、開始位置に空白(ミリ単位)を設定できます。ワンクリックで「ゼロ」に戻すことも可能です。

定規を長くしたり短くしたりするにはどうすればいいですか?

とても簡単です。ページ注入モードでは、隅にある小さなツマミを探す必要はなく、定規の端の「どこでも」ドラッグするだけで自由に長さを調整できます。

定規を回転させることはできますか?

はい!定規の端にある回転ハンドルをドラッグするだけです。また、45°、90°、180°への精密スナップにも対応しており、素早い調整が可能です。

定規に加えて、分度器を追加することはできますか?

はい!v2.0.0で「分度器」機能を追加しました。「分度器を追加」をクリックするだけで、1:1の正確な分度器を挿入できます。360°回転、複数の配色、物理校正に基づくPPI同期に対応しています。

分度器にはどのような特殊機能がありますか?

万能分度器は、PPIに基づく同期校正だけでなく、360°の自由回転や、さまざまなウェブページの背景で使用しやすい複数の半透明カラースキーム(クラシックブルー、テックグリーンなど)をサポートしています。

スリーポイントダイナミック分度器とは何ですか?標準的な分度器とはどう違うのですか?

スリーポイントダイナミック分度器は、1つの頂点と2つの端点を使って角度を測定します。標準的な分度器とは異なり、固定スケールに合わせる必要はありません。代わりに、3つのコントロールポイントを直接ドラッグして、ウェブページ上の要素に合わせることができます。非標準的な角度、デザインモックアップの端、画像内の幾何学的角度の測定に特に適しています。」

スリーポイントダイナミック分度器の測定アームは延長できますか?

はい。2つの端点を直接ドラッグすると、測定アームは無限に伸びます。そのため、広いスパンを持つウェブページ要素、長い対角線、複雑な幾何学的形状の測定に最適です。」

三点分度器の中央セクター領域の透明度を調整できますか?

はい。三点分度器では、中央セクター領域の透明度を個別に調整できます。これにより、セクターが下のウェブページのテキストや詳細情報の視界を遮ることなく、現在の測定範囲を明確に視覚化できます。」

設定とデータ

別のページに移動すると、校正したデータは消えてしまいますか?

いいえ。校正データ(PPIなど)、単位設定、オフセット量はリアルタイムで同期・保存されます。ポップアップメニューでの変更も、ページの切り替えも、設定は即座に反映されます。

インチ表示に対応していますか?

はい。本拡張機能はメートル法(CM、MM)とヤード・ポンド法(インチ Inch)の両方に対応しており、インチ表示は1/16インチ刻みの高精度な測定が可能です。

セキュリティとプライバシー

閲覧履歴や個人情報が読み取られることはありますか?

いいえ。すべての校正データと設定はブラウザのローカル環境に保存されます。サーバーにデータをアップロードすることは一切ありません。

素材のテクスチャは本物ですか?動作が重くなりませんか?

すべての素材(木製、プラスチック、金属)はSVG技術を使用して動的に生成されたリアルな視覚効果です。非常に軽量で、ブラウザの動作速度に影響を与えることはありません。

更新履歴

オープンソース

この拡張機能はオープンソースであり、コードはGitHubで公開されています。貢献を歓迎します!

GitHubでソースコードを見る

ツールキットを構築

私が开发した他のChrome效率化ツール也チェックしてください。

🚀
他の拡張機能を見る