プログラミング経験ゼロでも、AIチャットの「Claude」に日本語でお願いするだけで、スマホで使えるWebアプリが作れる時代になりました。

この記事では、実際に私がClaudeで作った買い物リスト&在庫管理アプリ「ストック帳」を例に、

1. Claudeでアプリを作る方法
2. 無料で公開する方法(2パターン)
• 方法A:Claudeの「公開(Publish)」機能でそのまま共有する
• 方法B:GitHub × Vercel で本格的にWebアプリとして公開する
3. iPhoneのホーム画面に追加して「アプリ化」する方法
までを、まとめます。

目次
  1. 今回作ったアプリ「ストック帳」
  2. STEP 1:Claudeでアプリを作る
  3. STEP 2:アプリを公開する
  4. STEP 3:iPhoneのホーム画面に追加して「アプリ化」する
  5. おわりに

今回作ったアプリ「ストック帳」

まずは実物をご覧ください。スマホで開くのがおすすめです。
👉 アプリはこちら:ストック帳
https://mybuyinglists43.vercel.app/

できること
• 家にある食材・日用品をカードで管理
• カードをタップすると「在庫あり ⇄ 買うもの」がクルッと裏返る
• 在庫切れにしたものは自動で「買い物リスト」タブに集まる
• お店で「買った ✓」を押すと在庫に戻る
• アイテムは絵文字アイコン付きで自由に追加・編集・削除できる
これらすべて、HTMLファイル1枚で動きます。サーバーもデータベースも不要。だから無料で公開できるのです。

STEP 1:Claudeでアプリを作る

Claude にアクセスして(無料プランでもOK)、作りたいアプリを日本語で説明するだけです。

プロンプトの例

買い物リストと在庫管理ができるスマホ向けWebアプリを作ってください。
• 食材や日用品をカードで一覧表示
• カードをタップすると「在庫あり」と「在庫切れ(買うもの)」が切り替わる
• 在庫切れのものだけを集めた「買い物リスト」タブがほしい
• アイテムの追加・編集・削除ができる
• HTMLファイル1枚で完結させてください
• データはブラウザに保存して、閉じても消えないようにしてください

うまく作ってもらうコツ

• 「HTMLファイル1枚で完結」と必ず指定する … 後の公開作業が劇的にラクになります
• スマホ向けと明記する … ボタンサイズや画面幅がスマホに最適化されます
• 欲しい機能は箇条書きで具体的に … 曖昧に頼むと想像と違うものが出てきます
• 一度で完璧を目指さない … 「ボタンをもっと大きく」「色を緑系に」「タップしたらアニメーションをつけて」など、チャットで会話しながら少しずつ直してもらうのがClaudeの真骨頂です
Claudeは生成したアプリを画面右側の「アーティファクト」というプレビュー領域に表示してくれるので、その場で実際に触って動作確認しながら改良できます。

STEP 2:アプリを公開する

作ったアプリを自分のスマホや家族・友人と共有するには、インターネット上に「公開」する必要があります。方法は大きく2つあります。

方法A:Claudeの「公開」機能で共有する(最速)

Claudeには、作ったアプリをそのままWebに公開できる公式機能があります。

1. Claudeでアプリ(アーティファクト)を表示した状態にする
2. アーティファクト右上の 「公開(Publish)」 ボタンをクリック
3. 発行された公開リンクをコピーして共有する
公式機能のポイント(Anthropic公式ヘルプより)

• リンクを受け取った人は、Claudeのアカウント登録なしでアプリを閲覧・操作できます
• 公開したアーティファクトはサイドバーの「アーティファクト」セクションに追加され、後から見つけやすくなります
• 「埋め込みコードを取得(Get embed code)」ボタンから、自分のブログやサイトに埋め込むコードも取得できます(埋め込み先ドメインの指定が必要)
• 見た人は「カスタマイズ(Customize)」ボタンから、あなたのアプリを土台に自分用の改造版を作ることもできます(リミックス文化!)

注意点⚠️ 一度「公開を取り消す(Unpublish)」と、同じアーティファクトは二度と再公開できません。 再度公開したい場合は新しいアーティファクトを作り直す必要があります

方法B:GitHub × Vercel で公開する(おすすめ・完全無料)

「自分専用の道具として毎日使いたい」「データをちゃんと端末に保存したい」なら、こちらが本命です。localStorageもそのまま動きます。

🛠️ 事前準備
• GitHub アカウントと Vercel アカウントを作成し、連携(GitHubでVercelにサインイン)を済ませておく
• Claudeで作ったコードをコピーして、ファイル名を必ず index.html(すべて小文字) で保存しておく

⚠️ 重要: Vercelなどのホスティングサービスは、トップページとして index.html を自動で探します。Index.html のように大文字が混ざっていたり、main.html など別の名前だと 「404: NOT_FOUND」エラー になります。

