全部つなげて1本作る（実践）

このレッスンで終わる頃には

• ゼロから公開まで を自分で1本通して経験してる
• CLAUDE.md書く → Claudeに頼む → Git → デプロイ、この流れが手に染みてる

全部つなげてみる

ここまで触ってきたもの:

• Claudeデスクトップアプリ、CoWork
• CLAUDE.md
• パーミッション
• UV
• Git / GitHub
• Vercel

今日は 全部つないで1本作ります。作るのは 患者向けの情報サイト。3ページ構成。

ここまで分けてやってきたから大丈夫。一気にやるわけじゃなく、順番にパートを組み合わせるだけ。

流れ

1. プロジェクトフォルダ

ターミナルを開いて:

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

これで箱ができた。

2. CLAUDE.mdを書く

まずClaudeに 何を作るか を伝える紙を置く。同じフォルダ内に CLAUDE.md という名前で、中身はこう:

# 患者向け情報サイト

## このプロジェクトについて

小児科外来の保護者向け情報サイト。
スマホで見る人が多いから、モバイル優先。

## 技術

- Next.js（App Router）
- TypeScript
- Tailwind CSS

## デザイン

- 白基調で清潔感
- 文字は大きめに
- 片手でスクロールしやすく

## ページ

- トップ: サイト説明 + 各ページへのリンク
- 疾患情報: よくある子どもの病気
- FAQ: 外来でよく聞かれる質問

## 守ってほしいこと

- 医療情報は一般論まで。「医師に相談してください」を必ず添える
- 個人情報は絶対に含めない

これがClaudeへの「仕様書」。

3. Claudeに「作って」と頼む

CoWorkかClaude Codeで、このフォルダを開いて:

CLAUDE.mdを読んで、この通りに3ページの患者情報サイトを作って。
Next.jsで、シンプルで清潔感のあるデザインで。

Claudeが次々にファイルを作り始める。初期設定、ページ、スタイル。全部自動。数分待つ。

できたら動作確認:

開発サーバーを起動して、ブラウザで見られるようにして

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

自分が頼んだものが、実際に動いてる。最初の「おっ」がここで来ます。

4. 修正の会話

最初から完璧は求めない。気になったところを 見たまま言えばいい。

FAQに2つ足して。「夜間に熱が出たら」と「薬のタイミング」について。

色が明るすぎる気がする。もう少しグレーがかった青に。

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

ブラウザを更新して確認 → また直す。納得するまで繰り返す。

5. Gitでセーブ

いい感じになったら、セーブポイントを打つ。Claudeに頼むだけでいい:

Gitで管理を始めて、今の状態をコミットして

git init して git commit してくれる。1つ目のセーブ完了。

6. GitHubに上げる

続けて:

GitHubに patient-info-site という名前のリポジトリを作ってpushして

Claudeが gh repo create と git push をやる。GitHubに上がった。

7. Vercelで公開

前のレッスンのやり方で:

1. vercel.com ダッシュボード
2. Add New... > Project
3. patient-info-site を Import
4. Deploy

1分くらいで https://patient-info-site.vercel.app が発行される。

開いてみる。

ネットに出てます。

やったことを振り返る

7ステップでやったこと:

1. フォルダ作った
2. CLAUDE.mdで仕様を書いた
3. Claudeに作ってもらった
4. 会話で直した
5. Gitでセーブ
6. GitHubに上げた
7. Vercelで公開

コードを1行も書いてない。

これが2026年現在、非エンジニアでもアプリを1本作って公開できる仕組み。

使い回せるCLAUDE.mdひな形

次に何か作りたくなった時、これをベースにすればいい。書き換える部分だけカスタムする。

# プロジェクト名

## このプロジェクトについて
（何を作るか、誰が使うか、2-3行で）

## 技術
- Next.js（App Router）
- TypeScript
- Tailwind CSS

## デザイン
- （色、雰囲気、参考サイトのURLがあれば）
- スマホ優先
- （こだわり）

## ページ
- （箇条書き）

## 機能
- （必要なら）

## 守ってほしいこと
- 個人情報を含めない
- 医療情報には「医師に相談を」を添える
- （そのプロジェクトで守ってほしいルール）

技術の部分は、最初はコピペでいい。自分が書くのは「何を作るか」「誰のためか」「どう見えるべきか」の3つだけ。

ここまでのまとめ

11講前のあなた: ターミナル開いたこともない

今のあなた: 自分で作ったWebアプリをネットに公開した

11講分の積み重ね、結構大きい。ここから先、どんなアイデアでも形にできる土台があなたの手元にある。

次は？

最後のレッスンは、CoWorkとClaude Code、どう使い分ける？。ここまで両方触ってきた感覚を、一度言語化して整理する締めの回。

その先にもう一歩進みたくなったら、実践編（CC201）でこんな話を扱います。

• MCP: Claudeを外部サービス（Googleカレンダー、Notion、DB）とつなぐ
• マルチエージェント: 複数のClaudeを同時並行で走らせる
• スケジュール/Dispatch: 自動化を一段深くする
• Claude API: 自分だけのAIツールを作る

まずは 今日学んだことで何か作ってみてほしい。1講で書き出したアイデア、今なら本当に作れる。