はじめに
外寸や内寸の入った間取り図が必要になりました。
といっても、建築士が作るような本格的な図面ではなく、部屋の配置や寸法、キッチンやトイレなどの水回りの位置がわかる程度のものです。
「それくらいなら、無料の間取り作成ツールで簡単に作れるだろう」
と思っていたのですが、探してみると意外とちょうどいいものが見つかりません。
いろいろ試した結果、手書きするか、自分でアプリを作るかという2択になりました。
そこで、今どきAIを使えばサクッと作れるだろう思い、アプリを作ることにしました。
こうして生まれたのが、ブラウザで動作する間取り作成ツール グリどり（Gridori） です。
この記事では、グリどりを作ることになった経緯や、AIを使った開発の進め方、実装で工夫したところなどを紹介します。
既存の間取り作成ツールではうまくいかなかった
最初は、既存の間取り作成ツールを使うつもりでした。
無料で使えるWebアプリや、iPhone・iPad向けのアプリなど、いくつか調べて試してみました。
ところが、思っていたよりも難しかったです。
部屋の寸法がわからないと作りにくい
試した間取り作成ツールの中には、部屋を作って、それを並べたりつないだりして間取りを完成させる方式のものがありました。
新しい家の間取りを考えたり、寸法がわかっている家の間取りであれば、こうした方式は便利だと思います。
しかし、今回作りたかったのは、すでに建っている家の間取り図で、部屋の外寸や内寸がわからない状態でした。
壁の位置や部屋の大まかな配置はわかっていますが、部屋の寸法を指定して配置する方式では、なかなか思うように作れませんでした。
無料で最後まで使えるとは限らない
iPhoneやiPad向けにも、便利そうな間取り作成アプリがありました。
ただ、試してみると、図面を完成させたり、必要な形式で出力したりするには課金が必要なものもありました。
もちろん、便利なツールにお金を払うのは当たり前だと思っています。
ただ、今回はおそらく一度きりの間取り図です。できれば手軽に作りたいところです。
日本家屋の寸法感覚で作りたい
もう一つ気になったのが、日本家屋の寸法との相性です。
日本の木造住宅では、910mmを基本とするモジュールがよく使われています。
例えば、半間が910mm、1間が1820mmという感覚です。
すべての住宅がこの寸法で作られているわけではありませんが、今回のように既存の日本家屋の間取りを再現するには、とても便利な基準です。
ところが、調べた範囲では、この感覚で手軽に壁を配置できるツールがなかなか見つかりませんでした。
有償の建築CADなどを探せばあるのかもしれません。ただ、そこまで本格的なものが必要なわけでもありません。
それなら、自分が欲しい機能だけを持ったツールを作ればいいのでは？
ということで、開発を始めました。
「グリどり」を作る
アプリの名前は「グリどり（Gridori）」にしました。
「グリッド」と「間取り」を組み合わせた名前です。
最初から、ブラウザで動くWebアプリにすることは決めていました。
インストール不要で使えますし、作ったアプリを公開すれば、ほかの人にも簡単に使ってもらえます。
そして、今回はほぼすべてのコードをAIに書いてもらうことにしました。
感覚としては、99%くらいAIが作ったアプリです。
私が行ったのは、仕様を考えること、実際に操作して動作を確認すること、そして修正を依頼することです。
コードを自分で細かく修正していくというより、AIとやり取りしながら少しずつ完成させていく形になりました。
まずは最低限の間取り作成ツールから
最初にAI（最初はChatGPT）へ依頼したのは、910mmグリッド上に壁を配置できる、シンプルな間取り作成ツールです。
最初からすべての機能を作ろうとはしませんでした。
まずは壁を置けるようにして、実際に操作してみます。
すると、すぐに気になるところが出てきます。
- 壁の位置がグリッドと微妙に合わない
- 直角に壁をつないだとき、壁の端がきれいにそろわない
- この部品は壁の内側に配置したい
といった具合です。
内容が高度になってきたところで、Codexでの実装に移行して、それらをその都度AIに修正を依頼しました。
AIに実装してもらう → 実際に操作する → 問題点を伝える → 修正してもらう
基本的には、この繰り返しです。
工夫したところ
1. 910mmモジュールを基本にした
グリどりでは、910mmを基本グリッドとしています。
さらに、半分の455mm単位でも壁の長さを調整できるようにしました。
日本の木造住宅でよく使われる寸法に合わせることで、壁の配置を考えやすくしています。
壁厚も、基本値を140mmとしました。
もちろん、住宅によって寸法は異なるため、壁の長さや厚さは数値入力で変更できます。
2. 壁の中心をグリッドに合わせた
実装で特にこだわったのが、壁とグリッドの位置関係です。
最初は単純にグリッドに合わせて壁を配置していましたが、それだけでは壁を直角につないだときに、きれいに接続できませんでした。
そこで、壁の中心線（壁芯）をグリッドに合わせる方式にしました。
例えば、壁厚が140mmの場合、グリッド線を中心として左右または上下に70mmずつ壁が広がります。
さらに、壁の端についても、設定した長さより壁厚の半分ずつ外側へ伸ばします。
つまり、
実際に描画する壁の長さ = 設定長 + 壁厚
となります。
例えば、設定長が2730mm、壁厚が140mmなら、描画される壁の長さは2870mmです。
こうすることで、直角に壁をつないだときも、壁芯同士が同じグリッド交点でつながるようになります。
単純なことのようですが、間取り図をきれいに描くためには重要な部分でした。
3. 窓やドアを壁にぴったり配置できるようにした
窓やドアも、単に図面上に置くだけでは、壁との位置関係がずれてしまいます。
そこで、壁の位置や向きに合わせて配置できるようにしました。
壁の厚さも考慮することで、間取り図として自然に見えるようにしています。
4. 住宅設備を壁の内側に配置できるようにした
階段、キッチン、ユニットバス、洗面台、トイレなどの設備も追加しました。
これらは、部品を置くだけでなく、壁との位置関係が重要です。
例えば、ユニットバスを配置したときに、壁の中心線を基準にすると、設備の一部が壁に重なってしまいます。
そこで、壁厚を考慮し、壁の内側に収まるように調整しました。
5. 曲がり階段や踊り場も作れるようにした
階段も、単純な直階段だけでは足りません。
日本の住宅では、途中で90度や180度曲がる階段もよくあります。
そこで、曲がり階段や踊り場を表現できるようにしました。
最初から複雑な階段を実装したわけではなく、実際に必要な形を考えながら、AIに少しずつ機能を追加してもらいました。
6. 外寸と内寸を計算できるようにした
今回、間取り図が必要になった理由の一つが、寸法を確認したかったことです。
そのため、単に間取りを描くだけでは不十分でした。
グリどりでは、作成した間取り図から外寸や内寸を計算して表示できるようにしました。
壁芯を基準に壁を配置し、それぞれの壁厚を持たせているので、壁の内側や外側の位置を求めることができます。
間取りを作りながら寸法も確認できるのは、今回の用途では特に便利な機能になりました。
この例では、壁の内側の寸法が1680mmと表示されています。
7. データはJSONで保存する
作成した間取り図は、JSON形式で保存できるようにしました。
アプリ側でユーザーの図面を保存する仕組みは持っていません。
作成したデータはJSONファイルとして保存し、必要になったら読み込んで編集を再開できます。
サーバー側に図面を保存する仕組みを作る必要がなく、アプリをシンプルに保てます。
自宅などの間取り図という情報を扱うので、アプリ側にデータを預けずに済むのもよいところだと思っています。
99% AIで作ってみて
今回の開発では、ほとんど自分でコードを書いていません。
欲しい機能や動作をAIに説明し、実装してもらい、実際に動かして確認する。その繰り返しで開発を進めました。
AIが生成したコードは、正直なところ、非常に読みづらいです。コメントもほとんどなく、後から自分で修正するのは簡単ではありません。
ただ、今回は最初からAIに実装してもらうことを前提としていたので、ソースコードが読みにくいことを、必ずしも問題だとは考えていませんでした。
その代わりに重視したのが、テストコードです。
実装コードに比べると、テストコードはそれほど読みにくくありません。
機能を追加・修正した際には、AIが追加・修正したテストコードを確認し、想定した入力に対して期待する結果が得られるようになっているかを確認していました。
例えば、壁の長さや厚さ、壁芯の位置関係などは、数値によって期待する結果を表現できます。
そのため、実装の細かな処理をすべて追いかけなくても、テストコードを確認することで、関数が意図した仕様を満たしているかを判断しやすくなります。
もちろん、テストが通ればすべて正しいというわけではありません。テストで確認していないケースもありますし、画面上の表示や操作感については、実際に動かして確認する必要があります。
そこで、今回は次のような流れで開発しました。
- 実装したい機能や仕様をAIに伝える
- AIに実装とテストコードの追加・修正を依頼する
- テストコードを読んで、期待する動作が検証されているか確認する
- 実際にアプリを操作して動作を確認する
- 問題があればAIに修正を依頼する
実装はAIに任せ、仕様とテスト、実際の動作を人間が確認する。
今回のような比較的小規模なWebアプリでは、この開発方法でも十分に実用的なものを作ることができました。
ソースコードを自分で書かない開発では、コードの一行一行を理解することよりも、何を実現したいのかを明確にし、それが正しく実現されているかをどう確認するかが重要なのだと感じました。
まだまだ改善したいところ
実際に使えるところまでできましたが、改善したいところはたくさんあります。
例えば、現在は壁の長さを変更するときに、数値を入力する必要があります。
壁の端をドラッグして、直感的に長さを調整できるようにしたいところです。
ほかにも、壁同士の接続や部品の操作など、より使いやすくできそうな部分があります。
ただ、最初に考えていた「日本家屋の寸法感覚で、手軽に間取り図を作りたい」という目的は、かなり実現できたと思っています。
おわりに
最初は、間取り図が1枚必要だっただけでした。
それが、ちょうどいいツールが見つからなかったことをきっかけに、間取り作成アプリを作ってしまいました。
今回は99% AIにコードを書いてもらいましたが、何を作りたいのか、どのように動いてほしいのかを具体的に伝えることができれば、一定のレベルのアプリが作れてしまうことを体験できました。
壁芯やグリッドの扱いなど、実際に使ってみないと気づかない部分も多くありましたが、これをAIに説明するのが実は難しかったのですが、これは今まで開発とはちょっとことなる面白い経験でした。
まだまだ発展途上のツールですが、便利に使えるものになったと思っています。
同じように、既存の住宅の間取り図を作りたい方や、910mmモジュールで手軽に間取りを描きたい方にも、使ってもらえたら嬉しいです。
グリどり（Gridori）
今後も少しずつ改善していきます。