CSP Web Tools

画面実寸の定規メーカー

モニタ較正に基づいて実寸表示できる定規画像を生成。mm・インチの目盛りをクリスタのキャンバスに重ねて原寸確認に使えます。

指定した DPI で mm やインチの目盛が正しく並ぶ定規の画像を作ります。CLIP STUDIO PAINT のキャンバスへ同じ DPI で読み込めば、画面上で実寸の当たりを取れます。

基本

このツールでできること

キャンバスサイズ・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字と十字では向きの選択は効かず、代わりに横の長さと縦の長さを別々に指定できます。
配置セット
出力・形状・目盛など設定一式を名前を付けて保存し、一覧のチップから呼び出せる機能です。最大 12 件まで保存でき、同じ名前で保存すると上書きされます。
0地点
定規の左端(または上端)から見た、目盛のゼロの位置です。定規の内側に置くと、そこから左右へ伸びる目盛になります。範囲の外に置くと原点マーカーは描かれません。
主目盛 / 補助分割
主目盛は数値ラベルの付く目盛の間隔(単位つき)、補助分割は主目盛の間を何等分するかです。mm で主目盛 10・補助分割 10 なら、1mm ごとに補助目盛が入ります。
定規厚み
帯の太さ(px)です。この値から数値ラベルの文字サイズが決まり、細すぎるとラベルは自動的に省略されます。
背景を透過
定規以外を透明にして書き出します。原稿の上へ重ねる場合はこちらを使います。

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

読みやすさ診断が示す修正ポイント

  • 読みやすさ診断の「補助目盛が潰れます」は、目盛線どうしの隙間が 1px を切っている状態です。書き出すと目盛が塗り潰れるので、補助分割を減らすか線幅を細くします。
  • 「数値ラベルが隣の目盛に重なります」は、ラベルの必要幅が主目盛の間隔を超えている状態です。主目盛を大きくするか、厚みを下げてラベルを小さくします。

CLIP STUDIO PAINT への読み込みと配置

  1. 書き出した PNG は、CLIP STUDIO PAINT の[ファイル]メニュー→[読み込み]→[画像]で読み込みます。元のファイル構成によらず 1 ファイルにつき 1 枚の画像素材レイヤーとしてキャンバスに追加され、同じ DPI のキャンバスであれば目盛の寸法が一致します。
  2. 画像素材レイヤーを選択し、「操作」ツールグループの「オブジェクト」サブツールに切り替えると、レイヤー上のハンドルをドラッグして位置を移動し、外側のハンドルで大きさを、回転コントローラーで向きを調整できます。
  3. 下絵と重ねて見比べるときは、レイヤーパレット上部の「不透明度」スライダーを下げ、下絵を透かして定規の目盛と照らし合わせます。
  4. 確認が終わったら、レイヤーパレットの表示/非表示の切り替えで定規レイヤーを隠すか、レイヤーを削除して取り除きます。定規は画像素材レイヤーのままで構わないので、加筆に使わない限りラスタライズする必要はありません。

読み込み先のキャンバスの DPI は[編集]メニュー→[画像解像度を変更]で確認できます。ダイアログの[解像度]がその値で、ここが書き出し時に指定した DPI と一致していれば目盛の寸法も一致します。

[画像解像度を変更]ダイアログ。[幅]1350、[高さ]2400、[倍率]1.00 の入力欄が縦に並び、その下に[補間方法]の[高精度(色の平均)]、[ピクセル数を固定]のチェックボックス、[解像度]300、[単位]の px が並んでいる。
[編集]→[画像解像度を変更]で開くダイアログ。[解像度]の 300 が、この原稿の DPI です。画面: CLIP STUDIO PAINT 5.0.4(株式会社セルシス)

表示倍率 100% ・印刷サイズとの関係

この定規が保証するのは「画面で実物大に見えること」ではなく、指定した DPI に対して目盛のピクセル位置が正確なことです。CLIP STUDIO PAINT の表示倍率 100% は画像のピクセルと画面のピクセルを 1 対 1 にする表示で、モニタの画素密度によっては実物より小さく見えます。画面上で物理的な実寸を確かめたい場合は[表示]メニュー→[印刷サイズ]を使いますが、これは環境設定の「キャンバス」にある「ディスプレイの解像度」で、画面に物差しを当てて解像度を一致させて初めて正しく表示されます。この調整は、このツールのプレビューにある「モニタ実寸」の等倍キャリブレーションと同じ考え方です。定規 PNG そのものの正しさは、これらの画面表示設定とは無関係に、読み込み先キャンバスの 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 に保存され、次に開いたときに復元されます。

よくある質問

CSP に読み込んだら目盛の寸法が合いません。

キャンバスの DPI がこのツールで指定した DPI と違う可能性が高いです。同じ DPI にするか、その DPI で作り直してください。読み込み時に拡大縮小しても合わなくなります。

数値ラベルが出ません。

定規の厚みが足りず、ラベル帯を確保できていない状態です。読みやすさ診断に必要な厚みが表示されるので、その値以上に厚みを上げてください。

「モニタ実寸」の表示が実物と合いません。

等倍キャリブレーションが未設定か、画面の表示倍率を変えた後です。プレビューを「モニタ実寸」にすると入力パネルにキャリブレーションが現れるので、画面上の帯を実物の定規で 100mm に合わせ直してください。

0地点を定規の途中に置けますか?

置けます。定規の内側に指定すると、そこから左右(または上下)へ伸びる目盛になり、原点に三角形の印が付きます。

配置セットは何件まで保存できますか?

12件までです。13件目を保存すると、最も古い保存が自動的に入れ替わります。呼び出しはチップをクリック、削除は横のアイコンから行えます。

CLIP STUDIO PAINT の入手について

CLIP STUDIO PAINT とはどんなソフトか

CLIP STUDIO PAINT(クリップスタジオペイント)は、株式会社セルシスが開発しているイラスト・マンガ・アニメーション制作用のペイントソフトです。汎用の画像編集ソフトとの違いは、ペン入れに向いた筆圧設定、コマ割りとフキダシ、トーン、3D 素材、パース定規といった、紙と印刷を前提にした制作機能が最初から入っている点にあります。Windows・macOS・iPad・iPhone・Android・Chromebook で動きます。

体験版と購入の選択肢

  • 公式サイトで無料の体験版が配布されています。描き味と必要な機能を自分の環境で確かめてから判断できます。
  • グレードは PRO と EX の 2 つで、複数ページのマンガ原稿を 1 つの作品としてまとめて扱う機能が要るかどうかが主な分かれ目です。
  • 買い方は買い切りの一括払いと、月額・年額のプランがあります。使える端末の種類と台数はプランによって変わります。
  • 価格・プランの構成・対応端末は改定されることがあるため、最新の条件は公式サイトで確認してください。

このツールと CLIP STUDIO PAINT の関係

このページのツールはブラウザだけで動くので、CLIP STUDIO PAINT を持っていなくても計算や書き出しはそのまま使えます。ただしここで得られるのは CLIP STUDIO PAINT へ持ち込むための材料で、書き出した定規 PNG は、CLIP STUDIO PAINT のキャンバスへ読み込んで原稿に重ねて使います。考え方の部分は他のペイントソフトにも流用できますが、数値と書き出しは CLIP STUDIO PAINT に合わせて作ってあります。