Build 制作記

非エンジニアがClaudeと作った勉強記録アプリ｜制作記 前編：頼み方と、1枚のHTMLができるまで

2026年4月6日に作り始めて、今も毎日使っている勉強記録アプリの話です。「AI Study Tracker」という名前で、AIの勉強で学んだことを記録していくアプリです。

先に書いておくと、私はプログラミング経験ゼロです。コードは読めません。HTML（画面の内容や構造を書くための言語）やCSS（画面の見た目を整えるための言語）は名前を知っている程度で、実際に書いたことはほぼないレベルです。それでもアプリができました。

ファイルを最初に作ったのがその日で、そこからしばらくは自分のパソコンの中だけで動かしていて、4月12日にGitHub（作ったファイルを保管しておく場所）へ初めて上げています。

この記事は制作記の前編で、作り始めからスマホで見られるようにするところまでを書きます。自分専用で使っているので、この記事ではアプリのURLは載せていません。

この記事の要点

  • 最初にClaudeへ言ったのは「学習アプリ作りたいな」という一言だけ
  • 自分は日本語で要望を言うだけ。指示文はClaudeに書かせ、実装はClaude Codeにやらせる
  • 1枚のHTMLから始めて、Firebase＋Netlifyで外に持ち出すところまで進んだ

なぜ作ったか

AIエージェントというものが流行りだして、毎日追っていく中で、やっぱり日々AIの世界って激しいと感じていました。やれることもいっぱいあるし、自分が何をやったかとか。やっただけではなくて、YouTubeを見たり、人の記事を読んだり、いろいろ人からも吸収して学習していくことがありました。

でも毎日いろんなものを吸収していると、いいなと思ったことも数日したら忘れてしまう。思い出したい時に思い出せない。そういったことを思い出せるような学習記録アプリを作りたいと思いました。

毎日つけることで学習への意欲も高まるかな、とも思いました。人が勧めるプロンプトとか、そういうのも記録に留めておければ、AIの理解も深まるし、自分のAIスキルも高まっていくかなと思って。

Claudeに最初に言った言葉

これだけです。

毎日の学習を記録していくような、学んだことを忘れないために記録していくような、そんな学習アプリ作りたいな

本当にこれだけ。機能の一覧も、画面の設計も、何も持っていませんでした。

頼み方の全体像

ここで言葉を2つだけ分けておきます。Claudeはチャットで話す相談相手、Claude Codeは実際にファイルを作る道具です。同じClaudeですが、役割が違います。

スマホ対応にした後は、毎回この流れでやっていました。

  1. claude.ai（チャット）で「こういうことがしたい」と話す
  2. Claudeが2〜3個の確認質問をする → 答える
  3. ClaudeがClaude Code用の指示文を作る
  4. 指示文をClaude Codeに貼る → 実装（途中で「やっていいですか」と確認が出るのでYes）
  5. Netlify（HTMLファイルを置くだけで公開できる無料サービス）にHTMLをドラッグ＆ドロップ
  6. スマホとPCで動作確認
  7. GitHubにコミット＆プッシュ（変更を記録として残す作業）

GitHubとかFirebaseとかローカルとか、こういう言葉は最初いきなり出てきて分かりませんでした。どれもClaudeに提案されたもので、分からなければ聞けば簡単に教えてくれます。なんとなく理解が深まって使い出すようになり、そういう知識はアプリを作っていく中で増えていきました。

大事なのは3番と4番です。私がやるのは、日本語で「こうしたい」と言うことだけ。技術的にどう書くかという指示文（プロンプトと呼びます）はClaudeに書かせて、その指示文をClaude Codeに貼って実装させる。この役割分担にしてから、自分が何も分からなくても話が前に進むようになりました。

自分でプロンプトを上手に書こうとしなくていい、というのがポイントかなと思っています。上手に書けないから頼んでいるわけで、そこを自分でやろうとすると、たぶんここで止まります。

2番の確認質問も効いていました。こちらが「こうしたい」とだけ言うと、Claudeの方から2〜3個聞き返してきます。「入力の形はどうしますか」「置く場所はここでいいですか」といった具合です。自分では気づいていない選択肢を、答えるだけで埋められる形になっていました。

分からなくてClaudeに相談するときは、いつも画面のスクリーンショットを撮って、それを見せながら「どうしたらいいですか」と聞いていました。

7番のコミット＆プッシュも、毎回この程度の言葉しか書いていません。

AI Study Tracker の変更をコミット＆プッシュしてください。今回の変更内容は以下の2つです：
1. タイムラインの長文折りたたみ機能を追加
2. キーワード検索機能を追加

