実践：ひとりでWebアプリを作る

6-1作るものを決める（要件定義）

開発の成否の8割は「何を作るか」を明確にする段階で決まります。プロはこれを要件定義と呼びます。難しく考えず、次の5つの質問に答えるだけです。

要件定義の5つの質問

1. 誰が使う？ — 自分だけ／家族／不特定多数
2. 何の課題を解決する？ — 「買い物リストをいつも忘れる」など
3. 最低限必要な機能は？ — 3つまでに絞る
4. あったら嬉しい機能は？ — 後回しリストへ
5. どんな見た目にしたい？ — 参考にしたいアプリやサイト

要件をClaudeと一緒に固める

Webアプリを作りたいので、要件定義を手伝ってください。

【誰が】私ひとりで使う
【課題】やることをいつも忘れてしまう
【必須機能】タスクの追加、完了チェック、削除
【後回し】締め切り日、カテゴリ分け
【見た目】シンプルで、スマホでも使いやすく

この要件で不足や矛盾がないか確認して、
開発計画を「計画.md」というファイルにまとめてください。

6-2ToDoアプリを作る — 土台編

ここからは実際に手を動かします。新しいフォルダを作り、Claude Codeを起動しましょう。

mkdir my-todo-app
cd my-todo-app
claude

ステップ1：環境を整える

ToDoアプリを作ります。まず準備として：
1. このプロジェクトでGitを使えるようにしてください
2. CLAUDE.mdを作って「作者は初心者。説明はやさしく。
   作業前に方針を説明する」というルールを書いてください

ステップ2：最小限の土台を作る

ToDoアプリの土台を作ってください。

【今回作る機能】
- テキスト入力欄と「追加」ボタン
- 追加したタスクが一覧表示される
- それだけ（完了・削除機能はまだ作らない）

【構成】index.html、css/style.css、js/app.js の3ファイル
【条件】スマホでも見やすく

まず方針を説明してください。OKと言ったら着手してください。

完成したらindex.htmlをブラウザで開き、タスクを追加できるか自分の目で確認します。動いたらすかさずコミットです。

動作確認できました。ここまでをコミットしてください。

6-3ToDoアプリを作る — 機能追加編

土台ができたら、1機能ずつ追加していきます。追加→確認→コミットのリズムを守りましょう。

ステップ3：完了チェック機能

タスクの完了チェック機能を追加してください。
- 各タスクにチェックボックスを付ける
- チェックすると取り消し線が付いてグレーになる
方針を説明してから着手してください。

ステップ4：削除機能

各タスクに削除ボタン（ゴミ箱アイコンか「×」）を
追加してください。押すとそのタスクが消えるように。

ステップ5：データの保存（最重要）

今のままでは、ページを再読み込みするとタスクが全部消えてしまいます。第5章で学んだlocalStorageの出番です。

今はページを再読み込みするとタスクが消えてしまいます。
localStorageを使って、タスクの状態（内容・完了チェック）が
保存されるようにしてください。
再読み込みしても前の状態が復元されるのがゴールです。

各ステップの後は必ず「動作確認 → コミット」。これで追加・完了・削除・保存がそろった、立派なToDoアプリの完成です。

6-4デザインを整える

機能が完成したら、見た目を磨きます。デザインの知識がなくても、「参考」と「形容詞」で伝えればClaudeが形にしてくれます。

デザイン指示のコツ

デザインを整えてください。
【雰囲気】ミニマルで落ち着いた感じ。Notionのような
【色】白ベースに、アクセントは深い緑
【字】読みやすく、余白はゆったりめ
【その他】完了タスクはふわっと薄くなるアニメーション

・追加ボタンをもう少し大きく、角を丸くしてください
・タスクとタスクの間隔を広げてください
・全体をもう少しスマホで親指が届きやすい配置に

デザイン改善の反復ワザ

• スクリーンショットを渡す — 「この画像のようなデザインに近づけて」と参考画像を見せる（Claude Codeは画像も読めます）
• 2案出してもらう — 「ボタンの配色案を2パターン作って見せて」
• ビフォーアフター確認 — 変更のたびにブラウザを再読み込みして見比べる

6-5テストと公開

公開前のチェックリスト

公開前に、意地悪なユーザーになったつもりで触ってみます。

• 空のまま「追加」を押したらどうなる？
• ものすごく長い文字を入れたら表示は崩れない？
• スマホサイズでも操作できる？
• 再読み込み・ブラウザ再起動でデータは残る？

このアプリの公開前チェックをしたいです。
ユーザーがやりそうな操作で、不具合が起きそうな
パターンを10個挙げてください。
そのうえで、コードを見て問題がありそうな箇所が
あれば修正を提案してください。

GitHub Pagesで世界に公開する

フロントエンドだけのアプリは、GitHub Pagesで無料公開できます。必要なのはGitHubの無料アカウントだけ。手順もClaudeに任せられます。

このアプリをGitHub Pagesで公開したいです。
GitHubのアカウントは持っています（まだの場合は「まだです」と伝える）。
リポジトリの作成から公開URLの確認まで、
一歩ずつ案内してください。コマンドはあなたが実行して、
ブラウザでの操作だけ私に指示してください。

公開が完了するとhttps://ユーザー名.github.io/リポジトリ名/というURLが手に入ります。これであなたのアプリは世界中からアクセス可能。スマホからも開けますし、家族や友人にURLを送って使ってもらえます。

6-6卒業課題と次のステップ

ToDoアプリを公開できたら、このコースの知識は全て実践したことになります。最後に、力を定着させる卒業課題です。

🎓 卒業課題

「自分の生活の小さな不便を解決するWebアプリ」をひとりで企画し、作り、公開する。

アイデアの例：

• 家の在庫管理（調味料・日用品の買い忘れ防止）
• 習慣トラッカー（運動・読書の継続記録）
• 推し活カウントダウン（イベントまでの日数表示）
• 子どものお小遣い帳／お手伝いポイント表

進め方はこの章でやった通り。要件定義（6-1）→ 土台（6-2）→ 機能追加（6-3）→ デザイン（6-4）→ テストと公開（6-5）。今度は自分の題材で回すだけです。

さらに学びたくなったら