はじめに

こんにちは、ちょき。です!
今回は、自分で作った「雑木の庭シミュレーター」を紹介します。
ブラウザ上で、2D/3Dを切り替えながら庭のイメージを簡単に作ることができるよ。
アオダモやイロハモミジなど、雑木の庭でおなじみの木を並べて、季節ごとの景色や10年後の姿まで眺められます。
インストールも会員登録も不要なので、気軽に触ってみてください!
▶ 雑木の庭シミュレーターはこちら:【https://choki1989.com/garden/】
※スマホでも使えるけど、PCの方が断然操作しやすいと思う!可能な方はPCブラウザでアクセスしてね。

作ったきっかけ:しっくりくるアプリがなかった
きっかけは、わが家の庭づくりです。どの木をどこに植えようか考えているうちに、「実際に並べたらどう見えるんだろう?」と気になって、庭のシミュレーションアプリを探してみました。
ところが!これが意外と見つからなくて。見つかっても海外製のもので操作が難しそうだったり、メーカーさんのものだったりで、どうもしっくりきませんでした。
私が作りたいのは「雑木の庭」。アオダモやイロハモミジのような木を置いて、手軽にイメージを作れるものが欲しかったんですよね。それなら自分で作っちゃおう!ということで、Claudeと相談しながら、このシミュレーターが爆誕しました。
雑木の庭(ぞうきのにわ)ってなに?
雑木林のような、自然な雰囲気の庭のことです。モミジやアオダモなどの落葉樹(冬に葉を落とす木)を中心に、背の低い木や下草(木の足元に植える草花)を重ねて、林の中にいるような心地よさをつくります。
こだわり① 雑木の庭の「定番の木」をそろえました
いちばんこだわったのが、置ける木の種類です。アオダモ、イロハモミジ、ヤマボウシ、ソヨゴなど、雑木の庭でよく使われる木を中心に、木23種と下草8種の全31種を用意しました。
| 区分 | 置ける木・草 |
|---|---|
| 高木(育つと4m前後以上) | アオダモ、イロハモミジ、ヤマボウシ、ソヨゴ、エゴノキ、ナツツバキ(シャラ)、コナラ、ジューンベリー、ハウチワカエデ、コハウチワカエデ、シマトネリコ、アオハダ |
| 中木(2〜3.5mくらい) | キンモクセイ、スモークツリー、クロモジ、ミツバツツジ、ヒサカキ |
| 低木(1.5mくらいまで) | ドウダンツツジ、ヤマアジサイ、アセビ、ヤマブキ、コバノズイナ、ヒメウツギ |
| 下草(木の足元に植える草花) | ギボウシ、ヤブラン、ベニシダ、ツワブキ、クリスマスローズ、フッキソウ、タマリュウ、ホトトギス |
見た目にもこだわっていて、木ごとに幹の本数や枝の広がり方、葉の形まで変えています。たとえばアオダモは細い幹が何本も立ち上がる「株立ち(かぶだち)」、イロハモミジは1本の幹から枝が横に広がる「単幹(たんかん)」の姿です。
季節や年数で、庭の変化が見られる
- 季節:春・夏・秋・冬を切り替えると、葉の色が変わります。秋はイロハモミジが赤く色づき、冬は落葉樹が葉を落として、常緑樹(一年中葉がある木)だけが緑のまま残ります。
- 花や実:季節に合わせて花や実も表示されます。ヤマボウシなら夏に白い花、秋には赤い実がつきます。
- 年数:「植えてから」のスライダーで、植えたときから10年後まで、木が育っていく様子を確認できます。
- 木ごとの大きさ:「植えたとき」の株の大きさと「最終の高さ」も木ごとに変えられます。大きめの木を植えたい場合や、剪定(せんてい:枝を切って大きさや形を整えること)で小さめに保ちたい場合も再現できます。

木の足元も「おまかせ」で整う
高木などの大きめの木を選んで「足元をととのえる」を押すと、まわりに低木・下草・景石(けいせき:眺めるために置く大きめの石)をランダムに並べてくれます。並べ方は「寄せる」「ぐるり」「ゆったり」の3通り。気に入らなければ「別の案にする」で何度でも並べ直せます。
並べた植物や石は木とセットになるので、まとめて動かすこともできます。また、高さの近い木どうしの樹冠(じゅかん:枝葉が広がっている部分)が大きく重なると、「少し離すと枝が伸びやかになります」と教えてくれます。
こだわり② 家や窓とセットで考えられる
庭は、家の中から眺める時間も長い場所です。なので、建物や窓も一緒に設定できるようにしました。
- 庭の広さと向き:横幅・奥行きは2〜30mまで設定できます。庭の向き(建物から見てどの方角か)も、東西南北だけでなく細かく選べます。
- 建物の外観:平屋か2階建てか、屋根の形、外壁・屋根・サッシ(窓枠)の色まで選べます。インナーテラス(外壁の一部を奥に引っ込めて、屋根の下につくったテラス)にも対応しています。
- 窓:掃き出し窓(床まである大きな窓)、腰窓(腰の高さから上にある窓)、地窓(床すれすれの低い窓)、高窓(壁の高い位置にある窓)の4種類。1階はもちろん、2階建てなら2階にも付けられます。
窓から庭を眺められる
ぜひ試してほしいのが、窓からの眺めです。3D表示では、付けた窓ごとに「掃き出し窓から」のようなボタンが出て、押すと部屋の中から窓越しに庭を見た景色に切り替わります。
リビングの窓から、どの木がどんなふうに見えるか。そんな「家の中からの見え方」まで確認できるのは、かなりうれしいポイントです。

