Claude Codeで子どものおこづかい帳アプリを作ってみた！Netlifyでスマホアプリにする方法を紹介

こんにちは、Makariです。

最近は、ちょっとした
「日常のもう少しこうだったらいいのに……」を
Claude Codeで解決するために、いろいろなアプリを作っています。

今回は、小学4年生の娘用におこづかい帳スマホアプリを作ってみました。

アプリにはこんな機能を搭載！
✅ 1ヶ月のお金の出入りがひと目でわかる
✅ グラフでお金の流れを確認できる
✅ 家族銀行に預けると年利5%で増える
✅ お手伝いをするとスタンプを押せる

今回はこのアプリを作った手順を紹介していきます𓂃‪𓈒 𓂂𓏸

デスクトップアプリ版を使えば、
チャット欄で指示するだけで、
誰でも簡単にアプリが作れます💡

ぜひ、気軽に自分だけのアプリ作りを楽しんでみてはいかがでしょうか😊

Claudeのデスクトップアプリ版のダウンロード方法から初期設定まではこちらの記事で紹介しています。

Claude Codeでおこづかいアプリを作る方法

Claude Codeの使い方

今回はデスクトップアプリ版のClaude Codeを使いました。

まずは、アプリを保存するためのフォルダを用意します。
デスクトップに空のフォルダを作ればOKです。

Claude Codeデスクトップアプリを開きます。

① 左上の「Code」を選択
② 先ほど作った空のフォルダを選択
③ プロンプトを入力してEnterを押すだけです。

プロンプトでは、
「どんなアプリを作りたいか」を指示します。
今回は以下のように入力しました。

▼プロンプト例

このように指示すると、
アプリを自動で作ってくれます。

左側のプレビュー画面を確認しながら、修正したい部分を右側のチャット欄で伝えていきます。

※スマホアプリにする場合は、アプリのアイコン画像も作ってもらうのがおすすめです

ある程度完成したら、実際の動作を確認します。

最初に指定したフォルダの中に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を楽しく活用しませんか☺️