【実践編】紙のテストをAI学習アプリにして家族限定公開するまでの全手順

エンジニアじゃなくてもできた。GoogleドライブのスキャンからAIでのアプリ作成、Cloudflareを使った家族限定公開まで、実際にやった手順をすべて公開します。

この記事は、こちらの体験談の「技術的な裏側」をまとめたものです。

きっかけは、苦手な単元をくり返し間違える娘を見て「市販の問題集はどれも”うちの子のつまずき”にはぴったり合っていないな」と感じたことでした。だったら、娘の間違えた問題だけを集めた専用アプリを作ればいい。エンジニアではない私でも、AIと一緒なら形にできるかもしれない——そんな軽い気持ちで始めた記録です。

「自分でも作ってみたい」という方のために、2026年5月に実際にやった手順を公開します。Cloudflare Pagesの部分は当時の実装記録です。新しく家族の記録を扱うアプリを作る場合は、公開前に認証とデータの扱いをエンジニアへ確認してください。

この記事でできるようになること

紙のテスト・解答用紙をデジタルデータに変換する
AIにアプリのプログラムを作ってもらう
作ったアプリをスマホ・PCからアクセスできる状態にする
家族だけがログインできるセキュリティをかける
問題を追加したら自動で最新版が公開される仕組みを作る

難しそうに見えますが、各ステップでやることは明確です。プログラムを自分で書く必要はありません。

登場するツール

ツール名	役割	費用
Googleドライブ	紙のテストをスキャン・PDF化	無料
Claude（AI）	アプリのプログラムを作成	月約3,000円（Pro版）
GitHub	アプリの設計図を保管する場所	無料
Cloudflare Pages	アプリをインターネット上で動かす	無料
Cloudflare Access	家族以外が入れないよう鍵をかける	無料

Claudeの月額以外はすべて無料で揃います。

STEP 1：紙のテストをPDFにスキャンする

まず、練習用に自分で作った問題をデジタル化します。名前・学校名・答案などの個人情報が入った実物は、AIへの入力やGitHubへの保存に使いません。

使うもの： スマホ＋Googleドライブアプリ（無料）

スマホでGoogleドライブアプリを開く
右下の「＋」ボタンをタップ
「スキャン」を選択
問題用紙と解答用紙をそれぞれ撮影
PDFとして保存

コツ： 照明が当たって文字がはっきり映るように撮影すると、後のAIによる読み取りの精度が上がります。斜めにならないよう、真上から撮るのがポイントです。

STEP 2：AIにアプリを作ってもらう

スキャンしたPDFを手元に置いて、AI（Claude）を開きます。

Claudeへの指示の例：

「自分で作った中学1年生向け地理の練習問題を、4択の学習アプリにしてください。HTMLは1ファイルで作り、問題は10問ごとに出題してください」

Claudeは数秒で、動くプログラムのコードを書いてくれます。初めて画面の中で自分のアプリが動いたときは、正直「これ、本当に自分で作ったの？」と笑ってしまいました。

追加でお願いできること：

「答えを自分で入力するモードも追加して」→ タイピングモード
「原因と結果を考える問題も作って」→ なぜ？モード
「スカイブルーとゴールドのデザインにして」→ 見た目の調整

AIとの会話形式でどんどん機能を追加・修正できます。「こんなふうにしたい」を言葉で伝えるだけです。

完成したコードは、index.html というファイル名でパソコンに保存しておいてください。

STEP 3：GitHubにアプリを保存する

「GitHub（ギットハブ）」は、アプリの設計図を保管・管理する場所です。ここには、個人情報や学習の記録を入れず、アプリのコードと架空の練習データだけを保存します。

GitHubアカウントを作る

github.com でアカウント作成（無料）
新しい「リポジトリ（保管場所）」を作成
名前は my-learning-app など何でもOK
「Private（非公開）」を必ず選ぶ

アプリをGitHubに保存する

パソコンにGitをインストールし、ターミナル（Macの場合）またはコマンドプロンプト（Windowsの場合）で以下を実行します：

cd アプリを保存したフォルダ
git init
git add index.html
git commit -m "初回アップロード"
git remote add origin https://github.com/あなたのユーザー名/my-learning-app.git
git push -u origin main

このステップが一番ハードルに感じるかもしれません。 わからない場合はClaudeに「GitHubにファイルをアップロードする方法を教えて」と聞くと、あなたの環境に合わせて手順を教えてくれます。

STEP 4：Cloudflare Pagesでインターネットに公開する

「Cloudflare Pages（クラウドフレア・ページズ）」は、GitHubに保存したアプリを24時間インターネット上で動かしてくれるサービスです。イメージは、金庫（GitHub）に置いた設計図をもとに、お店を24時間あけておいてくれる「無人の店番さん」。こちらが寝ていても、アプリは動き続けます。無料で使えます。

