ソフトウェア解説ドキュメント

FloorPlan
3D 間取り図エディタ

マウス操作だけで本格的な間取り図を作成。2D平面図の直感的な編集から、リアルタイムの3Dプレビューまでを単一ファイルで実現したブラウザベースの設計ツール。

HTML5 Canvas Pure JavaScript 依存ゼロ 単一ファイル 多階層対応 PNG書き出し
スクロールして解説を読む
8,000 8,000 LDK 寝室 キッチン 浴室
概要

ブラウザだけで動く
本格間取り設計ツール

FloorPlan 3D は、外部ライブラリへの依存を一切持たない純粋な HTML + CSS + JavaScript で構築されたWebアプリケーションです。インストール不要で、ファイルをブラウザで開くだけで即座に使用できます。

01
📐
2D 平面図エディタ
HTML5 Canvas API を使った高精度な2D描画エンジン。グリッドスナップ、パン・ズーム、座標変換を独自実装。部屋・壁・建具をマウス操作で直感的に配置できます。
02
🏗
リアルタイム 3D ビュー
WebGL を使わずに Canvas 2D API だけで実現した独自の3D投影エンジン。透視変換・ライティング計算・マルチフロア描画を純粋な数学演算で処理します。
03
🎨
部屋タイプ管理
8種の部屋タイプ（リビング・寝室・キッチンなど）をカラーコーディングで管理。選択ツールでいつでもタイプやラベルを変更可能。変更は3Dビューへ即時反映されます。
04
🏢
多階層フロア対応
フロアごとにデータを分離管理するデータモデル設計。3Dビューでは全フロアを重ねて立体的に表示。1F〜4Fまでの多階建て間取りを作成できます。
機能一覧

すべての機能が
単一ファイルに

🧱
壁ツール
クリックで始点・終点を指定して壁を配置。連続クリックで壁を繋げられます。グリッドスナップにより正確な位置に自動整列。
CLICK → CLICK
🟦
部屋（ポリゴン）ツール
複数点をクリックして任意形状の部屋を描画。始点付近に戻るとポリゴンが閉じて部屋が完成。3頂点以上で使用可能。
CLICK × N → CLOSE
🚪
ドア配置ツール
壁の近くをクリックすると自動的に壁上にスナップ。壁の角度を検出して正しい方向に配置。3Dビューではリアルな扉として表示。
WALL SNAP
🪟
窓配置ツール
壁に自動スナップして配置。3Dビューでは半透明のガラス質感で表示し、格子フレームも描画されます。
WALL SNAP
↖
選択・プロパティ編集
壁・部屋をクリックして選択。サイドパネルからラベル名・部屋タイプ・色を変更。変更はリアルタイムで反映されます。
CLICK TO SELECT
🔍
パン・ズーム
マウスホイールでズーム。右クリックドラッグでキャンバスをパン。3Dビューも独立したカメラ操作（回転・パン・ズーム）を持ちます。
WHEEL / R-DRAG
↩
アンドゥ履歴
操作前の状態をJSON形式でスタック管理。最大50ステップまで元に戻せます。壁・部屋・建具の全操作に対応。
50-STEP UNDO
📥
PNG 書き出し
現在表示中のビュー（2D / 3D）をそのままPNG画像として保存。Canvas の toDataURL API を使用。
CANVAS → PNG
使い方

5ステップで
間取りを完成させる

01
壁で空間の輪郭を描く
ツールバーから「壁」を選択。キャンバス上でクリックして始点を決め、次のクリックで終点を配置。連続してクリックすると壁が繋がります。グリッドスナップが有効なので、整然とした壁配置が可能です。
🧱 壁ツール選択 クリック → 始点 クリック → 終点 ESC で中断
02
部屋ポリゴンを塗る
左パネルで部屋タイプ（リビング・寝室など）を選んでから「部屋」ツールを使用。壁の角をクリックして頂点を打ち、最初の点に戻るとポリゴンが閉じて部屋が完成。部屋名とカラーが自動で設定されます。
部屋タイプ選択 🟦 部屋ツール N点クリック 始点へ戻って閉じる
03
ドア・窓を取り付ける
ドアまたは窓ツールを選択し、壁の近くをクリック。自動的に最寄りの壁上にスナップされ、壁の向きに合わせて回転します。ドアは開き方向の円弧アーチも2Dで表示されます。
🚪 ドア / 🪟 窓 壁付近をクリック 自動スナップ
04
3Dビューで確認・調整する
タブ切り替えで「3D ビュー」へ。ドラッグで視点回転、右クリックでパン、ホイールでズームができます。左パネルのスライダーで回転速度とライト強度を調整。フロア追加ボタンで2Fの間取りも作成できます。
3D ビュータブ ドラッグ → 回転 右ドラッグ → パン ホイール → ズーム
05
PNG として書き出す
ヘッダーの「PNG 保存」ボタンで現在表示中のビューを画像として保存。2Dの平面図も3Dのパース図も書き出せます。プレゼン・共有・印刷にそのまま使用可能。
📥 PNG 保存ボタン 2D / 3D どちらでも可
技術仕様

ゼロ依存の
純粋フロントエンド実装

外部フレームワーク・ライブラリを一切使用せず、HTML5 / CSS3 / Vanilla JavaScript のみで構築。Canvas 2D API と独自数学ライブラリだけで3D空間を描画します。

ソースファイル
1
単一 HTML ファイル
外部依存
0
ライブラリ不要
アンドゥ履歴
50
ステップまで
対応フロア数
4
最大 4 階建て
部屋タイプ
8
種類のプリセット
レンダリング
60
fps (requestAnimationFrame)
使用技術
HTML5 Canvas API
CSS Custom Properties
Vanilla ES6+ JavaScript
透視投影変換（独自実装）
ランベルト反射ライティング
ポリゴン交点判定アルゴリズム
線分点距離計算
JSON 状態スナップショット
Canvas toDataURL（PNG書き出し）
アーキテクチャ
STATE walls / rooms doors / windows 2D Engine HTML5 Canvas Grid / Pan / Zoom HitTest / SnapToGrid Draw Walls / Rooms 3D Engine Custom Renderer Perspective Projection Lambertian Lighting Multi-floor Stack Camera Orbit Control Auto Rotation OUTPUT Canvas Display PNG Export TOOLS: wall / room / door / window / select / delete HISTORY STACK (50 snapshots)

さっそく間取りを
描いてみましょう

インストール不要。ブラウザだけで今すぐ始められます。

🏠 FloorPlan 3D を起動する