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

アプリ開発
シェア会

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

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

01

何を作るか決める

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

このページで分かること

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

① 何を作るか決める

② 道具の役割を知る

③ 公開の流れを見る

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

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

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

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

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

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

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

1. 話す

困りごとと作りたいもの

2. 整理してもらう

仕様を短く整理

3. 承認・修正する

「これで作る」を決める

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

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

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

入力

例：3つの質問

処理

例：回答を判定

結果

例：おすすめ表示

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

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

21日で「全機能」ではなく、ひとつ動く形を目指します。

献立提案

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

シフト表

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

ふたりの診断

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。作品のフォルダ構成が違う場合は、出力先も変わります。

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

各自の作品を公開する

21日アプリ部では、各自が1作品を作って公開します。

21日アプリ部では、各自が1作品を公開

他コミュニティの方も参加する場合があります。作品共有・投票は講座内限定です。

各自

作る → GitHub → 公開URL

共有

ほかの人が操作できるURL

進捗

希望者で3〜4人／期間中に1回

最後

作品を共有し、個人に投票

05

参考資料

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

参考資料

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