Metlivi ブログ

バーチャル卓上ツール(VTT)で安定して使える大型マップ画像の準備方法

大型の卓上マップを使用する場合は、エクスポート前にグリッドとピクセル寸法を設定し、VTTが対応している形式でコピーを保存したうえで、セッション本番前に実際のゲーム内で表示を確認してください。マップの印刷用DPI設定は、VTT上でどれだけ大きく鮮明に表示されるかには影響しません。重要なのはピクセル寸法とグリッド1マスあたりのピクセル数です。本手順ではシーンのセットアップにFoundry VTTを使用し、Roll20と異なる点についても記載しています。

2026年10月15日読了目安:7分Metlivi Editorial Team
セクション 1

1. マップのグリッドとプレイ可能エリアを決める

まずは、マップで想定しているグリッドの種類、縦横のマス数、そしてアートワーク自体にグリッドが描かれているかどうかを確認・記録しましょう。正方形グリッドのバトルマップの場合、1マスあたりのピクセルサイズを決めて、それにマス数を掛け合わせます。たとえば、横30マス×縦20マスのマップで1マスが100ピクセルの場合、サイズは3,000 × 2,000ピクセルになります。この計算を行っておくことで、エクスポート時の目標サイズが明確になり、意図しないトリミングや画像の引き伸ばしにも気づきやすくなります。

Foundryのガイドラインでは、実践的な基準値として1マスあたり100ピクセルを使用し、端が欠けない完全なグリッドで画像の外枠にぴったり合わせることを推奨しています。したがって、1マス100ピクセルで3,000 × 2,000ピクセルの背景画像には、横30マス・縦20マスが含まれている必要があります。なお、DPIやPPIのメタデータはFoundryのシーン描画には影響しません。Foundryのコンテンツ制作スタイルガイド(Content Creation Style Guide)

マップに装飾的な枠線、余白、あるいは端の欠けたマスがある場合は、それらをプレイ可能エリアに含めるかどうかを決めます。枠線は視覚的には効果的ですが、端に半端なマスがあると自動グリッド合わせが難しくなります。唯一の元データを劣化させずに再トリミングやリサイズができるよう、オリジナルのアートファイルは必ず手元に残しておきましょう。

セクション 2

2. 参加者全員の環境で読み込める解像度を選ぶ

ピクセル数を増やせばプレイヤーがズームインした際もディテールを保てますが、画像が大きすぎると転送に時間がかかり、デバイスの描画制限を超えてしまうおそれがあります。Foundryによると、背景の寸法が極端に大きいと画面が真っ暗になる現象が発生する場合があり、その限界値はハードウェアによって異なります(旧型のコンピューターで約8,000ピクセル、新型で約16,000ピクセルが一般的)。同ガイドでは、グリッド1マスあたり100ピクセルなど、より小さいエクスポートサイズを検討することを推奨しています。これらの数値はあくまで目安としての警告であり、数値をわずかに下回っているからといってすべてのデバイスで確実に処理できるとは限らない点に注意してください。Foundryのシーン読み込みトラブルシューティングガイド(Scene-Loading Troubleshooting Guide)

グループが必要とするズーム倍率で十分に鮮明に見える、最小のエクスポートサイズを選びましょう。プレイヤーが基本的に標準倍率でバトルマップを見るのであれば、1マスあたり100ピクセルのグリッドで十分な場合もあります。拡大表示を多用する場合は、可能であればグループ内で最もスペックの低いデバイスを使い、高解像度版のテストを行ってください。Roll20のパートナー向けマップガイドラインでは、100%を超えてズームしたときのドットの粗さを抑えるため、正方形グリッドのマップアートには1マスあたり140ピクセル(グリッドセルの標準スケールである70ピクセルの2倍)が推奨されています。これらはプラットフォーム固有の推奨値であり、普遍的な最低基準ではありません。Roll20のマップアートガイドライン(Map Art Guidelines)

セクション 3

3. VTTが対応しているフォーマットでエクスポートする

塗りの質感がある細かなマップの場合、WebPを使用すれば適切な視覚品質を維持したままファイルサイズを削減できます。FoundryはWebPをサポートしており、画質とファイルサイズのバランスが良いフォーマットとして推奨しています。ただし、ドキュメントにはWebPのデコードによりクライアント側の処理負荷が増える点も記載されています。JPEGも不透明で巨大なアートワークの選択肢となりますが、非可逆圧縮によって目に見えるノイズ(アーティファクト)が発生することがあります。PNGは非可逆圧縮を行わないため元の画像データを完全に保持できますが、大きなシーン背景ではファイルが重くなり転送に時間がかかる場合があります。フォーマットを決定する前に、プレイヤーが実際に使用する拡大倍率でエクスポートした画像を比較検討してください。Foundryのメディア最適化ガイド(Media Optimization Guide)

すべてのVTTが同じファイルに対応していると思い込まず、対象プラットフォームが受け入れているフォーマットを確認してください。Roll20の卓上機能概要では卓上に配置する画像としてJPGとPNGが挙げられていますが、FoundryはWebPを含むより幅広いフォーマットに対応しています。そのため、Foundryに適したWebPファイルであっても、Roll20用にはJPGやPNGでエクスポートし直す必要がある場合があります。Roll20の卓上概要(Tabletop Overview)

