このサンプルについて

炭素原子数と温度による物質の3状態インタラクティブビューアの制作サンプル|高校化学教材制作

高校化学の「有機化合物 (アルカン等) の炭素原子数と温度による固体・液体・気体の相変化」を、融点曲線・沸点曲線・3領域・代表例の順に Chapter 型で段階表示するインタラクティブビューアの制作サンプルです。ダークテーマ + 2カラムレイアウト + タイムライン UI で、問題形式ではなく「現象を見せて理解させる」ビジュアライゼーション手法を採用しています。教科書・参考書・e ラーニング教材のデジタル化をご検討の出版社様・学習塾様・教育系企業様に、多様な表現手法の一例としてご覧いただけます。貴社の既存コンテンツやカリキュラムに合わせたオーダーメイド制作も承ります。

  • 左右2カラム (SVG ステージ + サイドパネル) のダークテーマレイアウト
  • Chapter 型ナビゲーション (6章) + 縦並びタイムライン UI
  • サイドパネルで各 Chapter の解説とアクセントカラーが連動
  • メタン (C₁)・ヘキサン (C₆)・パラフィン (C₂₀) を脈動ドット + 吹き出しカードで視覚化
  • 数字キー 1〜6 による Chapter ダイレクトジャンプ対応
  • 自動再生・キーボード操作 (← → / Space / R) に対応
  • Schema.org LearningResource + HowTo 構造化データ対応
  • 見出し h1 / h2 / h3 の正規化、SVG に title/desc、aria-labelledby
  • PC / タブレット (900px 以下で縦並びに自動切替)
  • 貴社オリジナルコンテンツに合わせたカスタマイズ制作可能

炭素原子数と温度で見る物質の3状態

States of Matter — 有機化合物の相変化インタラクティブビューア

炭素原子数と温度に対する物質の3状態のグラフ 横軸が炭素原子数、縦軸が温度のグラフに、融点曲線 (赤) と沸点曲線 (青) の2本が描かれ、3つの領域 (固体・液体・気体) に分かれていることを示す教材図。

キーボード操作: ← → で進む/戻る、Space で自動再生、R でリセット、数字キー 1〜6 で各章へ

炭素原子数と温度による物質の3状態

有機化合物 (特にアルカン等) では、炭素原子数が増えるほど分子同士の引力が強くなり、融点・沸点が上昇します。このグラフは炭素原子数 (横軸) と温度 (縦軸) の組み合わせで、物質が固体・液体・気体のどの状態にあるかを一目で読み取れる教材です。

  1. Chapter 1: グラフ全体を見る

    横軸は炭素原子数、縦軸は温度。2本の曲線 (赤=融点、青=沸点) が3つの領域 (固体・液体・気体) を分けています。

  2. Chapter 2: 融点曲線 (赤)

    固体から液体に変わる温度を示す曲線。この曲線より温度が低い領域は固体、高い領域は液体になります。炭素原子数が増えるほど融点も上昇します。

  3. Chapter 3: 沸点曲線 (青)

    液体から気体に変わる温度を示す曲線。この曲線より温度が高い領域は気体です。融点曲線と同様に、炭素原子数が増えるほど沸点も上昇します。

  4. Chapter 4: 3領域を色分け

    融点曲線より下 = 固体 (赤の下)、融点と沸点の間 = 液体 (ピンク塗り)、沸点曲線より上 = 気体 (水色塗り)。グラフ全体が3つのゾーンに分かれる仕組みを視覚化します。

  5. Chapter 5: 代表例で確認

    メタン (C₁) は常温で気体、ヘキサン (C₆) は液体、パラフィン (C₂₀以上) は固体。それぞれグラフ上での位置を確認すると、状態の違いが一目で分かります。

  6. Chapter 6: まとめ

    炭素原子数と温度の2つの変数で物質の状態が決まる ― 複雑な現象を2次元のグラフで読み取れる、化学の代表的な視覚化例の一つです。

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

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