オケや吹奏楽で役立つ舞台配置図作成アプリを作りました

舞台配置図を作成するWebアプリを開発しました。

ホールの平面図を読み込み、その図面に合わせて椅子、譜面台、楽器、山台などを実寸で配置するアプリです。配置した内容から必要物品の数量を確認でき、PDFやPNGへの出力、3D表示にも対応しています。

画面は、左側のシンボルライブラリ、中央の図面、右側の編集パネルに分かれています。左から配置物を選び、中央の図面へ置き、右側で座標や角度を調整します。位置と寸法はmmで管理しているため、画面を拡大・縮小しても配置物の実寸は変わりません。

もともとは、自分と身内が使うために作り始めた個人開発ツールでした。開発中の画面をXに投稿したところ、多くの方に興味を持っていただき、「使ってみたい」という声もありました。

同じように舞台配置図の作成で困っている方には役立つかもしれないと考え、外部向けにも公開することにしました。

この記事では、実際の舞台図面を使い、図面の読み込みからオーケストラと吹奏楽の配置を作成するまでの流れを説明します。

1.図面を読み込む

まず、ホールから受け取った舞台図面を背景として読み込みます。PNGやJPEGのほか、PDFも使えます。PDFを選ぶと各ページのプレビューが表示されるので、舞台平面図が載っているページを選びます。

読み込んだ図面は透明度を調整でき、誤操作を防ぐために背景レイヤーをロックできます。

この時点では、アプリは図面上の1ピクセルが何mmなのか分かっていません。見た目は表示されていますが、まだ楽器や山台を正しい大きさで置けない状態なので、最初に縮尺を合わせます。

2.縮尺を合わせる

図面の中から、実際の長さが分かっている区間を2点クリックします。

クリックした2点間の実寸を入力します。
図面に「1間」「半間」「3尺」などの表記があれば、そのまま選べます。もちろんmmでの直接入力も可能です。

登録が終わると、画面左下に「1px＝何mm」と表示されます。これ以降、椅子も楽器も山台も、この縮尺を基準に配置されます。たとえば450mm角の椅子を置けば、読み込んだ図面上でも450mm角に相当する大きさで表示されます。

上部の「縮尺確認」でもう一度同じ基準区間を指定すると、入力した基準距離、確認用の測定値、誤差率が表示されます。

3.指揮台と山台

ここからはあくまで舞台図面作成の一例になります。あとはご自由にどうぞ！（？）

最初に指揮台を置きます。左側のライブラリから選び、置きたい場所をクリックするだけです。

ライブラリには椅子、譜面台、鍵盤楽器、打楽器、指揮台、山台などを入れています。同じ記号を続けて置く「連続配置」と、置いた椅子や譜面台を自動で指揮台へ向ける機能もあります。

配置物を選択すると、右側にX座標、Y座標、寸法、角度が表示されます。図面上で動かすほか、数値を入力して位置や向きを調整できます。

山台には一括配置機能があります。並列数と各列の山台の種類、枚数、向き、段高を入力します。600mm、450mm、300mm、150mmのように、後列から段差をつけた組み方も作れます。

入力内容は図面上へプレビュー表示されます。場所や並びを確認し、「配置する」を押すと図面へ反映されます。下の例では、6枚ずつ4列、合計24枚の山台を配置しています。

一括配置したあとも、グループ解除すれば山台は1枚ずつ移動できます。最初に全体をまとめて配置し、舞台図面に合わせて個別に微調整します。

4.オーケストラ配置

弦楽器には配置テンプレートを用意しました。

8型、10型、12型、14型、16型から編成を選び、指揮台を基準にまとめて配置できます。標準配置と対向配置があり、ViolaとCelloを入れ替えた並びも選択できます。

ぶっちゃけ言うと私は管楽器奏者なので、そこまで弦楽器配置に詳しくなく、所属オケでやってた配置や検索して出てきたスタンダードっぽい配置しか入れてないので、弦楽器奏者の方にとっては変かもしれません（ぜひご意見ください！）

配置前に、指揮台から1列目までの距離、列間隔、全体の位置をプレビューで調整します。確定後は、奏者位置や譜面台を個別に動かせます。テンプレートで全体を作ってから、舞台の広さに合わせて必要な場所だけ直します。

椅子を横一列に並べる機能では、脚数、椅子同士の間隔、向き、開始位置を指定します。「各椅子の前に譜面台を配置」にチェックを入れると、椅子と同じ数の譜面台も追加されます。

打楽器は、ティンパニ、バスドラム、鍵盤打楽器などをライブラリから選んで配置します。ティンパニは23、26、29、32インチを分けて登録してあり、必要物一覧でも別々に数えられます。

弦、管、打楽器まで入れた状態がこちら。

背景の舞台図面と重ねたまま編集できるので、袖への通路や反響板、既設の迫りなどを見ながら詰められます。図面を別ウィンドウで開いて見比べる必要はありません。

