HTMLファイルひとつだけのアプリ、Perspective Lab（無料）の使い方及び仕様―消失点、アイレベル、画角、魚眼パースを動かして理解する

パースを学ぶとき、「消失点」「アイレベル」「画角」という言葉は分かっても、それらが画面上でどう連動するのかは掴みにくいものです。

Perspective Lab は、消失点・立体・カメラ・画角を手で直接動かしながら、1点・2点・3点透視を観察するための学習・作画補助アプリです。通常の直線投影だけでなく、等距離魚眼投影（いわゆる魚眼パース）にも対応しています。

グリッド付きのボックスやルーム、下書き画像をレイヤーとして重ね、決めた構図を専用形式（`.perslab`）で保存したり、PNGとして書き出せます。CLIP STUDIO PAINT向けのパース値もリアルタイムに表示されます。

この記事では、**「最初の3分で試せるクイックツアー」**から順に操作を解説し、後半では数値上限・投影方式・描画規則・保存形式などの仕様をまとめています。

1. インストールと起動

配布ファイルは `index.html` 一つだけです。パソコンのローカル（HDD等）に保存し、ブラウザで開くだけで起動します。インストール作業もアカウント登録も不要です。

最初の3分で試すこと（クイックツアー）

まずは理屈より先に、次の7ステップを順に触ってみてください。各機能がどう連動しているかが一瞬で掴めます。

1. 消失点を動かす：初期状態（3点透視）で、赤・緑・青の丸いハンドルを少しドラッグする。

2. モードを変える：「消失点数」メニューから【2点透視】→【1点透視】へ順に切り替える。

3. 魚眼を試す：「投影方式」メニューから【魚眼投影】に切り替える。

4. 立体を動かす：中央のボックスをドラッグして水平に移動させる。

5. レンズを変える：画面下の水平画角を【60.0°】から【35.0°】に変えてみる（被写体の大きさを保ったまま、パース感だけが変化します）。

6. 部屋に入る：「オブジェクト」メニューから【ルーム】に切り替える。

7. 書き出す：「ファイル」メニューから【PNG書き出し】を選ぶ。

操作中にカメラを見失ったり迷ったりしたら、「リセット」→「表示をリセット」 を押してください。レイヤーやカメラ位置は壊さず、表示倍率だけをきれいな初期状態に戻せます。

画面の構成

画面は大きく4つのエリアに分かれています。

• 上部メニューバー：投影方式、消失点数、オブジェクト、表示切替、ファイル保存など。

• 中央 Canvas：透視図を直接触って動かす作業エリア。

• 右側 レイヤーパネル：レイヤー追加・並べ替え・不透明度・寸法の変更。

• 下部 操作ツール＆レンズ情報：ドラッグ操作モードの切替と、画角・35mm換算焦点距離・クリスタ用パース値の表示。

軸の色とラベル

空間の向きを直感的に見分けられるよう、3軸を色とラベルで統一しています。

• 赤（VP-X）：X方向（左右の広がり）

• 緑（VP-Y）：Y方向（上下・高さ）

• 青（VP-Z）：Z方向（奥行き）

魚眼投影では、後方を無理に前方へ折り返さないため、`VP-X+` / `VP-X−` のように軸のプラス／マイナス方向を区別して表示します。

5つの操作モードを使い分ける

画面下部（もしくは左）の5つのボタンは、「Canvas上で左ドラッグしたときに何が起きるか」 を切り替えるツールです。

※消失点ハンドルやアイレベルを直接つかんだ場合は、パン以外のどのツールを選んでいてもハンドル操作が最優先されます。

① 自動（Auto）

迷ったらこれにしておけば、一通りの操作ができます。

• ボックス：左ドラッグで現在の高さを保ったまま水平移動。<kbd>Ctrl</kbd>+<kbd>Shift</kbd> を押しながらドラッグすると「画面平行移動」になります。

• 画角固定ONのボックス：通常の左ドラッグが「回転」になります。

• 2点・3点透視のルーム：通常の左ドラッグで見回し（回転）。<kbd>Shift</kbd> で水平移動、<kbd>Ctrl</kbd>+<kbd>Shift</kbd> で画面平行移動。

