ソード・ワールド2.5の上級戦闘ボード作成ツールの使い方(基本編)・製作報告
はじめに
https://yuukumu.github.io/battleBoardGenerater-sw2.5/
この記事は私が作成した上記リンクからアクセスできるツールについて、使い方と使用例を解説し、ついでに製作裏話を書いている記事です。
ざっくりとどんなツールなのか解説すると「ソード・ワールド2.5の上級戦闘
ボードに使える、線と数字だけの透過画像を出力できるツール」です。
ソドワのために作ったツールではありますが、ほかのTRPGで距離を管理して戦闘したいときにも使えるかもしれません。
便利なところ
・好きな長さ、好きな線の間隔と太さ、好きな色で上級戦闘の目盛りを作成できる。
・透過画像だから、それを好きな画像の上に乗せて使える。
説明書を読まなくても使えるツールであることを目指して作ったので、使い方に詰まるまでは説明は読まなくても大丈夫です。
万が一使い方に詰まって解説が必要になったときは、目次から気になる部分を読んでください。
ただ、画像は「数字の縁取り」で紹介しているもの以外、古い版のものになっています。
画像と合わせる方法(プレビュー完成後)
ココフォリア上で画像と合わせる
ココフォリアの使い方自体はもっと詳しい解説をしてくださっている方がいるので解説しません。
まず、プレビューを右クリックして名前を付けて保存するだけで透過画像がダウンロードできます。
次に、ココフォリアに「戦闘ボードの背景にしたい画像」と「さっきダウンロードした透過画像」をスクリーンパネルやマーカーパネルとしてアップロードします。
(ドラッグアンドドロップしたらスクリーンパネルになりました。しかし、特定のシーンでだけ出したい場合はマーカーパネルにするとよいでしょう)
「戦闘ボードの背景に使える画像」は別のところで用意しておいてください。
最後にサイズ調整や位置調整をすれば、それだけで戦闘ボード完成です。うっかり戦闘ボードが動かされてしまわないよう、配置固定などお忘れなく。
ローカル環境で画像と合わせる
まず、戦闘ボードの背景にしたい画像を「ペイント」やその他お好きなペイントツールで開いてください。
次に、プレビューを右クリックして「画像をコピー」します。画像を使いまわしているのでカーソルが「名前を付けて画像を保存」に合っていますが、選択すべきは「画像をコピー」です。
最後に、ペイントツールに戻って、コピーした画像をCtrl+Vで貼り付けて、コピーされた画像を囲っている四角形の角をもってサイズを調整して完成です。あとはいつものペイントツールの操作と同じで、「ファイル」などから作った画像を保存しましょう。
基本設定
長さ(メートル)
何メートルの戦闘ボードを作りたいか、ってところです。
長さに対応した数字と線が出力されます。また、最初に0以外の数字も指定できます。使用例の画像は0から始めているものしかありませんが、左端の数字を好きな数字から始めることができます。
たとえば、30mと10mで指定したものはそれぞれこのようになります。好きな長さの戦闘ボードができますね。noteの白い背景でも見やすいように線と数字の色も黒に変えていますが、そちらのやりかたは次の項目で紹介します。
狭い洞窟での戦闘を演出することもできますし、長さ100mの様子がおかしい戦闘ボードを作ることもできます。
色の設定
線や数字の色を選ぶことができます。
・右のほうにあるカラフルなボタンを押すとその色が選択される。
・基本色という文字のすぐ右にある四角を選択すると、ボタンに無い色も自由に選ぶことができる。
自由に選んだ色でもRGBの数値がわかります。なので、線のほうで色を感覚で選んでから、数字のほうでは線で選んだRGBと同じになるように数値を入力すれば、オリジナルの色でも線と数字で色をそろえることができます。
線と線の間隔
線と線の間の幅を決めます。
幅100とかにしたら結構広くなって、大型モンスターも線の間に収めやすくなりますし、メートルの数字が多くなるような長い戦闘ボードを作りたいときに幅30とかにしてコンパクトに収めてもいいでしょう。
ボードの縦幅
戦闘ボードの縦の長さ、つまり、線の縦の長さを決めます。
縦横比を考えてちょうどいい長さにする、人数が少ないときに短くしてコンパクトに収める、画像の縦横比に近づけてきれいにするなどがいいと思います。
正直、数字は多少引き伸ばしちゃっても読めるので、私なら線と線の間隔や縦幅はなんとなくそれっぽく雑に設定して、ココフォリアやペイントであとで画像を引き延ばして調整します。
戦闘ボードを縦に長くしてから横線を引いて上下で分けて、上に冒険者陣営、下に敵陣営を配置するという使い方なら、同じ数値の軸に何人もキャラがいても誰がどの陣営かわかりやすいので、そういう使い方なら縦に長い戦闘ボードは有用かと思います。
縦長の戦闘ボードを作って上下に三分割して、三つ巴の上級戦闘をやるのも面白いかもしれません。
線の太さ
線の太さが変わります。
線の見えやすさと背景画像の見えやすさでバランスを取れるような太さにするとよいでしょう。最初に入力されている「4」は個人的におすすめするバランスの良い太さです。
ただ、4未満にすると背景画像がより見やすくなりますし、
4以上にするのも線が見えやすくなるということで、好みで決めるのがよいでしょう。
数字の縁取り
数字に縁取りができます。単色の数字そのままでは、数字を視認することが難しい背景画像が結構ありますが、縁取りすればもう大丈夫！
数字と縁取りの色合いを工夫すれば、数字が見づらくてセッションがやりにくいという状況を減らせるでしょう。
限界突破
それぞれの機能には一応は数値の上限をもうけていますが、矢印キーやクリックでの増減ではなく、直接数字を入力すれば上限を無視できる仕様になっています。簡単な修正をサボっているともいう。でもリミッター解除、限界突破ってロマンだよね。ローカルで処理させるなら問題ないし残しておきたいよね。ぶっ壊れた戦闘ボードのプレビューが出てきて楽しいよ。
まあそんな感じでいじっていて面白いことになりますが、ふざけた戦闘ボードでセッションして怒られても一切責任は持ちません。
製作の裏話
機能の追加予定
ソード・ワールドが楽しくて最近GMを始めていまして。
上級戦闘をやりたくなったときに、長さやサイズを自由に調整できる戦闘ボードがあればちょっと便利になるだろうなーってことで自分用に作ったものが今回のツールの原型となっています。
そこから簡単に操作できるように、より便利になるように隙間時間で少しづつ調整してこうなりました。
そんな感じで善は急げということで基本の機能だけ作って公開しましたが、いくつか切り捨ててしまった部分があるので、機能追加をしたいです。特に、一定の長さごとに線の色を変えたり数字の色を変えたりしてわかりやすい目印をつけることができる機能や、数字を縁取り文字にして見やすくする機能とかを追加してみたいと考えています。追加がいつになるかは気分次第ですが。
ちょっとだけ感想
久しぶりに実用性があるものを作れて満足です。作り始める前はもう少し苦戦するかと思っていましたが、HTMLやJavaScriptにもともと用意されている機能が強かったのと、GitHub Pagesの仕組みが親切だったおかげでスムーズに作り終えることができました。
ページ公開はGitHub、説明書はNote、機能は<canvas>や<input>要素に頼っているようにサービスに頼り切った開発になっているので、これらのサービスの開発者にひれ伏して感謝します。需要があることを確認させてくれたdiscordのGMたちにも全力で感謝です。
更新
2026/2/15
レベルアップしてLv3！
機能を追加しました。また、今後の変更や可読性のため、機能に関係ない部分でもコードを修正しました。
・開始地点を選択できるようになりました。0mからではなく、好きな数字からカウントができます。これにより、1から数字が始まるボードを使いたい派にも対応。また、ギミックのあるマップを作りやすくなりました。たとえば、1から10mまでのボードと、20から30mまでのボードを用意して、幅10mの崖(ここには戦闘ボードを置かない)を挟んで戦うなど。ギミック発動で通れるようになったら、崖のあったところに10から20mまでのボードを持ってきて間に挟むなんてこともできます。
・数字を太字にして見やすくしました。
・数字や枠線をふち取りして見やすくできるようになりました。(基本設定)
・アップデートで、主に「長さ(メートル)」の機能変更に伴い本記事の説明を変更。