Claude Code で iPhone のホーム画面アプリを作って無料公開する｜Mac なし・App Store なしで2本作った手順
僕は Mac を持っていません。それでも、iPhone のホーム画面にアイコンを置いて、全画面で開けるアプリを2つ作りました。作るのには Claude Code を使い、公開先は GitHub Pages です。どちらも無料です。
1つは「シフト家計簿」、もう1つは運転免許の「学科試験トレーニング」です。使える形になるまで、それぞれ1〜2日でした。
先に結論
- App Store に出すアプリではなく、**ホーム画面に置ける Web アプリ（PWA）**として作る。Mac も開発者登録も要らない
- 中身は HTML のファイル1つ。Claude Code に作ってもらい、GitHub Pages で無料公開する
- iPhone で開くと、下に余白が出る・上がぼやけるなど、パソコンでは見えないつまずきがある。実機で確かめながら直す
- データは iPhone の中にだけ保存されるので、バックアップの機能を必ず入れる
GitHub Pages の条件は、2026年11月7日に GitHub の公式ドキュメントで確かめました。
ホーム画面アプリ（PWA）とは
iPhone の Safari でページを開き、共有ボタンから「ホーム画面に追加」を選ぶと、アイコンができます。そのアイコンから開くと、アドレスバーのない全画面で表示されます。見た目も使い心地も、ほとんどアプリと同じです。
| App Store のアプリ | ホーム画面アプリ（PWA） | |
|---|---|---|
| 作るのに要るもの | Mac、Xcode、開発者登録 | Windows パソコンでもよい |
| 公開の費用 | Apple の開発者登録に、年額の費用がかかる | GitHub Pages なら無料 |
| 審査 | ある | ない |
| 苦手なこと | ― | iPhone 本体の機能を深く使う操作 |
自分や友だちが使うアプリなら、ホーム画面アプリで十分でした。
作ったもの
シフト家計簿
アルバイトのシフトと家計簿を、1つにまとめたアプリです。シフトを入れると、時給や交通費から月の給料の見込みを出します。
- バイト先ごとの給料の内訳と、年の合計（年収の壁を超えないかの確認）
- 月の予算と、カテゴリー別の支出・収入
- ドル建てのサブスクを、為替レートで円に直す
- アプリを開くときのパスコードロック
学科試験トレーニング
運転免許の学科試験の問題を解くアプリです。問題と画像をアプリの中に入れてあるので、電波のないところでも解けます。
作り方の流れ
- Claude Code に「こういうアプリを作って」と頼む。何を記録したいか、どんな画面がほしいかを日本語で伝える
- できた HTML を、パソコンのブラウザで開いて確かめる
- GitHub Pages に公開する。公開の作業も Claude Code が進める（GitHub のアカウントは自分で作っておく）
- iPhone の Safari で開き、「ホーム画面に追加」を押す
- 実機で使ってみて、気になるところを伝えて直してもらう。これを何回か繰り返す
GitHub Pages は、公開リポジトリ（中身をだれでも見られる置き場所）なら、無料のプランで使えます。アプリのコードも公開されるので、パスワードなどの秘密は入れません。
Claude Code の始め方は「Claude Code の始め方【Windows】」にまとめています。
iPhone でつまずいたところ
いちばん時間がかかったのは、シフト家計簿を iPhone のホーム画面から開いたときの見た目でした。パソコンのブラウザでは、きれいに見えていたんです。
- 画面の下に余白が出る。 下のタブの帯が、画面の一番下までくっつかない
- 画面の上がぼやける。 時計や電池のある帯のあたりの表示がにじむ
どちらもパソコンでは同じ表示になりません。そこで、iPhone で開いてスクリーンショットを撮り、Claude Code に見せて直してもらいました。何度か上げ直して、ようやく全画面できれいに開くようになりました。
一度直したら、次からは最初から入れる
直し方がわかったあとは、その対策を「次にアプリを作るときに必ず使う手順」として Claude Code に覚えさせました。学科試験トレーニングでは、最初から全画面で開きました。
ほかにも、iPhone には文字を入力すると画面が勝手に拡大される癖があります。入力欄の文字を16px 以上にすると止まります。
データの守り方
ホーム画面アプリのデータは、その iPhone の中にだけ保存されます。パソコンとは同期しません。アイコンを消すと、データも一緒に消えるんです。
そこで、どのアプリにも次の機能を入れています。
- 設定画面に「バックアップを保存」と「バックアップから戻す」を置く
- 最後のバックアップから30日たったら、画面にお知らせを出す
作ったあとは、別の目で確かめる
アプリができたら、作ったときとは別の Claude Code に確認役を任せて、スマホの幅で操作して確かめてもらっています。シフト家計簿では、2つの不具合が見つかりました。
- 入力のシートを閉じても、裏で処理が残っていた
- レートが空のとき、ドル建ての固定費が0円として計算されていた
自分で触っているだけでは、気づかなかった不具合です。
次にやること
- 作りたいアプリを1つ決める。毎日の記録、タイマー、問題集など、自分が毎日使うものがおすすめ
- Claude Code に、何を記録したいかを日本語で伝えて作ってもらう
- GitHub Pages に公開して、iPhone のホーム画面に追加する
最初の1つは、画面が1枚だけの小さなアプリから始めると、形にしやすいです。