実践：最初のWebアプリを作る

全部つなげる

7つのレッスンで触ってきたもの。ターミナル、Claude Code、CLAUDE.md、Git、GitHub、Vercel。

このレッスンでは全部つなげる。1つのWebアプリをゼロから作って公開するまでを一気にやる。

作るのは患者向けの情報ページ。トップ、疾患情報、よくある質問の3ページ構成。

手順1: プロジェクトフォルダを作る

ターミナルを開く。

$mkdir ~/patient-info-site
$cd ~/patient-info-site

手順2: CLAUDE.mdを作る

指示を出す前にCLAUDE.mdを書く。テキストエディタでもClaude Codeでもいい。

$cat << 'EOF' > CLAUDE.md
# 患者向け情報サイト
## このプロジェクトについて
小児科外来の保護者向け情報サイト。スマホで見やすいデザインにする。
## 技術スタック
- Next.js（App Router）
- TypeScript
- Tailwind CSS
## デザイン方針
- 清潔感のある白基調のデザイン
- スマホファーストで、文字は大きめに
- 保護者が片手でスクロールしやすいレイアウト
## ページ構成
- トップページ: サイトの説明と各ページへのリンク
- 疾患情報ページ: よくある子どもの病気の説明
- よくある質問ページ: 外来でよく聞かれる質問と回答
## 注意事項
- 医療情報は一般的な内容にとどめ、「必ず医師に相談してください」の注記を入れる
- 個人情報は一切含めない
$EOF

手順3: Claude Codeにアプリを作ってもらう

Claude Codeを起動して、こう伝える。

$claude

CLAUDE.mdを読んで、この仕様どおりに3ページの患者情報サイトを作って。
Next.jsで、デザインはシンプルで清潔感のあるもの。
トップページ、疾患情報ページ、よくある質問ページの3つ。

Claude Codeがファイルを次々に作っていく。初期設定、ページ、スタイル。全部自動。数分待つ。

完成したら動作確認。dev serverの起動を聞いてくるかもしれないけど、聞いてこなければこう伝える。

開発サーバーを起動して、ブラウザで確認させて

http://localhost:3000 をブラウザで開く。サイトが表示される。3つのページを行き来してみよう。

手順4: 修正を依頼する

最初から完璧じゃなくていい。気になったところをそのまま伝える。

FAQにもう2つ項目を追加して。
「夜間に熱が出たらどうすればいいか」と
「薬を飲ませるタイミング」について。

色をもう少し落ち着いたトーンにして。
今の青が少し明るすぎるから、もう少しグレーがかった青にしてほしい。

トップページのタイトルを「○○小児科 保護者向け情報ページ」に変えて

修正のたびにブラウザを更新して確認。納得いくまで何度でもやり取りしていい。

手順5: Gitでコミットする

いい感じになったらGitで保存。

$git init
$git add .
$git commit -m "患者向け情報サイトの初版を作成"

手順6: GitHubにpushする

GitHubにリポジトリを作ってpush。

$gh repo create patient-info-site --public --source=. --push

これ1つでリポジトリの作成からアップロードまで全部終わる。

手順7: Vercelでデプロイする

前のレッスンで作ったVercelアカウントでログイン。

1. https://vercel.com にログイン
2. Add New... から Project
3. patient-info-site を Import
4. Deploy

1分ほどでURLが発行される。

https://patient-info-site.vercel.app

開いてみよう。自分が作った患者向け情報サイトがネット上で動いている。

振り返り: やったこと

整理する。

フォルダを作った。CLAUDE.mdで仕様を書いた。Claude Codeに指示してアプリを作った。会話で修正した。Gitで記録した。GitHubに保存した。Vercelで公開した。

これがWeb開発の全工程。プログラミングを一行も書かずに完了した。

医師用CLAUDE.mdテンプレート

今後、自分のプロジェクトを始めるときに使えるテンプレートを載せておく。コピーして、自分のプロジェクトに合わせて書き換えればいい。

# プロジェクト名

## このプロジェクトについて
（何のためのアプリか、誰が使うか、を2-3行で書く）

## 技術スタック
- Next.js（App Router）
- TypeScript
- Tailwind CSS

## デザイン方針
- （色のトーン、雰囲気、参考にしたいサイトがあればURL）
- スマホファーストで設計する
- （特に気をつけたいこと）

## ページ構成
- （必要なページを箇条書きで書く）

## 機能
- （あれば書く。なければこのセクションは消していい）

## 注意事項
- （絶対に守ってほしいルールを書く）
- 患者の個人情報は一切含めない
- 医療情報には「医師に相談してください」の注記を入れる

ポイントは、技術的なことはClaude Codeに任せること。自分が書くのは何を作りたいか、誰のためか、どんな見た目がいいか。技術スタックの部分はそのまま使い回して問題ない。

この先に何があるか

Step 1はここまで。Claude Codeを使ってWebアプリを作り、ネットに公開するところまでできるようになった。

Step 2(準備中)ではもう一段進む。MCPでClaude Codeを外部サービス(Googleカレンダー、Notion、データベースなど)とつなぐ方法。複数のAIエージェントを組み合わせる方法。APIで他サービスとデータをやり取りする方法。

ただ、まずは今の知識で何か作ってみてほしい。レッスン1で書き出したアイデア、覚えているだろうか。あれを今なら実際に形にできる。