【無料0円】非エンジニアが資格学習アプリを5個公開した話【GitHub Pages】

Last updated at 2026-04-19Posted at 2026-04-19

結論：サーバー0円・ドメイン0円・保守0円で、資格学習アプリは5個まで量産できる。
PM/AP/FE/Java Silver/算数の5アプリを、全部GitHub Pagesだけで公開した。
バックエンド知識ゼロでも、学習データはlocalStorageで完結する。

実物はこちら。触ってから読むのが早い。

https://foolish1023.github.io/pm-exam/
https://foolish1023.github.io/ap-exam/
https://foolish1023.github.io/fe-exam/
https://foolish1023.github.io/java-silver/
https://foolish1023.github.io/sansu-app/

この記事でわかること

GitHub Pagesで学習アプリを無料公開する手順
学習が「続く」ためのUI設計4つの工夫（苦手マーク・連続記録・PWA・キーボード操作）
バックエンド不要で進捗を保存する方法（localStorage活用）
資格別アプリ6個を量産するときの共通テンプレ設計
ハマりポイントと回避策

対象読者

資格勉強してる人（PM試験、応用情報、基本情報、Java Silver）
子供向けの学習アプリを作りたい親
個人開発でサーバー代を払いたくない人
非エンジニアだけど「自分用アプリ」を作りたい人
GitHub Pages で何ができるか知りたい人

なぜ学習アプリを自作したのか

既存の資格学習アプリ、微妙に痒いところに手が届かない。

広告がウザい
無料枠だと途中で課金ゲートに阻まれる
過去問の解説が薄い
自分のペースで進めづらい
子供に使わせたいのに大人向けUIばかり

「じゃあ自分で作れば?」から始まった。

目標は3つだけ置いた。

0円で公開する（サーバー代・ドメイン代なし）
広告ゼロ
学習が"続く"UIにする

結果、PM/AP/FE/Java Silverの4資格 + 子供の算数アプリ、計5アプリが完成した。

作った5アプリの全容

このテーブルは5アプリの違いを比較している。問題数・対象読者・URLの観点で並べた。

アプリ	問題数	対象	URL
PM試験対策	午前150問＋教科書40トピック	プロジェクトマネージャ試験受験者	pm-exam
AP試験対策	午前150問＋教科書40トピック	応用情報技術者試験受験者	ap-exam
FE試験対策	練習150問＋教科書40トピック	基本情報技術者試験受験者	fe-exam
Java Silver SE17	175問＋教科書40トピック	1Z0-825合格目指す人	java-silver
けいさんトレイン	5/10/20問可変	子供（算数・時計・英語）	sansu-app

4資格アプリは共通設計。1つ作れば残りはコンテンツ差し替えだけで済む。

けいさんトレインだけ毛色が違う。「新幹線でかごしま→さっぽろを縦断」というゲーム要素を入れた。子供が飽きないよう、正答率80%以上でスタンプ獲得→駅到着のフローにしてある。

技術選定：なぜGitHub Pagesなのか

結論から言うと、無料で永久に動き続けるから。

比較してみる。このテーブルは個人開発の配信先を比較している。無料枠・独自ドメイン・サーバー管理の3観点。

サービス	月額	独自ドメイン	サーバー管理	広告なし
GitHub Pages	✅ 0円	✅ 可	✅ 不要	✅ なし
Vercel/Netlify	✅ 0円	✅ 可	✅ 不要	✅ なし
Firebase Hosting	✅ 0円（10GBまで）	✅ 可	✅ 不要	✅ なし
レンタルサーバー	❌ 500〜2000円	✅ 可	❌ 必要	✅ なし

Vercel/Netlifyでもいいが、GitHub Pagesの強みは3つ。

gitにpushするだけでデプロイ完了（CIすらいらない）
アカウント取得が軽い（GitHubは開発者なら持ってる）
静的HTMLで済むなら最短ルート

学習が続くUI設計4つ

資格アプリで一番重要なのは「続くかどうか」。機能たくさん積んでも、1週間でスマホから消されたら意味がない。

6アプリ全てに入れた工夫が4つある。

1. 連続学習日数の表示

ログインするたびに「連続X日目」を表示する。

💡 Tips: これ、LeetCodeやDuolingoの「streak」の劣化版だが、個人アプリでも効く。「昨日も開いた」という事実を可視化するだけで継続率が上がる。

2. 苦手マーク

問題ごとに「☆苦手」ボタンを置く。押した問題だけを後でまとめて復習できる。

間違えた問題は自動で苦手扱いにするのではなく、ユーザーが手動で押す仕様にした。自動マークだと「ちょっと迷っただけの問題」までマークされて復習リストが膨れる。自分で選ぶから記憶に残る。

3. キーボード完全対応

A/B/C/Dで選択、Enterで送信、←→で前後移動、Dで解説表示。

PCで使うとき、マウスに手を伸ばす回数がゼロになる。地味だが、100問解くと効く。資格勉強は作業量勝負なので、1問あたりの操作時間を削るのが正義。

4. PWA（ホーム画面追加）

manifest.jsonを置くだけでPWA化できる。スマホのホーム画面に追加すると、ブラウザのURLバーが消えて「ネイティブアプリっぽく」見える。

PWA化の最小セット:

manifest.json（アプリ名・アイコン・起動URL）
service-worker.js（オフライン対応）
192px / 512pxのアイコン2種
HTTPS配信（GitHub Pagesなら自動）

これだけで「インストール可能なアプリ」扱いになる。

データはlocalStorageで完結する

