庭のレイアウトを無料でシミュレーション!雑木の庭づくりに使えるツール

雑木の庭シミュレーターで作った、紅葉した庭と家の3D表示 エンジニアライフ

はじめに

ちょき。
ちょき。

こんにちは、ちょき。です!

今回は、自分で作った「雑木の庭シミュレーター」を紹介します。
ブラウザ上で、2D/3Dを切り替えながら庭のイメージを簡単に作ることができるよ。

アオダモやイロハモミジなど、雑木の庭でおなじみの木を並べて、季節ごとの景色や10年後の姿まで眺められます。
インストールも会員登録も不要なので、気軽に触ってみてください!

▶ 雑木の庭シミュレーターはこちら:【https://choki1989.com/garden/】

※スマホでも使えるけど、PCの方が断然操作しやすいと思う!可能な方はPCブラウザでアクセスしてね。

雑木の庭シミュレーターの3D表示。紅葉したイロハモミジやカエデの庭と家を見下ろした画面

作ったきっかけ:しっくりくるアプリがなかった

きっかけは、わが家の庭づくりです。どの木をどこに植えようか考えているうちに、「実際に並べたらどう見えるんだろう?」と気になって、庭のシミュレーションアプリを探してみました。

ところが!これが意外と見つからなくて。見つかっても海外製のもので操作が難しそうだったり、メーカーさんのものだったりで、どうもしっくりきませんでした。

私が作りたいのは「雑木の庭」。アオダモやイロハモミジのような木を置いて、手軽にイメージを作れるものが欲しかったんですよね。それなら自分で作っちゃおう!ということで、Claudeと相談しながら、このシミュレーターが爆誕しました。

雑木の庭(ぞうきのにわ)ってなに?

雑木林のような、自然な雰囲気の庭のことです。モミジやアオダモなどの落葉樹(冬に葉を落とす木)を中心に、背の低い木や下草(木の足元に植える草花)を重ねて、林の中にいるような心地よさをつくります。

こだわり① 雑木の庭の「定番の木」をそろえました

いちばんこだわったのが、置ける木の種類です。アオダモ、イロハモミジ、ヤマボウシ、ソヨゴなど、雑木の庭でよく使われる木を中心に、木23種と下草8種の全31種を用意しました。

区分置ける木・草
高木(育つと4m前後以上)アオダモ、イロハモミジ、ヤマボウシ、ソヨゴ、エゴノキ、ナツツバキ(シャラ)、コナラ、ジューンベリー、ハウチワカエデ、コハウチワカエデ、シマトネリコ、アオハダ
中木(2〜3.5mくらい)キンモクセイ、スモークツリー、クロモジ、ミツバツツジ、ヒサカキ
低木(1.5mくらいまで)ドウダンツツジ、ヤマアジサイ、アセビ、ヤマブキ、コバノズイナ、ヒメウツギ
下草(木の足元に植える草花)ギボウシ、ヤブラン、ベニシダ、ツワブキ、クリスマスローズ、フッキソウ、タマリュウ、ホトトギス

見た目にもこだわっていて、木ごとに幹の本数や枝の広がり方、葉の形まで変えています。たとえばアオダモは細い幹が何本も立ち上がる「株立ち(かぶだち)」、イロハモミジは1本の幹から枝が横に広がる「単幹(たんかん)」の姿です。

季節や年数で、庭の変化が見られる

  • 季節:春・夏・秋・冬を切り替えると、葉の色が変わります。秋はイロハモミジが赤く色づき、冬は落葉樹が葉を落として、常緑樹(一年中葉がある木)だけが緑のまま残ります。
  • 花や実:季節に合わせて花や実も表示されます。ヤマボウシなら夏に白い花、秋には赤い実がつきます。
  • 年数:「植えてから」のスライダーで、植えたときから10年後まで、木が育っていく様子を確認できます。
  • 木ごとの大きさ:「植えたとき」の株の大きさと「最終の高さ」も木ごとに変えられます。大きめの木を植えたい場合や、剪定(せんてい:枝を切って大きさや形を整えること)で小さめに保ちたい場合も再現できます。
同じ庭を春・夏・秋・冬で比べた3D表示。秋は紅葉し、冬は落葉樹が葉を落とす

木の足元も「おまかせ」で整う

高木などの大きめの木を選んで「足元をととのえる」を押すと、まわりに低木・下草・景石(けいせき:眺めるために置く大きめの石)をランダムに並べてくれます。並べ方は「寄せる」「ぐるり」「ゆったり」の3通り。気に入らなければ「別の案にする」で何度でも並べ直せます。

並べた植物や石は木とセットになるので、まとめて動かすこともできます。また、高さの近い木どうしの樹冠(じゅかん:枝葉が広がっている部分)が大きく重なると、「少し離すと枝が伸びやかになります」と教えてくれます。

こだわり② 家や窓とセットで考えられる

庭は、家の中から眺める時間も長い場所です。なので、建物や窓も一緒に設定できるようにしました。

  • 庭の広さと向き:横幅・奥行きは2〜30mまで設定できます。庭の向き(建物から見てどの方角か)も、東西南北だけでなく細かく選べます。
  • 建物の外観:平屋か2階建てか、屋根の形、外壁・屋根・サッシ(窓枠)の色まで選べます。インナーテラス(外壁の一部を奥に引っ込めて、屋根の下につくったテラス)にも対応しています。
  • 窓:掃き出し窓(床まである大きな窓)、腰窓(腰の高さから上にある窓)、地窓(床すれすれの低い窓)、高窓(壁の高い位置にある窓)の4種類。1階はもちろん、2階建てなら2階にも付けられます。