• 下書き画像：画像の内側で移動、辺で拡大縮小、角で回転。

② 水平（Ground）

床面と平行に移動します。ボックスは高さを変えずに前後左右へ動き、ルームではカメラの高さを保ったまま移動します。キーボード修飾キーが使えないタブレット操作で特に重宝します。

③ 画面平行（Picture Plane）

透視図法でいう「ピクチャープレーン（画面）」と平行に動かします。

難しく聞こえますが、「いま見ているディスプレイのガラス面と同じ向きの板があり、その板の上を滑らせるように動かす」 とイメージしてください。
ボックスを上にドラッグすれば、画面上でそのまま上へ動きます。カメラが斜めを向いている場合、高さ（Y）は変わりますが、カメラから見た「見かけの奥行き」は維持されます。

④ 回転（Rotate）

オブジェクト自体ではなく、カメラの向き（視線）を変えます。ボックスでは中心を見つめたまま回り込み、ルームではその場で見回します。

⑤ パン（Pan）

全レイヤーの表示位置だけをずらします。マウスの中ボタンドラッグでも、どのツールを選んでいてもパンになります。

直線投影と魚眼投影

「投影方式」メニューから切り替えます。切り替えても、カメラ位置や画角、オブジェクトの配置は一切変わりません。同じシーンを2つの視点で即座に見比べられます。

• 直線投影（標準）：現実の直線を画面上でも直線として描く、おなじみの透視図法。建物や部屋、小物の作画に。

• 魚眼投影（等距離）：広い視野角を1枚に収める投影法。直線が美しい曲線として描かれ、いわゆる「魚眼パース」「5点透視」の世界を観察できます。

1点・2点・3点透視

「消失点数」メニューから切り替えます。
透視図法を学ぶとき「1点・2点・3点透視はそれぞれ別の描き方」と教わることが多いですが、本質的にはすべて同じカメラの、向きの特殊ケースにすぎません。

1点透視

奥行き方向だけが有限の消失点へ収束します。廊下、部屋、道路を正面から見る構図に向いています。

奥行き方向が1つの消失点へ集まります。

2点透視

水平方向の2軸が左右の消失点へ収束し、Y方向は画面上で平行になります。建物や室内を自然な高さから描く場合に使いやすい方式です。

左右に2つの消失点を持ち、垂直方向は平行になります。

3点透視

X・Y・Zの3方向が有限の消失点へ収束します。見上げ、見下ろし、高低差の強い構図に向いています。新規文書の初期状態は3点透視です。

消失点、アイレベル、垂直消失線

画面上の丸いハンドルが消失点（VP）です。中央の濃い点が正確な消失座標を示します。

• `VP-X` / `VP-Z`：ドラッグすると水平方向の透視と画角が変わります。

• `VP-Y`：ドラッグすると上下のアオリ／フカン角が変わります。

• `EYE LEVEL`（アイレベル）：黄土色の実線。上下にドラッグして目線の高さを変更できます。

黄土色の実線（垂直消失線）

画面に引かれる黄土色の線は、アイレベルに加えて「垂直消失線」を含んでいます。

• 1点透視：垂直消失線が 1本

• 2点透視：垂直消失線が 2本

• 3点透視：`VP-X—VP-Y` と `VP-Z—VP-Y` を通る 2本

魚眼投影に切り替えると、これらが消失平面に対応する曲線へと滑らかに姿を変えます。

消失点が画面外へ出た場合は画面端にインジケーターが出ます。無限遠の消失点や後方を示す方向矢印はドラッグできません。

ボックスを使う

初期ボックスは2×2×2グリッドです。1グリッドは50ワールド単位なので、初期world寸法は100×100×100となります。

ボックスの外側6面には正方形グリッドが表示されます。カメラ側を向く面のグリッドはやや太く濃く、反対側は細く淡い線となるため、面の塗りを隠しても奥側の分割を判別できます。

「表示・操作」→「グリッドを表示」をOFFにすると、全レイヤーのボックス／ルームのグリッドだけを隠せます。面、輪郭線、透視ガイド、消失点、下書き画像には影響しません。

ボックスの移動

• 通常の左ドラッグでは、現在の高さを保って水平移動します。

• `Ctrl+Shift`＋左ドラッグでは、ピクチャープレーンと平行に移動します。

