Skip to main content
Online Protractor
画像オーバーレイ&図面解析••読了時間 10分

オンライン分度器・画像測定ツール:写真・設計図・スクリーンショットの角度測定ガイド

JPG、PNG、WebPファイルをアップロードするか、クリップボードからスクリーンショットを直接貼り付けて0.1°精度で角度を測定。プライバシー保護型のローカル画像オーバーレイと注釈付きエクスポートを徹底解説。

OPF
エンジニアリング&数学チーム
無料オンライン分度器 編集部
概要・要約(クイックアンサー)

オンライン分度器・画像測定ツールを使えば、ブラウザ上にデジタル写真、CADスクリーンショット、建築平面図、レントゲン画像などを読み込み、半透明の180°/360°分度器を画像の上に直接重ねて測定できます。HTML5 Canvasによる完全ローカル描画とCtrl+V/Cmd+Vでの瞬間ペーストに対応し、ファイルを外部サーバーへ送信することなく0.1°精度で角度測定と注釈画像書き出しが行えます。

画像上の角度測定が2秒で完結する仕組み
✓1. 即時アップロードまたはCtrl+V貼り付け(100%ローカル処理)

JPG、PNG、SVG、WebPファイルをドラッグ&ドロップするか、スクショを撮ってCtrl+V(MacはCmd+V)で貼り付けます。FileReaderとObjectURLにより端末GPUメモリ内のみで処理され、社外秘図面や医療画像が外部送信されることはありません。

✓2. 非破壊オーバーレイ&注釈入りPNG/JPG書き出し

最大400%ズーム、暗い図面向けのコントラスト反転、複数角度の同時配置に対応。報告書や提出資料にそのまま使える測定数値入りの画像をワンクリックで保存できます。

ブラウザ構造

1. クライアントサイド画像オーバーレイ技術とセキュリティ保証

液晶モニターにプラスチック分度器を直接当てると画面に傷がつくだけでなく大きな視差誤差が発生します。一方、機密性の高いCAD図面をクラウドサービスへアップロードするのも危険です。HTML5キャンバス技術は両方の課題を解決します:

FILE API // ZERO-UPLOAD

ゼロアップロード・ローカル描画(File API & GPU Canvas)

画像を選択またはペーストすると、ブラウザはURL.createObjectURL()を用いてローカルメモリから直接ピクセルを描画します。ネットワーク通信は一切発生せず、設計図・法務資料・医療データの機密を完全に守ります。

CANVAS // SUB-PIXEL

透過度調整と高コントラスト反転レイヤー

真っ白なPDF図面から黒背景のAutoCAD画面、グレースケールのX線写真まで画像の明度は様々です。分度器の透明度や目盛りカラー(シアン/白など)を切り替えられるため、どの背景色でも正確に読み取れます。

OPACITY // CONTRAST

注釈付きコンポジット書き出しエンジン

頂点とアームを合わせた後は、背景画像・分度器目盛り・測定線・角度ラベルを1枚のPNG/JPG/WebP画像としてオリジナル解像度のまま合成ダウンロードできます。

画像計測学

2. 静止画から正確に測るための光学&ピクセル計測ルール

ベクターCADデータと異なり、写真やスクリーンショットには光学歪みや縦横比の問題が含まれる場合があります。以下の3原則を守ってください:

1

ルール01:正方形ピクセル縦横比(1:1)を保つ

アップロード前に画像を片方向だけ引き伸ばさないでください。横と縦の倍率が異なると tan(θ) = Δy / Δx が変化し、斜めの角度が数学的に歪んでしまいます。

2

ルール02:実写写真ではカメラの正対(90°直交)を確認する

建物の屋根や家具の接合部など実物を撮った写真を使う場合は、測定対象面に対してカメラが正面(90°)から撮影されている必要があります。斜めからの撮影では遠近法により直角が81°や99°に歪みます。

3

ルール03:長い測定アームでピクセル丸め誤差を最小化する