窓から庭を眺められる

ぜひ試してほしいのが、窓からの眺めです。3D表示では、付けた窓ごとに「掃き出し窓から」のようなボタンが出て、押すと部屋の中から窓越しに庭を見た景色に切り替わります。

リビングの窓から、どの木がどんなふうに見えるか。そんな「家の中からの見え方」まで確認できるのは、かなりうれしいポイントです。

掃き出し窓から坪庭を眺めた3D表示。竹垣の前にミツバツツジやヤマブキが咲いている

日差しと影もチェックできる

3D表示では、季節と時刻(朝9時・正午・15時)を選ぶと、庭の向きに合わせて日差しの角度が変わり、影が落ちます。
「夏のお昼、デッキに木陰ができるかな?」といった確認にも使えます(影はあくまで目安です)。

石・小道・デッキ・フェンスも置ける

木のほかに、こんな物も置けます。

種類置けるもの
石景石(丸みのある石・平たい石)、石並べ(不揃いな石のセット)
小道飛び石、砂利(小道・砂利敷き)、枕木(角材を横に並べた道)、乱形石張り(形がバラバラの平石を敷く張り方)
デッキウッドデッキ(明るい木・濃い木)
フェンス板塀(横張り)、縦格子(木)、目隠しフェンス(アルミ横格子)、竹垣(建仁寺垣風)、メッシュフェンス

長さや幅を変えられるほか、石並べは曲げて植え込みの縁取りにしたり、一周させて木の根元を囲んだりもできます。

さらに、置いた物に合わせて計画に役立つ数字も出ます。飛び石なら石の数と間隔、ウッドデッキなら広さ(畳何枚分か)、フェンスなら柱の本数や「立った人の目線も隠れる高さか」といった具合です。

こだわり③ 何度もレビューして磨いた操作感

使いやすさにも力を入れました!
実際に触っては気になるところを直して……を何度も繰り返して、迷わず使えるように仕上げました。たとえば、こんなところです。

  • ドラッグで動かして、ゴミ箱で消す:木や石はドラッグで移動。いらなくなったら、右上に出てくるゴミ箱まで運べば消えます。
  • 重なった物もちゃんと選べる:木の下に下草があるときなどは、同じ場所をもう一度押すと下の物に切り替わります。
  • 「戻す」「やり直す」つき:間違えても「↶」ボタン(パソコンならCtrl+Zでも)ですぐ元通りです。
  • スマホでも使いやすく:下の操作パネルは高さを小・中・大の3段階で切り替えられるので、図を広く見たいときも邪魔になりません。
  • 3Dは「見るだけ」と「動かす」を切り替え:ドラッグで回転、ピンチやホイールで拡大・縮小しながら眺められます。「見るだけ」にしておけば、うっかり木を動かしてしまう心配もありません。
  • 「高木を透かす」ボタン:平面図で大きな木の枝葉を消して、足元の低木や下草の配置を確認できます。
  • 図だけを画面いっぱいに表示:ボタン類を隠して、庭の図だけを大きく表示できます。ブラウザの印刷メニューから印刷すると、図だけが用紙に収まる大きさで印刷されます。
  • 自動で保存:作った庭はブラウザに保存されるので、次に開いたときも続きから始められます。
スマホで雑木の庭シミュレーターを表示した画面。左は3D表示、右は平面図でジューンベリーを選んだところ

使い方はかんたん3ステップ

  1. 庭と建物を設定する:
    まずは「庭と建物」タブで、庭の広さと向き、建物の外観、窓などを決めましょう。
  2. 木や石を置く:
    「配置する」タブで置きたい物の「追加」を押して、ドラッグで好きな場所へ動かします。2Dでも3Dでも動かせるよ。選択しているものは「配置する」タブの一番上に表示されて、大きさなど自由に変えることができるよ。
  3. 季節や年数を変えて眺める:
    季節・時刻・植えてからの年数を切り替えて、平面(2D)と立体(3D)で眺めます。

初めて開いたときはサンプルの庭が入っているので、まずはそれを動かしてみるだけでも雰囲気がつかめると思います。
「庭と建物」タブの下の方に「見本の庭」が入っているので、他のサンプルパターンも見たい方は試してみてね。

使うときのちょっとした注意

  • 木の大きさは、剪定しながら育てた場合の目安です。種類によっては、放っておくともっと大きくなります。あくまで目安として考えてください。
  • データは、使っている端末のブラウザに保存されます。別のスマホやパソコンには引き継がれず、ブラウザのデータを削除すると消えることがあるので注意してください。
    ※確実に保存したいときは「庭と建物」タブの下部の「配置を書き出す」でバックアップを取ってください。
  • 3Dが表示されないときは、ブラウザの設定でWebGL(ブラウザで3Dを表示するための機能)が有効になっているか確認してみてください。
  • あくまでイメージづくりのためのツールです。実際に植えるときは、日当たりや土の状態なども含めて、造園屋さんに相談してね。

おわりに

ちょき。
ちょき。

「こんな庭にしたいな」を、手軽に形にできるツールを目指して作りました。
雑木の庭が好きな方や、これから庭づくりを考えている方の参考になればうれしいです!

「この木も置きたい!」「ここが使いにくい」などがあれば、コメントで気軽に教えてください。

▶ 雑木の庭シミュレーターはこちら:【https://choki1989.com/garden/】

タイトルとURLをコピーしました