制作経緯
Andy Weir の小説『プロジェクト・ヘイル・メアリー』を読んだとき、科学が物語になりうることを改めて感じました。主人公のライランドは記憶を失った状態で宇宙船の中で目を覚まし、手元にある知識と観察だけで「何が起きているのか」を一つずつ解きほぐしていく——その過程が、科学の本質を体感させてくれるような読書体験でした。
子どもたちに「科学は難しい暗記科目」ではなく、「問いを立てて試す営み」だと伝えたい、という動機がありました。図鑑でも教科書でもなく、ストーリー的な文脈で「なぜ?」を追いかけていけるサイトを作れないか、というのが出発点です。リポジトリは非公開ですが、サイト自体はパブリックに公開しています。
概要
「project-hail-mary」は、物理・生物・化学・地球科学といった分野を入口として、科学的なものの見方を紹介する家族向けのガイドサイトです。各記事は「疑問」→「観察」→「考察」の流れで構成されており、結論を先に渡すのではなく読者自身が考える余白を意識して設計しています。
Astro の Content Collections で記事を管理し、.mdoc (Markdoc) で本文を記述しています。記事ごとに対象年齢・分野・キーワードをタグ付けしており、「小学生向け」「宇宙」などで絞り込めるようにしています。
技術選定
- Astro + Content Collections — 記事管理と型安全なフロントマターに Astro の仕組みをそのまま活用。blog / works と同じ構成に揃えることでサイト全体の保守性を保った。
- Markdoc (.mdoc) — 標準 Markdown に加えて、コールアウトのような独自タグを宣言的に定義できる。記事の構造化と拡張性のバランスが取りやすい。
- Vercel 静的デプロイ — コンテンツ更新は Git プッシュのみで、CI/CD が自動ビルドと公開を担う。執筆から公開までのサイクルを軽く保っている。
- TypeScript strict — フロントマターの型やコンポーネント Props を厳格に管理し、記事追加時のスキーマ違反をビルド時に検出する。
学び
- 「科学をわかりやすく」は難しい。 正確さを保ちながら入口を広げるには、「概念の省略の仕方」に気を遣う必要があります。専門用語を使わずに説明しようとすると、正確さが犠牲になる場面が何度もありました。記事ごとに「どこまで厳密に書くか」のラインを設けることで対処しています。
- コンテンツとコードは別ペースで育つ。 サイトの仕組みは一度整えば動き続けますが、記事は継続的に書き続けないと価値が生まれません。開発期間とコンテンツ制作期間を分離したことで、仕組みの改修と執筆が干渉しにくくなりました。
- Markdoc の独自タグは「少なく絞る」が正解だった。 最初は記事に使いそうなタグをまとめて定義しようとしましたが、実際に使われる独自タグは数種類に留まっています。過剰に定義すると利用コードの複雑さが増すだけだと実感しました。
今後の方向性
記事のラインアップを徐々に増やすことが直近の作業です。現在は物理分野の記事が中心で、生物・化学分野は準備中です。対象年齢が広いため「小学生向け」と「中学生向け」のトラックを明確に分けることも検討しています。
技術面では、記事間のリンク(前提知識・関連記事)の導線整備を優先したいと思っています。
External Links
プロダクト本体や LP に移動
このページでは背景と設計判断をまとめ、詳細な導線は外部 LP 側に集約しています。