アプリ開発シェア会
AIと一緒に、ひとつ形にする

アプリ開発
シェア会

企画して、作って、公開する。
必要な考え方と操作を、順番に見ていきます。

「自分でも1つ公開できそう」が分かれば十分です。すべての操作を一度で覚える必要はありません。

01

何を作るか決める

アプリ開発は、誰のために何を作るかを決めるところから始まります。

このページで分かること

「自分でも1つ公開できそう」が分かれば十分です。

① 何を作るか決める

② 道具の役割を知る

③ 公開の流れを見る

すべての操作を一度で覚える必要はありません。

開発の5工程を、会話で進める

大切なのは、AIへの指示より「何を決め、どう確かめるか」。

  1. 企画：誰の困りごと？
  2. 設計：入力と結果は？
  3. 開発：AIと形にする
  4. テスト：想定通り動く？
  5. 受入：これで使える？

要件定義は、企画と設計の間で「作る範囲」と「完成条件」を決める作業。

要件定義は「話して、確認する」

コードの前に、AIに整理させた内容を自分で決めます。

1. 話す

困りごとと作りたいもの

2. 整理してもらう

仕様を短く整理

3. 承認・修正する

「これで作る」を決める

確認すること：誰が使う／入力／結果／完成条件／今回は作らないこと

アプリは、入力から結果を返す仕組み

最初の作品は、保存機能なしの小さなものから。

入力

例：3つの質問

処理

例：回答を判定

結果

例：おすすめ表示

診断・計算・チェックリストなら、データベースはなくても始められます。

実際の案も、最初は小さく作れる

全機能を一度に作らず、まずひとつ動く形を目指します。

献立提案

食材・季節を入力 → 候補を表示

シフト表

条件を入力 → 仮の表を表示

ふたりの診断

2人分を入力 → 一致点を表示

名刺・領収書の整理

架空の1件を入力 → 分類を表示

保存・連携は、必要になってから

案ごとに追加の仕組みが違います。初回は架空データで動きを確認。

保存

顧客・名刺・領収書など
後から見返すなら保存方法を決める

読み取り・連携

画像・音声・LINEなど
外部サービスとの接続を考える

複数人で共有

別々のスマホで使うなら
利用者の区別とアクセス制御を考える

公開した作品に、実際の顧客情報・名簿・領収書を入れない。

02

道具の役割を知る

Claude Codeで作り、GitHubに保存し、Cloudflare Pagesで公開します。

3つの道具は、役割が違います

作る → 保存する → 公開する

Claude Code

AIと一緒に作る

GitHub

ファイルを保存する

Cloudflare Pages

Webに公開する

完成の目印：ほかの人が開いて操作できる公開URL

Claude Codeは「一緒に作る相手」

日本語で相談しながら、ファイルの作成・修正・確認を進めます。

あなた

何を作りたいか伝える
動きを見て、直したい点を伝える

Claude Code

ファイルを作る・直す
動作確認を手伝う

GitHubは「作品の置き場所」

プロジェクトのファイルと、変更の履歴を管理します。

作品のフォルダ

画面のコード
画像などの素材
変更の履歴

最初の準備

まずは1作品＝1つの
リポジトリを作る

秘密のパスワードやAPIキーは入れません。

GitHub｜最初のチェックリスト

ここまでできれば、Cloudflareにつなげられます。

  • アカウントを作り、メール認証・2段階認証を済ませる
  • New repository で作品名を入れ、「Private」を選ぶ
  • Claude Codeで作ったファイルをGitHubへ保存する
  • ファイルが見えることと、公開用のブランチを確認する
  • パスワード・APIキー・.env が含まれていないか確認する

Cloudflare Pagesは「公開する場所」

GitHubの作品をつなぐと、WebのURLを発行できます。

GitHubの作品

保存する

Cloudflare Pages

公開する

公開URL

ほかの人が開ける

更新したら、つながった作品を再公開できます。

Cloudflare｜公開チェックリスト

Cloudflare Pagesで新しいプロジェクトを作るときの手順です。

  • 既存アカウントでサインイン（なければ登録）
  • Create application → Continue to Pages → Gitを取り込む
  • GitHub連携を許可し、作品のリポジトリを選ぶ
  • 本番 main／ビルド不要／出力先は index.html の場所
  • Save and Deploy → 公開URLを別の端末で開く

このページの設定例：本番ブランチ main／フレームワーク None／Build command は空欄／Build output directory は public。作品のフォルダ構成が違う場合は、出力先も変わります。

Cloudflare Pagesの料金

この資料のような小さな静的Webページは、無料プランから始められます。

静的ページの閲覧

Pagesの静的ファイルへのアクセスは、無料・有料プランともリクエスト数による課金はありません。

無料プランの公開回数

GitHubからのビルドは月500回まで。Pagesプロジェクトは1アカウント100件までです。

