みなさんは、ふと「最近あまり水を飲んでいないかも？」と思ったことはありませんか？
また、「お通じが良くない」「体がだるい」「肌の調子が悪い」など、日常的な不調を感じたことがある方も多いと思います。
これらの原因の一部は、「水分摂取量の不足」かもしれません。
でも、1日にどれくらい水を飲んでいるのか、意識していないと意外と分からないですよね。
💡 水分摂取量を“見える化”するという発想
最近ではスマホアプリで水分管理ができるものも多くありますが、
「アプリを入れるのが面倒」「広告が多い」「自分の使い方に合わない」
そんな理由で長続きしない方も少なくありません。
そこで、今回はあえて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で自作すればいい！
──そんなシンプルな発想から始まった記事でした。
サンプルプロンプトを載せただけで、
「情報量が少ない」「説明が足りない」と感じられた方がいらっしゃったら申し訳ありません。
今回は、「アプリを探す」ではなく自分で作る時代というメッセージを
いちばん伝えたかったため、あえてシンプルな流れにしました。
本来であれば、もっと詳細なコード解説や実装ステップを
順を追って書くべきだったと思いますが、
まだそのあたりを丁寧にまとめる力が足りず、
今回はこの形に留めさせていただきました。
それでも、この記事が
「自分でも作れるかもしれない」という小さなきっかけになれば幸いです。
ご理解いただけますと嬉しいです。