ピクセル単位の誤差はおよそ Δθ ≈ arctan(1 / L)(Lはアーム長ピクセル)で決まります。エッジの先端(50px)ではなく線全体の端(600px)までアームを伸ばすことで誤差を12分の1以下に抑えられます。

測定手順

3. ステップ別ガイド:あらゆる画像上の角度を測る5ステップ

写真・スクリーンショット・図面の角度を正確に測定するための標準ワークフローです:

01

画像を読み込む(アップロード・ドラッグ・Ctrl+V)

ツール内の『画像をアップロード』をクリックするかファイルをドロップ、あるいはCtrl+V(MacはCmd+V)でスクリーンショットを直接貼り付けます。PNG、JPG、WebP、GIF、SVGに対応。

02

測定モードを選ぶ(180°/360°/3点指定/複数角度)

通常角度には180°半円、反射角には360°全円、頂点が枠外にある場合や自由座標には3点モード、多角形にはマルチアングルモードを選択します。

03

ズーム拡大して頂点クロスヘアを正確に合わせる

Ctrl+ホイール(またはピンチ操作)で交点を拡大し、中心リングをドラッグして2本の線の交差ピクセルに十字線をぴったり重ねます。

04

0°基準線を第1辺に合わせ、アームを第2辺へ伸ばす

分度器を回転させて0°ラインを1本目の辺に沿わせ、測定アームを動かして2本目の辺の最も遠い位置までぴったり重ねます。

05

0.1°精度の角度を読み取り、画像として保存する

主角度・補角/共役角・ラジアン値をリアルタイムで確認し、『画像を書き出す』をクリックして目盛り入りの証拠画像を保存します。

比較表

4. ツール比較:オンライン画像分度器 vs 従来手法

画面に直接定規を当てる方法や重量級デスクトップソフトとの違いを比較しました:

比較項目オンライン画像分度器画面にプラスチック定規AutoCAD / PhotoshopNIH ImageJ(Java製)
価格とインストール完全無料・ブラウザで即起動数百円・画面に傷のリスク高額な年間ライセンス契約無料だがJava環境導入が必要
スクショ即貼り付けCtrl+V / Cmd+V で瞬時に対応非対応新規キャンバス作成の手間ありメニューからクリップボード新規作成
視差(パララックス)誤差0.0°(ピクセル直結描画)±1.5°〜±3°(ガラス厚み誤差)0.0°(ピクセル直結)0.0°(ピクセル直結)
3点指定・複数同時測定標準搭載(色分けラベル付き)1つずつ当て直しが必要手動寸法コマンドが必要単一角度の逐次計測のみ
測定入り画像書き出しワンクリックでPNG/JPG保存不可(スマホ撮影が必要)書き出し工程が複雑レイヤー統合後に保存が必要
プライバシー安全性100%ローカル処理・送信ゼロオフラインローカル(クラウド同期除く)オフライン
活用事例

5. 画像角度測定の4つの現場ケーススタディ

建築・UIデザイン・医療・地図測量の現場で日常的に活用されている実例です:

建築図面&PDF施工図の確認

PDF立面図スクショからの屋根勾配・階段角度チェック

PDF図面を受け取った施工業者が該当箇所をスクショ(Win+Shift+S)してCtrl+Vで貼り付け。天井水平線に0°を合わせるだけで、有料CADを開かずに10秒以内で33.7°の屋根トラス勾配を確認できます。

UI/UXデザイン&アイソメトリック図検証

30°アイソメ軸とCSS斜めレイアウトの品質監査

デザイナーがブラウザ画面のスクショを貼り付け、アイソメトリックイラストが正確に30.0°/150.0°を維持しているか、あるいはロゴの幾何学対称性をチェックします。

整形外科・歯科レントゲン画像の角度参考

外部送信ゼロでのCobb角・関節角度チェック

医療従事者や医学生が匿名化されたJPEGレントゲン画像を3点モードと高コントラスト表示で読み込み、脊椎側弯角や膝外反角をブラウザ内で安全に確認します。

