プロジェクト概要
ものしり問題集（monoshiri.me）は、資格試験から一般教養まで幅広い分野の選択式問題を無料で公開している、スマホ特化の学習サイトです。登録不要・広告なしで、開いたその場から解き始められます。
現在49試験・324教材・約2,900問を公開中。資格（CISA、基本情報技術者、ITパスポート、情報セキュリティマネジメント、AWS認定クラウドプラクティショナー、日商簿記3級、FP3級、危険物取扱者乙4、秘書検定3級、販売士3級、TOEIC）、国語（漢字の読み書き、四字熟語、ことわざ、慣用句、故事成語、敬語、語彙）、教養（歴史、科学、地理、防災、応急手当、消費者保護）、文化・スポーツ（世界遺産、音楽、美術、文学、サッカー、人気アニメ作品）まで、ジャンル横断で扱っています。
技術的な主眼は「サーバーもデータベースも持たずに、どこまで実用的な学習サイトを作れるか」です。問題はすべて YAML で管理し、Astro でビルドして Cloudflare Pages に静的配信。学習記録は端末の localStorage に保存するため、バックエンドの運用コストが実質ゼロのまま、無料・無期限で公開し続けられる構成にしています。
プロダクトの特徴
スマホで「すきま時間に1問」
- 登録・ログイン不要。URL を開けばすぐ出題が始まる
- 正誤と回答速度を端末内（localStorage）に保存し、苦手な問題を可視化
- 1画面1設問。片手・縦持ちの操作を前提としたレイアウト
- すべての設問に解説を付け、「なぜその選択肢が正解なのか」まで届ける
3階層のコンテンツモデル
- 試験（exam）: 「基本情報技術者」「日商簿記3級」などの単位。ジャンル・タグ・ランディング文を持つ
- 教材（material）: 試験の中の学習単位。1教材 = 1つの YAML ファイル
- 問題（problem）・設問（question）: 長文や状況設定を共有する問題の下に、複数の設問がぶら下がる構造。読解型・事例型の出題に対応
技術スタック
- Astro 7: 全ページを静的生成。クライアント JavaScript は出題ロジックなど必要最小限に絞る
- Tailwind CSS v4（Vite プラグイン）: モバイルファーストのスタイリング
- YAML + Content Collections: 問題データをスキーマ付きで型検証。CMS もDBも持たない
- Cloudflare Pages: GitHub 連携で push するたび自動ビルド・自動デプロイ
- Cloudflare Pages Functions（Workers）: OGP 画像の動的生成（
workers-og）と共有リンクの解決をエッジで処理 - localStorage: 学習履歴の保存先。サーバーに個人の学習データを持たない設計
- TypeScript / Ruby: サイト実装は TypeScript、コンテンツ検証スクリプト群は Ruby
SEO / LLMO 対応
「〇〇 過去問」「〇〇 練習問題」といった検索需要に対して、試験ページ・教材ページを個別の静的ページとして持つことが構造的な強みになります。そのうえで次の実装を行っています。
- lastmod をコンテンツの実日付から生成: sitemap の
lastmodにビルド時刻を入れず、教材 YAML の作成日・更新日から算出。中身が変わっていないのに更新日だけ動く sitemap は、検索エンジンに無視される原因になるため - 試験ごとのランディングセクション: 「何を学べるか」「対象範囲はどこまでか」を試験単位で記述し、一覧ページの薄いコンテンツ化を防ぐ
- 日本語 / 英語の多言語対応: ロケール別ルーティングと hreflang を出力。UI 文言に加え、コンテンツ自体の翻訳にも対応
- 動的 OGP 画像: 教材ごとの OGP 画像をエッジで生成し、SNS シェア時の見え方を最適化
llms.txtの配信: 生成AI経由の流入（LLMO）を見据え、サイト構造を機械可読な形で提示
設計上の工夫
1. 問題の品質を仕組みで担保する
問題文・選択肢・解説をテンプレートやスクリプトで量産しないことをルール化しています。新規作成・改稿は専用の執筆スキル（AIエージェント向けの手順書）に従い、外部事実は出典付きで knowledge/ に保存してから一問ずつ執筆・品質審査する運用です。学習コンテンツにおいて、誤った知識を配ることは無価値どころか有害だからです。
2. 検証をコミット前の機械チェックに落とす
出典の妥当性、教材タイトルの整合、設問の品質、翻訳の対応漏れ、コンテンツ日付の妥当性を、それぞれ独立した検証スクリプトとして実装。ビルド前に機械的に落とせるものは人間のレビューに回さない、という分担にしています。
3. 「解ける範囲」を明示する
アニメ作品などのシリーズものでは、各教材が扱う話数・章を明記し、その範囲の知識だけで正解が一つに定まるように出題範囲を制約しています。出題の公平性と、ネタバレへの配慮を両立させるための設計です。
4. 運用コストをゼロに近づける
静的サイト + localStorage + エッジ関数という構成により、サーバー・DB・認証基盤のいずれも持ちません。運用コストが発生しないため、収益化を前提とせずコンテンツを増やし続けられるという、個人開発サービスにとって決定的な自由度を確保しています。
担当領域
- サービス企画・情報設計・UI/UX デザイン
- サイト実装（Astro / Tailwind / TypeScript）
- エッジ関数実装（Cloudflare Workers による OGP 生成・共有リンク）
- コンテンツ設計・問題執筆・品質審査フローの構築
- 検証スクリプト群の実装（Ruby）
- SEO / LLMO 設計、多言語対応
- デプロイパイプライン構築・運用
技術的な学び
- 数百ページ規模の静的サイトにおけるコンテンツモデリングとビルド時間の付き合い方
- sitemap の
lastmodをはじめとする、「正確さがランキングに効く」タイプの SEO 実装 - Cloudflare Workers による OGP 画像生成（画像処理をビルド時ではなくエッジに逃がす判断）
- AIエージェントを使ったコンテンツ制作を、品質を落とさず回すためのスキル設計と検証の自動化
- サーバーレスならぬ「サーバーもDBも無し」構成が、個人サービスの継続性に与える効果