生成AI理解度診断ロゴ

生成AI理解度診断

活用術

筋トレアプリの広告がうざすぎる問題を、生成AIで自分専用アプリを作って解決する方法(非エンジニア向け)

更新: 2026年7月11日
12分で読めます
#生成AI#PWA#GitHub Pages#個人開発#筋トレ

💡 記事を読む前に、まず自分のレベルをチェック

10分の無料診断で、あなたに最適な学習リソースをご提案します。

無料診断を始める

「セットの入力画面を開くたびに全画面広告」「ちょっと過去の記録を見ようとしたら動画広告」「サブスクの勧誘ダイアログが毎日出てくる」——筋トレの記録アプリを開くたびに、こんなストレスを感じていませんか?

正直、記録するたびにアプリに邪魔される体験は、続けるモチベーションを削ります。

本記事では、「生成 AI を使えば、非エンジニアでも自分だけが使う広告ゼロの筋トレ記録アプリを作れる」 という現実的な解決策を、ステップバイステップで紹介します。

そもそも、なぜ筋トレアプリは広告まみれなのか

先に構造を理解しておきましょう。無料の筋トレアプリが広告まみれになるのは、開発者が悪いというより、無料アプリのビジネスモデルによるものです。

  • 開発・運営には人件費とサーバー代がかかる
  • 有料化するとダウンロード数が激減する
  • 結果、広告収入かサブスクでマネタイズせざるを得ない
  • 「無料で使うユーザー」 = 「広告表示のリソース」という構図

つまり、あなたが「広告うざい」と感じる感覚は正常で、それはビジネス構造の必然です。

そして、この構造を丸ごと回避する方法が 「自分専用に自作する」 です。ユーザーがあなた一人だけなら:

  • 広告を出す必要がない(誰にも売らない)
  • サブスクを設ける理由もない
  • ログイン機能すら要らない
  • 使うのは自分のスマホだけ

「自分で作る」って、非エンジニアでも本当にできる?

結論から言うと、2026 年時点の生成 AI があれば、かなり現実的に可能です。

  • Claude.ai や ChatGPT に「こういうアプリを作って」と頼むと、動くコードを書いてくれる
  • コードを GitHub という無料サービスに置くだけで Web ページとして公開できる
  • ブラウザで開けば動くから、アプリストアの審査も不要
  • スマホの「ホーム画面に追加」で、普通のアプリのように起動できる(PWA という仕組み)

使う AI ツールについて

筆者は Claude.ai の Web チャットだけで作りました。Claude Code のようなエンジニア向け CLI ツールは不要です。

同じことは ChatGPT でも十分できるはずです(両者の実力にほとんど差がない領域の作業なので)。要は「普段使いのチャット AI があれば OK」ということです。

必要なもの

  • GitHub アカウント(無料)
  • Claude.ai または ChatGPT(無料プランでも可)
  • スマホ(普段使いのやつでよい)
  • 1 時間程度の集中時間(GitHub を触ったことがある人の場合)

GitHub をまったく触ったことがない人は、事前に「GitHub とは何か」「リポジトリとは何か」「GitHub Pages とは何か」だけざっくり調べてイメージを掴んでおくと、そこから 1 時間程度で完成まで到達できます。

プログラミングを勉強してからではなく、AI に手伝ってもらいながら「動くもの」を先に作るアプローチです。

完成品のイメージ:シンプルな筋トレ記録 PWA

作る対象を具体的に描いておくとイメージしやすいです。

機能

  • 種目を選ぶ(例:ベンチプレス、スクワット、デッドリフト…)
  • セットごとに 重量 × レップ数 を入力
  • その日の記録を一覧表示
  • 過去の記録を種目別にさかのぼれる
  • 広告なし、ログイン不要、オフラインでも動く

見た目

  • スマホ縦向きで見やすい
  • ダークテーマ(ジムでも眩しくない)
  • タップ数少なめ

技術的な骨格(覚えなくて OK)

  • HTML 1 枚 + JavaScript 1 ファイル + JSON 1 ファイル(種目リスト)
  • 記録データは ブラウザの localStorage(あなたのスマホの中に保存)
  • Service Worker でオフライン動作
  • manifest.json でホーム画面から起動できる(PWA 化)

これで、既存のアプリに引けを取らない使い勝手のものが作れます。

セキュリティ観点で意識した設計