航空写真・太陽光パネル設置&現場検証

衛星画像上での真北基準・日照方位角の計測

太陽光施工会社がGoogle Earthの屋根画像を360°モードで読み込み、真北に対する屋根面の向き(方位角)を計測。保険調査員は衝突軌跡や倒木傾斜の記録画像を書き出します。

プロのコツ

6. 画像計測でピクセル単位の精度を出す5つのコツ

あらゆる静止画測定の再現性を極限まで高める実践テクニックです:

TIP 01

コツ1:劣化したJPEGではなく無圧縮PNGスクリーンショットを使う

高圧縮のJPEGでは1ピクセルの鋭い図面線がぼやけます。PDFやCAD画面から切り出す際はOSのスクショ機能で鮮明なPNGとしてペーストしましょう。

TIP 02

コツ2:頂点が画像の外にはみ出している場合は3点モードを活用

2本の柱や壁の延長線が写真の外で交わる場合でも、視認できる座標に沿って3点測定または並行基準線を使うことで角度を算出できます。

TIP 03

コツ3:測定アームは見える線の端まで目一杯伸ばす

頂点から40ピクセルの位置で止めず、線上の最も遠い端点までアームを引き伸ばしてください。ピクセルの階段状ギザギザ(ジャギー)が平均化され誤差が0.1°未満になります。

TIP 04

コツ4:画像の明るさに合わせて目盛りコントラストを切り替える

白いPDF図面では70%透明度の黒目盛り、黒背景のCAD画面やX線写真ではダークモードにして白・シアン目盛りを使うと最も見やすくなります。

TIP 05

コツ5:確認後すぐに注釈入り画像をエクスポートして証跡を残す

数値を確認したらワンクリックで合成PNGを書き出し、発注者・設計者・生徒への共有資料としてそのまま添付できます。

よくある質問

7. よくある質問(FAQ)

アップロードした写真や図面はサーバーに保存・送信されますか?

いいえ。アップロードまたは貼り付けた画像はHTML5 CanvasとURL.createObjectURL()によりすべてお使いのブラウザのローカルメモリ内だけで処理されます。サーバーへ送信・保存されることは一切ありません。

どのような画像形式に対応していますか?

PNG、JPG/JPEG、WebP、SVG、GIF、BMPなどの主要Web画像形式すべてに対応しており、Ctrl+V(Windows/Linux)やCmd+V(Mac)でのクリップボード直接貼り付けも可能です。

PDF図面の中の角度を測るにはどうすればよいですか?

PDFビューアで図面の角を大きく拡大表示し、スクリーンショット(WindowsはWin+Shift+S、MacはCmd+Shift+4)を撮って当ツール画面上でCtrl+V/Cmd+Vを押すだけで即座に測定を開始できます。

分度器を重ねて測った状態の画像をダウンロードできますか?

はい。角度を合わせた後に書き出し(Export)ボタンを押すと、背景画像・半透明分度器・角度数値が合成されたPNG/JPG/WebP画像をダウンロードできます。

PC画面に直接プラスチック分度器を当ててはいけないのですか?

液晶モニターには表面保護ガラスや偏光板の厚みがあるため、斜めから見た瞬間に1°〜4°の視差誤差が生じます。また硬い定規は画面コーティングを傷つける原因になります。デジタル重ね合わせなら視差誤差はゼロです。

画像をズーム拡大すると測定される角度は変わりますか?

いいえ。縦横同じ比率で行う均一なズームはユークリッド幾何学における相似変換であり、角度の大きさは1度も変化しません。拡大して頂点ピクセルを正確に狙うほど精度が上がります。

画像用オンライン分度器

写真・スクショ・図面の角度を今すぐ測定

JPG/PNGファイルをアップロードするかCtrl+Vで貼り付け。完全無料・アップロード通信ゼロ・0.1°精密計測&画像書き出しに対応。