店内マップエディタ
アプリ一覧へ

四角を置いて、名前を書くだけ。
店内マップが描けます。

売り場をひとつずつ四角で並べていくだけの、ブラウザで動く店内レイアウト帳です。 インストール不要でそのまま開いて描き始められ、オフラインでも使えます。

アプリを開く →
店内マップエディタの画面。乳製品売り場・野菜売り場・納豆の3つの四角がグリッド上に配置されている。
乳製品売り場 / 野菜売り場 / 納豆 grid 32px

このアプリについて

店内マップエディタは、キャンバスの上に四角を並べて売り場を配置していく、 ブラウザで動くマップエディタです。棚のレイアウト替えの下書きや、 スタッフに共有するための簡単な店内図づくりに使えます。 特別なソフトのインストールは必要なく、ブラウザで開けばすぐに描き始められます。

できること

売り場を置いて、名前を書いて、向きを整えるまで。

四角を並べて売り場を配置

キャンバスをスワイプするだけで四角が生まれます。角はグリッドにぴったり揃うので、隙間なく並べられます。

中に売り場の名前を書き込む

四角をダブルタップして文字を入力するだけ。縦長の四角には縦書き、横長の四角には横書きで、大きさに合わせて読みやすいサイズに調整されます。

長押し・右クリックで向きを変える

四角の上で長押し(PCでは右クリック)すると、回転や重なり順を変えるメニューが出ます。複数まとめて選んで、一度に回転させることもできます。

キャンバスごと向きを変える

ハンドモードで2本指をひねると、キャンバス全体を90度ずつ回転させて見た目を変えられます。

PNGやJSONで書き出す

完成したマップは画像(PNG)として保存したり、データ(JSON)として保存・読み込みしたりできます。

オフラインでも使える

ホーム画面に追加すればアプリのように起動できます。通信がなくても編集を続けられ、前回の内容は自動で復元されます。

アップデートをお知らせ

新しいバージョンが公開されると、更新するかどうかを尋ねるダイアログが表示されます。

使い方

最初にマップをひとつ作るまでの流れ。

01

ペンシルモードでキャンバスをスワイプし、四角を作る

02

四角をダブルタップして、売り場の名前を入力する

03

長押し(PCは右クリック)で、向きや重なり順を整える

04

設定パネルでグリッドの間隔を好みに調整する

05

保存メニューからPNG画像、またはJSONデータとして書き出す

動作環境

対応環境
モダンブラウザ(Chrome / Safari / Edge など)
インストール
不要(ホーム画面への追加も可能)
オフライン利用
対応(PWA)
データの保存先
端末内に自動保存 + JSON書き出し
グリッド間隔
12〜80px

さっそく試してみる

インストール不要。ブラウザですぐに使い始められます。

店内マップエディタを開く →