どこでもロケハン|実在の街をマンガの背景の線画とトーンで描く無料ツール

どこでもロケハンの画面。左に線画とトーンで描いた渋谷の街の3D、右に上から見た地図と場所の欄が並んでいる

行ったことのない街も、マンガの背景の下描きに。

どこでもロケハンは、世界のどこでも、実在の街を3Dにしてマンガの背景の線画とトーンで描くブラウザ用のツールです。地名や住所を入れると、OpenStreetMap の地図データと標高から、建物・道・木・地形を組み立てます。好きな所にカメラを置いて、ロケハン(背景にする場所さがし)をしながら、そのまま下描きにできます。

無料・登録不要。いまも機能を足しているβ版のツールです。作った絵は、地図データの出典を書けば、商用・非商用を問わず使えます。

料金
無料(登録不要)
動作環境
PC・スマホのブラウザ(画面の大きい PC がおすすめ)
場所
世界のどこでも(OpenStreetMap の地図データのある所)
描き方
カラー・カラー+線・線画・線画+トーン(ベタも)
書き出し
PNG・GLB(3D モデル)・共有リンク
画面の言語
日本語・英語・中国語(簡体字・繁体字)・韓国語・ヒンディー語・タイ語・スペイン語
制作
MIYADAIKU
夕宮たいだ

ふぁ……みんな〜、今日は街の背景を手伝ってくれる道具の話だよぉ。
実在の場所を舞台にしたいけど、遠くて行けない……って時に使えるんだぁ。

どこでもロケハンでできること

ひとことで:地名を入れると、その街の3Dができて、マンガの背景の絵になります。

実在の街を3Dで組み立てて、カメラを好きな所に置き、線画・トーン・ベタで描くツールです。姉妹ツールの背景ガチャ(部屋の中)と同じ描き方で、こちらは街の外の景色を受け持ちます。

東京・渋谷、京都・産寧坂、ヴェネツィア・リアルト、ニューヨーク・タイムズスクエアの街を、線画とトーンで描いた4つの絵

世界のどこでも

地名・住所・緯度経度から、その場所の建物・道・川・木・地形を組み立てます。日本の街も、海外の街も同じように作れます。

渋谷の交差点を、目の高さからカラー・カラー+線・線画・線画+トーンの4つの描き方で描いた画像

マンガの背景の描き方

カラー・カラー+線・線画・線画+トーンの4つ。トーンの模様や濃さ、ベタの範囲、輪郭の太さを変えて、マンガの背景らしく描けます。

渋谷の上空から、まわり4km の街と地平線までを線画とトーンで描いた画像

遠くの街並みまで

細かく作る中心のまわりに、遠景(2km・4km 四方の街)と地平線までの地形を足せます。高い所から見下ろす絵にも使えます。

使い方

ひとことで:場所を探して、カメラを決めて、描き方を選んで書き出すだけです。

  1. 「どこでもロケハンを開く」でツールを開きます(はじめは渋谷のスクランブル交差点が出ます)。
  2. 上の欄に、地名か住所、緯度経度を入れて「探す」を押します。候補がいくつかある時は、右の「候補一覧」から選びます。
  3. 「広さ」で細かく作る範囲(200m〜1km)、「遠景」でまわりの街(なし・2km・4km)を選びます。
  4. 3Dの絵の上の「カメラ」で、俯瞰・真上・交差点の目線・中心の道の目線などの候補を選ぶか、ドラッグで回して、写す向きを決めます。
  5. 描き方(カラー・カラー+線・線画・線画+トーン)を選びます。「☀ 光・トーン」のボタンで、光の向き・トーン・ベタを変えられます。
  6. 下の「書き出し」から、「PNG(今の絵)」や「GLB(3D モデル)」で保存します。

場所とカメラは「🔗 リンクをコピー」で、そのまま人に渡せます。

夕宮たいだ

ほよ? 坂の多い町は、ちゃんと坂のまま出てくるんだねぇ。
標高のデータから、地面の起伏も作ってるんだってぇ。

場所の決め方

ひとことで:地名・住所・緯度経度で探すほか、地図のリンクやファイルでも場所を指定できます。

上の欄に地名か住所、緯度経度を入れて「探す」を押すと、見つかった場所が右の「候補一覧」に並びます。1つだけ見つかった時は、すぐに組み立てます。候補一覧の下には、渋谷・京都・ヴェネツィア・ニューヨークなど、見本の場所も入っています。

ほかにも、次のもので場所を指定できます。

  • 地図のリンク:Google Earth・Google マップ・OpenStreetMap のリンクを、上の欄に貼り付けます。Google Earth(ブラウザ版)のリンクなら、見ている向きもそのまま再現します。
  • 緯度経度:十進(35.6595, 139.7005)・度分秒・「北緯…東経…」の書き方が使えます。
  • Plus Code:Google マップの場所のコードです。短いコードには、後ろに地名を付けます。
  • ファイル:Google Earth などで保存した KML・KMZ・GeoJSON のファイルを、📂 のボタンか画面へのドラッグで読み込みます。