手順１：GitHub(https://github.com/)で新規リポジトリを作成する（※会員登録が必要です）
  1. GitHub にアクセスし、Homeを開く
  2. 「New」 ボタン(または右上「+」→ New repository)をクリック
  3. Repository name に任意の名前(例: buyinglist)を入力し、他はデフォルトのまま最下部の 「Create repository」 をクリック

手順２：HTMLファイルをアップロード(コミット)する
  1. リポジトリ作成直後の画面にある 「uploading an existing file」 のリンクをクリック
  2. 用意した index.html を画面にドラッグ&ドロップ
  3. 画面下部の緑色の 「Commit changes」 ボタンをクリックして確定
  4. アップロード完了後、アドレスバーのリポジトリURL(https://github.com/ユーザー名/リポジトリ名)をコピーしておく
手順３：Vercel(https://vercel.com/)で新しいプロジェクトを立ち上げる（※こちらも会員登録が必要です）
  1. Vercelダッシュボード にアクセス
  2. 右上の 「Add New…」 → 「Project」 を選択

Gitリポジトリをインポートしてデプロイする

  1. 「Import Git Repository」のエリアで、先ほど作ったリポジトリ名(例: buyinglist1)を探す
    ※画面内にGithubでログイン連携すれば見つかります。見つからない場合やURLで直接指定したい場合は、検索窓に手順2でコピーしたGitHubのURLを入力
  2. 目的のリポジトリ横の 「Import」 をクリック
  3. 設定画面(Configure Project)は何も変更せず、そのまま 「Deploy」 をクリック
  4. 公開完了!


数秒〜数十秒でビルドが完了し、画面に紙吹雪の演出🎉が表示されます。発行された固有URL(https://〜.vercel.app)を開いて、アプリが正常に動けば完了です!
アプリを更新したいとき
Claudeに修正してもらった新しいコードで index.html を作り直し、GitHubのリポジトリでファイルを差し替え(アップロードして上書きコミット)するだけ。Vercelが自動で検知して数十秒で再デプロイしてくれます。URLは変わらないので、ホーム画面のアイコンもそのまま使えます。

STEP 3:iPhoneのホーム画面に追加して「アプリ化」する

公開したURLをiPhoneのホーム画面に追加すると、見た目も使い心地もほぼネイティブアプリになります。

手順(iPhone / Safari)

1. Safariで公開したURL(https://〜.vercel.app など)を開く
※この機能はSafariで開く必要があります。Chromeなど他のブラウザではメニュー構成が異なります
2. 画面下中央の 共有ボタン(□に↑のアイコン) をタップ
3. メニューを下にスクロールして 「ホーム画面に追加」 をタップ
4. アプリ名を確認(変更も可能)して、右上の 「追加」 をタップ

これでホーム画面に専用アイコンが並び、タップするとアドレスバーなしの全画面表示でアプリが起動します。
全画面表示&きれいなアイコンにする裏ワザ
Claudeにコードを作ってもらう際、次のように頼んでおくと「アプリ化」の完成度が一気に上がります。
iPhoneのホーム画面に追加したときに、全画面(アドレスバー非表示)で起動して、専用アイコンが表示されるようにmetaタグも入れてください
実際に「ストック帳」のコードには、以下の仕掛けが入っています。

Androidの場合

Chromeでページを開き、右上の「⋮」メニュー → 「ホーム画面に追加」(または「アプリをインストール」)でほぼ同じことができます。

つまずきポイントまとめ(FAQ)

Q. Vercelで「404: NOT_FOUND」になる
A. ファイル名が index.html(すべて小文字)になっているか確認してください。これが原因の9割です。

Q. Claudeで公開したら、データが保存されない
A. Claudeでの公開では基本的に保存されません。

Q. 公開したアプリは他人に見られても大丈夫?
A. どちらの方法も「URLを知っている人なら誰でも見られる」状態になります。個人情報やパスワードなどを扱うアプリの公開は避けましょう。なお「ストック帳」のようにlocalStorage保存のアプリは、データは各自の端末内にしか保存されないので、URLを共有しても自分の買い物リストが他人に見られることはありません。

Q. 費用は本当にかからない?
A. Claude(無料プラン)、GitHub(無料)、Vercel(Hobbyプラン・個人利用無料)の範囲なら、この記事の内容はすべて0円で実現できます。

おわりに

「アプリを作る」というと、プログラミング学習、開発環境の構築、App Storeの審査…と高いハードルを想像しがちですが、
Claudeに話しかける → HTMLファイル1枚をもらう → 無料で公開 → ホーム画面に追加
たったこれだけで、自分だけのオリジナルアプリが毎日ポケットの中にある生活が始まります。まずは「あったらいいな」と思う小さな道具から、ぜひ作ってみてください。

ABOUT ME
しょか
自動車業界で制御設計者として働いています。 技術に関することをいろいろ書いていこうと思っています。