• 「水平」ツールでは、入力機器を問わず水平移動を明示します。

• 「画面平行」ツールでは、入力機器を問わず画面平行移動を明示します。

• 「回転」ツールでは、カメラの向きを変更します。

画面平行移動では奥行きを保ったまま、画面に沿う方向へ移動します。

地面への吸着

ボックス下面が地面へ近づくと軽く吸着します。ただし、地面は衝突面ではありません。ボックスは地中へ通過でき、地下の高さを保ったまま水平移動できます。

寸法変更

レイヤーパネルの「寸法（グリッド）」でX・Y・Zを変更します。

• 初期値: 2×2×2

• 各軸の範囲: 1～32の整数

• 最大寸法: 32×32×32

• world寸法: 各軸のグリッド数×50

通常は中心を固定して両側へ拡大します。拡大したボックスがカメラのnear面へ達する場合もカメラは動かさず、ボックス中心だけをカメラから遠い側へ必要最小限移動します。

ルームを使う

「オブジェクト」→「ルーム」で、床・壁・天井を持つグリッド空間へ切り替わります。

• 初期寸法: 12×8×16

• 各軸の範囲: 1～64の整数

• 最大寸法: 64×64×64

• 初期グリッド間隔: 50ワールド単位

• 初期world寸法: 600×400×800

• 初期カメラ位置: ルーム中央`[0, 200, 0]`

床・壁・天井のグリッドが共通の消失方向へ収束します。

壁、床、天井を通過できる

ルームには衝突判定がありません。カメラは壁、床、天井を自由に通過できます。外側から見た場合も外壁を不透明な箱として描かず、カメラ側を向く内面だけを表示します。

外側へ移動しても、内面の片面描画によって室内を観察できます。

寸法変更時は床`Y=0`、カメラ位置、グリッド間隔を維持します。X／Zはworld原点を中心として両側へ、Yは天井方向へ伸縮します。

水平画角とドリーズーム（クリスタ連携）

画面下のスライダーや数値欄で、カメラの水平画角を 20.0°〜140.0° の範囲で調整できます。

数値をいじると「ドリーズーム」が起きる

スライダーで画角を変えると、ボックスや部屋の見かけの大きさを保ったまま、カメラが前後に自動で移動します。

• 画角を狭くする（望遠）→ カメラが後ろに下がり、圧縮効果で歪みが減る。

• 画角を広くする（広角）→ カメラがグッと近づき、パースが強くダイナミックになる。

映画のドリーズーム（カメラを前後に動かすドリーとカメラのズーム機能を同時に行う技法です。被写体の大きさを変えず、背景の遠近感だけを変化させることができます）のような効果を、手元で体感できます。

CLIP STUDIO PAINT への持ち込み方

直線投影モード中、レンズ情報欄に以下の換算値がリアルタイム表示されます。

• 35mm判換算焦点距離 ＝ `18 / tan(画角 / 2)`

• CLIP STUDIO用パース値 ＝ `10 × tan(画角 / 2)`

レイヤーと下書き画像

ボックス、ルーム、下書き画像を 最大32レイヤー まで重ねられます。

• レイヤーの追加（＋）、削除（−）、複製（Ctrl+J）、順序入替、不透明度スライダーに対応。

• 独立した2D合成：各レイヤーはそれぞれ独立したカメラ・パースを持ち、2D画像として重なります。

下書き画像の読み込み

「ファイル」→「下書き画像を読み込む…」から JPG / PNG を読み込めます。

• 合成モードは自動的に 乗算 になります。白い部分は透け、線画だけが透視グリッドの上に重なります。

• 画像内部をドラッグで移動、四隅で回転、外枠で拡大縮小。

• おすすめの使い方：自分が描いたラフ画像を読み込み、その上に透視ボックスを重ねて「アオリの角度が合っているか」「パースの狂いがないか」をチェックする検証器として使えます。

下書き画像は画面へ固定した2Dオーバーレイです。中ボタンドラッグ、パンツール、2本指パン、ホイール、ピンチで透視表示を移動・拡大縮小しても、下書き画像の画面位置と大きさは変わりません。画像自身の内部・辺・角を使った移動、拡大縮小、回転は引き続き行えます。

