Claud Codeで子どもの絵が“絵本になる”アプリをつくってみた！つくった手順とアプリ紹介
こんにちは、Makariです。
最近、わが家の子どもたちは
自分で描いた絵を「Gemini」でキャラクター化して、絵本を作るのにハマっています。
ただ、あとから見返すときに少し不便で…。
そこで今回、Claude Codeを使って
「絵本アプリ」を作ってみました💡
このアプリに入っている絵本は、
すべて子どものイラストから作ったものです。
▼作る手順はこちら
今回、はじめてCloudfflare Pagesを使ってアプリ制作をしてみたのですが
Claude Codeがほとんど作ってくれたので、よく仕組みはわかっておらず😅
「今回はどんな技術を使って作ったの？」と聞くと、下記のとおり回答してくれました。
使った技術については、
非エンジニアの私には正直よくわかりません（笑）
最近は、Claud Codeを安心して使えるように
プログラミングをもっと勉強したいなと思っています…！
今回は、アプリを作った簡単な手順と完成したアプリを紹介します𓂃𓈒 𓂂𓏸
▼Claude Codeの使い方はこちらの記事で紹介しています
※アプリにするならCloudfflare PagesよりNetlifyの方が手軽でした
えほんアプリをつくった手順
絵本アプリを作った手順を簡単に紹介していきます✨
Claudeデスクトップアプリを開く
「Code」を選択
空のフォルダを選択する
作りたいアプリの内容を入力する
Enterを押すだけ！
▼今回の指示文
スマホやタブレットで使える子どもと楽しめるWebアプリを作りたい
約6ページの絵本画像を電子絵本として楽しめる子ども向けアプリ
・対象は5歳児で、すべてひらがな表記
・本棚のような画面で表紙が一覧表示され、どの絵本か一目で分かるようにする
・自分が今まで作った絵本画像をアップデートする形（今後も追加できる）
・作者名（子どもの名前）を表示できるようにする
・表紙は画像をアプロードできる
・子供ごとにスタンプ機能搭載（本を読んだらを押せる/子供の名前や人数は自由に変更可能/スタンプがは複数から選べる）
・設定からスタンプのイラストを追加・削除・更新ができる
・読み聞かせ録音機能搭載（誰がなんの本を読んだかわかる）
・スマホアプリで手軽に操作できる
・添付画像を使ったデザイン、デザインは添付画像に合わせる
これだけで、ベースが完成します✨
Claude Codeが作ったアプリのベースをもとに、
細かいところをチャット欄で指示して調整しつつ、完成形に持っていき…
完成した絵本アプリ
完成したのがこちらのアプリ。
▼スマホアプリにする方法はこちらの記事で
アプリを開くと……
ちゃんとアプリになってる✨
絵本の追加
まずは絵本画像を追加してみます。
↓
絵本を読む
ちゃんと電子絵本になってる😊
表紙
1ページ目
2ページ目
3ページ目
4ページ目
5ページ目
ちなみにこの絵本のもとの絵はこちら↓
Geminiすごい。
スタンプ機能
絵本を読んだら、スタンプを押せる🐾
読み聞かせ記録
読んだ絵本とスタンプが確認できる！
▼みんなの記録
▼子どもごとの記録
設定機能
設定はいつでも変更可能◎
子どもの設定
スタンプ設定
絵本の管理
作った絵本画像を絵本として手軽に形にできて嬉しい…！
子どもと一緒にたくさん絵本を追加していきたいです🌱
さいごに
Claude Codeのおかげで、
アイデアさえあれば手軽にアプリが作れる時代になりましたね💡
「子どもと、どんなアプリにする？」
と相談しながら作るのも楽しい！
これからは、安心して使いこなせるように
プログラミングも少しずつ勉強していきたいです🌱
最後までご覧いただき、ありがとうございました𓂃𓈒 𓂂𓏸
関連記事
▼Claude Codeならちょっとした面倒をなんでも解決！
▼ちょっとしたツール作りは無料のGemini Canvasでも！
AIイラストを活用したい使いたい方へ✨
月額500円〜
AIイラスト・副業・AI活用の記事が
読み放題のメンバーシップを運営しています。
AIを楽しく活用しませんか☺️
