攻略サイトのマップってどう描くんだろう？な話
公開 2023/10/23 19:17
最終更新
2025/10/06 22:34
私は
ライブアライブ（リメイク版） 攻略メモ帳
https://livealivem.stars.ne.jp/
というゲーム攻略サイトをやっているんですが、RPGの攻略サイトといえばマップ画像がつきものです。
逆転裁判攻略
http://www.ne.jp/asahi/game/gyakusai/
こっちもやってますが、RPGではないのでマップ画像は必要ない。
なので本格的にマップ画像作らなきゃとなったのはライブアライブが初めて。
さて、マップ画像ってどうやって作るんだろうな？ と。
スーファミ版なら、基本的に2次元なので、見たままをペイントソフトか何かで描いてしまえば良いだけなので悩むことはありません。
注釈を入れるために文字入れができるペイントソフトが必要ですが、文字入れができるペイントソフトはフリーから有料までたくさんあるので、慣れているソフトを使えばいいだけです。
私は「SAI Ver.2」をVer.1時代から愛用していますが、ただダンジョンとかのマップが描きやすいかどうかというと、ちょっとわからない……
動作が軽く、定規機能や2値ペン（ドット絵などが作りやすい）機能があり、直線やマス目もそれなりに作りやすくはありますが。
http://www.systemax.jp/ja/sai/devdept.html
無料ならメディバンペイントとかになりますか。GIMPだとちょい重いかな。
ファミコン・スーファミなら、もしかするといわゆるエクセル方眼紙だとマス目を作りやすいかもしれません。マップ完全再現は大変そうだけど。
（小学生の頃、リアルな方眼紙でドラクエなどのマップを作ったことがあったりなかったり）
問題は昨今の3Dマップ。
3Dのゲームでもゲーム内で2次元マップが表示されるならいいのですが……
例えば「聖剣伝説3 TRIALS of MANA」（こちらも「ライブアライブ」と同じく良リメイク！）だと、
※掲載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。
このスクリーンショットを元にして簡単にマップが作れるし、もしダンジョン内の仕掛けを具体的に説明したいならその都度スクリーンショットでも載せればいいし。便利だなあ。
問題はリメイク版「ライブアライブ」で、このゲームはゲーム内マップがない（厳密にはシナリオによってはあるんだけど、SF編以外は『とても大まかな図』でしかない）。レーダーはあるけどそこからマップを起こすのは無理。
じゃあスクリーンショットやら動画撮影するかして、地道に作るしかないじゃんと思うのだけど、
この通り、横幅はともかく奥行きがわかりにくくて……
どうマップ作ったらいいんじゃよ……
そもそも真上からの図にすべきか、やや斜めからの図（ゲームでの視点ほぼそのまま）にすべきかも判断できん……
上は魔王山という重要なダンジョンで、段差やら何やらでちょっとわかりにくいから頑張ってマップ作らなきゃならなかったのですが、結局何をしたかというと、
全ての場所のスクリーンショットを撮影して大雑把に繋ぎ合わせて、大まかにマップ全体を把握してからなんとかした。
最終的にはSAIで描きました。
完成形は単純に見えるけども、このマップだけで何日かかったかわからない……。
それとは別に、建物内部なんかだともうちょっと正確な上面図が描けないかな？
と思って色々探した結果、使ったのはこちら。
draw.io
https://www.drawio.com/
ウェブアプリ・デスクトップアプリどちらもあります。
最初はフローチャートを描くソフトを探していて見つけたのですが、こちらはフローチャート以外にも「フロアプラン」、つまり簡単な図面も描けるのです。
しかも壁の長さとかにょいーんって伸ばしたり縮めたりが簡単なので、試行錯誤しながらRPGのマップを描くのにちょうど良い。
まぁ、もうちょっとパーツ色々あったらいいなとかは思いますが、無料で使えるんで。
上はdraw.ioで描いたルクレチア城。マップのマス目数えながら描いた。この後pngエクスポートして手を加えています。
上はdraw.ioで骨格描いてからSAIで色塗りと文字入れをしたもの。
各所のパーツが繋がらなくて、多少うさんくさいマップになっています。だいたいは合ってるから気にしない！
幕末編だと真上からの図だと説明しきれないので（上だと壁にかかった掛け軸が抜け道になっているのだけど、そこは上面図だと表現しきれない）、適宜説明を入れるしかないですね。
今どきはスマホでウェブサイトを見る人の方が多いでしょうから、解像度が高くキレイな画像を載せた方が良いだろうってことで、基本、色数落としてPNGにしています。
画像変換ソフトも色々と試した結果、「Caesium Image Compressor」に落ち着きました。日本語対応しています。
Caesium - Image Compressor
https://saerasoft.com/caesium
そこそこの画質のまま画像サイズはかなり落としてくれます。
アイコンとかロゴはSVGを使うとスマホでもキレイに見えるので使っていますが、これはまた別の話なので別の記事でやりますか。
……とまぁ、結局、「攻略サイトってマップをどうやって描いてるんだろう」の疑問は解決しないまま、試行錯誤していましたという話でした。有識者の方教えてくだされ～。
ライブアライブ（リメイク版） 攻略メモ帳
https://livealivem.stars.ne.jp/
というゲーム攻略サイトをやっているんですが、RPGの攻略サイトといえばマップ画像がつきものです。
逆転裁判攻略
http://www.ne.jp/asahi/game/gyakusai/
こっちもやってますが、RPGではないのでマップ画像は必要ない。
なので本格的にマップ画像作らなきゃとなったのはライブアライブが初めて。
さて、マップ画像ってどうやって作るんだろうな？ と。
スーファミ版なら、基本的に2次元なので、見たままをペイントソフトか何かで描いてしまえば良いだけなので悩むことはありません。
注釈を入れるために文字入れができるペイントソフトが必要ですが、文字入れができるペイントソフトはフリーから有料までたくさんあるので、慣れているソフトを使えばいいだけです。
私は「SAI Ver.2」をVer.1時代から愛用していますが、ただダンジョンとかのマップが描きやすいかどうかというと、ちょっとわからない……
動作が軽く、定規機能や2値ペン（ドット絵などが作りやすい）機能があり、直線やマス目もそれなりに作りやすくはありますが。
http://www.systemax.jp/ja/sai/devdept.html
無料ならメディバンペイントとかになりますか。GIMPだとちょい重いかな。
ファミコン・スーファミなら、もしかするといわゆるエクセル方眼紙だとマス目を作りやすいかもしれません。マップ完全再現は大変そうだけど。
（小学生の頃、リアルな方眼紙でドラクエなどのマップを作ったことがあったりなかったり）
問題は昨今の3Dマップ。
3Dのゲームでもゲーム内で2次元マップが表示されるならいいのですが……
例えば「聖剣伝説3 TRIALS of MANA」（こちらも「ライブアライブ」と同じく良リメイク！）だと、
※掲載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。
このスクリーンショットを元にして簡単にマップが作れるし、もしダンジョン内の仕掛けを具体的に説明したいならその都度スクリーンショットでも載せればいいし。便利だなあ。
問題はリメイク版「ライブアライブ」で、このゲームはゲーム内マップがない（厳密にはシナリオによってはあるんだけど、SF編以外は『とても大まかな図』でしかない）。レーダーはあるけどそこからマップを起こすのは無理。
じゃあスクリーンショットやら動画撮影するかして、地道に作るしかないじゃんと思うのだけど、
この通り、横幅はともかく奥行きがわかりにくくて……
どうマップ作ったらいいんじゃよ……
そもそも真上からの図にすべきか、やや斜めからの図（ゲームでの視点ほぼそのまま）にすべきかも判断できん……
上は魔王山という重要なダンジョンで、段差やら何やらでちょっとわかりにくいから頑張ってマップ作らなきゃならなかったのですが、結局何をしたかというと、
全ての場所のスクリーンショットを撮影して大雑把に繋ぎ合わせて、大まかにマップ全体を把握してからなんとかした。
最終的にはSAIで描きました。
完成形は単純に見えるけども、このマップだけで何日かかったかわからない……。
それとは別に、建物内部なんかだともうちょっと正確な上面図が描けないかな？
と思って色々探した結果、使ったのはこちら。
draw.io
https://www.drawio.com/
ウェブアプリ・デスクトップアプリどちらもあります。
最初はフローチャートを描くソフトを探していて見つけたのですが、こちらはフローチャート以外にも「フロアプラン」、つまり簡単な図面も描けるのです。
しかも壁の長さとかにょいーんって伸ばしたり縮めたりが簡単なので、試行錯誤しながらRPGのマップを描くのにちょうど良い。
まぁ、もうちょっとパーツ色々あったらいいなとかは思いますが、無料で使えるんで。
上はdraw.ioで描いたルクレチア城。マップのマス目数えながら描いた。この後pngエクスポートして手を加えています。
上はdraw.ioで骨格描いてからSAIで色塗りと文字入れをしたもの。
各所のパーツが繋がらなくて、多少うさんくさいマップになっています。だいたいは合ってるから気にしない！
幕末編だと真上からの図だと説明しきれないので（上だと壁にかかった掛け軸が抜け道になっているのだけど、そこは上面図だと表現しきれない）、適宜説明を入れるしかないですね。
今どきはスマホでウェブサイトを見る人の方が多いでしょうから、解像度が高くキレイな画像を載せた方が良いだろうってことで、基本、色数落としてPNGにしています。
画像変換ソフトも色々と試した結果、「Caesium Image Compressor」に落ち着きました。日本語対応しています。
Caesium - Image Compressor
https://saerasoft.com/caesium
そこそこの画質のまま画像サイズはかなり落としてくれます。
アイコンとかロゴはSVGを使うとスマホでもキレイに見えるので使っていますが、これはまた別の話なので別の記事でやりますか。
……とまぁ、結局、「攻略サイトってマップをどうやって描いてるんだろう」の疑問は解決しないまま、試行錯誤していましたという話でした。有識者の方教えてくだされ～。