5.吹奏楽配置

吹奏楽でよく使う円弧配置も、まとめて作れます。

指揮台を基準に、1列目までの距離、列間隔、円弧角度、各列の脚数を入力します。図面上のハンドルで円弧の向きと広がりを調整でき、必要なら各椅子の前へ譜面台も同時に配置します。下の例は6脚、10脚、15脚の3列、合計31脚です。

オーケストラでもそうでしたが、配置後は椅子の円内へ「Fl」「Cl」「A.Sax」などの略称を入れられます。打楽器とコントラバスを追加すると、こんな感じになります。

この例では、配置物が合計144個あります。円弧配置、横一列配置、山台の一括配置で全体を作り、必要な箇所だけ個別に修正します。すべてを最初から手作業で並べるより、配置にかかる作業を減らせます。

6.必要物品を数える

配置した椅子や譜面台、山台、楽器は、画面右側の「必要物一覧」に自動で集計されます。品名と数量が表になり、配置を追加・削除すると集計も更新されます。

この吹奏楽配置では、椅子47脚、譜面台49台、指揮台1台。山台は3×6、4×6、6×6の大きさ別、ティンパニは23、26、29、32インチ別に出ています。

集計範囲は、画面に表示している配置物だけを数える「表示中」と、図面内の全配置物を数える「すべて」から選べます。

舞台図面を作ったあと、備品表を見ながらまた数え直す作業を減らせます。配置物を追加・削除すれば数量も変わるので、「図面は直したけど備品表は古いまま」が基本はなくなります。

7.おまけの3D

配置した図面は3Dでも確認できます。
なおこの機能は遊びで入れたものなので、あんまりちゃんと練ってないです(笑)余力があればブラッシュアップしてみようかと思いますが...…

俯瞰表示では舞台全体を回転・拡大して確認できます。2D画面で椅子を選択してから「この席から見る」を押すと、その椅子の位置へ視点が移動します。視点の高さは座奏、立奏、任意の高さから選べます。

下はから3番トランペットから見た状態です。

奏者のアバターも表示できるため、山台の段高、奏者同士の位置関係、演奏者側から見た配置を大まかに確認できます。修正するときは2D編集へ戻ります。

8.保存と出力

作業中のデータはブラウザ内へ自動保存されます。「ファイル保存」からプロジェクトファイルを書き出すと、別の端末で開いたり、あとから編集を再開したりできます。

完成した図面はPDFまたはPNGで出力できます。PDFはA4とA3、縦と横、1:50、1:100、用紙に合わせる設定から選べます。背景、配置物、ラベル、注釈を出力に含めるかも切り替えられます。

自動保存は同じブラウザ内で利用するためのものです。ブラウザのデータ消去や端末変更に備えて、作業の区切りごとにファイル保存することをおすすめします。

9.有料で公開する理由

このアプリは、もともと自分と身内が使うために作った個人開発ツールです。一般販売を前提にしたサポート体制は用意していません。

開発中の様子をXに投稿したところ、多くの方から興味を持っていただき、実際に使いたいという声がありました。同じように舞台配置図の作成で困っている方には役立つ可能性があるため、身内だけで使う状態から、外部の方も利用できる形にします。

誰でも無料で使えるサービスにして、継続的な保守や個別対応まで引き受ける予定もありません。身内用に作ったツールを、不特定多数へ無料公開する理由も特にない。正直なところ、そこまでやるつもりで開発していませんでした。そのためあくまで個人開発品であることを理解した上で本当に使いたい人に使ってもらえばよいと思い、この記事を500円に設定しました。

購入後に、ベータ版のURLとパスワードを読めるようにします。

現在はベータ版です。商用ソフト並みの完成度も、個別サポートも約束できません。その点まで読んだ上で、それでも使いたい方に買ってもらえれば十分です。

ぶっちゃけ言うと、今まで多くの人がなんらかのツールで舞台図面を作成してきたわけだし、このアプリがなくても問題なく進むと思います。あくまで趣旨を理解した方はどうぞご利用ください的な感じですね。料金はそれに同意したということでお願いします。

URLの転載は禁止転載・第三者への共有はご遠慮ください。URLが広く拡散されるなど、想定していない範囲で利用可能な状態になった場合は、予告なく当該URLでの公開を停止・変更することがあります。

ベータ版について

現在はベータ版です。

図面の読み込み、縮尺合わせ、実寸配置、一括配置、必要物一覧、JSON保存、PDF・PNG出力、3D表示まで実装していますが、最終確認は必ずホール担当者と行ってください。

iPad Safariでの実機操作や、端末ごとの印刷結果についても、まだ確認を続けています。本番で初めて使用せず、事前に保存と出力を試してください。

ベータ版のURLとパスワードは、この先に記載します。