簡易地図エディター
MAP CRAFT

下絵の上に描く、直感的な地図作成ツール

GoogleマップやOpenStreetMapなどを下絵として読み込み、
その上に案内図・ルート・ポイントを自由に描ける
ブラウザで動く簡易地図エディターです。

🗺 アプリを開く → 使い方を見る
10
描画ツール
レイヤー数
8
クイック図形
PNG
書き出し対応

MapCraftとは?

Google マップなどの地図画像を「下絵」として読み込み、その上にルート・エリア・テキスト・アイコンを重ねて描ける、ブラウザ完結の簡易地図エディターです。

MapCraft — map-editor.html
選択
ペン
矢印
矩形
円形
T
テキスト
📍
ピン
メインレイヤー
ルートレイヤー
ポイントレイヤー
🗺
下絵 + 描画レイヤー
目的地
X: 214 Y: 158 ズーム: 100%
線幅
透明度
不透明度
スケール
🏥
🚉
🏫
🅿
🖼
下絵を読み込む
URL / ファイル
📐
スケール調整
拡縮・位置合わせ
✏️
レイヤー描画
ルート・テキスト等
💾
PNGで書き出し
印刷・共有に

主な機能

地図作成に必要な機能をひとつのブラウザページに凝縮。インストール不要でどこでもすぐに使えます。

🗺
下絵の読み込み
Google マップのスクリーンショットや地図画像をURLまたはローカルファイルから読み込み、キャンバスの下敷きとして使用できます。不透明度・スケール・位置を自由に調整可能です。
URL読込 ファイル読込 スケール調整 透明度
✏️
10種類の描画ツール
選択・移動・ペン・直線・矢印・矩形・円形・テキスト・ピン・消しゴムの10ツールを装備。ルートの書き込みからエリアの囲み、文字注記まで自在に描けます。
ペン 矢印 矩形・円 テキスト ピン
🗂
レイヤー管理
レイヤーを追加して情報を分類管理できます。レイヤー単位で表示/非表示の切り替えが可能。例えば「ルート」「施設」「テキスト」を別レイヤーで管理できます。
追加・削除 表示切替 色分け
🎨
プロパティ編集
線の色・塗り色・線幅・透明度・線種(実線/破線/点線)・フォントサイズをリアルタイムで変更。選択中のオブジェクトにも即座に反映されます。
線幅 透明度 線種
📍
クイック図形(8種)
病院・駅・学校・駐車場・飲食店・店舗・ホテル・名所のアイコンをワンクリックで追加。ラベル付きのピンとして地図に配置されます。
🏥 病院 🚉 駅 🅿 駐車場 ★ 名所
💾
PNG書き出し
完成した地図を「エクスポート」ボタン1つでPNG画像としてダウンロード。印刷・Web掲載・メール添付などに活用できます。凡例表示にも対応しています。
PNG出力 凡例表示 印刷対応

描画ツール詳細

左パネルのツールボタン、またはキーボードショートカットで素早く切り替え可能です。

ツール名 説明 主な用途
選択 オブジェクトをクリックして選択・ドラッグで移動 既存要素の移動・編集・削除
移動 キャンバス全体をパン(スクロール)する 広い地図の閲覧・ナビゲーション
ペン マウスドラッグで自由曲線を描く 不規則なルート・エリアの境界線
直線 ドラッグで直線を引く 道路・境界・距離の表示
矢印 先端に矢印がつく直線を描く ルート案内・方向の指示
矩形 ドラッグで長方形を描く。塗りつぶし対応 エリアの強調・施設の範囲
円形 中心からドラッグで円を描く。塗りつぶし対応 半径の表示・注目エリア
T
テキスト クリック位置にテキストを入力。Enterで確定 施設名・注記・タイトル
📍
ピン クリック位置にラベル付きピンを立てる ランドマーク・集合場所の表示
消しゴム クリックしたオブジェクトを削除する 不要な要素の削除

クイック図形(8種)

右パネルのボタン1クリックで地図の中央に挿入。選択ツールでドラッグして位置調整できます。

🏥
病院
🚉
🏫
学校
🅿
駐車場
🍽
飲食店
🛒
店舗
🏨
ホテル
名所

使い方ガイド

5ステップで案内地図を作成できます。

1
下絵を読み込む
ヘッダーの「🗺 下絵を追加」ボタンをクリック。
Google マップなどの地図のスクリーンショットをJPG/PNGファイルとして保存しておき、「ファイルから」タブで読み込むのがおすすめです。
または画像URLを直接入力することもできます。
💡 Googleマップで目的のエリアを表示 → スクリーンショット → ファイルとして読み込む
2
下絵のスケールと位置を調整する
右パネルの「下絵設定」エリアで不透明度・スケール・位置を調整します。
スケールスライダーで地図の大きさを、▲▼◀▶ボタンで位置をずらせます。
不透明度を下げると下絵が薄くなり、描いた内容が見やすくなります。
💡 不透明度 50〜70% が描きやすくておすすめです
3
レイヤーを作成して描き始める
「+ レイヤー追加」ボタンでレイヤーを作成。例えば「ルート」「施設」「テキスト注記」ごとにレイヤーを分けると、後から修正しやすくなります。
左パネルでツールを選び、色・線幅などを設定してからキャンバスに描きましょう。
💡 矢印ツールでルートを、テキストツールで駅名や目印を書き込みましょう
4
クイック図形でアイコンを追加する
右パネル下部の「クイック図形」から病院・駅・駐車場などのアイコンをクリックするだけで地図の中央に追加されます。
その後「選択」ツールに切り替えてドラッグし、正確な位置に配置してください。
💡 ピンツールでクリックした場所にカスタムラベル付きのピンも立てられます
5
PNG画像でエクスポートする
完成したらヘッダー右端の「💾 エクスポート」ボタンをクリック。
現在のキャンバスがそのままPNG画像として自動ダウンロードされます。
印刷・メール添付・Webページへの貼り付けなど、さまざまな用途に使用できます。
💡「📋 凡例」ボタンで凡例オーバーレイを表示してからエクスポートするとより丁寧な地図になります

キーボード操作

キーボードショートカットを活用するとより快適に操作できます。

Delete
選択中オブジェクトを削除
Esc
選択解除・描画キャンセル
Enter
テキスト入力を確定
右クリック
コンテキストメニューを開く
ホイール
ズームイン・アウト
中クリック
キャンバスをパン(移動)
+ / −
ズームボタンで拡大縮小
ビューを初期位置にリセット

右クリックメニュー

オブジェクトを右クリックすると追加操作が使えます。

前面へ(重ね順を上げる)
背面へ(重ね順を下げる)
複製(クローンを作成)
削除