分子構造ビューア – 3D Molecular Structure Viewer
分子構造ビューア は、化学式や化合物名を入力するだけで、分子の3D構造をインタラクティブに観察できるWebアプリケーションです。 中学生から大学教養課程まで、化学を身近に感じられるように設計された教育向けツールです。
🔬 分子構造ビューアとは？
化学の授業で「分子の立体構造」を理解するのは難しいと感じたことはありませんか？ 教科書の平面図だけでは、分子の本当の姿を掴みづらいものです。
分子構造ビューア は、そんな課題を解決するために開発されました。
- 100種類以上の分子データベース から選んで即座に3D表示
- PubChem（NIH提供） と Protein Data Bank から正確な構造データを取得
- マウス操作 で自由に回転・拡大・移動して観察
- 2D構造式 と 3D立体構造 を同時に確認
- スマホ・タブレット・PCに対応 したレスポンシブデザイン
化学式を入力するだけで、水分子からタンパク質まで、あらゆる分子の立体構造を直感的に理解できます。
✨ 主な特長
- 豊富な分子データベース（100種類以上）
無機化合物、有機化合物、糖類、アミノ酸、脂質、核酸、ビタミン、ホルモン、医薬品など、階層的に分類された分子を収録。
- 高度な3D可視化
スティック、球（CPK配色）、ライン、カートゥーン（タンパク質用）など、複数の表示スタイルとカラーリングオプションを用意。
- インタラクティブ操作
マウスで回転・平行移動・拡大縮小。自動回転機能や視点リセット、PNG画像保存も可能。
- 2D構造式と3D構造の同時表示
PubChemから取得した骨格式（2D）と立体構造（3D）を並べて比較。
- アクセシビリティ対応
Standard、Pastel、High Contrast、Grayscale、Darkなど6種類のテーマで、色覚障害にも配慮。
- 検索履歴・設定の保存
Firebase連携により、過去の検索履歴やビューア設定を自動保存（ログイン時）。
📚 こんな人におすすめ
- 中学・高校の理科・化学の授業で分子構造を学びたい生徒
- 大学の化学・生化学の授業で立体構造を理解したい学生
- 医療・看護・薬学・生物系の学生や研究者
- 化学を教える教員・講師（授業教材として活用）
- プレゼンテーションやレポートで分子構造図を使いたい人
- 化学に興味があり、分子の世界を探求したい方
🚀 利用方法
分子構造ビューア は、ブラウザから即座にアクセス可能です。 インストール不要で、PC・スマートフォン・タブレットで利用できます。
アクセス方法
- 公開URL: （リリース時に追加予定）
- 対応ブラウザ: Chrome、Firefox、Safari、Edgeの最新版
- 推奨環境: インターネット接続環境（分子データをリアルタイム取得するため）
使い方
方法1: 自由検索
- 「化合物を検索」タブを選択
- 検索ボックスに入力（例:
H2O、水、glucose） - 検索ボタンをクリック
方法2: カテゴリーから選択
- 「分子選択」タブを選択
- カテゴリー（例: 糖類・炭水化物）を選択
- サブカテゴリー（例: 単糖類）を選択
- 表示したい分子をクリック
方法3: 検索履歴（要ログイン）
- 「履歴」タブを選択
- 過去の検索から再度表示
操作方法
- マウス左ドラッグ: 分子を回転
- マウス右ドラッグ: 分子を平行移動
- マウススクロール: 拡大/縮小
- 自動回転ボタン: ワンクリックで自動回転
- 視点リセットボタン: 初期表示に戻す
- 画像保存ボタン: PNG形式でエクスポート
🎓 教育での活用シーン
中学校理科
- 水分子（H₂O）の構造と極性
- 二酸化炭素（CO₂）の直線構造
- アンモニア（NH₃）の三角錐構造
- 塩化ナトリウムの結晶構造
高校化学
- 有機化合物の構造異性体（ブタンとイソブタン）
- 糖類の環状構造とヒドロキシ基の配置
- アミノ酸の構造とペプチド結合
- 芳香族化合物（ベンゼン、トルエン、フェノール）
- 高分子化合物（デンプン、セルロース）
大学教養化学・生化学
- 立体異性体（D-グルコースとL-グルコース）
- タンパク質の二次構造（α-ヘリックス、β-シート）
- 酵素の活性部位
- 核酸の構造（ATP、DNA塩基）
- 脂質の立体構造
プレゼンテーション・レポート作成
- 画像保存機能で分子構造図をエクスポート
- 様々な角度から観察して最適なビューを保存
- 背景色を変更してスライドに合わせる
📖 収録分子カテゴリー
| カテゴリー | 内容 |
| ———— | —— |
| 無機化合物 | 水、二酸化炭素、アンモニア、塩酸、硫酸、塩化ナトリウムなど |
| 有機化合物 | アルカン、アルケン、アルキン、芳香族化合物、アルコール、エーテル、アルデヒド、ケトン、カルボン酸など |
| 糖類・炭水化物 | グルコース、フルクトース、スクロース、デンプン、セルロースなど |
| アミノ酸・ペプチド | 20種類の必須アミノ酸、インスリン、グルカゴン、オキシトシンなど |
| 脂質 | パルミチン酸、ステアリン酸、トリグリセリド、コレステロール、リン脂質など |
| 核酸・ヌクレオチド | ATP、ADP、AMP、cAMP、アデニン、グアニン、シトシン、チミン、ウラシルなど |
| 生体分子 | ビタミンC、ビタミンB群、アドレナリン、ドーパミン、セロトニン、アセチルコリンなど |
| 医薬品 | アスピリン、イブプロフェン、ペニシリン、カフェイン、ニコチン、モルヒネなど |
| その他 | β-カロテン、クロロフィル、メントール、バニリンなど |
合計100種類以上の分子を収録
🛠️ 技術情報
| 項目 | 内容 |
| —— | —— |
| フロントエンド | Vue 3（MITライセンス） |
| 3D可視化 | 3Dmol.js（BSD-3-Clause） |
| 分子データ | PubChem API（NIH提供、Public Domain）、RCSB PDB API（Free） |
| スタイリング | Tailwind CSS、Font Awesome Free |
| バックエンド | Firebase（認証・データベース） |
すべてオープンソース技術と公的データベースを活用した、信頼性の高い教育ツールです。
🏗️ 開発情報（更新履歴）
| 日付 | 更新内容 |
| —— | ———— |
| 2025-xx-xx | 分子構造ビューア 公開予定 |
| 2025-xx-xx | PubChem・PDB API統合完了 |
| 2025-xx-xx | 100種類以上の分子データベース構築 |
| 2025-xx-xx | アクセシビリティ対応（6テーマ実装） |
📩 お問い合わせ
教育機関向け導入、講義用コンテンツ提供、学校・塾での活用をご希望の方は、以下よりお問い合わせください。
EMUYN LLC（開発・運営） <https://www.emuyn.net/contact>
GitHub リポジトリ <https://github.com/numero-uno-jpn/MolecularModel>
バグ報告、機能リクエストは、GitHubイシューにてお願いいたします。
⚠️ ご注意
このアプリケーションは教育目的で設計されています。 研究用途での使用には、必ず元のデータソース（PubChem、PDB）を直接参照し、データの正確性を検証してください。