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

全部つなげてみる

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

Claudeデスクトップアプリ、Cowork（チャットへの統合が進行中）
CLAUDE.md
パーミッション
UV
Git / GitHub
Vercel

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

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

流れ

プロジェクトフォルダ作る

デスクトップに ~/staff-guide-site のような空フォルダを用意

CLAUDE.md を書く

誰のため・何を作る・どう見せるかを 30 行以内で言語化

Claudeに「作って」と頼む

「CLAUDE.mdを読んで、3ページ構成で作って」だけでOK

修正のやりとり

見たまま伝える「この青を暗く」「文字を大きく」

Gitでコミット

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

GitHubに上げる

「GitHubにstaff-guide-siteで作ってpushして」

Vercelで公開

vercel.com → Import → Deploy。1分でURL発行

ゼロから公開までの7ステップ

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に「作って」と頼む

Claude Code（ターミナル）か、デスクトップアプリのCodeタブで、このフォルダを開く。

ターミナルなら、さっき cd した画面のまま claude と打つだけでいい（閉じてしまっていたら、もう一度 cd ~/staff-guide-site してから claude）。デスクトップアプリなら、Codeタブを開いて staff-guide-site フォルダを選ぶ。Coworkで最初にフォルダを選んだときと同じ要領。

補足

Coworkが見当たらなくても大丈夫

2026年9月16日から、Claudeデスクトップアプリの「Cowork」は少しずつ通常のチャットに統合が進んでいる。ただ、ローカルのフォルダを直接扱えるのは今もCodeタブだけ。今回のようにファイルを触って作る作業は、画面の見た目がどう変わっていても、ターミナルのClaude Codeかデスクトップアプリの Code タブを使う。

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

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

視点

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

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

もっと複雑な作業を頼むときは、先にPlanモードに切り替えて計画を立てさせてから進める。切り替え方や計画の読み方は考えさせてから作らせるで扱った通り。

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ページ行き来してみよう。

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

4. 修正の会話

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

続けてAIに送る

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

続けてAIに送る

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

続けてAIに送る

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

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

視点

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

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

言葉で説明しにくい時は、直したい画面のスクリーンショットをそのまま貼るのも手。見せて頼むで触れたやり方がここでも使える。

5. Gitでセーブ

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

続けてAIに送る

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

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

6. GitHubに上げる

続けて:

同じ会話に続けて送る

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

Claudeが gh repo create と git push をやる。GitHub（github.com）の自分のアカウントを開くと、staff-guide-site が増えているのが見える。

Claude Codeの公式ドキュメントも、こういう「セーブしてから外に出す」進め方をひとつの型として勧めていて、そこには本来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 が発行される。

開いてみる。

ネットに出てます。

使い回せるCLAUDE.mdひな形

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

# プロジェクト名

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

（何を作るか、誰が使うか、2-3行で）

## 技術

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

## デザイン

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

## ページ

- （箇条書き）

## 機能

- （必要なら）

## 守ってほしいこと

- 機密情報や、個人・取引先を特定できる情報を含めない
- 専門的な内容は一般論まで。必要なら「詳しくは担当者に確認」を添える
- （そのプロジェクトで守ってほしいルール）

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