1-3 Claude Code 用の作業フォルダ準備
無料Claude Code でホームページ制作を始めるための作業フォルダを用意し、ターミナルから起動します。正しい場所に正しい名前でフォルダを作ることで、後の LP 生成や GitHub 公開作業がスムーズになります。
このレッスンで身につくこと
1-2 で Claude Code が動く状態まで来ました。今回はその上に サイトを 1 本ぶん収めるための「作業フォルダ」 を整えます。コードはまだ書きません。フォルダを正しい場所に正しい名前で作る、それだけで後の章がすべて楽になります。
このレッスンのゴール
- 1 サイト 1 フォルダ の原則を理解できる
- Mac / Windows それぞれの サイト用フォルダの定位置 を決められる
pwdlscdmkdirの 4 つのコマンド を読み書きできる- 半角英数字とハイフンを使った 壊れにくいフォルダ名 を付けられる
- Claude Code に サイトの初期構造を作らせる ことができる
所要時間 — 約 10 分 難易度 — ★☆☆☆☆（コマンドを 4 つ覚えるだけ）
なぜ「作業フォルダ」が必要なのか
Claude Code は、起動したフォルダの中身を「いまのプロジェクト」 として扱います。デスクトップで起動すれば、デスクトップ上の家計簿 Excel もスクショも、Claude の視界に入ります。Documents 直下で起動すれば、確定申告の PDF まで巻き込みます。これは事故のもとです。
だから 1 サイト 1 フォルダ にします。サイト A 用に cafe-site、サイト B 用に portfolio のように、別々の箱を最初から作っておく。こうしておくと次のメリットがあります。
- Claude が 他のサイトのファイルを混ぜずに 読み書きしてくれる
- バックアップを取るとき フォルダごとコピーすれば終わる
- 後で Git や Cloudflare にアップロードするときに 単位がきれい
- 半年後に見返しても どこに何があるか一目で分かる
プログラマーが「プロジェクトを切る」と言うのはこのことです。複数の案件を同じフォルダにごちゃ混ぜにしない。1 つのアウトプット（1 つの Web サイト）に対して、1 つのフォルダを用意する。たったこれだけで、後の混乱がほぼ消えます。
フォルダを作る場所 — Mac と Windows の定位置
「どこに作ってもいい」と言われると、かえって迷います。このコースでは サイト用の親フォルダを 1 つ 決めて、その下にサイトごとのフォルダを並べる方式にします。
| OS | 親フォルダの場所 | 例 |
|---|---|---|
| Mac | ~/Documents/websites/ | ~/Documents/websites/cafe-site |
| Windows | C:\Users\YourName\Documents\websites\ | C:\Users\YourName\Documents\websites\cafe-site |
==~ は Mac / Linux で 「ホームディレクトリ（あなた専用のフォルダ）」== を意味する記号です。~/Documents は Finder の「書類」と同じ場所を指します。Windows ではこの記号は使えないので、C:\Users\あなたのユーザー名\Documents のようにフルパスで書きます。
デスクトップに作業フォルダを置きたくなる気持ちは分かりますが、デスクトップはバックアップ対象外の PC が多い です。Documents 配下にしておけば、iCloud や OneDrive で 自動バックアップが効きます。
ターミナルの基本コマンド 4 つ
ここから先、ターミナル（Mac）またはコマンドプロンプト / PowerShell（Windows）を使います。怖いのは最初の 5 分だけ です。覚えるコマンドはまず 4 つだけです。
| コマンド | 意味 | 使い方の例 |
|---|---|---|
pwd | いまどこにいるか を表示（print working directory） | pwd |
ls | 今のフォルダの中身 を一覧表示（list） | ls |
cd | フォルダを 移動 する（change directory） | cd ~/Documents |
mkdir | 新しい フォルダを作る（make directory） | mkdir websites |
「Finder や Explorer で見えているもの」を、文字で表示・操作している だけです。ファイルマネージャと同じことを、もう少し速く、もう少し正確にやっているだけ。魔法ではありません。
実際の挙動を、よくある流れで見てみます。
pwd
# /Users/yourname ← Mac の場合（Windows なら C:\Users\YourName）
ls
# Desktop Documents Downloads Pictures ...
cd Documents
pwd
# /Users/yourname/Documents
mkdir websites
ls
# websites ... ← 新しく作られたフォルダが見える==cd フォルダ名 でその中に入り、cd ..==（ドット 2 つ）で 1 つ上に戻る。「迷子になったら pwd」と覚えておけば、Claude Code が「ここどこ？」状態になることはなくなります。
==Windows で ~ が使えないとき== — ~/Documents のような書き方は Mac / Linux のシェル機能 です。Windows の昔ながらのコマンドプロンプト（cmd.exe）では使えません。PowerShell なら使える場合もありますが、迷ったら ==cd C:\Users\YourName\Documents== のようにフルパスで書きましょう。確実です。
サイトのフォルダ名はどう付けるか
半年後の自分が読んで分かる名前 を付けてください。それだけで 9 割は OK です。残りの 1 割で、コンピューターに優しい命名ルールを守ります。
推奨ルール
| ルール | 例 |
|---|---|
| 半角英数字とハイフン だけを使う | cafe-site、my-portfolio、tanaka-clinic |
| 全部小文字 にする | cafe-site（OK）、Cafe-Site（避ける） |
単語の区切りは ハイフン（-）かアンダースコア（_） | cafe-site or cafe_site |
| 日本語、スペース、絵文字は使わない | 「カフェのサイト」「my site」「☕site」は NG |
避けたいフォルダ名の例
カフェのサイト— 日本語は Git / ターミナル / 一部のサーバーで化けますMy Website Project— スペース入りはコマンドで毎回"..."で囲む羽目になりますsite(最新)— カッコは特殊文字扱いされてエラーになります新サイト_最新版_本当の最新— 後で「どれが本当の最新？」になります
おすすめのフォルダ名
cafe-site— 何のサイトか一目で分かるtanaka-clinic-2026— 年も入れておくと、後で再制作するときに区別しやすいportfolio— 自分用は短くてもよい
実際に作業フォルダを作ってみる
ここまで読んだら、実機で動かします。Mac の場合の手順は次のとおりです。
cd ~/Documents
mkdir websites
cd websites
mkdir cafe-site
cd cafe-site
pwd
# /Users/yourname/Documents/websites/cafe-siteWindows（PowerShell）の場合は次のとおりです。
cd C:\Users\YourName\Documents
mkdir websites
cd websites
mkdir cafe-site
cd cafe-site
pwd
# Path
# ----
# C:\Users\YourName\Documents\websites\cafe-site==最後の pwd で、ちゃんと cafe-site の中にいる ことを確認してください。ここが このサイトの本拠地== になります。
このフォルダで Claude Code を起動する
==必ず cafe-site の中にいる状態で== claude を起動します。
claude起動した Claude Code は、cafe-site フォルダ以下だけを見ます。デスクトップにある別のファイルも、websites の隣にある別のサイトも、視界に入りません。これが プロジェクトを切る ということの正体です。
2 つ目のサイトを作りたくなったら、~/Documents/websites/ に戻って、もう 1 つ mkdir するだけです。
cd ~/Documents/websites
mkdir portfolio
cd portfolio
claudeフォルダごとに別のプロジェクト として扱われます。
Claude Code にサイトの初期構造を作らせる
claude の対話画面 > が出ている状態で、サイトの典型的なファイル構造 を作らせてみます。自分で mkdir を連発する必要はありません。
> このフォルダを、シンプルな静的 Web サイトの初期状態にしてください。
> 含めてほしいもの
> - index.html（トップページ、まだ空でよい）
> - css フォルダと、その中の style.css
> - images フォルダ（空で OK）
> - README.md（このサイトの目的を 2〜3 行で書く）Claude は提案してきて、(y/n) の確認が出ます。==y== で承認すると、cafe-site/ 直下に index.html、css/style.css、images/、README.md ができます。ls で確認しましょう。
これが Web サイトの最小単位 です。HTML 本体、CSS、画像置き場、説明書きの 4 点セット。複雑なサイトでも、根っこはこの形をしています。
「無視するファイル」の話 — .gitignore と node_modules
このコースでは Git をまだ使いませんが、存在だけ知っておいて ください。後で公開する章でつまずかないためです。
| ファイル / フォルダ | 意味 |
|---|---|
.gitignore | Git に 「これは記録しないで」 と伝えるリスト |
node_modules/ | npm が ダウンロードしてきた部品の山（手で編集しない） |
.DS_Store / Thumbs.db | OS が勝手に作る 隠しファイル（無視で OK） |
node_modules は数万ファイル単位になります。.gitignore に node_modules/ と書いておけば、Git は無視してくれます。このコースの作るサイトには登場しませんが、見覚えのないフォルダが膨らんでいたらまずこれを疑う、と覚えておいてください。
エディタでフォルダを開く（任意）
VS Code / Cursor を入れている人は、code . で 作業フォルダをそのまま開けます。==.（ドット） は 「いまいるフォルダ」== の意味です。エディタ側で cafe-site の中身がツリー表示され、Claude Code が作ったファイルを目で確認できます。
code コマンドが見つからない場合は、VS Code を起動して command + shift + P（Mac）か Ctrl + Shift + P（Windows）で ==Shell Command: Install 'code' command in PATH== を実行してから、もう一度試してください。
エディタは必須ではありません。このコースでは「ファイル編集は Claude Code に任せる」運用なので、VS Code を開かなくても章を進められます。中身が気になったときに見る窓、くらいで十分です。
ありがちなトラブル
「Claude Code がここはどこ？ 状態」になる
症状 — claude を起動したら、関係ないファイルが大量に表示されたり、別プロジェクトのコードを Claude が見ているように感じる。
原因と解決 — cafe-site の 外側 で claude を起動しています。一度 /quit で終了 → pwd で居場所を確認 → cd ~/Documents/websites/cafe-site で入り直す → もう一度 claude。居場所さえ正しければ直ります。
フォルダ名を間違えた — ターミナルで mv 旧名 新名 です。Finder / Explorer の右クリック→名前変更でも OK。Claude Code 起動中にやると参照がずれる ので、必ず終了してから。
==mkdir で「すでに存在します」 — 同じ名前のフォルダがあります。上書きはされません==。ls で確認して、使うべきフォルダなら cd で入るだけ。違うサイトなら別名（例 cafe-site-2）で作り直してください。
まとめ
このレッスンのポイントは 5 つです。
- サイトは 1 サイト 1 フォルダ。デスクトップや Documents 直下で
claudeを起動しない - 親フォルダは ==
~/Documents/websites/（Mac）かC:\Users\YourName\Documents\websites\==（Windows）に統一 - ターミナルは ==
pwdlscdmkdir== の 4 つだけ覚えれば足りる - フォルダ名は 半角小文字英数字 + ハイフン。日本語・スペース・絵文字は使わない
- サイトの初期構造（
index.html/css//images//README.md）は Claude に作らせる
<Checklist items={["~/Documents/websites/（または同等の Windows パス）が作成できた","その中にサイト用フォルダ（例 cafe-site）が作成できた","pwd を実行して、サイトフォルダの中にいることを確認できた","そのフォルダで claude を起動できた","Claude に頼んで index.html / css/ / images/ / README.md ができた"]} />
<Steps title="作業フォルダ準備の標準手順" steps={["ターミナル（Mac）またはコマンドプロンプト / PowerShell（Windows）を開く","pwd で現在地を確認し、cd ~/Documents（Windows は cd C:\Users\YourName\Documents）でドキュメントへ移動","mkdir websites でサイト用の親フォルダを作成（初回のみ）","cd websites で親フォルダに入り、mkdir cafe-site でサイト用フォルダを作る","cd cafe-site で中に入り、pwd で居場所を最終確認","claude を起動して、index.html / css/ / images/ / README.md を作らせる"]} />
<Quiz question="Web サイト用の作業フォルダを作るとき、最も適切なフォルダ名はどれですか？" options={["カフェのサイト","My Website (最新版)","cafe-site"]} answer={2} />
<Quiz question="ターミナルで「いま自分がどのフォルダにいるか」を確認するコマンドは？" options={["ls","pwd","mkdir"]} answer={1} />
次のレッスン 2-1: LP の構成設計 では、この cafe-site フォルダに、実際に作るサイトの中身（構成・ワイヤーフレーム） を Claude と一緒に設計していきます。箱が用意できたら、いよいよ中身を詰める段階 です。