4番でつまずいたのは、Claude Codeが作業の途中で確認を出してくることでした。「全部yesで進んでいいかな？」「ずっとyesで良いの？」と、当時は何度も聞いています。答えは、バックアップがあるからYesで進めてOK、というものでした。

よく分からないけど、Claudeチャットにスクリーンショットを渡して、Claudeを信用してYes、Yesと言って進めました。自分自身が分からないまま進んだので、本当にいいのかなというためらいと不安は残りました。

今は、危ないことはClaude Codeの方が指摘して止めてくれることが多いので、Yesで進めてもあまり問題はないのかなと思っています。

ただ、これは当時の私の進め方です。何でもYesで進めて大丈夫、ということではありません。

学び：自分の仕事は「日本語で要望を言う」ところまで。指示文を書くのも、コードを書くのも、AI側に渡してしまっていい

最初の一言から骨組みができるまで

最初のローカル版（自分のパソコンの中だけで動く版のことです）は、1枚のHTMLファイルでした。パソコンのブラウザで開くだけで動く、データもそのパソコンの中に保存されるタイプです。

流れはこの5ステップの繰り返しでした。

  1. やりたいことを言葉で伝える
  2. Claudeが1枚のHTMLにコードを書く
  3. そのファイルをブラウザにドラッグして開き、確認する
  4. 使ってみてイメージと違うところを伝える
  5. 2〜4を繰り返す

実際のやりとりを2つ出します。「自分の言葉」は、私がClaudeに打ち込んだそのままの文章（これがプロンプトです）です。

カレンダーを足したとき

自分の言葉：「記録した内容を一覧で見たい。カレンダーみたいに日付で絞り込める機能もほしい」

Claudeの対応：タイムライン画面にカレンダーを追加。

結果：日付をクリックすると、その日の記録だけが表示されるようになりました。

改行が消えてしまったとき

自分の言葉：「ネタ帳の文章が段落なしに全部つながって読みにくい。入力したときみたいに改行を表示してほしい」

Claudeの対応：white-space: pre-wrap というCSSを1行追加。

結果：入力したときの改行がそのまま表示されるようになりました。

私はこのCSSが何なのか、今でも正確には説明できません。でも「読みにくい」と言えば直る。

この段階でやっていたのは、この2つのような「ここ直したい」を繰り返していくことだけです。使う、引っかかる、言う、直る。それを何度もやっているうちに、最初の一言だけだったものが、自分の使い方に合った形になっていきました。

最初に画面に出たとき

自分が思った通りのことができた時は、すごいなって。

こういうのって今まで、エンジニアと呼ばれる人たちしかアプリを作れなかったのに、何の知識もない僕が「こういうのが作りたい」と抽象的に言っただけで、Claudeが僕の気持ちを読み取ってくれて、それを作り上げるためのプログラムをどんどん作っていって。

できた時はすごいな、ものすごい時代が来たなって。こんなことができるんだって。僕でもアプリを作って、売って稼ぐことができるような、そんなことができるんだなって。これからはアイデア勝負の時代が来たのかなと思いました。

これはもうどんどん使っていくしかない。ClaudeのMaxプランという高いプランに入っているし。本当に僕の可能性を思いっきり広げてくれた。これは誰に対しても可能性を広げてくれるもので、やらないと損だな、と。

できたもの

画面は5つあります。画像は、後から機能を追加した現在の画面です。

ダッシュボード：トピック別・チャンネル別の学習量を円グラフと棒グラフで表示

トピック別・チャンネル別の学習量を円グラフと棒グラフで表示するダッシュボード

記録する：学んだ内容・トピック・チャンネル（YouTube／記事／本など）・URLを入力

学んだ内容、トピック、チャンネル、参考URLを入力する記録画面

タイムライン：カレンダーで日付を絞り込み、過去の記録を一覧・編集・削除

カレンダーとキーワード検索で学習記録を絞り込むタイムライン

ネタ帳：「後で深掘りしたい」アイデアをカテゴリ付きで保存

後で深掘りしたいアイデアをカテゴリ付きで保存するネタ帳

宿題リスト：「あとで見る」記事・動画を保存して、完了を管理

後で見る記事や動画と、その完了状況を管理する宿題リスト

毎日使っていると、自分の学習パターンが目に見えるようになりました。「エージェント系の記事ばかり読んでいるな」とか「最近YouTube学習が増えてきた」といった具合です。何を学んだかを残すために作ったつもりが、どう学んでいるかまで出てきたのは、使ってみて初めて分かったことでした。

