💡 水分摂取量を“見える化”するという発想

最近ではスマホアプリで水分管理ができるものも多くありますが、
「アプリを入れるのが面倒」「広告が多い」「自分の使い方に合わない」
そんな理由で長続きしない方も少なくありません。

そこで、今回はあえてChatGPTに自分専用の水分管理サイトを作ってもらうというアプローチを紹介します。

🛠 ChatGPTにサイトを作ってもらうという選択肢

ChatGPT（または他の生成AI）に「HTMLで○○するサイトを作ってください」と依頼すると、
HTML・CSS・JavaScriptが一体になった動作するサンプルコードを出力してくれます。

たとえば、今回のテーマはこんな感じです。

その日飲んだ飲料水の量を記憶するサイト(html)を作成頂けますか？
保存は indexeddb に保存します。
上にカレンダー形式で振り返りを行う事ができます。
下に 100 150 200 250 300 350 400 450 500 600 900 1000 1500 2000 ml のボタンがあり、押すとその日の飲んだ量に加算されます。
飲んだ情報は書き換え・削除ができます。
飲んだ量は過去 30 日の中央値も表示されます。
「飲み始めた時・コップに入れた時に入力する」事をおすすめとして載せて下さい。
「チェックを付ける(お通じのチェック等にご利用下さい)」チェックボックスを、飲む量のボタンがある欄の一番下に追加して下さい。その日のカレンダーの右上に濁った赤丸が付きます。

このように具体的な仕様を指示することで、自分の用途にピッタリ合ったツールを
「ノーコード」「数分」で作成することができます。

🧩 実際に作ったサイトの例

下記は、ChatGPTで生成した完成サンプルです。

👉 サンプルサイトはこちら

主な特徴

IndexedDB保存対応：オフラインでもデータが保持されます
カレンダー表示：日ごとの水分摂取量を可視化
ワンタップ追加：100〜2000mlのボタンで簡単入力
30日間の中央値表示：過去の平均的な水分摂取量を一目で確認
「お通じチェック」機能：チェックを付けるとカレンダーに赤丸表示

このように「自分の生活に合う仕様」を作り込めるのが、自作サイトの一番の魅力です。

🌐 GitHub Pagesでスマホでも使える

作ったHTMLファイルをGitHub Pagesに置けば、
アクセスすることでアプリのように使うことも可能です。

無料で公開でき、広告もなく、データは端末に保存されるためプライバシーも安心です。

🧠 ChatGPTでサイトを作る時の“定型文”

自分で仕様を書くときは、ChatGPTに対して以下のように指示するとスムーズです。

〇〇するサイト(html)を作成頂けますか？
保存は indexeddb に保存します。
見た目にこだわって下さい。
[以下に機能仕様を箇条書きで追加]

ChatGPTはこのような構造を好むため、要件を整理して伝えると
見やすくメンテナンスしやすいコードを出してくれます。

🎯 まとめ：アプリを「作ってもらう」時代

「こんなアプリがあればいいのに」と思ったら、
もう誰かが作るのを待つ必要はありません。
ChatGPTを使えば、自分で自分のアプリを作ることができます。

自分の生活スタイル・デバイス・目的に合わせて
“最適化された自作ツール”を持つのはとても快適です。

ぜひ、自分なりのアイデアで試してみてください。

閲覧ありがとうございました！

📘 関連リンク（再掲）

👉 飲料水を飲む量を管理するサイト・完成版サンプル
👉 今まで作ったサイト

追記

気に入るアプリが見つからないなら、ChatGPTで自作すればいい！
──そんなシンプルな発想から始まった記事でした。

サンプルプロンプトを載せただけで、
「情報量が少ない」「説明が足りない」と感じられた方がいらっしゃったら申し訳ありません。

今回は、「アプリを探す」ではなく自分で作る時代というメッセージを
いちばん伝えたかったため、あえてシンプルな流れにしました。

本来であれば、もっと詳細なコード解説や実装ステップを
順を追って書くべきだったと思いますが、
まだそのあたりを丁寧にまとめる力が足りず、
今回はこの形に留めさせていただきました。

それでも、この記事が
「自分でも作れるかもしれない」という小さなきっかけになれば幸いです。
ご理解いただけますと嬉しいです。