ITの知識ゼロでアプリを作ってみた！
今回は生活で使えそうな「買いものメモ」のアプリを作ってみました🧻
「買いものメモ」アプリを作ってみよう📝
【はじめに】
「洗濯洗剤切れた！」「重曹買わなきゃ！」
でもお店に行くと「何買うんだっけ？」となって買い忘れて帰ることも・・・
スマホのメモ帳も使うけど、消し忘れてどんどんメモ帳は溜まっていってしまう（ズボラ）
ってことで、必要なものをメモして買ったら消していける簡単なアプリを作ってみることに！
【使用するアプリ】
今回はGeminiにコードを書いてもらいます。ブラウザで表示するために必要なCursorも使用する。
ChatGPTに聞いてみたけど言われたプロンプト貼り付ける作業は退屈しそうなので自分でGeminiにお願いしてみるる🥺
1.「買うものリストみたいなWebアプリを作りたい。家の中で必要だと思った時にメモをしてそのメモの中でどの場所に必要か 例えば洗面所とか台所とかチェック入れて入力すると場所のタグごとに分かれて入力されて、一覧でも見れるしタグ別にも見れるやつ」
アプリのおおまかな要望を伝える。伝わるかどうか毎度ドキドキ。
アプリについてどんなものがいいか考えてくれた。
2.「作ってみて」
さっそく作ってもらう。
作成されたアプリ（HTML）
（おおお！できた！ちょっと場所入力を変えたいな）
3.「場所はリビング キッチン トイレ お風呂・・・その他（自由入力）で複数チェックもできるようにして」
場所の項目を増やしてもらう。
作成されたアプリ
4.「もっとおしゃれなデザインにして。場所は一覧＆タグ切り替えにして。」「ちがう。もっとおしゃれなデザインにして。場所は一覧＆タグ切り替えにして。のコード書いて」
機能はいい感じなのでデザインの要望を出してみる。
（画像生成された！誤解がないようにちゃんと伝えなきゃ🥺）
作成されたアプリ
5.「場所に洗面所を追加して。「場所追加」ボタンも追加して。追加されたら場所リストが増えるように。場所選択はドロップダウンがいい。」
場所を後から追加できるようにする。ドロップダウンで作ってもらう。
作成されたアプリ
（追加ボタンできた！そしてドロップダウンの方が見やすい！）
6.「そのアプリのデザインをナチュラルテイストのカラーを取り入れて作って」「上のアプリのデザインをナチュラルテイストのカラーを取り入れてコード書いて」
色味のイメージを伝えて変更してみる。1回目は画像生成になっちゃったのでもう1回。
作成されたアプリ
（わぁ✨可愛くなったー♡）
7.「誤って消えないような方法で、場所の削除もできるようにしたい。」
場所の追加だけでなく削除もできるように変更。
作成されたアプリ
（削除できるようになったー！けどドロップダウンじゃなくなった！）
8.「機能は変えずに場所入力をドロップダウンに戻して。」
ドロップダウンに戻してちょ。
作成されたアプリ
（場所に追加と削除まとめた方がよさそう）
9.「場所の追加・変更・削除は「編集」ボタンからできるようにしたい。」
追加・変更・削除が同じボタンから進めるように変更。
作成されたアプリ
できたーーーーーー！！！
【まとめ】
見た目もシンプルで可愛らしいアプリになりました。
お買い物メモがあると便利だと思います。こうやって生活に役立ちそうなアイデアを考えて形にしてみるのが楽しいです♪
Geminiでお買い物メモ作ってみた📝
— なるる軍曹(田上成美)🦖 (@naruchip1) December 21, 2025
スマホのメモ帳だと作っては消し忘れてどんどんメモが溜まっていくのでアプリ化してみた🥺
場所ごとに切り替え表示できるお✨
アイデア考えて作ってみるの楽しい！ pic.twitter.com/Xt14kIUQt5