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

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

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

全部つなげてみる

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

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

今日は全部つないで1本作ります。作るのは新人向けの社内ナレッジサイト。3ページ構成。

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

流れ

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

ターミナルを開いて:

mkdir ~/staff-guide-site
cd ~/staff-guide-site

これで箱ができた。

2. CLAUDE.mdを書く

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

# 新人向け社内ナレッジサイト

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

新入社員向けの社内ナレッジサイト。
スマホで見る人が多いから、モバイル優先。

## 技術

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

## デザイン

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

## ページ

- トップ: サイト説明 + 各ページへのリンク
- 業務ナレッジ: よくある業務の進め方
- FAQ: 新人からよく聞かれる質問

## 守ってほしいこと

- 業務ナレッジは一般論まで。「詳しくは担当者に確認してください」を必ず添える
- 機密情報や、個人・取引先を特定できる情報は絶対に含めない

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

補足

技術スタックはそのままコピペでOK

Next.js / TypeScript / Tailwind の部分は、正直、何を意味してるか今は分からなくていい。Claudeに「よく使う構成で作って」と渡すためのおまじないと思ってて。

慣れてきたら自分の好みで変えればいい。

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

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

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

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

視点

計画を立てさせる段階(Plan)を省略してる理由

今回のように「CLAUDE.mdを読んで3ページ作って」の一言で頼めているのは、作業がひとことで言い表せるくらいシンプルだから。

もっと複雑な作業を頼むときは、Exploreの段階を挟んで先にコードを読ませ、Planの段階で計画を立てさせてから進める。計画を立てさせたときは、Ctrl+Gを押すとClaudeの計画をエディタで直接開いて自分の手で書き換えられる。実践編(CC201)で扱う範囲だけど、覚えておいて損はない。

VoicesDOCUMENTATION

“If you could describe the diff in one sentence, skip the plan.”
筆者訳
差分を一文で言い表せるなら、計画は飛ばしていい。

Claude Code公式ドキュメントBest practicescode.claude.com/docscode.claude.com/docs/en/best-practices

できたら動作確認:

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

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

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

社内ナレッジサイトをブラウザでプレビューする。トップ、業務ナレッジ、FAQを行き来して、実際に動くことを確認する

社内ナレッジサイトのトップページをブラウザで開いた画面 — トップページ。新人がスマホでも読みやすいように、大きな見出しと短い導線で構成する

社内ナレッジサイトのFAQページをブラウザで開いた画面 — FAQまで行き来できれば、ページ構成が形になっている。ここから見たまま修正していく

4. 修正の会話

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

FAQに2つ足して。「有給休暇の申請方法」と「経費精算のタイミング」について。

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

トップのタイトルを「○○株式会社 新人向けナレッジページ」に変えて。

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

視点

「いい感じにして」は伝わりにくい

「もっといい感じに」だけだとClaudeも迷う。「文字を大きく」「この青を暗く」「画像を右に」のように見たままを言うと、一発で直る率が上がります。

5. Gitでセーブ

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

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

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

6. GitHubに上げる

続けて:

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

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

Explore→Plan→Implement→CommitでいうCommitは、ここまでの2ステップ(セーブ→GitHub)がそれに当たる。公式の定義ではPRを作るところまでが含まれるけど、今回は最初の公開だからPRはまだ出てこない。既にあるサイトを改修するときは、変更をコミットしてPRを作らせるところまでが型になる。

注意

gh コマンドが無いと言われたら

GitHub CLI（ghコマンド）が入ってないPCもある。「GitHub CLIを入れて」とClaudeに頼めば、手順を案内してくれます。

7. Vercelで公開

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

vercel.com ダッシュボード
Add New... > Project
staff-guide-site を Import
Deploy

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

開いてみる。

ネットに出てます。

やったことを振り返る

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

フォルダ作った
CLAUDE.mdで仕様を書いた
Claudeに作ってもらった
会話で直した
Gitでセーブ
GitHubに上げた
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講で書き出したアイデア、今なら本当に作れる。

明日のアクション

1講目で書き出した「こんなツールあったら」のアイデアを、今日の手順で実際に作ってみてください。

CLAUDE.mdを書く → Claudeに頼む → 修正の会話 → Git → デプロイ

詰まったら「うまくいかない。こういうエラーが出てる」とClaudeに貼り付ければ、だいたい助けてくれます。