【AI × 個人開発】ゼロから始めるアプリ制作 #01：仕様書から始める！個人アプリ開発の準備

はじめに

Hugoでブログを立ち上げて1か月経過。

この間、ちょっとしたアプリ制作をする機会があり記事でもその内容を公開していますが、 AIとの対話の中で公式にリリースしたいアプリの具体的な構想がまとまったので、プロジェクトを立ち上げました。

それにあたり、仕様書や要件定義、ローカルファイル内の構造・管理、Gitの活用など、一連の情報をメモも兼ねてまとめてみました。

同じようにアプリ開発をしたい方の参考、足がかりになれましたら幸いです。

なぜ「仕様書」から始めるのか

今までは漠然とコードを書き始めるような事が多かったのですが、 それでは上手く行かないケースがあったので、初期段階でアプリの公開先プラットフォームや、それに合わせた設計など、 大体でもいいので仕様書・要件定義をまとめておいた方が、プロジェクトの破綻が少なくなると判断したため。

この記事の対象者

公式リリースやシェアウェアを作るやや大きめのプロジェクトを、個人開発で始めたい人向けになります。

対象者：アプリ・ゲーム開発初心者、または再入門者

1. プロジェクト準備：まずやるべきこと

• アイデアを一行でまとめる（タイトル・目的）
• 想定プラットフォームを決める（スマホ？PC？）
• フォルダ構成の例（docs/, src/, assets/）

基本構成案

matching-game/
├─ docs/               ← ドキュメント（仕様書、設計メモなど）
│  └─ spec.md          ← 要件定義・仕様書（Markdown形式）
├─ src/                ← ソースコード（HTML, JS, CSSなど）
├─ assets/             ← 画像や音素材などのアセット
├─ README.md           ← プロジェクトの概要説明
├─ .gitignore          ← Git用除外設定
└─ index.html          ← エントリーポイント

もう少し詳しくする場合

app-name/
├── docs/                       ← 設計書・仕様書フォルダ
│   ├── 00-overview.md         ← 全体概要・目的・世界観など
│   ├── 01-requirements.md     ← 要件定義（機能・非機能要件）
│   ├── 02-ui-wireframe.md     ← UI設計（画面構成・解像度・操作）
│   ├── 03-game-rules.md       ← ゲームルールや難易度仕様
│   ├── 04-assets-plan.md      ← 画像・サウンド等の素材管理方針
│   └── ideas.md               ← アイデアメモ・派生案
├── src/                       ← ソースコード（後で作成）
├── assets/                    ← 画像などの素材置き場
├── README.md                  ← プロジェクト概要（後にFantiaにも使える）
└── .git/                      ← Git用（初期化済みならすでにあり）

💡 Tips

• docs/ は 仕様書・メモ・プロトタイピング用のMarkdown置き場として運用すると便利です。
• README.md は GitHub,ブログ紹介用にも再利用可能。
• Markdownなので、画像やリンクも貼れます（VSCodeで preview も可能）。

2. Markdownで仕様書を書く

.md ファイルを作る理由

markdown形式は、慣れると高速に情報を書くことが出来き、ブログ記事にする場合も、そのまま .md ファイルを出力すれば記事化できるなどメリットが多数あります。

有名ブログサイトは大体、マークダウンに対応しています。
（当ブログで利用しているHugoほか、Qiita,Zenn,はてなブログなど）

AIへまとまった情報を伝える場合も、H1,H2,H3タグで箇条書きで情報まとめると分かりやすさ以外に、プロンプトの情報量も少なくなります。

ChatGPTが情報を要約する際に、markdownで出力する事が多く、情報を投げる際にもmd形式は有効。 ※ChatGPTがよく出力する表もmarkdown形式なので、ペーストするだけで一瞬で綺麗な表が出来上がります

最低限あると便利な仕様書

まず書き始めるなら

　docs/00-overview.md

# Matching Game（仮題） 概要

## 目的
- シンプルで遊びやすいゲームを開発。
- 絵を完成させる演出で達成感を演出。
- 将来的に生成AI画像やアニメ演出を取り入れた展開も想定。

## 想定プラットフォーム
- モバイルブラウザ（スマホ向け）
- 解像度目安：縦向き、幅360px～480px程度を想定

## 開発環境
- HTML + CSS + JavaScript（バニラ）
- GitHub上で進捗管理

　docs/01-requirements.md

# 要件定義

