算数 かさ・容量（L・dL・mL）

どんな作品か

小学2・3年生がつまずきやすい「水のかさ」――L（リットル）・dL（デシリットル）・mL（ミリリットル）の関係を、画面でさわって理解し、そのままA4テストにして印刷できるWebアプリです。

1Lますに水を注ぐ・抜くと、L・dL・mL の3つの表示が同時に動きます。10dLたまると1Lに「くりあがる」ようすもその場で見られます。理解できたら、同じ画面から難易度を選んでA4の問題用紙と解答シートを自動作成。おうちでも教室でも、印刷ボタンひとつで配れます。

インストール不要・アカウント不要・完全無料。設定や学習の状態は端末内にのみ保存され、外部サーバーには送信されません。

つくった理由

かさの単位は、長さや重さと違って「1dLってどれくらい？」という感覚が持ちにくく、1L＝10dL＝1000mL という関係も暗記になりがちです。教科書の図は静止画なので、水が増えるにつれて数字がどう変わるのかは想像するしかありません。

そこで「水を動かすと3つの単位が同時に動く」という一点にしぼり、量と数字が結びつく瞬間を画面上で何度でも試せるようにしました。あわせて、理解を確かめるためのテストを親や先生がその場で作れるよう、学習画面とプリント作成を同じアプリにまとめています。

主な機能と特徴

へんしんラボ ― 「1Lの中に1dLが10こ」を目で見る

スライダーや「4dL」「1L（いっぱい）」などのボタンで水量を変えると、0.4 L 4 dL 400 mL が同時に切り替わります。「1dLブロック（10分割）を可視化」をオンにすると、1Lますが10等分に区切られ、単位のへんしんが図としてつかめます。

けいさん ― くりあがり・くりさがりの「じっけん」

1L 4dL ＋ 0L 8dL のように操作すると、dLが12dLになり、10dLが1Lへ「シュッ！」とくりあがるところまで説明が出ます。ひき算では逆に、1Lを10dLへくずす様子を確かめられます。

みぢかなかさ図鑑 ― 量の感覚を身につける

牛乳パック1L、ペットボトル500mL、コップ200mL、スプーン15mL。身の回りのものと結びつけて「だいたいどれくらい」をつかむための一覧です。

れんしゅう ― 10問テストと図つきのかいせつ

☆1〜☆4の難易度を選んで10問の4択に挑戦します。答えるとその場で判定され、めもりの読み方まで図と文で説明されるため、間違えたところをそのまま復習できます。

プリント ― A4の問題用紙と解答シートを作成・印刷

難易度・問題の種類・問題数（6/8/10問）・印刷内容（問題のみ／解答のみ／両方）を選ぶと、右側のプレビューがすぐ更新されます。出力されるのはJIS A4縦（210mm×297mm）の実寸レイアウトで、なまえ・年組欄と点数欄つきの問題用紙と、赤字の答え＋1問ごとのかいせつが入った解答シートが同時に作られます。

問題用紙	解答シート

問題はシード値つきのURL（例：#print?d=2&n=8&out=both&seed=247150）で完全に再現されます。ブックマークしておけば「先週配ったテストをもう1枚」も、「同じ設定で別の問題を」も自由自在です。

収録している10種類の問題パターン

ID	問題の種類	内容
P1	1Lますの めもり	1Lますの水面を読む
P2	1dLます・ビーカーの めもり	1dLます、ビーカー、メスシリンダーを読む
P3	L と dL の へんしん	1L＝10dL の単位換算
P4	dL・L と mL の へんしん	1dL＝100mL、1L＝1000mL の単位換算
P5〜P6	たし算	くりあがりなし／10dLを1Lにくりあげる
P7〜P8	ひき算	くりさがりなし／1Lを10dLにくずす
P9	かさの くらべっこ	単位のちがう2つの量を比べる
P10	せいかつの ぶんしょうだい	実生活を題材にした文章題

子どもが読みやすい表示

UDフォント（BIZ UDPGothic）と大きめの文字サイズを採用し、表記は「小学2年（ひらがな中心）」「小学3年（ならう漢字）」「一般（漢字まじり）」の3段階から選べます。ふりがな（ルビ）と効果音のオン・オフも設定画面から切り替えられます。容器のイラストはすべて手書きのインラインSVGで、ガラスの透明感、水面のメニスカス、正確な10分割目盛りを描き分けています。

スマートフォン・タブレット対応

A4プレビューは画面幅に合わせて自動で縮小され、用紙1枚の全体像がそのまま確認できます。「べつの問題」「印刷 / PDF」は常に画面下部に固定表示されるため、どこまでスクロールしても上に戻る必要がありません。

技術構成

外部ライブラリを使わないVanilla JavaScript（ES Modules）で、ビルド工程なしのまま動く構成です。画面はハッシュルーターで切り替え、容器の絵はインラインSVGを動的に生成しています。問題はシード付き擬似乱数で生成しているため、同じシードからは常に同じプリントが作られます。

配信はCloudflare Workers + Static Assetsで、自動デプロイできる構成です。PWAに対応しているため、一度アクセスすればオフラインでも動きます。

公開について

Cloudflare上にデプロイしており、どなたでも今すぐ無料でお使いいただけます。

• Webアプリ：volume-and-capacity.molkz.com