画面定規作成ツール

このツールでできること

キャンバスサイズ・DPI・単位・定規の形状と長さを指定すると、目盛と数値ラベルの入った定規が描かれます。形状は帯・L字・十字・線の 4 種類で、L字と十字は 1 本の設定から横と縦の 2 本を描きます。目盛が潰れる・ラベルが隣に重なるといった失敗は、書き出す前に読みやすさ診断が数値の根拠つきで知らせます。背景を透過にした PNG と、設定を記録した JSON を書き出せます。

作画のどの工程で使うか

• 原稿の上に重ねて、コマや文字の大きさを実寸(mm)で確かめるとき
• グッズやパッケージの入稿データで、印刷される実寸を絵の横に置いて確認するとき
• モニタの表示倍率がまちまちな環境で、画面上の見え方ではなく実寸で判断したいとき

使い方

1. 「出力」で、重ねたい原稿と同じキャンバスサイズと DPI、使う単位(mm / インチ)を入れます。
2. 「形状・配置」で定規の形と向き、置く位置、長さ、0地点を決めます。
3. 「目盛」で主目盛の間隔と補助分割、定規の厚み、目盛線の幅と色を調整します。
4. 読みやすさ診断を確認し、警告が出ていれば主目盛や補助分割、厚みを直します。
5. 必要ならプレビューを「モニタ実寸」に切り替え、等倍キャリブレーションを合わせて実物大で確認します。
6. PNG を書き出し、CLIP STUDIO PAINT で同じ DPI のキャンバスへ読み込みます。

入力項目の意味

DPI

1 インチあたりのピクセル数です。目盛の間隔はこの値から決まるため、読み込む CSP のキャンバスと同じ値にしないと寸法が合いません。

定規形状

帯は下地のある目盛帯、L字と十字は横と縦の 2 本、線は基準線 1 本だけです。L字と十字では向きの選択は効きません。

0地点

定規の左端(または上端)から見た、目盛のゼロの位置です。定規の内側に置くと、そこから左右へ伸びる目盛になります。範囲の外に置くと原点マーカーは描かれません。

主目盛 / 補助分割

主目盛は数値ラベルの付く目盛の間隔(単位つき)、補助分割は主目盛の間を何等分するかです。mm で主目盛 10・補助分割 10 なら、1mm ごとに補助目盛が入ります。

定規厚み

帯の太さ(px)です。この値から数値ラベルの文字サイズが決まり、細すぎるとラベルは自動的に省略されます。

背景を透過

定規以外を透明にして書き出します。原稿の上へ重ねる場合はこちらを使います。

結果の読み方と CLIP STUDIO PAINT への持ち込み方

• 読みやすさ診断の「補助目盛が潰れます」は、目盛線どうしの隙間が 1px を切っている状態です。書き出すと目盛が塗り潰れるので、補助分割を減らすか線幅を細くします。
• 「数値ラベルが隣の目盛に重なります」は、ラベルの必要幅が主目盛の間隔を超えている状態です。主目盛を大きくするか、厚みを下げてラベルを小さくします。
• PNG は指定したキャンバスサイズで書き出されます。CSP で同じ DPI のキャンバスへ読み込むと、mm やインチ換算の目盛が一致します。DPI が異なると寸法がずれるので、その場合は作り直すのが確実です。

計算の根拠

1 単位あたりのピクセル数は、mm なら DPI ÷ 25.4、インチなら DPI そのものです。主目盛の間隔 px はこれに主目盛の値を掛けたもので、補助目盛の間隔はそれを補助分割で割ったものです。読みやすさ診断は、補助目盛の間隔から線幅を引いた実際の隙間で潰れを判定し、1px 未満なら要修正、2.5px 未満なら要確認とします。ラベルの必要幅は、最も長いラベルの文字数に文字サイズと 0.6 を掛け、左右の余白を足して見積もります。ラベルの文字サイズは厚みの 26% を 12〜32px に収めた値、ラベル帯はその 1.4 倍で、ラベル帯が帯の半分を超える厚みではラベルを省略します。目盛の線幅は、0地点が基準の 2 倍、主目盛が等倍、補助目盛が 0.6 倍という階層で、0地点だけは帯を貫く長さで描いて三角形の印を添えます。

精度と対象外のこと

書き出す PNG の目盛は、指定した DPI に対して正確です。ずれるとすれば、読み込み先のキャンバス DPI が違う場合か、読み込み時に拡大縮小した場合です。一方、画面の「モニタ実寸」プレビューは等倍キャリブレーションに依存します。未補正のときは CSS の 96dpi を仮定した概算表示なので、モニタによっては実物と一致しません。ブラウザや OS の表示倍率を変えると、保存した補正値もずれます。

• これは画像として重ねる目盛であり、CSP の定規機能(パース定規や平行線定規)ではありません。スナップの対象にはなりません。
• 目盛のラベルは数値のみで、単位記号や任意の文字は入りません。曲線定規や角度目盛にも対応していません。

入力データの扱い

定規の描画も診断もすべてブラウザ内で行い、入力した数値や書き出した画像を外部に送信することはありません。定規の設定・プレビューの表示モード・画面キャリブレーションの値はブラウザの localStorage に保存され、次に開いたときに復元されます。

よくある質問