そしてゲーム要素です。記録を1件つけると10XP（経験値のようなポイント）。ハンズオン（実際に手を動かした学習）なら＋10XP、参考URLを入れると＋5XP、本文が100文字を超えると＋5XP。つまり、ちゃんと手を動かして、出典を残して、しっかり書くほどXPが増える仕組みです。

レベルは10段階あります。AI入門者（0XP）から始まって、AI学習者、AI探求者、AI実践者、AIクリエイター、AIエンジニア、AIアーキテクト、AIマスター、AI賢者、そして最後がAI伝説（28,000XP）。

レベルアップすると、その季節に応じた演出が出ます。春は桜、夏は花火、秋は紅葉、冬は雪です。

学び：毎日続けることでレベルアップしていく過程が見えるゲーム感覚にして、モチベーションを上げる。これは作る前から欲しかったもの

これだけの画面が入っていて、中身は1枚のHTMLファイルです。画面を作る部分にReact（画面の見た目を組み立てるための道具）というものを使っていますが、それもブラウザで開いたときに読み込まれる形になっていて、私が用意したファイルは最後まで1つだけでした。ファイルが1つなら、どこに何があるか分からなくなることもありません。

外に持ち出す

毎日使い始めると、不満が出てきました。「外出先のスマホでも見たい」。

最初のアプリはパソコンの中にあるファイルとデータなので、スマホからは開けません。「パソコンで記録 → スマホで復習」がやりたい形でした。

相談したら、Firebase（Googleのサービス。個人で使う範囲なら無料）とNetlifyという2つを組み合わせる方法を提案されました。保存とログインはFirebase、ネット上に置くのはNetlifyに任せました。

やったことは4ステップです。

ステップ1：Firebaseのセットアップ プロジェクトを作って、データベース（Firestore）を作って、Googleログインを有効にする。Claudeが「次はここをクリックして」と一つずつ案内してくれたので、画面の指示に従うだけでした。

ステップ2：アプリをFirebase対応に改造 保存先をクラウドに変え、Googleアカウントでログインして自分の記録を見られるようにしてもらいました。

ステップ3：Netlifyで公開 アカウントを作って、HTMLファイルをドラッグ＆ドロップで置くだけです。それだけでインターネット上のURLができます。最初は置いたつもりで置けていなくて、もう一度やり直しました。あと、ファイル名を決まった名前（index.html）にする必要がありますが、これは置くときにボタンを一つ選ぶだけで済みました。

ステップ4：スマホでも使えるようにする 発行されたURLをiPhoneのSafariで開いてGoogleでログイン。画面下の共有ボタンから「ホーム画面に追加」をタップすると、ホーム画面にアイコンが並んで、スマホアプリのように使えるようになりました。

過去のデータも移しました。元のアプリに書き出しボタン、新しいアプリに読み込みボタンを付けてもらって、それまでの15件の記録をクラウドに移行しています。

これで、自宅のパソコンで詳しく記録して、外出先のスマホで確認・復習する、という形ができました。

設定を間違えたらどうしようという不安はありましたが、「次はここ」「これで合ってます」と確認しながら進められたので、止まらずに最後まで行けました。自分のために作ったものなので、使うたびに愛着も湧いてきます。

後編へ

ここまでが前編です。作って終わりではありませんでした。

作ってもらって、使っていく中で、またこういう機能があったらいいなというのが出てきました。ページのヘッダーに戻るボタンとか、全文をコピーしてどこかに貼り付ける機能とか。使っていく中でいろんな機能を足していきました。

使い始めて3週間で4回手を入れて、機能を5つ足し、1つ改善しています。記録に残っているのはこのあたりです。

  • 2026-04-20 タイムラインの長文折りたたみ機能とキーワード検索機能を追加
  • 2026-04-21 トップへ戻るボタンとタイムラインのページネーション（記録一覧を何ページかに分ける機能）を追加
  • 2026-04-27 タイムラインに記録コピー機能を追加
  • 2026-04-27 データ読み込みの安定性を改善

どれも「使っていて不便だと気づいた」ところです。最初から設計できていたわけではありません。

そして一度、動いていたものを自分で壊しました。最後の「読み込みの安定性を改善」がそれです。良くするつもりで頼んだ変更で、何回リロードしても画面が出ない状態になりました。そこからどう戻したか、次に何を変えたかは後編で書きます。

後編（使いながら直した3週間と、5か月後の今）はこちら：非エンジニアがClaudeと作った勉強記録アプリ｜制作記 後編

それでは、また次の記事で。六弦ライダーでした。

執筆時点の環境：Claude Code（モデルはOpus 5）／2026年9月