日差しと影もチェックできる
3D表示では、季節と時刻(朝9時・正午・15時)を選ぶと、庭の向きに合わせて日差しの角度が変わり、影が落ちます。
「夏のお昼、デッキに木陰ができるかな?」といった確認にも使えます(影はあくまで目安です)。
石・小道・デッキ・フェンスも置ける
木のほかに、こんな物も置けます。
| 種類 | 置けるもの |
|---|---|
| 石 | 景石(丸みのある石・平たい石)、石並べ(不揃いな石のセット) |
| 小道 | 飛び石、砂利(小道・砂利敷き)、枕木(角材を横に並べた道)、乱形石張り(形がバラバラの平石を敷く張り方) |
| デッキ | ウッドデッキ(明るい木・濃い木) |
| フェンス | 板塀(横張り)、縦格子(木)、目隠しフェンス(アルミ横格子)、竹垣(建仁寺垣風)、メッシュフェンス |
長さや幅を変えられるほか、石並べは曲げて植え込みの縁取りにしたり、一周させて木の根元を囲んだりもできます。
さらに、置いた物に合わせて計画に役立つ数字も出ます。飛び石なら石の数と間隔、ウッドデッキなら広さ(畳何枚分か)、フェンスなら柱の本数や「立った人の目線も隠れる高さか」といった具合です。
こだわり③ 何度もレビューして磨いた操作感
使いやすさにも力を入れました!
実際に触っては気になるところを直して……を何度も繰り返して、迷わず使えるように仕上げました。たとえば、こんなところです。
- ドラッグで動かして、ゴミ箱で消す:木や石はドラッグで移動。いらなくなったら、右上に出てくるゴミ箱まで運べば消えます。
- 重なった物もちゃんと選べる:木の下に下草があるときなどは、同じ場所をもう一度押すと下の物に切り替わります。
- 「戻す」「やり直す」つき:間違えても「↶」ボタン(パソコンならCtrl+Zでも)ですぐ元通りです。
- スマホでも使いやすく:下の操作パネルは高さを小・中・大の3段階で切り替えられるので、図を広く見たいときも邪魔になりません。
- 3Dは「見るだけ」と「動かす」を切り替え:ドラッグで回転、ピンチやホイールで拡大・縮小しながら眺められます。「見るだけ」にしておけば、うっかり木を動かしてしまう心配もありません。
- 「高木を透かす」ボタン:平面図で大きな木の枝葉を消して、足元の低木や下草の配置を確認できます。
- 図だけを画面いっぱいに表示:ボタン類を隠して、庭の図だけを大きく表示できます。ブラウザの印刷メニューから印刷すると、図だけが用紙に収まる大きさで印刷されます。
- 自動で保存:作った庭はブラウザに保存されるので、次に開いたときも続きから始められます。

使い方はかんたん3ステップ
- 庭と建物を設定する:
まずは「庭と建物」タブで、庭の広さと向き、建物の外観、窓などを決めましょう。 - 木や石を置く:
「配置する」タブで置きたい物の「追加」を押して、ドラッグで好きな場所へ動かします。2Dでも3Dでも動かせるよ。選択しているものは「配置する」タブの一番上に表示されて、大きさなど自由に変えることができるよ。 - 季節や年数を変えて眺める:
季節・時刻・植えてからの年数を切り替えて、平面(2D)と立体(3D)で眺めます。
初めて開いたときはサンプルの庭が入っているので、まずはそれを動かしてみるだけでも雰囲気がつかめると思います。
「庭と建物」タブの下の方に「見本の庭」が入っているので、他のサンプルパターンも見たい方は試してみてね。
使うときのちょっとした注意
- 木の大きさは、剪定しながら育てた場合の目安です。種類によっては、放っておくともっと大きくなります。あくまで目安として考えてください。
- データは、使っている端末のブラウザに保存されます。別のスマホやパソコンには引き継がれず、ブラウザのデータを削除すると消えることがあるので注意してください。
※確実に保存したいときは「庭と建物」タブの下部の「配置を書き出す」でバックアップを取ってください。 - 3Dが表示されないときは、ブラウザの設定でWebGL(ブラウザで3Dを表示するための機能)が有効になっているか確認してみてください。
- あくまでイメージづくりのためのツールです。実際に植えるときは、日当たりや土の状態なども含めて、造園屋さんに相談してね。
おわりに

「こんな庭にしたいな」を、手軽に形にできるツールを目指して作りました。
雑木の庭が好きな方や、これから庭づくりを考えている方の参考になればうれしいです!
「この木も置きたい!」「ここが使いにくい」などがあれば、コメントで気軽に教えてください。
▶ 雑木の庭シミュレーターはこちら:【https://choki1989.com/garden/】