下書き画像の選択中は、消失点数、オブジェクト、3D移動／回転、水平画角、XYZ寸法の操作が無効になります。

表示・操作メニュー

各設定の役割は次のとおりです。

• ガイド線を表示: 透視ガイド、アイレベル、垂直消失線、VP注記を切り替えます。

• 面を表示: ボックス／ルームの面塗りだけを切り替えます。

• グリッドを表示: ボックス／ルームのグリッドだけを全レイヤー一括で切り替えます。

• 視心（視界中心）を表示: 視線の中心を十字と`CV`で表示。パン・ズームに追従し、3点透視ではアイレベルと一致するとは限らない。

• ステーションポイント（立点）を表示: 視点を画面上へ下向きに展開した作図用の点を`SP`と補助線で表示。直線投影専用で、画角に応じて視心からの距離が変わる。

• 画角を固定: 消失点操作で画角を変更しないようにします。

• アイレベルを固定: アイレベルの直接変更を防ぎます。

• UI密度: 自動、コンパクト、タッチから選びます。

ガイド、面、グリッドは互いに独立しています。「面を表示」をOFFにしても輪郭とグリッドは残り、「グリッドを表示」をOFFにしても面とガイドは残ります。

CV・SPは初期OFFで、ガイド・面・グリッドから独立。表示中の補助点はPNGにも入ります。点そのものはドラッグできず、画面外へ出た場合はパン・ズームで表示範囲を調整してください。魚眼ではSP項目が無効になりますが、チェック状態は保持され、直線投影へ戻すと復帰します。

ガイド、面、グリッドは互いに独立しています。「面を表示」をOFFにしても輪郭とグリッドは残り、「グリッドを表示」をOFFにしても面とガイドは残ります。

Undo／Redoとリセット

• Undo: `Ctrl+Z`

• Redo: `Ctrl+Y`

• レイヤー複製: `Ctrl+J`

Canvasドラッグ、寸法変更、画角入力、下書き画像変形などは、開始から確定までを1操作として履歴化します。途中で取り消した操作や、開始値へ戻した操作は履歴を作りません。

表示パン、表示ズーム、UI密度、面・ガイド・グリッドの表示設定などはScene Undo／Redoの対象外です。

「リセット」メニューには3種類あります。

• 表示をリセット: レイヤーやカメラを変えず、共通ビューだけをfitします。

• 選択レイヤーをリセット: 選択レイヤーを型ごとの初期状態へ戻します。

• 全体を初期状態に戻す: 文書全体を初期3点ボックスへ戻します。

セーブ、ロード、PNG書き出し

セーブ

`.perslab`へ次の状態を保存します。

• レイヤーと順序

• ボックス／ルームの寸法とカメラ

• 投影方式、消失点モード、共有水平画角

• 下書き画像の符号化データと変形

• 表示／非表示、不透明度

• 面、ガイド、グリッドの表示設定

• 共通ビュー

Undo／Redo履歴と操作途中の一時状態は保存しません。

ロード

書出しはversion 8、読込み対象はversion 7／8。version 7は厳格検証後に「レイヤー N」という初期名を補う。再保存するとversion 8になり、旧アプリでは読めない。version 1～6と未知versionは拒否する。CV・SPの表示設定も保存対象。不正JSON、未知key、重複ID、非有限値、過大な画像なども、現在の作業状態を変更せずに拒否する。

レイヤー名の変更と保持

対象レイヤーを選択し、「編集」→「選択レイヤーの名前を変更…」から変更する。名前は1～100文字（Unicodeコードポイント単位）。前後の空白は除去し、空欄・改行・制御文字は使えない。同名も許可する。

名前変更はUndo／Redoに対応し、保存・再読込み、並べ替え、形状変更、選択レイヤーリセットでも名前を保持する。複製は同名を引き継ぐ。全体リセットは初期名に戻る。PNGへ名前の文字を追加する機能ではない。

PNG書き出し

表示中のレイヤーを順序どおりに合成し、専用CanvasでPNGへ書き出します。操作ハンドル、選択枠、レイヤーパネルなどのUIは含めません。

画像下部には次の情報が入ります。

• 投影方式

• 水平画角

• 35mm判換算焦点距離