右の地図の横の矢印で、となりの範囲へ動けます。3Dの絵の上の「📍 ここを近景にする」は、今のカメラの真下を新しい中心にして、細かく作る範囲を作り直します。遠景に見えている場所を、近くから描きたい時に使います。

カメラとピン

ひとことで:候補から選ぶか、ドラッグで回すか、ピンを置いてカメラを動かします。

3Dの絵の交差点と、右の上から見た地図の同じ場所に、青いピンが立っている画面

右の「上から見た地図」か、3Dの絵の地面をクリックすると、そこにピンが付きます。「カメラをここへ(F)」のボタンか F キーで、カメラの高さと向きはそのままに、ピンの場所へカメラを動かします。「目の高さで立つ」を押すと、ピンの場所に人の目の高さで立ちます。建物の壁をクリックした時は、壁の前の地面にピンが付きます。

カメラの候補は、場所に合わせて作られます(俯瞰・真上・遠景まで見渡す・交差点の目線・中心の道の目線・アオリ・見下ろし)。レンズ(14〜85mm)も変えられます。「縦線をまっすぐ」にすると、ビルの縦の線が傾かない2点透視になります。

マウスやペンでの動かし方は、3Dの絵の下の「操作」で選べます。

操作動かし方
標準ドラッグで回す・右ドラッグで動かす・ホイールで寄る
中ボタンで回す中ドラッグで回す・Shift+中ドラッグで動かす・テンキーの 1・3・7 で正面・横・真上
Alt+ボタンAlt+ドラッグで回す・Alt+中ドラッグで動かす・Alt+右ドラッグで寄る
ペンドラッグで回す・Space+ドラッグで動かす・Ctrl+Space+ドラッグで寄る
立って見回す地面か屋上をクリックしてそこに立ち、ドラッグで見回す・ホイールで前後に歩く
トラックパッド2本指でなぞって回す・Shift+2本指で動かす・つまんで寄る

どの方式でも、ドラッグせずにクリックすると、その場所にピンが付きます(立って見回す方式では、クリックした所に立ちます)。スマホやタブレットでは、指1本で回す・2本指で動かす・つまんで寄る、で動かせます。

マンガの背景にする(線画・トーン・ベタ)

ひとことで:線画とトーンに、ベタの範囲・輪郭の太さ・光の向きを足して描けます。

3Dの絵の上で、描き方を選べます。

  • カラー/カラー+線:色の付いた絵です。物陰の暗さ・遠くのかすみ・空の色も付きます。
  • 線画:輪郭と、窓や階の線だけの絵です。
  • 線画+トーン:線画に、影と物の色の暗さに合わせたトーンを付けた絵です。

「☀ 光・トーン」のボタンを押すと、光とトーンの設定が出ます。

  • 方位・高さ:光の向きです。「実際の太陽」にすると、その場所の、その月・時刻の太陽の向きになります。
  • トーン:影と物の色(固有色)の濃さ、模様(網点のほか、カケアミ・砂目などの模様)、大きさ、不透明度を変えます。
  • ベタ:いちばん暗い所(影の中の暗い物・木の葉の影・窓のガラス)を黒く塗ります。「範囲」を大きくするほど広く塗ります。「白抜き」で、黒の中の窓の枠や建物の角を白い線で見せます。
  • 輪郭:物の外形(空や奥の物との境)の線を、中の線より太くします。
同じ街並みを、ベタ 0%・40%・80% で描いた3つの絵。ベタが増えるほど、木の葉の影や窓が黒くなっている

木は、葉の上がトーン・下がベタの「トーンとベタ」で描きます。「木の描き方」で、外側の輪郭なし・線で描く、にも変えられます。「葉の縁」は、なめらか・ボコボコ・フサフサの3つです。「遠くの窓」は、遠くのビルの窓も小さな四角として残すので、高い所から見下ろした時も街に窓が見えます。

夕宮たいだ

白とトーンとベタの3段階にすると、ぐっとマンガっぽくなるんだぁ。
夕方の太陽にして、ベタを多めにするのもいいよぉ。

街の作り(木・季節・人と車)

ひとことで:季節や人と車の量を選んで、場面に合う街にできます。

表参道の並木道を、春・夏・秋・冬の4つの季節で描いた画像。秋は黄葉、冬は枝だけになっている

右の「作る物」で、街に何を置くかを選べます。

  • 地形の起伏・木・白線・電柱・信号など:それぞれ、出すか消すかを選べます。
  • 近景を細かく:カメラの近くの建物だけ、窓の奥まり・ベランダ・店先と看板・屋上の機械などを形で作ります。
  • 季節:春(桜の花と新緑)・夏・秋(イチョウの黄葉と紅葉)・冬(落葉樹は枝だけ)。
  • 人と車:止まっている人と車の量(なし・少し・多い)です。

