トップ › 技術ブログ › パソコンが苦手でも間取り図を作れるように

パソコンが苦手でも間取り図を作れるように — MadoLift の設計と仕組み

間取り作成（MadoLift）2026年10月21日Gratias 開発チーム

物件のチラシや店頭の資料に載っている間取り図は、不動産会社の方が日々作っているものです。ところが、間取りを描けるソフトの多くは設計者向けで、画面に専門用語が並び、操作も覚えることが多くあります。MadoLift は、ブラウザで部屋を囲んで描き、ドアや窓、キッチンやお風呂を置くと、3D の確認と募集図面ふうの間取り図の画像まで作れるソフトです。

この記事の前半では「パソコンに詳しくない方が迷わず使える」ために決めたこと、後半では間取りのデータの持ち方と、画像を描く仕組みを紹介します。

最初の利用者は、パソコンに詳しくない不動産会社の方

MadoLift は、もともと工務店や設計の仕事でも使えるよう、壁量の計算や概算見積もりといった専門的な機能を積み上げてきました。しかし最初に使っていただきたいのは、パソコンの操作にあまり慣れていない不動産会社の方です。そうした方にとって、意味の分からない用語や、知らないと見つからない操作は「無い機能」と同じです。

そこで、機能を増やすことよりも、次の 4 つを優先しました。

• 画面の言葉を平易にする
• マウスを載せたら、すぐに説明を出す
• 保存を忘れても、見ているとおりの結果を出す
• 不動産の仕事でそのまま使える間取り図の画像を、いちばん丁寧に作る

編集画面の左上には「はじめかた」として、部屋を描く → ドア・窓を付ける → キッチン・お風呂・トイレを置く → 間取り図を保存する、の 4 つの手順を出し、済んだものに印が付くようにしています。

言葉を平易に、一覧は「家のどこで使うか」で分ける

建具や設備の名前には、業界の言い方がそのまま使われがちです。たとえば「引違い窓」は、設計に携わる方には当たり前でも、初めての方には形が浮かびません。MadoLift では名前に加えて「横に引いて開ける、いちばん普通の窓」という説明を添えています。

設備・家具の一覧も、メーカーのカタログのような分類ではなく、「水まわり → キッチン → システムキッチン」のように、家のどこで使う物かを先に選ぶ並びにしました。それぞれの項目には「流し台とコンロが一体になった台所。壁付けの I 型・L 型、壁から離して置くアイランド・ペニンシュラがあります。」のような、何に使う物で、どう置くかの短い説明を持たせています。

マウスを載せると、すぐに説明が出る

ブラウザには、要素の上にマウスを止めると小さな説明を出す仕組み（title 属性）があります。手軽ですが、出るまで少し待つ必要があり、文字が小さく、改行もできません。パソコンに不慣れな方ほど「待てば出る」ことに気付きにくいため、MadoLift では説明の表示を自前で作りました。

// マウスが載ってから 250ms で出す（一覧をなぞるように動かしたときにちらつかない程度）
const show = (element) => {
  if (clicked.current) return;           // クリックした直後は出し直さない
  if (timer.current) clearTimeout(timer.current);
  timer.current = setTimeout(() => setAnchor(element.getBoundingClientRect()), delay);
};

説明の箱は画面に固定（position: fixed）して、ページの最上位に描いています。左の一覧はスクロールする箱の中にあるため、その中に説明を置くと箱の外にはみ出した部分が切れてしまうからです。右にはみ出すときは左側に、下にはみ出すときは上へずらして出します。

保存を忘れても、見ているとおりの結果を出す

「保存してから書き出す」という手順は、慣れた人には当然でも、忘れやすいものです。保存を忘れたまま画像を作り、少し前の間取りが出てきたら、利用者は何が起きたのか分かりません。

MadoLift では、編集の手を止めてから 0.9 秒たつと自動で保存し、3D も作り直します。さらに、間取り図の画像を作るときは、保存していない変更があればその場で先に保存してから描きます。

// 間取り図を作る前に、保存していない変更があれば先に保存する
let target = lastBuildingId;
const inFlight = savingRef.current;               // 保存の途中なら、それを待つ
if (inFlight) target = (await inFlight.catch(() => null))?.id ?? target;
if (!readOnly && usePlan.getState().dirty) {
  target = (await saveNow()).id;
}
const { blob, filename } = await api.fetchFloorplan(target, { /* 形式・階・物件の情報 */ });

保存の途中で書き出しを押した場合も、その保存が終わるのを待ってから描きます。また、自動保存を待つ間に別の画面へ移ったときに編集が消えないよう、画面を離れるときにも保存を送り出しています。

間取りのデータの持ち方 — 壁の芯線と、その上の窓

ここからは仕組みの話です。MadoLift は間取りを、画面の絵ではなく「壁の芯線のつながり」として持っています。1 つの階は、点（壁の芯線が交わる所）、辺（点と点を結ぶ壁）、開口（ドアや窓）、部屋の 4 種類のデータでできています。

