このサンプルについて

雨温図インタラクティブ教材の制作サンプル|出版社・学習塾向けデジタル教材制作

地理分野の雨温図を段階的に描画するデジタル教材の制作サンプルです。
SVG アニメーションとキーボード操作を組み合わせ、気温の折れ線と
降水量の棒グラフを1ステップずつ描画することで、生徒が「読み取り手順」を
体感的に理解できる設計にしています。教科書・問題集・e ラーニング教材の
デジタル化をご検討の出版社様・学習塾様・教育系企業様に、制作事例として
ご覧いただけます。貴社の既存コンテンツやカリキュラムに合わせた
オーダーメイド制作も承ります。

  • SVG ベースの精密なグラフ描画 (気温の折れ線 + 降水量の棒グラフ)
  • 9ステップの段階表示で学習フローを設計
  • 自動再生モードを搭載 (授業配信・動画教材として活用可)
  • PC / タブレット / スマートフォンのレスポンシブ対応
  • ブラウザのみで動作、アプリ不要の軽量実装
  • 地理以外の教科 (数学・理科・歴史等) にも応用可能な設計
  • 貴社オリジナルコンテンツに合わせたカスタマイズ制作可能

雨温図 問題 — 段階表示アプリ

Step 1 / 9
雨温図 (気温と降水量のグラフ) 3地点比較 3つの地点の雨温図を横に並べて比較する教材図。各パネルは折れ線グラフ (気温) と帯グラフ (降水量) で構成され、ステップ操作で1パネルずつ段階的に描画されます。
操作: ← → キー / スペース(自動再生) / R(リセット)

雨温図の段階的な読み取り

3地点の雨温図を順番に描画することで、地点ごとの気候の違いを読み取る練習ができます。「気温の折れ線」と「降水量の帯グラフ」を分解して観察することで、各気候帯の特徴を理解しやすくなります。

  1. Step 1: 1地点目の見出し表示

    まず1地点目の雨温図の地名・枠組みが表示されます。雨温図とは、1年を通じた気温と降水量を1つにまとめたグラフです。

  2. Step 2: 気温の折れ線グラフ (1地点目)

    月別の平均気温がピンクの折れ線で描画されます。線の高低差から気候の寒暖差を読み取ります。

  3. Step 3: 降水量の帯グラフ (1地点目)

    月別の降水量が色帯で表示されます。降水量の多い月・少ない月から、雨季・乾季の有無を読み取ります。

  4. Step 4: 2地点目の見出し表示

    2地点目の雨温図が追加されます。1地点目と並べて比較することで、気候の違いを直感的に比べられます。

  5. Step 5: 気温の折れ線グラフ (2地点目)

    2地点目の気温カーブが描かれます。1地点目と比較して、年平均気温や寒暖差の違いを確認できます。

  6. Step 6: 降水量の帯グラフ (2地点目)

    2地点目の降水量が表示されます。1地点目との違いから、気候帯の判別手がかりが見えてきます。

  7. Step 7: 3地点目の見出し表示

    3地点目の雨温図が追加され、3地点比較が可能になります。

  8. Step 8: 気温の折れ線グラフ (3地点目)

    3地点目の気温カーブが描かれます。3地点すべての気温変化を一覧できます。

  9. Step 9: 降水量の帯グラフ (3地点目)

    3地点目の降水量が描かれ、全パネルが揃います。3地点を比較しながら、それぞれの気候帯を推定していきます。

デジタル教材の制作をご検討ですか?

まずはお気軽にご相談ください