pages.cloudflare.com でアカウント作成（実際の学習記録は、この段階では公開しない）
「新しいプロジェクトを作成」→「GitHubと接続」
先ほど作ったリポジトリを選択
設定はすべてデフォルトのままでOK（ビルドコマンドは空白）
「保存してデプロイ」をクリック

1〜2分後、あなたのアプリ名.pages.dev というURLでアプリが公開されます。

この仕組みのメリット： 今後、問題を追加して git push するだけで、自動的にアプリが最新版に更新されます。毎回手動でアップロードし直す必要がありません。

STEP 5：家族だけが使えるよう鍵をかける

このままでは、URLを知っていれば誰でもアクセスできてしまいます。ここで扱っているのは、娘がどの問題でつまずいたか、復習のあとがどう残っているか——という、とてもデリケートな学習の記録です。これが外から見られるのは絶対に避けたい。このステップは、機能というより”娘の学びを守る盾”だと思っています。

そこで使うのが「Cloudflare Access（クラウドフレア・アクセス）」です。イメージは、インターネット上に作った「我が家だけの秘密基地」の合言葉。決めた人しか、入口を通れません。特定のメールアドレスを持つ人だけしかアクセスできないようにできるので、わが家では家族のメールアドレスだけを許可しました。これで、世界中に公開されたURLでも、入れるのは家族だけになります。

one.dash.cloudflare.com にアクセス
「Access」→「Applications」→「Add an application」
「Self-hosted」を選択
ドメイン欄に あなたのアプリ名.pages.dev を入力
もうひとつ、*.あなたのアプリ名.pages.dev も追加する（理由はこのあとに書きます）
ポリシーで「Emails」を選び、許可したいメールアドレスを入力
保存して完了

設定後、アプリのURLにアクセスすると、まずメール認証の画面が表示されます。許可したメールアドレスにコードが届き、それを入力するとアプリに入れます。

本番のURLだけに鍵をかけると、横から入られます

ここは、公開したあとで気づいて、慌てて直したところです。 最初は手順4だけをやっていました。

Cloudflare Pages は、アプリを更新するたびに、a1b2c3d4.あなたのアプリ名.pages.dev のような枝番のついた別のURLを自動で作ります。前のバージョンをあとから見返せるようにするための、親切な仕組みです。

ところが、この枝番のURLには、本番のURLに掛けた鍵が効きません。

鍵をかけたつもりでも、枝番のURLにたどり着かれたら、中身は見えてしまいます。ここで扱っているのは娘の答案の記録です。それが横から見えるのでは、鍵をかけた意味がありません。

だから、Access には2つ登録します。

登録するもの	書き方
本番のURL	`あなたのアプリ名.pages.dev`
枝番をまとめて塞ぐもの	`*.あなたのアプリ名.pages.dev`

*（アスタリスク）は「ここには何が入ってもいい」という意味の記号です。これを足しておくと、枝番がいくつ増えても、まとめて鍵がかかります。

片方だけでは、鍵をかけていないのとあまり変わりません。 面倒でも、必ず両方を登録してください。

そして、登録が終わったら枝番のURLを自分で開いて、ログイン画面に飛ばされることを確かめてください。 鍵は「かけたつもり」がいちばん危ないので、設定した直後に一度だけ、外から自分で試してみてほしいところです。

問題を追加するときの流れ

新しい問題を追加するときも、個人情報や実際の答案はAI・GitHub・公開先へ入れません。自分で作った練習問題だけを使う流れです。

自分で作った練習問題をPDF化
ClaudeにPDFを見せて「この練習問題を追加して」と依頼
Claudeが出してくれた問題のコードをindex.htmlに追記
git add index.html → git commit → git push
自動でアプリが更新される

慣れてくると、30分ほどで新しい問題を追加してアプリに反映できるようになります。

まとめ：かかった時間と費用

項目	時間・費用
初回アプリ作成（AIとの対話）	約3〜4時間
GitHub・Cloudflare設定	約1時間
毎回の問題追加	約30分
月々のランニングコスト	Claude Pro代のみ（約3,000円）

作業時間は内容や確認の範囲で変わります。公開前の認証確認まで含めて、急がず進めることが大切です。

完成したアプリを娘に渡したとき、「これ、私専用なの？」と少し得意げな顔をしたのが忘れられません。市販の問題集にはない、その子だけの一冊。作ってよかったと、心から思えた瞬間でした。

エンジニアじゃない私が実際にやりきれた手順です。ぜひ、あなたのお子さんのためだけの一冊を、作ってみてください。

体験談はこちら：

→ 地理が苦手な長女のために、パパがAIで専用学習アプリを作った話

もっちパパ

カテゴリー

その他