「自分だけのアプリを作ってみたいけれど、プログラミングは難しそう…」 そう思っている方はいませんか？

今回は、AI（Gemini）と対話しながら、たった1つのHTMLファイルで「健康管理アプリ」を作る方法をご紹介します。しかも、サーバーの契約など難しい設定は一切なし！無料でネット上に公開するところまで、順番に解説していきます。

Antigravity 初期画面

今回作った「健康管理アプリ」とは？

糖質制限やコレステロール管理を意識している方に向けた、日々の記録をサポートするアプリです。

【3つの主な機能】

  1. 食事の記録： 写真を選ぶだけで、カロリーが自動で追加され、1日の合計カロリーがひと目でわかります。
  2. 運動と体重の記録： スマホの健康データ（ヘルスケアやGoogle Fitなど）と連携するイメージで、ボタン一つで数値を読み込めます。
    （※1 今回は連携の動きを再現したモックアップです）
  3. アドバイスとグラフ： 記録をつけると励ましのアドバイスが表示され、最近の体重の変化がグラフで確認できます。

【デザインのこだわり】 「健やかな印象」を持たせるために、深い緑色（#166534 など）をベースカラーに設定。余白をしっかりと取り、スマホで見た時に押しやすいボタン配置にするなど、プロが作ったような洗練されたデザインを目指しました。

開発の裏側：AIとの「バイブコーディング」

このアプリは、私が最初から最後までキーボードでコードを打ち込んだわけではありません。AIに「こんなアプリが作りたい！」と日本語で指示を出し、出てきたコードを確認しては「ここはこう直して」と数回やり取りをしただけで完成しました。

このように、AIと対話しながら直感的にコードを組み上げていく手法を、最近では「バイブコーディング」と呼んだりします。

成功のコツは「1回に1つの指示」

AIに指示を出すときのコツは、「一度に全部をやらせようとしないこと」です。

  1. まずは土台を作る： 最初は「目的」「使う人」「欲しい機能」「色や雰囲気」だけを伝えて、動く土台を作ってもらいます。
  2. 1つずつ修正する： 「間食も記録できるようにして」「スマホのデータと連携するボタンを足して」など、1回のやり取りで直すのは1つの機能だけに絞ります。

こうすることで、AIが混乱せず、自分のイメージ通りのアプリに少しずつ近づけていくことができます。エラーが出た場合も、「こんなエラーが出ました」とそのままAIに伝えれば、直し方を教えてくれます。

アプリの中身はどうなっているの？（技術解説）

このアプリは、驚くべきことに index.html というたった1つのファイルで動いています。複雑なシステムの構築はしていません。

  • HTML: アプリの骨組み（文字やボタンの配置）を作ります。
  • Tailwind CSS: 「文字を緑色にする」「角を丸くする」といったデザインを、HTMLの中に直接書き込んで整えます。これで、洗練された見た目が簡単に作れます。
  • JavaScript: 「ボタンを押したら計算する」「グラフを描く」といった動きの部分を担当します。グラフの描画には Chart.js という便利なツールを使っています。

これらはすべて、インターネット上にある「部品（CDN）」を読み込んで使っているため、自分のパソコンに難しいソフトをインストールする必要がありません。

完成したアプリをネットに公開（デプロイ）しよう！

パソコンの画面で動くようになったら、次は誰でもスマホやパソコンからアクセスできるように、インターネット上に公開（デプロイ）してみましょう。

今回は、「Vercel（バーセル）」 または 「Netlify（ネットリファイ）」 という無料のサービスを使った、一番簡単な方法をご紹介します。どちらを使っても手順はほぼ同じです。

準備するもの

  • 完成した index.html ファイル
  • Googleアカウント（またはGitHubアカウント）

公開のステップ（3分で終わります！）

  1. アカウントを作る: Vercel（https://vercel.com/）または Netlify（https://www.netlify.com/）のサイトにアクセスし、Googleアカウントなどで「Sign Up（無料登録）」します。
  2. ファイルをアップロードする:
    • Vercelの場合: ログイン後、ダッシュボードの「Add New…」から「Project」を選びます。ファイルを直接ドラッグ＆ドロップできる画面が出ない場合は、一度パソコン上で index.html を入れたフォルダを作り、そのフォルダごとドラッグ＆ドロップします。
    • Netlifyの場合: ログイン後、「Sites」の画面にある「Drag and drop your site output folder here」という点線の枠の中に、index.html が入ったフォルダをドラッグ＆ドロップします。
  3. URLが完成！: アップロードが終わると、自動的にあなただけの「URL（ウェブアドレス）」が発行されます。そのURLをスマホで開いたり、友達に教えたりすれば、すぐにアプリを使うことができます。

※1. スマホの健康データを連携させるには：クラウド API を経由する

スマホの健康データを、一度インターネット上のサービス（Google FitやFitbitなど）に自動保存させ、Webアプリはそこからデータを受け取る方法です。今の「Webアプリ」の形のまま進めるなら、この方法となります。

【実装の手順】

  1. 鍵の準備: Google Cloudなどの開発者用の設定画面で、「アプリがユーザーのデータにアクセスするためのパスポート（APIキーなど）」を発行します。
  2. ログインと許可の画面を作る: アプリに「Googleなどでログインして連携する」ボタンを作ります。ユーザーがボタンを押すと、「このアプリに歩数や体重を見せてもいいですか？」という確認画面が出ます。
  3. データの受け取り: ユーザーが「許可」すると、アプリはインターネットを経由して、クラウドの倉庫から今日の歩数や体重の数字を受け取ります。
  4. 画面に表示: JavaScriptを使って、受け取った数字を画面の入力欄に自動で入れます。


まとめ

プログラミングの深い知識がなくても、AIに適切な指示（プロンプト）を出すことで、ここまで本格的なデザインのアプリを短時間で作ることができます。
「こんな便利なツールがあったらいいな」というアイデアがあれば、ぜひAIをパートナーにして、あなただけのアプリ作りに挑戦してみてください！

その「手作業」、AIなら0.1秒で平滑化できます。

FAXの転記、メールの集計、コピペの繰り返し。これらはもはや「仕事」ではありません。
あなたの業務を何時間削減できるか、5秒で算出します。 算出後、その場で「そのまま使える自動化コード」を発行します。

▶ 年間の削減時間を今すぐ検証する（個人情報不要）

※相談は不要です。まず「数字」と「コード」を持ち帰ってください。