• 壁：2 つの点を結ぶ芯線に、厚さ（既定 120mm）と高さ（既定 2.4m）を持たせます。内側と外側の仕上げも別々に持てます。
• 開口：どの壁の上にあるかと、壁の端から開口の中心までの距離、幅・高さ・床からの高さで表します。
• 部屋：自分を囲む壁の一覧と、部屋の種類（LDK・和室・浴室など）を持ちます。種類が決まると、天井の高さや床の仕上げの初期値が入ります。

@dataclass(slots=True)
class Opening:
    id: str
    edge_id: str        # どの壁の上にあるか
    offset: float       # 壁の端から開口の「中心」までの距離 (m)
    width: float
    height: float
    sill: float = 0.0   # 床から開口の下端までの高さ (m)
    type: OpeningType = OpeningType.DOOR
    style: str = ""     # 片開き・引違いなど。平面図の記号の描き分けに使う

窓の位置を「端からの距離」ではなく「中心までの距離」で持っているのは、画面で窓の幅を変えたときに、窓の位置が動かないほうが操作しやすいためです。

利用者が描く単位は壁ではなく「部屋」です。四角を描くと壁が 4 本できますが、隣の部屋と接する所でそのまま壁を足すと、同じ場所に壁が 2 枚重なってしまいます。そこで部屋を足すたびに、すべての線をその上に載っている点で切り分け、同じ 2 点を結ぶ線を 1 本にまとめ直します。描く位置は 910mm（半分の 455mm も可）の目盛りに吸い付くので、座標はぴったり一致し、隣の部屋との壁は自然に 1 枚になります。

壁を立体にして、窓の穴を開ける

3D にするときは、まず壁の芯線ごとに、厚さぶん左右に広げた細長い四角を作り、平面の図形として全部を足し合わせます（図形の計算には Shapely を使っています）。角の接ぎ目を個別に処理しなくても、足し合わせると自然につながります。高さの違う壁が混ざるときは、高さごとに分けて押し出します。

押し出しと穴あけには manifold3d を使っています。壁の平面形は「外周から部屋を抜いた形」なので、必ず穴を持ちます。開発の途中で、穴のある形を別の方法で押し出すと立体として壊れた（閉じていない）形になることが分かり、立体として正しい形を保ったまま計算できる manifold3d に揃えました。窓やドアは直方体として壁から引き算します。このとき直方体を壁の厚さより両側に 5cm ずつ長くしておき、確実に貫通させています。貫通しきらないと薄い面が残り、ウォークスルーで画面がちらつく原因になるためです。

募集図面ふうの間取り図を描く

編集画面の平面図は作図のための絵で、目盛りや寸法の補助線、選択の枠が混ざっています。お客様に渡す間取り図は別物と考え、サーバ側で描き直しています。描画は Python の Pillow、日本語の文字は Noto Sans CJK です。

募集図面でよく見る約束ごとを、決まりとしてコードに書いています。

• 床は用途で塗り分けます（居室は木の色、和室は畳の色、水まわりは水色、玄関の土間は灰色）。
• 壁は塗りつぶした太い帯にし、開口の所は壁を抜いて建具の記号を描きます。
• 設備（キッチン・浴槽・便器・洗面台・洗濯機など）は記号で描き、家具は既定では描きません。
• 方位、各階の床面積、延床面積を添えます。白黒の図も選べ、FAX や白黒のコピーで床がまだらにならないよう、色を灰色の濃さに置き換えます。

手間がかかったのは部屋名の置き方です。部屋の重心に文字を置くと、L 字の部屋では壁の外に出てしまいます。そこで、設備や階段、開き戸が動く範囲を除いた床のうち最も広い部分を探し、その中で縁から最も遠い点（polylabel）に置いています。文字の大きさは部屋の短い辺から決め、入らなければ縮め、それでも入らなければ名前を略し（「クローゼット」→「CL」など）、最後は帖数を省きます。「ウォークインクローゼット」は募集図面の慣習にならって、いつも「WIC」と書きます。

広さの数え方にも気を配りました。帖数は壁の内側の広さ（内法）から、1 帖 = 1.62㎡ で換算しています。不動産の広告の表示規約が「1 畳あたり 1.62 平方メートル以上」と定めているのに合わせた値です。一方、床面積は建築基準法と同じく壁の芯で測ります。図の下には「帖数は内法、面積は壁芯です」という断り書きを自動で入れています。

斜めの線や開き戸の円弧がギザギザにならないよう、目的の 2 倍の大きさで描いてから縮めています。形式は、線や文字がくっきりする PNG と、ファイルが軽くメールや Web 掲載に向く JPEG から選べます。

まとめ

MadoLift では、パソコンに詳しくない方に使っていただくために、機能の数よりも「迷わないこと」を優先しました。業界の言葉には平易な説明を添え、説明はマウスを載せたらすぐ出し、保存を忘れても見ているとおりの間取り図が出るようにしています。

裏側では、間取りを壁の芯線のつながりとして持つことで、同じデータから 3D と 2D の間取り図の両方を作っています。間取り図は、部屋名の置き方や帖数の数え方まで、募集図面の約束ごとに合わせて描いています。今後も、実際に使う方の声を聞きながら改良を続けていきます。