建物の高さは、地図データにあればその値(高さか階数)を使い、無ければ用途と広さから推測します。推測した高さは、いちばん下の「🎲 分からない高さを引き直す」で、別の推測に変えられます。

書き出し

ひとことで:PNG・GLB(3D モデル)・共有リンクで、作った街を持ち出せます。

  • PNG(今の絵):長辺 2400・3600・4800px の絵です。「線画は紙を透明に」で、背景を透明にできます。「右下に地図データの出典を入れる」で、出典の文字を絵の中に入れられます。
  • GLB(3D モデル):CLIP STUDIO PAINT(クリスタ)の[ファイル]→[読み込み]→[3D データ]や、Blender などで開けます。「遠景も入れる」にすると、まわりの街も入ります(ファイルがとても大きくなります)。
  • 🔗 リンクをコピー:今の場所・カメラ・描き方を、リンクで人に渡せます。
夕宮たいだ

線画の PNG を下敷きにして描けば、パースの合った背景がすぐ描けるねぇ。
GLB をクリスタに入れて、コマに合わせてカメラを決めるのもいいよぉ。

地図データと出典

ひとことで:OpenStreetMap の地図データを使っているので、絵を公開する時は出典を書いてください。

建物・道・川などは、OpenStreetMap(みんなで作る自由な地図)のデータです。ライセンスは ODbL で、出典の表示が必要です。作った絵を公開する時は、絵の近くか作品の奥付などに「© OpenStreetMap contributors」と書いてください。遠景を入れた絵には「© OpenMapTiles」も書いてください。

  • 標高:日本は国土地理院の標高タイル、ほかの国は Terrain Tiles(AWS のオープンデータ)を使っています。
  • 遠景:OpenFreeMap の地図タイル(OpenStreetMap のデータを OpenMapTiles の形にまとめた物)から作っています。
  • 送るもの:場所を探す時と街を組み立てる時に、入力した地名と範囲(緯度経度)を、OpenStreetMap のサービス(Nominatim・Overpass API)・遠景の地図タイルの配信元・標高タイルの配信元へ送ります。それ以外は送りません。取ったデータは、このブラウザに7日間覚えます。

地図データは、世界中の人が書き足しているものです。建物の高さや形が実際と違う所や、書かれていない建物もあります。

仕組み(作った人のメモ)

ひとことで:地図データの形と高さから3Dを組み立て、線画とトーンはプログラムで描いています。

建物は、地図データの外形を高さ(無ければ推測)まで立ち上げ、屋根・窓・階の線を付けています。カメラの近くの建物だけ、窓の奥まりやベランダなどを形で作り直します(LOD)。木は、樹種ごとの枝分かれの決まりと樹冠の外形から、プログラムで組み立てています(画像生成 AI は使っていません)。地面は標高のタイルから作り、道や歩道の高さの段差も付けています。

線画は、面の向き・奥行き・物の番号の3枚の絵から境目を探して、線にしています。トーンは、光の向き・物の色の暗さ・落ち影から濃さを決めて、網点や模様で描いています。3Dの表示には three.js を使っています。

ツールのプログラムは、AI エージェントの Claude Code と相談しながら作りました。

よくある質問

ひとことで:料金・作った絵の使い方・データの送信などをまとめました。

無料で使えますか?

無料です。登録やログインも要りません。

作った背景は自由に使えますか?

はい。書き出した絵(PNG)や 3D モデル(GLB)は、商用・非商用を問わず使えます。ただし、地図データの決まりで、公開する時は「© OpenStreetMap contributors」の出典を書いてください(遠景を入れた時は「© OpenMapTiles」も)。

どこかにデータが送られますか?

場所を探す時と街を組み立てる時に、入力した地名と範囲(緯度経度)だけを、地図データ・地図タイル・標高の配信元へ送ります。作った絵やカメラの位置は送りません。

どこでも同じように作れますか?

地図データの多い街ほど、細かく作れます。建物の高さが地図データに無い所は、用途と広さから推測した高さになります。

組み立てに時間がかかる時は?

地図データは、OpenStreetMap の公開サーバーから取っています。混み合っている時は、組み立てまで少し時間がかかります。広さを小さくすると速くなります。

スマホでも使えますか?

使えます。ただ、3Dの絵と地図を同時に見られる、画面の大きい PC の方が使いやすいです。

β版とは、どういうことですか?

いまも機能を足している途中のツールです。版が変わると、同じリンクでも絵が少し変わることがあります。残したい絵は、PNG や GLB で書き出しておいてください。

夕宮たいだ

ふぁ……知らない街を歩き回るのって、ちょっとした旅行みたいだねぇ。
いい場所が見つかったら、マンガの舞台にしてみてねぇ。