• CLIP STUDIO用パース値

魚眼投影でも画面と同じ曲線投影を使用し、直線投影専用の換算値は「—（直線投影のみ）」となります。

タッチ操作

「表示・操作」→「UI密度: タッチ」で、タッチ向けの操作密度へ切り替えられます。

• 1本指では、選択中ツールで操作します。

• 2本指では、パン／ピンチズームを行います。

• 3本目の指は誤操作として扱い、進行中の2本指操作を取り消します。

• ペン入力中の掌は、誤タッチ候補として無視します。

狭い画面では、レイヤーパネルを「レイヤー」ボタンからドロワーとして開きます。

追加、並べ替え、表示、不透明度、XYZ寸法へタッチでアクセスできます。

現行仕様一覧

基本情報

| 項目 | 仕様 |
|---|---|
| 製品名 | Perspective Lab |
| 製品version | 2026.09.20.0912 |
| 公開API version | 4 |
| 保存形式 | 書出し: `perspective-lab` version 8、読込み: version 7／8 |
| 投影方式 | 直線投影、等距離魚眼投影 |
| 消失点モード | 1点、2点、3点 |
| 水平画角 | 20.0°～140.0°、0.1°刻み |
| 初期水平画角 | 60.0° |
| レイヤー数 | 1～32 |
| 履歴数 | 最大100件 |

オブジェクト

| 項目 | ボックス | ルーム |
|---|---:|---:|
| 初期寸法 | 2×2×2 | 12×8×16 |
| 各軸の最小 | 1 | 1 |
| 各軸の最大 | 32 | 64 |
| 初期グリッド間隔 | 50 | 50 |
| 最大時のグリッド線 | 372本 | 756本 |
| カメラとの衝突 | near面だけ安全補正 | 壁・床・天井を通過可能 |

描画

| 項目 | 仕様 |
|---|---|
| ボックス表側グリッド | 0.9px、64% |
| ボックス裏側グリッド | 0.55px、30.8% |
| アイレベル／垂直消失線 | 黄土色、実線、1.5px、65% |
| VPハンドル | 半径8px |
| VP中心点 | 半径2.5px、軸色へ黒25%を混色 |
| 面・グリッド・ガイド | 個別に表示切替 |
| PNG | 画面と同じ投影経路、操作UIなし |

ファイルと画像の安全上限

| 項目 | 上限 |
|---|---:|
| `.perslab`ファイル | 48 MiB |
| 下書き画像1ファイルの容量 | 16 MiB |
| 下書き画像1ファイルの最大辺 | 幅・高さとも8,192 px |
| 下書き画像1ファイルの最大画素数 | 24,000,000 px |
| 文書内の全画像データ合計 | 32 MiB |
| 文書内の全画像画素数合計 | 64,000,000 px |
| 文書内の画像ファイル数 | 最大32ファイル（全32レイヤーが別画像の場合） |
| PNG書き出し | 64 Miピクセル |

画像は拡張子だけでなく、ファイル内容、MIME、寸法、符号化データ、実デコード結果を検査します。検査途中で失敗した場合は、文書へ部分適用しません。

仕様上の注意

レイヤーは同一3D空間ではない

各透視レイヤーは独立したカメラとオブジェクトを持ち、最終的に2Dで重ねられます。異なるレイヤー間で奥行きや衝突を計算する機能ではありません。

画角は共有、カメラはレイヤー固有

水平画角と投影方式は文書共通です。カメラ、消失点方向、オブジェクトは透視レイヤーごとに保持します。ドリーズームではアクティブレイヤーのカメラだけを補正します。

ルームに衝突判定はない

壁、床、天井は構図を制限する衝突面ではなく、透視を観察するための片面グリッド面です。意図的に通過できます。

グリッド非表示は形状を変えない

グリッドは寸法から生成する表示要素です。非表示にしても寸法、スナップ、カメラ、保存座標、下書き画像には影響しません。

対応環境の表記は実機確認後に確定します

ブラウザーや入力機器によって、ファイル保存、タッチ、画面サイズの挙動が異なる場合があります。iPad／iPhoneでは、公開URLをSafariで開く場合と、ローカルHTMLをDocumentsで開く場合を分けて確認します。公開時の対応環境は、実機で確認した範囲だけを明記します。