追加機能を使う場合

Pages FunctionsやWorkersは別の利用枠の対象です。無料プランでは合計で1日10万リクエストが目安です。

診断・計算・チェックリストのようにブラウザ内だけで動く作品なら、まずPagesの無料プランで公開を試せます。データ保存、外部AI API、有料ドメインなどは必要になった時点で個別に料金を確認します。

03

小さく作って試す

一度で完成させず、自分で動きを確かめながら進めます。

公開までは、この順番

一度で完成させず、小さく作って確かめます。

  1. 作るものを1行で決める
  2. Claude Codeと作る
  3. 自分で動かして確認
  4. GitHubに保存
  5. Cloudflareで公開
  6. 別の人がURLを開く

AIへの最初の依頼は、4つだけ

細かい技術名より、使う人と完成形を伝えます。

誰が

誰のためのアプリ？

何を

何を入力し、何を返す？

まず

最初の機能は1つだけ

完成

どこまで動けばOK？

たとえば、こんな頼み方

一回目は小さく。動いてから機能を足します。

夕食に迷う人向けの献立候補アプリを
作りたいです。まず要件を整理したいので、
対象者・入力・結果・完成条件・
今回は作らない機能について、
必要な質問をしてください。
まだコードは書かないでください。

→ 仕様を確認してから「この内容で作って」と依頼する

実演するのは「献立候補」ミニアプリ

外部サービスや保存機能がなく、画面で結果を確かめやすい題材です。

入力

主食材を1つ選ぶ
調理時間を15分か30分から選ぶ

結果

条件に合う献立候補を3つ表示

受入条件

□ 未入力なら案内が出る □ 選んだ条件の候補が3つ出る
□ スマホでも使える □ 保存・ログイン・外部APIは今回は作らない

献立候補アプリを試す

実演で見る3つの場面

要件定義から受入まで、3つの場面で見ていきます。

画面①

会話で要件を決める

画面②

Claude Codeで作る

画面③

試す・受入

見るポイント：何を決め、どう試し、完成と判断したか。続いてGitHubに保存し、Cloudflare Pagesで公開します。

つまずいたら、状況をそのまま見せる

解決したいことを一度に1つに絞ると進みやすくなります。

伝える①

やりたかったこと

伝える②

実際に起きたこと

伝える③

画面・エラー文

公開前の確認
パスワード・APIキー・個人情報を載せない
ほかの人の端末でも公開URLを開いてみる

04

作業を速くするTips

声で伝え、画面を見せ、更新を確かめる。田中が使っている方法です。

声でAIに伝える

長い指示を手で打つ代わりに、話して入力する方法です。

Mac標準の音声入力でも始められます。僕はTypelessを使い、名前や専門用語を個人辞書へ登録して、会話の入力を速くしています。音声入力の後は、送信前に文字を一度確認します。

最初からきれいな指示文を作ろうとせず、作りたいこと・困っていることを話して、AIに短く整理してもらいます。

画面を撮って、そのまま貼る

エラーや迷った画面は、説明文だけよりスクリーンショットを見せると伝わりやすくなります。

範囲を選んでコピー

Control + Shift + Command + 4 → 範囲を選択。画面全体なら最後の4を3にします。

AIとの会話に貼る

貼りたい欄で Command + V。画像ファイルとして保存する手間が省けます。

僕は「こんな風になったけど、どうすればいい？」と、画面を見せながら聞きます。伝えるときは、やりたかったことと実際に起きたことも一緒に添えます。

画面を共有する前に、顧客情報・メールアドレス・パスワード・APIキーが写っていないか確認します。

GitHub Desktopで更新する

GitHubへの保存は、画面で変更を確認できるGitHub Desktopでも進められます。

  1. GitHub Desktopで作品のフォルダと変更内容を見る
  2. 変更をCommitして、手元に記録する
  3. Push originでGitHubへ送る
  4. Cloudflareの公開URLを開き、変更が反映されたか確認する

CommitだけではGitHubに届きません。Push originまで行うと、連携したCloudflare Pagesの再公開が始まります。GitHub Freeは0ドルで、個人アカウントでも公開・非公開リポジトリを作れます。

田中の進め方で、真似しやすいところ

この会で見せる流れから、初心者にも役立つ動きを抜き出しました。

  1. まずAIと会話して要件を決める。仕様を読んでから「この内容で作って」と伝える
  2. 動いた画面を自分で触り、期待と違えばスクリーンショットと一緒に伝える
  3. 直すことは一度に1件ずつ頼む
  4. GitHub Desktopで変更を確認してCommit・Pushする
  5. 最後に公開URLを開き、他の人も操作できるか確かめる
05

参考資料

細かな画面操作や料金は公式の手順で確認できます。

参考資料

細かな操作は、公式の手順を確認できます。