セクション 4

4. マップとグリッドの整合性を保つ

目に見えるグリッド線が描かれていないマップの場合は、意図した寸法を維持し、それに合わせてVTT側のグリッドを設定します。Foundryでは、シーンの背景画像を選択すると画像から自動的にシーン寸法が設定されます。壁、光源、コマ(トークン)、その他の配置要素を追加する前に、必ずグリッドサイズを設定してください。後からグリッドサイズを変更すると、配置済みの要素の位置がずれてしまう可能性があるとFoundryは警告しています。Foundryのシーンガイド(Scenes Guide)

あらかじめグリッドが描かれているマップの場合は、マス目を数え、画像の幅または高さを対応するマス数で割ります。たとえば、幅が3,080ピクセルで横22マスのマップなら、1マスあたり140ピクセルとなります。縦方向の計算も必ず行ってください。幅と高さで1マスあたりのピクセルサイズが異なる場合、画像が歪んでいるか、余計なトリミングがされているか、あるいは正方形以外のグリッドが使用されている可能性があります。Foundryにはグリッドオーバーレイを既存のグリッド線に合わせる「グリッド調整ツール」が用意されています。また、Roll20にも正確な寸法やトリミング範囲が不明なマップ向けに「グリッドに合わせる(Align to Grid)」ツールがあります。Foundryのシーンガイド(Scenes Guide)、Roll20のマップ配置・調整ガイド(Placing and Aligning Maps Guide)

セクション 5

5. ディテールを追加する前にアップロードしてシーンを設定する

マップ用の新しいシーン(またはページ)を作成し、エクスポートしたファイルをアップロードして、シーンやページの寸法を画像のプレイ可能エリアに合わせます。Foundryでは、シーン設定で背景のパスと画像の寸法を確認します。寸法を手動で変更する場合は、画像のアスペクト比を維持してください。グリッドの種類とサイズを設定し、印刷済みグリッドの微調整が必要な場合は配置のオフセットを調整します。Foundryのグリッドは画像の左上隅を起点とするため、最初のマスの前に余白がある場合は位置調整が必要になることがあります。

Roll20では、画像をマップレイヤーにアップロードし、「ページ設定」と画像の「寸法の指定(Set Dimensions)」オプションを使用して、想定する単位やピクセルサイズに合わせます。グリッド付きマップの場合、同ガイドではページをアートワークのサイズに切り詰める前に、まず卓上のグリッドにマップを合わせることが推奨されています。Altキーを押しながら移動や拡大縮小を行うと、グリッドへのスナップを無効化できます。位置合わせが完了したら、誤操作で動いてしまわないようにマップ画像の位置をロックしてください。Roll20のマップ配置・調整ガイド(Placing and Aligning Maps Guide)

極端に大きなファイルを準備する前に、アカウントのアップロード制限を確認しておきましょう。Roll20のマップ調整ドキュメントによると、1アセットあたりの上限は無料ユーザーで10MB、PlusおよびPro加入者で20MBとなっています。制限は変更される可能性があるため、アップロードに失敗した場合はプラットフォームの最新ドキュメントを確認してください。ファイルが上限を超えている場合は、ピクセル寸法を下げるか圧縮率を調整し、新たにエクスポートした画像にぼやけや圧縮ノイズが生じていないか確認します。

セクション 6

6. 実際の卓上スケールでマップをテストする

可能であれば、プレイヤー視点または別のブラウザセッションでシーンを開いてみてください。画像が正しく読み込まれるか、プレイ可能エリア全体が表示されているか、コマが意図したマスにスナップするかを確認します。中央付近と端のいくつかのマスを比較してください。ある角では合っているのに別の場所でずれている場合、画像が歪んでいるか、グリッドの間隔が均一でない可能性があります。細かいディテールや文字ラベルをズームインして確認し、さらにズームアウトして全体の表示をチェックします。

Foundryでシーンが真っ黒になる場合は、背景画像の寸法がハードウェアの許容量を超えていないか確認してください。背景が灰色または空白になっている場合は、Foundryが設定された画像パスを見つけられていない可能性もあります。読み込みはできるもののグリッドがずれている場合は、壁を描いたり他のシーン要素を配置したりする前に、グリッドサイズや位置合わせを修正してください。後から追加する要素はシーンの配置設定に依存するためです。セッションをより安定して進めるために、元の画像が重かったりプレイヤーのデバイスで読み込めなかったりした場合に備えて、低解像度のエクスポート版も手元に用意しておくと安心です。

信頼性の高いマップとは、使用するVTTに適した形式でエクスポートされ、アートとグリッドが一致し、参加者のデバイスで正常に読み込まれて視認性が保たれるマップのことです。別のシーンやプラットフォームへ移行する際に同じセットアップを再現できるよう、最終的なピクセル寸法とグリッドスケールはマップファイルと一緒に記録しておきましょう。

セクション 7

参考資料

関連記事

このテーマをさらに見る