Claude Code でWebサイト構築準備ガイド
Claude Codeを使用してWebサイトを効率的に構築するための開発環境を準備しましょう（ 動画解説 Claude Code で Webサイト構築 もどうぞ！）
Important
前提条件
以下がインストール済みであることを確認してください：
- Visual Studio Code
- Git
セットアップ手順
Claude Codeでの開発をスムーズに行うため、以下の手順で環境を準備します。
ステップ1: プロジェクトフォルダの作成と開く
Visual Studio Code を起動し、新しいプロジェクト用のフォルダを作成して開きます。
- Visual Studio Code を起動
- 「File」→「Open Folder」を選択
- 新しいフォルダを作成（例：my-website）
- 作成したフォルダを選択して開く
ステップ2: publicフォルダの作成
プロジェクトのルートディレクトリに「public」フォルダを作成します。
- エクスプローラーパネルでプロジェクトフォルダを右クリック
- 「New Folder」を選択
- フォルダ名に「public」と入力
ステップ3: .gitignore ファイルの作成
プロジェクトのルートディレクトリに「.gitignore」ファイルを作成し、Claude Code のプロンプトファイルを除外します。
- エクスプローラーパネルでプロジェクトフォルダを右クリック
- 「New File」を選択
- ファイル名に「.gitignore」と入力
- ファイルを開いて以下の内容を追加
.gitignore ファイルの内容：
/prompt*.mdステップ4: Gitリポジトリの初期化
VSCode のソースコード管理機能を使用してローカルGitリポジトリを初期化します。
- 左側のアクティビティバーで「Source Control」アイコン（ブランチのようなマーク）をクリック
- 「Initialize Repository」ボタンをクリック
- 確認ダイアログが表示されたら「Initialize Repository」を選択
Note
注意事項
この手順ではGitHubなどのリモートリポジトリは作成しません。ローカルでのバージョン管理のみを設定します。
セットアップ完了の確認
以下の項目がすべて完了していることを確認してください：
/prompt*.md が追加されているフォルダ構成
セットアップ完了後のプロジェクト構成は以下のようになります：
- .gitignore
次のステップ
Tip
開発開始の準備完了！
これで Claude Code を使用してWebサイトの開発を始める準備が完了しました！
次は以下を参考に開発を進めてください：
- Claude Code用技術スタック・プロンプト
- Webサイト構築サンプル集 - 実際に構築可能なサイトの例を確認
よくある質問
Q: publicフォルダは何のために作成するのですか？
A: publicフォルダは以下の目的で使用します：
- 静的ファイル（HTML、CSS、JavaScript、画像など）の格納
- Webサーバーで公開するファイルの整理
- Claude Codeが生成したファイルの出力先として使用
この構成により、開発ファイルと公開ファイルを明確に分離できます。
Q: .gitignoreで/prompt*.mdを除外する理由は？
A: Claude Codeを使用する際に作成するプロンプトファイルは、以下の理由でバージョン管理から除外します：
- 開発作業用の一時的なファイル
- 個人的なメモや試行錯誤の記録
- リポジトリの履歴を汚さないため
- セキュリティ上の配慮（API キーなどが含まれる可能性）
必要に応じて特定のプロンプトファイルは手動でGitに追加できます。
Q: VS Codeの拡張機能は必要ですか？
A: 必須ではありませんが、以下の拡張機能があると開発効率が向上します：
推奨拡張機能：
- Live Server: ローカルでのプレビュー
- Prettier: コードフォーマット
- Auto Rename Tag: HTMLタグの自動リネーム
- Bracket Pair Colorizer: 括弧の色分け
- GitLens: Git操作の強化
これらは必要に応じてインストールしてください。
トラブルシューティング
Gitリポジトリの初期化ができない場合
Gitがインストールされているか確認
git --versionVS Codeを再起動
- VS Codeを完全に終了
- 再度起動してプロジェクトフォルダを開く
手動でGitを初期化
cd /path/to/your/project git init
フォルダが作成できない場合
- VS Codeでフォルダを開いているか確認
- 書き込み権限があるディレクトリか確認
- パスに特殊文字が含まれていないか確認
これで Claude Code を使用したWebサイト構築の準備が完了しました。効率的な開発をお楽しみください！
claude code webサイト構築準備ガイド 開発環境準備 visual studio code git プロジェクトフォルダ作成 public フォルダ gitignore ファイル作成 git リポジトリ初期化 ローカル バージョン管理 セットアップ完了確認 フォルダ構成 静的ファイル格納 webサーバー公開 開発ファイル分離 プロンプトファイル除外 セキュリティ配慮 vs code 拡張機能 live server prettier トラブルシューティング