「DB使わないで進捗どう保存するの?」と聞かれる。答え：localStorage。

// 進捗保存
const progress = {
  lastChapter: 5,
  weakQuestions: [12, 34, 56],
  streak: 7,
  lastAccessDate: '2026-04-19'
};
localStorage.setItem('pm-exam-progress', JSON.stringify(progress));

// 読み込み
const saved = JSON.parse(localStorage.getItem('pm-exam-progress') || '{}');

これだけ。バックエンド・ユーザー認証・DB接続、全部いらない。

デメリットもある。

ブラウザ消すと進捗消える
デバイス間で同期できない
複数人で使えない

資格学習用途なら問題ない。自分ひとりのデバイスで完結する。

もしどうしても同期したければ、GASをバックエンド代わりにしてスプレッドシートに書き込む構成が取れる。ただし公開URLに個人スプレッドシートが紐づくので、身内用途以外は推奨しない。

量産するための共通テンプレ設計

4つの資格アプリ、見た目は似ている。これ、意図的に共通テンプレを作った。

ディレクトリ構成

pm-exam/
├── index.html          # UIのハコ
├── app.js              # 共通ロジック（進捗管理・キーボード操作）
├── style.css           # 共通スタイル
├── data/
│   ├── questions.json  # 問題データ（アプリごとに差し替え）
│   └── textbook.json   # 教科書データ
├── manifest.json       # PWA設定
└── service-worker.js   # オフライン対応

問題データだけJSONで分離している。このおかげで、1つアプリを作ったら、残りはquestions.jsonとtextbook.jsonを差し替えるだけで済む。

問題データの構造

questions.json

[
  {
    "id": 1,
    "chapter": 1,
    "question": "プロジェクトマネジメントにおける...",
    "choices": ["A. ...", "B. ...", "C. ...", "D. ..."],
    "answer": "B",
    "explanation": "正解はB。理由は..."
  }
]

シンプル。chapterで章立て、answerで正解、explanationで解説。

教科書データの構造

textbook.json

[
  {
    "chapter": 1,
    "title": "プロジェクト統合マネジメント",
    "topics": [
      {
        "title": "プロジェクト憲章",
        "content": "プロジェクト憲章とは..."
      }
    ]
  }
]

章ごとに「教科書で概念学習」→「問題で定着」のフローが回る。

ハマりポイントと回避策

量産する過程で踏んだ地雷を共有する。

1. GitHub Pagesのキャッシュが強すぎる

index.htmlを更新しても、ユーザーのブラウザで古い版が表示され続ける。service-workerを登録するとさらに頑固になる。

回避策：service-worker.jsでバージョン番号をハードコードして、バージョン変更時に古いキャッシュを明示削除する。

service-worker.js

const CACHE_VERSION = 'v1.0.3';  // デプロイごとに上げる
const CACHE_NAME = `pm-exam-${CACHE_VERSION}`;

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))
      )
    )
  );
});

2. iPhoneでPWAインストール時のアイコンが潰れる

Androidは192pxで足りるが、iOSは apple-touch-icon を別で指定する必要がある。

<link rel="apple-touch-icon" href="/icon-180.png">
<link rel="icon" href="/icon-192.png">

3. localStorageは容量制限（5MB）がある

問題データを丸ごとlocalStorageに突っ込んでたら、Java Silver（175問＋解説）でブラウザ警告が出た。

回避策：問題データ本体はJSONで配信（fetch）、localStorageには進捗（どこまで進んだか）だけ保存する。

4. iOS Safariでキーボードショートカットが効かない

A/B/C/Dキーショートカットを組んだが、iOS Safariではソフトキーボード呼び出しの挙動が違って動かない。

回避策：UA判定してモバイルのときはタップUIだけにフォーカスする。PCではキーボード、スマホではタップ、と割り切る。

コストは本当に0円か

検証した。5アプリ全部公開して、月額コストを計算した。

このテーブルは5アプリの運用コストを示している。

費目	金額	備考
GitHub Pages	0円	無料プランで容量1GB・帯域月100GBまで
独自ドメイン	0円	`foolish1023.github.io` のまま使用
SSL証明書	0円	GitHub Pagesが自動付与
CDN	0円	GitHub Pagesに内蔵
合計	0円/月

もし独自ドメインを取るとしても、お名前ドットコムで年1000円程度。それ以外で課金ポイントがない。

ただし注意: GitHub Pagesは商用利用OKだが、「ソフトウェアの販売・ホスティング」はNG。資格対策アプリで直接課金するのはグレー。広告貼るならOK。規約は定期的に読み直すこと。

参考: GitHub Pages利用規約

まとめ

今日からやること

今日: pm-examを触ってみる。「自分が欲しい機能」を3つメモする
今週: GitHubアカウントを作って、index.htmlを1枚だけ置いてGitHub Pagesで公開する
今月: 問題データ（JSON）を作って、localStorage保存ロジックを組む。最小版の学習アプリを公開まで持っていく

ポイント再確認

GitHub Pagesで0円運用は可能。サーバー代ゼロで広告なしアプリが作れる
localStorageで進捗保存すれば、バックエンド不要
共通テンプレを1つ作れば、コンテンツ差し替えで量産できる
PWA化でスマホにインストールっぽく見せられる（manifest.jsonだけで十分）
キャッシュ戦略とiOS対応は早めに考える。後で詰む

「勉強が続かない」「作りたいアプリがあるけどサーバー代払いたくない」、この2つを同時に解決するのが自作資格アプリだった。

参考ソース:

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up