「自分のトレーニング記録は、他人に見られたくないし、業者に売られたりもしたくない」——そう感じる方は多いはず。この構成なら以下が担保できます。

  • 記録データはあなたのスマホの中だけ(ブラウザの localStorage に保存)
  • サーバーに送信しない(そもそも自分専用のサーバーを持たない構成)
  • GitHub に置いてあるのは「アプリのコード」だけ(記録データは 1 件も置かない)
  • ログイン機能もアカウントもない(漏洩する ID・パスワードが存在しない)
  • 広告 SDK もアクセス解析タグも入れない(第三者にデータが渡る経路そのものがない)

つまり、記録データは 常にあなたのスマホの中に留まる 設計です。既存の無料アプリだと避けにくい「行動データが広告配信に使われる」「サーバー障害でデータが消える」「サービス終了でアプリが使えなくなる」といったリスクを、構造的に取り除けます。

代わりのトレードオフとして、そのスマホのブラウザデータを消すと記録も消えるという制約はあります(対策は後述の FAQ で)。

全体ステップ(所要時間の目安)

GitHub を使ったことがある人なら、Step 1〜7 は合わせて 1 時間もかかりません

ステップやること目安時間
1要件を書き出す10 分
2生成 AI に基本アプリを作ってもらう15 分
3GitHub アカウントを作る(既にある人はスキップ)5 分
4リポジトリを作ってファイルをアップロード5 分
5GitHub Pages で公開設定5 分
6PWA 化して「アプリっぽく」する15 分
7スマホのホーム画面に追加5 分
8使いながら細部を改善継続的

GitHub をまったく触ったことがない場合は、上に加えて「GitHub の全体像を掴む」時間が別途 15〜30 分くらい必要になります。

Step 1:要件を紙に書き出す

いきなり AI に頼む前に、何を作りたいかを自分の言葉で書き出しておくのが重要です。

書き出す項目の例:

  • どんな種目を記録するか(BIG3 だけ? もっと多く?)
  • セット数の想定(1 種目あたり 3〜5 セット?)
  • 記録する項目(重量、レップ数、RPE、休憩時間?)
  • 見返す粒度(日別? 種目別? 週次サマリー?)
  • スマホ縦向き前提でいいか
  • テーマ色(ダーク? ライト?)

「あれもこれも」ではなく、最初は極限までシンプルに。使いながら追加していくのが自作アプリの醍醐味です。

Step 2:生成 AI に基本アプリを作ってもらう

Claude.ai または ChatGPT のチャット画面を開き、Step 1 で書き出した要件をそのまま貼り付けて 「これで動くシンプルな筋トレ記録アプリを HTML と JavaScript だけで作ってください」 と依頼します。

依頼するときに押さえておくと仕上がりが安定するポイント:

  • 「静的ファイルだけで動くように」 と明記する → 難しいサーバー設定が不要になる
  • 「ライブラリ・フレームワークは使わない」 と伝える → 後で理解しやすい
  • 「データはブラウザの localStorage に保存」 と指定する → サーバー不要でシンプル
  • 「非エンジニアにも分かるコメント付きで」 と一言添える → 後から見返した時に読める
  • 「ファイル構成」を提示する(例:index.html / app.js / exercises.json)→ AI が構造化しやすい

AI が返してきたコードは、そのまま自分の PC のフォルダに保存します。テキストエディタ(Windows のメモ帳や Mac の TextEdit でも OK。おすすめは VS Code)で index.html を開いて ブラウザにドラッグすると、その場で動作確認できます。

一発で理想通りにはなりません。触ってみて「ここが不便」「ここを直したい」を 同じチャットに続けて伝える と、AI が修正版を返してくれます。このとき 「残したい要素」を毎回一緒に伝える のがコツです(AI が勝手に設計を変えないため)。

Step 3:GitHub アカウントを作る

GitHub は「作ったコードを保管し、Web に公開できる」無料サービスです。

  1. https://github.com/ にアクセス
  2. 「Sign up」から無料アカウント作成
  3. メール認証を済ませる

すでに持っている人はスキップで OK。

Step 4:リポジトリを作ってファイルをアップロード