## 機能要件（MVP）
- [ ] カードをめくる
- [ ] タップ操作対応（スマホ前提）
- [ ] ステージクリア時に「絵の一部が表示される」
- [ ] プレイ履歴の記録

## 非機能要件
- スマホ画面でも操作しやすいUI
- 読み込み軽量（初期はJSのみ、後にPWAやアプリ化を検討）

Tips

• docs/ は 仕様書・メモ・プロトタイピング用のMarkdown置き場として運用すると便利です。
• README.md は Fantia・GitHub・ブログ紹介用にも再利用可能。
• Markdownなので、画像やリンクも貼れます（VSCodeで preview も可能）。

3. GitHubでリポジトリを作成しよう

プライベートで始める安心設計

ソースコードの管理やロールバックが容易になるのでgitを利用するのは必須だと思います。

Githubでソースコードを管理すれば、開発プラットフォームが変わってもクローン作成も容易で、複数人でプロジェクトを管理したい場合にも便利です。

git初心者の方は難しいかもしれませんが、今の時代AIが親切に解説してくれますので、最初のハードルさえ超えればよく使うコマンドはそんなに多くない為、毎日使ってれば自然に覚えると思います。

当サイトは、Huboを活用してブログ制作や記事管理をしていますがすべてGitで管理しています。

リポジトリ作成&初期化

GitHubにリポジトリを作成し、プロジェクト管理します。

※記事作成予定※ [gitのインストール方法]

GithHUBにログインし、新しいリポジトリを作成します。

https://github.com/(user-name)?tab=projects

コマンドで初期化

リポジトリ作成後、公式サイトで記載されている初期化コマンドを実行します。

最初にリポジトリ管理用のフォルダを作成。 通常は、「C:/user/(user-name)/(project-name)」

C:/user/(user-name)> mkdir (project-name)
C:/user/(user-name)> cd (project-name)
C:/user/(user-name)/(project-name)> (gitコマンド）

初期化

echo "# (project-name)" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/(user-name)/(repository-name)
git push -u origin main

これでローカル内に「.git」フォルダが作成され、以後、gitコマンドによりファイル管理を行えるようになります。

README.md に何を書くか？

README.md はプロジェクトの「玄関」です。次のような内容をシンプルに記載するのがおすすめです：

• プロジェクト概要（どんなゲーム？どんな特徴？）
• 使用技術（HTML/CSS/JS, GitHub Pagesなど）
• 起動方法（ローカル環境 or Web版）
• 作者・ライセンス・問い合わせ先（必要に応じて）

# Matching Game - 画像連動型 神経衰弱 Webアプリ

画像を使い、揃えることで絵が完成する新感覚のカードゲームです。

## 特徴
- 毎回異なる画像生成
- カードに連動して背景が完成していくギミック
- 将来的にスマホ対応

## 使用技術
- HTML/CSS/JavaScript
- GitHub Pages での公開予定

## ローカルでの実行
`index.html` をブラウザで開くだけ

## 作者
lain（https://humanxai.info/）

4. 実際の開発へ向けた考え方

MVPで始めよう

• シンプルな構成でまず完成を目指す
• まずは「カードがめくれて、揃ったら消える」だけでいい
• 背景画像連動やCPU対戦、演出追加などは「後回しでOK」

機能追加は「フェーズ制」

機能追加は計画的に。

1. Phase 1：基本ゲーム
2. Phase 2：背景構築
3. Phase 3：対戦＆演出

など、段階的に開発

ローカル→Web公開のイメージ

HugoやGitHub Pages、将来的にはPWA対応やスマホアプリ化も視野に入れつつ、まずは「PCブラウザで完成」を目指す。

おわりに

• 小さなプロジェクトこそ「仕様を言語化」することで迷いが減る。
• 記事として発信すれば、将来の自分も読者も得をする。
• 次回は「画面レイアウト設計と素材準備」をテーマに、Figmaや画像生成AIとの連携も紹介予定。

次回予告

次回は「画面レイアウト設計と素材の準備編」へ進みます。Figma、手描き設計、AI生成素材など、UI設計の第一歩をご紹介します。

【AI × 個人開発】ゼロから始めるアプリ制作 #01：仕様書から始める！個人アプリ開発の準備

アプリ開発を始めたいけど何から手を付けていいかわからない？この記事では、AI×個人開発でゲーム制作を目指す筆者が、仕様書の作り方からGitHubリポジトリ運用、README設計まで「実用的な準備」を丁寧に解説します。

https://humanxai.info/posts/app-dev-production-01/