よくある質問

消失点をドラッグできない

無限遠の消失点、魚眼で後方を示す矢印、非表示レイヤーの消失点は操作できません。丸いハンドルであることと、アクティブな透視レイヤーであることを確認してください。

ボックスやルームが見えなくなった

レイヤーの表示状態を確認し、「リセット」→「表示をリセット」を実行してください。これはシーンを初期化せず、表示範囲だけを戻します。

面を消したら線が多く見える

「面を表示」は面塗りだけを切り替えます。輪郭、表側グリッド、裏側グリッドは残ります。グリッドも消す場合は「グリッドを表示」をOFFにしてください。

画角を変えたら別レイヤーの大きさが変わった

画角は全レイヤー共通ですが、ドリー補正はアクティブレイヤーだけに適用されます。これは仕様どおりの挙動です。

ルームの外へ出た

問題ありません。ルームの壁、床、天井は通過でき、外側から内面を見る構図も作れます。

下書き画像を読み込めない

実データがJPG／JPEGまたはPNGであり、次の条件をすべて満たす必要があります。

• 画像1ファイルの容量は16 MiB以下です。

• 幅と高さは、それぞれ8,192 px以下です。

• 画像1ファイルの画素数は、幅×高さで24,000,000 px以下です。

• 文書内に埋め込まれる全画像のデータ合計は32 MiB以下です。

• 文書内に埋め込まれる全画像の画素数合計は64,000,000 px以下です。

• レイヤーはボックス、ルーム、下書き画像を合わせて最大32個です。このため、全レイヤーをそれぞれ別の下書き画像にした場合でも、画像ファイル数は最大32ファイルです。同じ下書き画像レイヤーを複製した場合は画像データを共有するため、別ファイルとしては増えません。

拡張子と実際のファイル内容が矛盾する画像、JPG／JPEG・PNG以外のデータ、破損していてデコードできない画像は拒否されます。1項目でも上限を超えた場合は読み込まれず、現在の文書へ途中まで追加されることもありません。

古い`.perslab`を読み込めない

現行アプリは最新版の保存形式version 6だけを読み書きします。version 1～5は自動移行しません。

学習ツールとして、どう活かすか

このアプリの最大の特徴は、消失点を「適当に置くもの」ではなく、「カメラの向きと画角から決まる必然の結果」 として扱っている点です。

触っているうちに、次の3つの感覚が自然と身につきます。

1. 「消失点は好きな位置に置けない」：2点透視の2つのVPは、画角とカメラの向きで位置が縛られます。「なんとなくこの辺に置いたら絵が歪んだ」という失敗の理由が分かります。

2. 「1点・2点・3点は全部同じ」：カメラを水平に向ければ2点になり、真正面に向ければ1点になり、上下に傾ければ3点になる。一つの連続した現象だと理解できます。

3. 「パースの強さ＝レンズの画角」：望遠にすればパースが弱まり、広角にすれば歪む。頭の知識ではなく、スライダーを動かす手の感覚として腑に落ちます。

このアプリは、手で線を引くための「鉛筆」というよりは、パースの仕組みを観察するための**「高精度な顕微鏡」**です。ぜひご自身の手描きスケッチやアタリと並べて、実験するように遊んでみてください。

ライセンスの要点

• 本プログラムは非商用目的で使用、複製、改造できます。

• 本プログラムの原版／改造版を再配布する場合は、非商用・無償などの条件があります。

• 本プログラム自体の商用利用は禁止されています。

• 本プログラムで作成した生成物は、商用・非商用を問わず利用、公開、配布、販売できます。

• 第三者の画像や権利を含む生成物については、利用者自身が許諾を確認する必要があります。

• 本プログラムは無保証で提供されます。

正式な条件は、アプリの「ヘルプ」→「Perspective Labについて」に表示されるPerspective Lab 非商用ソフトウェア・生成物自由利用ライセンス 1.0の全文を参照してください。

製作者情報

• 原製作者: scarecrowbone（スケボン）

• メール: scarecrowbone@gmail.com

• URL: https://potofu.me/scarecrowbone

気に入っていただけたら、下のボタンからサポートいただけると励みになります！