GitHub 上で リポジトリ(= プロジェクトの入れ物)を作ります。

  1. ログイン後、右上「+」→「New repository」
  2. リポジトリ名を入力(例:my-workout-log
  3. 「Public」を選択(GitHub Pages で無料公開するため)
  4. 「Add a README」にチェック
  5. 「Create repository」

作成できたら、Step 2 で AI が出したファイル(index.html, app.js, exercises.json)をアップロードします。

  1. リポジトリ画面の「Add file」→「Upload files」
  2. Step 2 で作ったファイルをドラッグ&ドロップ
  3. 下の「Commit changes」を押す

これで GitHub にコードが保存されました。

Step 5:GitHub Pages で Web に公開する

GitHub Pages は、リポジトリの内容を 無料の Web サイトとして公開 できる仕組みです。

  1. リポジトリ画面の「Settings」タブ
  2. 左メニューから「Pages」
  3. 「Source」で Deploy from a branch を選択
  4. Branch は main、フォルダは / (root) を指定
  5. Save

数分待つと、https://あなたのGitHubユーザー名.github.io/my-workout-log/ のような URL が発行されます。

スマホのブラウザでこの URL を開けば、すでにあなた専用の筋トレアプリが動いている状態になります。

Step 6:PWA 化して「アプリっぽく」する

Web ページのままだと毎回 URL を開く必要があります。PWA(Progressive Web App)化すると、スマホのホーム画面から普通のアプリのように起動できます。

Step 2 と同じチャットに続けて、「このアプリを PWA として動くようにしてください。ホーム画面から起動できて、オフラインでも動くようにしたいです」 と依頼します。あわせて伝えると失敗が減るポイント:

  • アプリ名(好きな名前でOK。例:My Workout Log)
  • テーマカラー・背景カラー
  • 画面向き(縦固定にしたい等)
  • アプリ本体は「キャッシュ優先」で、種目リストのような更新が発生するデータは「ネット優先」にしてほしい

AI からは、追加する manifest.jsonsw.js(Service Worker)、そして既存の index.html に追記すべき数行が返ってきます。

キャッシュ戦略のポイント

  • アプリ本体(HTML/JS)は「キャッシュ優先」→ 起動が速い、オフラインで動く
  • 種目リスト(JSON)は「ネット優先」→ GitHub 上で編集すればすぐ反映される

この 2 段構えにしておくと、「種目を追加したい」時に AI に頼まずファイル 1 枚を編集するだけで済みます。

アイコン画像を用意する

192x192 と 512x512 の PNG が必要です。用意方法:

  • 無料の PNG ロゴ作成サイト(Canva など)で作る
  • ChatGPT で画像生成する(DALL·E 経由)
  • 自分で写真をトリミング

作った画像を icon-192.pngicon-512.png としてリポジトリにアップロード。

更新後の再デプロイ

ファイルをアップロードして数分待てば、自動的に GitHub Pages 側も更新されます。

Step 7:スマホのホーム画面に追加

iPhone (Safari)

  1. Safari で自分のアプリの URL を開く
  2. 下の「共有」ボタン
  3. 「ホーム画面に追加」
  4. 名前を確認して「追加」

Android (Chrome)

  1. Chrome でアプリの URL を開く
  2. 右上「⋮」メニュー
  3. 「ホーム画面に追加」
  4. 追加

これで、アプリストアを経由せずに、あなた専用の広告ゼロ筋トレアプリがホーム画面から起動できるようになります。

実際に使いながら改善するときのコツ

作って終わり、ではなくて 「使いながら気になった不便を AI に直させる」 サイクルが本質です。

1 週間くらい使うと、必ず「ここが面倒」「これが欲しい」が出てきます。それをそのまま同じチャットに伝えて、修正版のコードをもらう。それを GitHub に上げ直す。この繰り返しです。

伝えるときは 3 点をセットで:

  • どんなシーンで不便を感じたか(「セット間の休憩中に前回の記録を見返したいが、タップ数が多い」など具体的に)
  • どう変えたいか(一言で)
  • 残したい要素(「ダークテーマ / 静的ファイル構成 / localStorage 保存 / PWA として動くこと」など)

「残したい要素」を必ず一緒に伝えるのが、AI が勝手に大幅リファクタしてしまうのを防ぐコツです。

この改善サイクルを繰り返すと、世の中のどのアプリよりも自分にフィットした 筋トレ記録アプリになっていきます。

よくある質問

Q. コードを 1 行も書かないで本当に動くの?

多くの場合は動きます。ただし 「AI に伝える精度」 が仕上がりを決めます。「何が不便で、何を残したいか」を毎回きちんと伝える練習をすれば、コードそのものは書けなくても大丈夫です。

Q. データが飛んだりしない?

localStorage はスマホのブラウザ内部に保存されるので、そのブラウザのデータを消すと消えます。心配な人は、AI に頼んで 「記録を JSON でエクスポート・インポートできる」 機能を追加してもらうと安全です。

Q. 他人に見られたりしない?

GitHub Pages で公開している URL 自体は他の人もアクセスできますが、記録データはあなたのスマホのブラウザ内部にしかないので、他人からは見えません。URL を他人に共有しなければ、URL 自体を推測される可能性も極めて低いです。

Q. 家族と共有したい

localStorage で個別管理する設計だと共有は難しいです。将来「家族と共有したい」なら、Google Sheets や Firebase と連携するステップに進む必要があります(これも AI に相談できます)。

Q. iPhone だと PWA って動くの?

動きます。ただし iPhone の PWA サポートは Android より制約があるので、うまく動かない機能があった場合は AI に「iPhone Safari で動かない、代替方法はある?」と聞くのが早いです。

Q. Apple Watch や Fitbit と連携したい

そこまで行くと難易度が跳ね上がります。まずは 「シンプルな記録アプリを自作して使う」ステップで満足度を測ってから、必要なら別のアプリと併用する形が現実的です。

応用アイデア(同じ発想で作れるもの)

同じアプローチ(AI + GitHub Pages + PWA)で作れる自分専用アプリの例:

  • 家計簿・支出記録
  • 読書ログ
  • 睡眠時間の記録
  • 学習時間の記録
  • 食事内容の記録
  • ジャーナル・日記
  • 買い物リスト

「毎日開くけど広告がうざい」系のアプリはすべて自作候補です。同じ手順で置き換えられます。

まとめ:不満は「作る」で解消できる時代

筋トレアプリの広告がうざいという不満は、あなた個人の問題ではなく、無料アプリのビジネス構造から来る必然です。

そして 2026 年、その構造を回避する現実的な方法が「自分専用アプリを作る」です。

  • 生成 AI が コードを書いてくれる
  • GitHub Pages が 無料で公開してくれる
  • PWA が アプリストアなしでアプリ体験を実現してくれる

必要なのはコードの知識ではなく、「AI に伝える言語化能力」と、「一度作って、使いながら改善する姿勢」です。

「広告のない、自分にぴったりの筋トレ記録アプリ」を、この週末に作ってみませんか。

生成 AI との賢い付き合い方を体系的に知りたい方は、10 分で終わる生成 AI リテラシー診断もぜひご活用ください。


最終更新日: 2026 年 7 月 12 日

執筆者: 生成 AI リテラシー診断チーム

関連記事:

あなたの生成AIリテラシーをチェック

わずか10分・15問の診断で、あなたの現在のレベルを客観的に測定。最適な学習プランをご提案します。

今すぐ無料で診断する →

この記事をシェア

関連記事

活用術
10

ChatGPTで前世占いを楽しむプロンプト集|転生ストーリー・カルマ・ソウルメイトをエンタメで読み解く

ChatGPTで前世占いを楽しむための実践的なプロンプトを紹介。基本の前世占い、繰り返す悩みからの読み解き、気になる人との魂の縁、才能・適性の前世解釈まで、シチュエーション別のプロンプト例と楽しむための注意点を整理します。

#ChatGPT#占い#前世
続きを読む
活用術
12

Claudeで株式投資分析を試す|ChatGPTとの違い・銘柄調査・IR資料の読み込ませ方

Anthropic社のClaudeを株式投資分析に活用する実践ガイド。ChatGPTとの使い分け、決算短信・有価証券報告書の丸ごと読み込ませ方、業界比較、投資方針の壁打ち、Claude Codeによる自動化まで、投資助言業に踏み込まない立て付けで解説します。

#Claude#株式投資#投資分析
続きを読む
活用術
10

ChatGPTに会話を覚えさせる方法|メモリ機能・カスタム指示・GPTsの使い分け完全ガイド

ChatGPTに前提や会話内容を覚えさせる3つの方法(メモリ機能・カスタム指示・GPTs)を、それぞれの得意領域と設定例つきで解説。「毎回自己紹介する手間」を消し、業務でも日常でも生産性を上げる使い分け方を整理します。

#ChatGPT#メモリ機能#カスタム指示
続きを読む
← ブログ一覧に戻る