木造軸組 耐震シミュレーター(日本家屋耐震シミュレーション)

筋交いを入れて、揺らして、破壊試験が簡単にできる―

分野 材料と加工の技術(構造)
対象 中学校技術科 1人1台端末で生徒が操作
動作環境 ブラウザのみ。Chromebookで動作確認済み(iPadは未検証)
教材URL https://playa2021git.github.io/japanese-house-earthquake-sim/
ソース https://github.com/playa2021git/japanese-house-earthquake-sim
著作者 近藤 昌也(金沢市立野田中学校 ※2026年現在)

1.なぜ作ったか

筋交いの学習は、図で見せると「そういうものか」で終わってしまいます。本当は「入れなかったらどうなるか」を生徒自身に試させたい。研究用のソフト(WALLSTATなど)は素晴らしいのですが、生徒が11台端末で気軽にクリックして遊べるものではありません。

この動画のような教材を用意できればいいんですが、なかなか難しいです。
そこで、2Dで筋交いを配置し、3Dで地震を起こして壊す、という教材を作りました。

2.できること

筋交いエディタ(2D

  • マス目をクリックするたびに「なしなし」と切り替わります
  • 「前後面」タブは前面と背面に、「左右妻」タブは左妻と右妻に、同じ配置が自動的に適用されます
  • 壁ベイは全12箇所。設置数はいつでも画面に表示されます
  • 配置プリセットが4つ用意してあります(筋交いなし/2階だけX字=1階が弱いピロティ崩壊/前後面だけX字=偏り/全ベイX字=良配置)

② 3Dシミュレーション

  • の配置のまま3Dに切り替わって加振します。ドラッグで視点回転、ホイールでズーム
  • 震度を選んで開始。揺れの効果音のONOFFもできます
  • 判定、10秒耐久の達成/未達成、経過時間、1階と2階の層間変形、筋交いの最大応力を数値で表示します

筋交いが1本もない四角形だけの骨組みは、震度1でも崩れます。全ベイにX字を入れると震度7でも耐えます。補強前後を並べて比較できるのが、この教材のねらいです。

1 筋交いエディタ(2D)。マス目をクリックして配置を決める


2 3Dシミュレーション。筋交いのない家が倒壊する瞬間

3.授業での使いどころ

  • ペーパーブリッジコンテストを実施し、2回目の荷重試験をする前に、触らせることを想定しています。
  • 前後面だけに筋交いを入れたプリセットは、ねじれて倒れます。偏った配置がなぜ危ないかを、口で説明するより速く伝えられます
  • 2階だけを補強したプリセットは1階から潰れます。ピロティ形式の弱点がそのまま見えます
  • 導入で1回触らせてから実際の建物の写真を見せると、生徒が壁の位置を見るようになります

教材モデルであることは生徒にも明言しています。実際の木造住宅の接合部は金物で固められており、筋交いゼロで震度1即倒壊ということはありません。教育用の簡易疑似物理モデルであり、建築基準法上の壁量計算や許容応力度計算とは異なります。「何を単純化したモデルなのか」を語ること自体が、技術の見方・考え方の授業になります。

4.どうやって作ったか

共通のつくり方(Vibeコーディング)

  • 授業で「日本家屋の地震シミュレータがあるといいなぁ、でもそんなアプリが世の中にない」と気づく
  • どんな画面で、生徒に何が分かればよいかを想像する
  • 生成AIに「こんなアプリ作って」と適当に頼む
  • 出てきたHTMLを、自分が生徒の立場で触り、使いにくさと技術的な誤りを洗い出す
  • 「ここは良い、ここが良くない」と具体的に指示を出す
  • 納得がいく仕上がりになるまで、④⑤を繰り返す
  • 対話を重ねても改善しないときは、別のAIに同じHTMLファイルを投げる
  • 開発には Visual Studio Code があると便利だけど、最近のAIは無くてもやってくれます。
  • 生徒にURLで配れるよう、GitHub で公開する

この記事では、いちばん時間を使う④⑤⑥について詳しく書きます。

出てきたものを、生徒の立場で触る

最初に出てきたものは、見た目は立派でした。ところが生徒目線で触ると、すぐに分かります。

  • 筋交いを1本も入れていないのに、揺らしても平然と建っている(=技術的に間違っている)
  • ボタンが小さく、どこを押すと揺れるのか分からない
  • 表示が操作パネルに重なって、肝心のボタンが押せない

褒めるところと直すところを分けて指示する

2Dで筋交いを置く操作は良い。ただし物理が間違っている。接合部をピンとみなして、筋交いがなければ震度1で崩れるようにして。あと震度を選ぶボタンが小さすぎる。生徒が見て一瞬で分かる大きさに。」
「良くない」だけでは直りません。何が良いかを一緒に伝えると、そこを壊さずに直してくれる確率が上がります。
言葉だけでうまく修正が進まない場合は、パソコンのスクリーンショット機能を使って開発中のアプリの不具合が映っている場面を撮影し、そのままAIのプロンプト欄に貼り付けます。

ここが教員の仕事です

生成AIは「それらしく動くもの」を出すのは得意ですが、「技術的に正しいもの」を出すのは得意ではありません。ここを検品できるのは、教科の専門性を持った人間だけです。逆に言えば、専門性さえあれば、コードが書けなくても教材は作れます。

なお、この教材は一度作り直しています。最初の版はどうしても納得できず、途中でAIを替えて一から組み直しました。作り直す判断ができるのも、自分で触っているからです。

5.公開先・ライセンス

本教材のコードは生成AIとの対話によって作成し、技術的な内容は投稿者が確認しています。授業でご自由にお使いください。
この記事は「技術科の教員がVibeコーディングで作ったWeb教材」4本シリーズの一部です。(第1回:sb3-changer/第3回:歯車・チェーン回転速度シミュレータ/第4回:おうちの電気シミュレーター)


投稿者:近藤 昌也(石川県)

Footer Image

投稿者プロフィール

管理者

関連するお勧め教材

\ 最新情報をチェック /


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください