Claude Codeで子どものおこづかい帳アプリを作ってみた！Netlifyでスマホアプリにする方法を紹介
こんにちは、Makariです。
最近は、ちょっとした
「日常のもう少しこうだったらいいのに……」を
Claude Codeで解決するために、いろいろなアプリを作っています。
今回は、小学4年生の娘用におこづかい帳スマホアプリを作ってみました。
アプリにはこんな機能を搭載！
✅ 1ヶ月のお金の出入りがひと目でわかる
✅ グラフでお金の流れを確認できる
✅ 家族銀行に預けると年利5%で増える
✅ お手伝いをするとスタンプを押せる
今回はこのアプリを作った手順を紹介していきます𓂃𓈒 𓂂𓏸
デスクトップアプリ版を使えば、
チャット欄で指示するだけで、
誰でも簡単にアプリが作れます💡
ぜひ、気軽に自分だけのアプリ作りを楽しんでみてはいかがでしょうか😊
Claudeのデスクトップアプリ版のダウンロード方法から初期設定まではこちらの記事で紹介しています。
Claude Codeでおこづかいアプリを作る方法
Claude Codeの使い方
今回はデスクトップアプリ版のClaude Codeを使いました。
まずは、アプリを保存するためのフォルダを用意します。
デスクトップに空のフォルダを作ればOKです。
Claude Codeデスクトップアプリを開きます。
① 左上の「Code」を選択
② 先ほど作った空のフォルダを選択
③ プロンプトを入力してEnterを押すだけです。
プロンプトでは、
「どんなアプリを作りたいか」を指示します。
今回は以下のように入力しました。
▼プロンプト例
ゲーム感覚でお金の勉強ができるお小遣い帳アプリを作りたい。
・スマホで操作できる
・働く→使う→貯めるの流れが視覚的にわかる
・かわいいうさぎのキャラクターを入れる
＜機能＞
・お小遣いの入出金記録：日付・金額・内容
・資産総額・お財布の中身（家族銀行のお金入れない）
・お金の流れをグラフ表示
・お手伝い記録：決まったお手伝いをすると報酬がもらえる（掃除：50円・料理・100円・庭仕事：100円）
・スタンプ機能：お手伝い後や家族銀行に預けるとスタンプを押せる（複数の中から選べる/今月のスタンプ数と月毎のスタンプ数が確認できる）
・家族銀行：家族に預けたお金が増える仕組み（年利5%）
このように指示すると、
アプリを自動で作ってくれます。
左側のプレビュー画面を確認しながら、修正したい部分を右側のチャット欄で伝えていきます。
※スマホアプリにする場合は、アプリのアイコン画像も作ってもらうのがおすすめです
ある程度完成したら、実際の動作を確認します。
最初に指定したフォルダの中にHTMLファイルが保存されているので、ダブルクリックで開けば、ブラウザで動作を確認できます。
実際に入力してみて、不具合がないかチェックしましょう。
改善したいところは、Claude Codeに修正を頼むと更新してくれます！
スマホアプリにするなら「Netlify」がおすすめ
スマホでアプリとして使うには、「netlify」を利用するのが手軽でおすすめです。
簡単に公開して、アプリのように使えるようになります。
登録から、アプリとしてスマホのホーム画面に追加する方法を紹介していきます😊
Netlifyの登録方法
まずは、Netlify公式サイトにアクセスし、
右上の「サインアップ」をクリックします。
Googleアカウントをお持ちの方は、
「Googleでサインアップ」がおすすめです。
簡単なアンケートのようなものが表示されるので、これかな？というものを選んでいきます。
「Continue to deploy」をクリックしたら、完了です。
アプリのURLを発行する方法
登録後は、作成したアプリをアップロードしてURLを発行します。
まずは、「choose a folder.」から、
アプリが入ったフォルダーを選択します。
名前を変更しますか？と表示されたら、
「名前を変更してデプロイする」でOK。
アプリのURLが発行されました！
このURLをスマホのSafariなどに貼り付ければ、すぐに使えます◎
アプリをホーム画面に追加する方法
よく使う場合は、ホーム画面に追加しておくと便利です。
右下の「•••」をタップします。
「共有」をタップします。
「ホーム画面に追加」をタップします。
「Webアプリとして開く」をオンにして
右上の「追加」をクリックします。
こんな感じにホーム画面に追加されているはずです。
スマホアプリにすると、手軽に開けるので便利ですよね💡
誰でも簡単にスマホアプリが作れるなんて……
Claude Code、凄すぎます！
完成したおこづかい帳アプリを公開！
作っているうちに楽しくなり、
いくつか機能を追加・改善しました。
＜追加した機能＞
・着せ替え機能（色・キャラ・名前を変更可能）
・スタンプやお手伝いの内容を修正・追加できる機能
・年利を自由に変更できる機能
＜改善した点＞
・円グラフは収入・支出で分けて表示
・棒グラフは6ヶ月単位で表示
・全体のデザインをくすみパステルに統一
興味があるかわかりませんが💦
最終版を紹介します💡
チャットで指示するだけで、自分のイメージ通りに形にできるのが本当に面白くて、つい時間を忘れて作り込んでしまいました🌱
まとめ
今回はClaude Codeを使って、子どものおこづかいアプリを作ってみました。
これまでいろいろなアプリを試してきましたが、なかなかしっくりくるものがなく…。
今回、自分で作ることで、子どもにぴったりのアプリができて、とても満足しています✨
子どもが楽しみながら、お金の管理やお手伝いに取り組めたらいいな〜と思っています😊
Claude Codeを使えば、誰でも簡単に「自分専用のアプリ」を作ることができます。
ちょっとした日常の困ったにClaude Codeを活用してみてはいかがでしょうか。
最後まで読んでいただき、ありがとうございました。
関連記事
▼Claude Codeならちょっとした面倒をなんでも解決！
▼ちょっとしたツール作りは無料のGemini Canvasでも！
AIイラストを活用したい使いたい方へ✨
月額500円〜
AIイラスト・副業・AI活用の記事が
読み放題のメンバーシップを運営しています。
AIを楽しく活用しませんか☺️
