【5年算数 容積】「なんで高さは1回しか引かないの？」自作3Dシミュレーターで「内のり」の壁を越える
5年生の算数「体積」の単元。子どもたちも順調に計算を進めてきたところで、必ず大きな壁となって立ちはだかるのが「内のり（容積）」の概念です。
「たてと横はガラスの厚さ2回分を引くのに、どうして深さ（高さ）は1回分しか引かないの？」
教科書の平面的な図や、黒板に描いたイラストだけでこれを説明しても、頭のなかで立体をイメージするのが苦手な子にとっては「そういう公式だから」という丸暗記になりがちです。
でも、算数の面白さは「自分で理由を発見すること」にありますよね。
そこで今回、子どもたちが自分で視点を動かしながら、視覚的に「あっ！そうか！」と気づくことができる「内のり3Dシミュレーター」をHTMLとJavaScriptで自作してみました！
💡 アプリの3つのこだわりポイント
1. 360度ぐるぐる回して「発見」できる
最大のポイントは、画面上の水そうを指やマウスで自由に回せること。真上から見たり、真横から見たりすることで、平面図では分からなかった「立体の構造」を自分のペースで把握できます。
2. 「ガラスと水をいっしょに見る」モード
ボタン一つで、ガラス部分が黄色く光り、中の水が透けて見えるようにしました。 真横から見ると「左右と底には黄色いガラスがある」のが分かり、真上から見ると「水面のところには黄色いガラスがない！」という事実が一目でわかります。「上にはフタがない」という一番重要なポイントに、言葉での説明なしに気づける仕掛けです。
3. 計算式は最初は「隠しておく」
すぐに答えを見せるのではなく、最初は計算方法のパネルを隠しています。 「けテぶれ」の学習サイクルでいうところの、まずは自分なりに予想を立ててみる時間を大切にするためです。アプリで水そうを回しながら「たぶんこうなるはず…」と考えたあとに、答え合わせとして計算式を表示できるようにしました。
🏫 実際の授業ではどう使う？
5年1組の教室では、こんな流れで使ってみようと考えています。
問題提示と予想：まずは外側の寸法と厚さを提示し、「内のりの計算はどうなるかな？」と各自で考えさせる。
シミュレーターで検証：Chromebookでこのアプリを開かせ（あるいは大型提示装置で映し）、自由に回して「ガラスの配置」を確認させる。
言語化：「なぜ深さは1cmしか引かなかったの？」と問いかけ、アプリで見た「上にフタがないから」という理由を自分の言葉で説明させる。
ただ公式を覚えるのではなく、「だから1回しか引かないんだ！」という納得感を持ってほしいなと思っています。
💻 先生方へ：コードを公開します！
「明日の授業でちょっと使ってみたい」という先生がいらっしゃいましたら、ぜひご活用ください！ 以下のHTMLコードをコピーして、メモ帳などで index.html という名前で保存するだけで、ブラウザ上で動くWebアプリになります。Googleサイトなどに埋め込んで子どもたちに共有するのもおすすめです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水そうの容積を求めよう！</title>
<style>
:root {
--primary-color: #4CAF50 ;
--accent-color: #FFC107 ;
--water-color: #2196F3 ;
--glass-glow: #fff176 ;
--bg-color: #f8f9fa ;
}
body {
margin: 0;
overflow: hidden;
font-family: 'Hiragino Maru Gothic ProN', 'Meiryo', sans-serif;
background-color: var(--bg-color);
}
/* 設定画面 */
#setup -screen {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 100;
}
.input-card {
background: #fff ;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
max-width: 400px;
width: 90%;
text-align: center;
}
.input-group {
margin: 15px 0;
text-align: left;
}
label { display: block; font-weight: bold; margin-bottom: 5px; color: #555 ; }
input {
width: 100%;
padding: 10px;
font-size: 18px;
border: 2px solid #ddd ;
border-radius: 8px;
box-sizing: border-box;
}
/* メイン画面 UI */
#ui -container {
position: absolute;
top: 20px; left: 20px;
background: rgba(255, 255, 255, 0.95);
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
z-index: 10;
width: 320px;
display: none;
}
h1 { font-size: 1.2rem; margin: 0 0 15px 0; color: #333 ; border-bottom: 3px solid var(--primary-color); padding-bottom: 5px; }
button {
display: block; width: 100%; margin-bottom: 8px; padding: 12px;
font-size: 15px; font-weight: bold; cursor: pointer; border: none;
border-radius: 8px; background-color: #eee ; color: #333 ;
transition: all 0.2s;
}
button:hover { filter: brightness(0.9); }
button.active { background-color: var(--primary-color); color: white; }
button#btn-combined.active { background-color: var(--accent-color); color: #333 ; }
.calc-panel {
background: #fff ; padding: 15px; border-radius: 8px; margin-top: 15px;
font-size: 15px; display: none; border: 2px solid var(--primary-color);
}
.highlight { font-weight: bold; color: #d32f2f ; background: #ffea00 ; padding: 2px 4px; border-radius: 3px; }
.note { font-size: 13px; color: #555 ; margin-top: 10px; line-height: 1.4; border-top: 1px dashed #ccc ; padding-top: 8px; }
canvas { display: block; }
</style>
</head>
<body>
<div id="setup-screen">
<div class="input-card">
<h1 style="border:none; font-size: 24px;">水そうの容積を求めよう！</h1>
<p style="color:#666; margin-bottom:20px;">外側の大きさと厚さを入力してね</p>
<div class="input-group">
<label>横の長さ (cm)</label>
<input type="number" id="in-w" value="52">
</div>
<div class="input-group">
<label>たての長さ (cm)</label>
<input type="number" id="in-d" value="22">
</div>
<div class="input-group">
<label>高さ (cm)</label>
<input type="number" id="in-h" value="31">
</div>
<div class="input-group">
<label>ガラスの厚さ (cm)</label>
<input type="number" id="in-t" value="1">
</div>
<button onclick="startApp()" style="font-size: 24px; padding: 20px; background-color: var(--primary-color); color: white;">スタート！</button>
</div>
</div>
<div id="ui-container">
<h1>表示の切り替え</h1>
<button id="btn-all" class="active">1. 全体を見る</button>
<button id="btn-combined" id="btn-combined">2. ガラスと水をいっしょに見る</button>
<button id="btn-water">3. 水（内のり）だけを見る</button>
<button id="btn-show-calc" style="margin-top:20px; background-color: #607D8B ; color: white;">容積の計算方法を見る</button>
<div id="calc-panel" class="calc-panel">
<p><strong>内のりの長さ：</strong></p>
<p id="calc-w"></p>
<p id="calc-d"></p>
<p id="calc-h"></p>
<div class="note">
<strong>【ヒント】</strong><br>
「いっしょに見る」モードで上から見てみよう。フタがないから、高さは<span class="highlight">底の1回分だけ</span>引けばいいんだね！
</div>
<p id="calc-res" style="margin-top:10px; font-weight:bold; color:var(--water-color);"></p>
</div>
<button onclick="location.reload()" style="margin-top:20px; font-size:12px; background:none; color:#999; border:1px solid #ccc ;">設定に戻る</button>
</div>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
let scene, camera, renderer, controls;
let glassGroup, water;
let glassMaterial, waterMaterial;
let W, D, H, T;
window.startApp = function() {
W = parseFloat(document.getElementById('in-w').value);
D = parseFloat(document.getElementById('in-d').value);
H = parseFloat(document.getElementById('in-h').value);
T = parseFloat(document.getElementById('in-t').value);
document.getElementById('setup-screen').style.display = 'none';
document.getElementById('ui-container').style.display = 'block';
initThree();
updateCalculations();
};
function initThree() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f8ff);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(W*1.2, H*1.5, D*2.0);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
scene.add(new THREE.AmbientLight(0xffffff, 0.9));
const dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
dirLight.position.set(10, 20, 10);
scene.add(dirLight);
glassMaterial = new THREE.MeshPhysicalMaterial({
color: 0xffffff,
transparent: true,
opacity: 0.2,
metalness: 0.1,
roughness: 0.1,
emissive: 0x000000
});
waterMaterial = new THREE.MeshPhongMaterial({
color: 0x2196F3,
transparent: true,
opacity: 0.7,
shininess: 100
});
glassGroup = new THREE.Group();
scene.add(glassGroup);
const edgeMat = new THREE.LineBasicMaterial({ color: 0x666666 });
function addGlassPanel(w, h, d, x, y, z) {
const geom = new THREE.BoxGeometry(w, h, d);
const mesh = new THREE.Mesh(geom, glassMaterial);
mesh.position.set(x, y, z);
glassGroup.add(mesh);
const edges = new THREE.EdgesGeometry(geom);
const line = new THREE.LineSegments(edges, edgeMat);
line.position.set(x, y, z);
glassGroup.add(line);
}
// ガラスの組み立て
addGlassPanel(W, T, D, 0, T/2, 0); // 底
addGlassPanel(T, H, D, -(W/2 - T/2), H/2, 0); // 左
addGlassPanel(T, H, D, (W/2 - T/2), H/2, 0); // 右
addGlassPanel(W - 2*T, H, T, 0, H/2, -(D/2 - T/2)); // 奥
addGlassPanel(W - 2*T, H, T, 0, H/2, (D/2 - T/2)); // 手前
// 水
const waterGeom = new THREE.BoxGeometry(W - 2*T, H - T, D - 2*T);
water = new THREE.Mesh(waterGeom, waterMaterial);
water.position.set(0, (H-T)/2 + T, 0);
scene.add(water);
animate();
}
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
function updateCalculations() {
const iw = W - 2*T;
const id = D - 2*T;
const ih = H - T;
document.getElementById('calc-w').innerText = `横: ${W} - (${T}×2) = ${iw}cm`;
document.getElementById('calc-d').innerText = `たて: ${D} - (${T}×2) = ${id}cm`;
document.getElementById('calc-h').innerHTML = `深さ: ${H} - <span class="highlight">${T}×1</span> = ${ih}cm`;
document.getElementById('calc-res').innerText = `答え: ${iw} × ${id} × ${ih} = ${iw*id*ih.toLocaleString()} cm³`;
}
const buttons = ['btn-all', 'btn-combined', 'btn-water'];
function setActive(id) {
buttons.forEach(b => document.getElementById(b).classList.remove('active'));
document.getElementById(id).classList.add('active');
}
document.getElementById('btn-all').onclick = () => {
setActive('btn-all');
glassMaterial.opacity = 0.2;
glassMaterial.emissive.setHex(0x000000);
water.visible = true;
waterMaterial.opacity = 0.7;
};
document.getElementById('btn-combined').onclick = () => {
setActive('btn-combined');
glassMaterial.opacity = 0.5;
glassMaterial.emissive.setHex(0xffeb3b); // ガラスを黄色く
water.visible = true;
waterMaterial.opacity = 0.4; // 水を透かす
};
document.getElementById('btn-water').onclick = () => {
setActive('btn-water');
glassMaterial.opacity = 0.02;
glassMaterial.emissive.setHex(0x000000);
water.visible = true;
waterMaterial.opacity = 0.9;
};
document.getElementById('btn-show-calc').onclick = function() {
const panel = document.getElementById('calc-panel');
const isVisible = panel.style.display === 'block';
panel.style.display = isVisible ? 'none' : 'block';
this.innerText = isVisible ? '容積の計算方法を見る' : '計算方法を隠す';
};
window.addEventListener('resize', () => {
if (!camera) return;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>ICTやAIツールをうまく組み合わせると、先生の「こういう教具があったらいいのにな」が、本当にあっという間に形になる時代になりましたね。これからも、子どもたちの「わかった！」を引き出すツールを色々と試作していきたいと思います！
