作業フォルダ・CLAUDE.md・HTML作成・確認・元に戻すまで
最終更新：2026年7月
この記事では、Claude Codeへ日本語で依頼し、自己紹介用のWebページを1枚作ります。完成だけを急がず、「専用フォルダを作る→変更前に計画を見る→HTMLとCSSを作る→ブラウザとコードを確認する→必要なら戻す」という安全な流れを覚えるのが目的です。
始める前の確認
この記事は、WindowsへClaude Codeをインストールし、claude --versionが表示できることを前提にしています。まだの場合はWindowsインストール手順を先に進めてください。
- Claude Codeを利用できるアカウントでログイン済み
- PowerShellを開ける
- 重要ファイルを含まない練習用フォルダを使う
- 作る内容に本名・住所・連絡先などを入れない
- 権限確認を読んでから許可する
作業専用フォルダを作る
PowerShellで、ユーザーフォルダ内に専用フォルダを作って移動します。すでに前の記事で作った場合は、cdだけで移動します。
現在地を確認したい場合は次を実行します。
末尾がclaude-practiceになっていることを確認してからClaude Codeを起動します。
デスクトップ全体、ドキュメント全体、WordPress本番ファイルのフォルダで練習しないでください。Claude Codeは作業場所のファイルを読んだり、許可後に変更したりできます。
/initとCLAUDE.mdは何をする？
/initはプロジェクトを調べ、最初のCLAUDE.mdを生成する公式コマンドです。すでにファイルがある場合は、上書きせず改善案を提示します。空の練習フォルダでは必須ではありませんが、今後も使う共通ルールを置く練習になります。
CLAUDE.mdは、各セッションでClaudeへ読み込ませるプロジェクト用の指示書です。ただし強制的なセキュリティ設定ではなく、回答や作業を導く文脈です。操作を禁止したい場合は権限設定など別の仕組みが必要です。
生成された内容を確認し、今回の練習では次のような短いルールを残します。
公式はCLAUDE.mdを具体的・簡潔にし、目安として200行未満にすることを勧めています。今回だけの色や文章はCLAUDE.mdではなく、作成時の依頼へ書きます。
まず計画だけを依頼する
いきなり編集させず、作るファイルと完成条件を先に確認します。
計画に不要なファイル、外部サービス、個人情報が含まれていないか見ます。違っていれば、編集前に修正します。
HTMLとCSSを作成する
計画がよければ、次のように実行を頼みます。
ファイル作成の許可が表示されたら、対象が練習フォルダ内のindex.htmlとstyle.cssか確認します。見覚えのないフォルダ、削除、ソフトのインストール、外部送信が含まれる場合は許可せず、理由を質問します。
ブラウザで表示を確認する
Claude Codeを終了せず、エクスプローラーでclaude-practiceフォルダを開き、index.htmlをダブルクリックします。ブラウザにページが表示されたら、次を確認します。
- 名前と趣味が依頼どおり表示される
- 文字化けしていない
- CSSが読み込まれ、色や余白が反映される
- ブラウザ幅を狭くしても横スクロールが出ない
- 知らないリンク・画像・入力欄が追加されていない
index.htmlを直接開く確認は静的なHTML・CSSの練習に向いています。フォーム送信、PHP、データベース、複雑なJavaScriptはローカルサーバーなど別の環境が必要です。
コードの中身も確認する
見た目が正しくても、HTMLを確認します。Claude Codeへ次のように頼めます。
ページタイトルはブラウザのタブや検索結果に関係します。本文の大見出しは通常1つのh1、その下をh2にします。このブログ記事本文ではWordPress側が記事タイトルをH1として出すため本文内H1を置いていませんが、今回作る独立したWebページにはH1が必要です。
一つずつ修正する
最初から「もっとおしゃれに全部直して」と頼むと、どの変更で崩れたか追えません。1回に一つの目的で依頼し、毎回ブラウザを更新します。
次に色、文字サイズ、カード表示というように分けます。「変えてよいもの」と「変えないもの」を両方書くと、不要な改変を防げます。
変更を元に戻す方法
Claude Codeは、セッション中にClaudeのファイル編集ツールが行った変更をチェックポイントとして追跡します。元に戻したいときは/rewindを実行するか、入力欄が空の状態でEscを2回押し、戻す地点と範囲を選びます。
「コードだけ」「会話だけ」「両方」を選べるため、内容を読んで決めます。ただし、シェルコマンドが変更したファイルや、Claude Code外で手動変更した内容はチェックポイントの対象外になる場合があります。
チェックポイントはGitやバックアップの代わりではありません。セッション内の素早い取り消しに使い、長期の履歴はGit、重要なサイトは別のバックアップで守ります。
Gitを使える人は最初の状態を保存する
Git for Windowsを入れている場合は、ページが正常に表示された段階でコミットを作ると、その後の練習を戻しやすくなります。Gitが未導入なら、この章のためだけに急いで入れる必要はありません。
初回のGitでは名前・メール設定が必要になる場合があります。公開リポジトリへ送信する操作は別です。git initやコミットだけで自動公開はされません。
2ページ目へ広げる練習
1ページが完成したら、次はfavorites.htmlを追加し、相互リンクを作ります。最初のページを勝手に全面変更しないよう条件を書きます。
複数ファイルの関係を読み、必要な箇所だけ変えられるのがClaude Codeの強みです。同時に、意図しない変更が増える可能性もあるため、差分確認の重要性が上がります。
公開前に追加で必要なこと
PC内で表示できたページは、まだインターネットに公開されていません。公開にはレンタルサーバー、GitHub Pagesなどの置き場所、独自ドメイン、HTTPS、公開範囲の設定が必要です。
- 個人情報・著作権・利用規約を確認する
- すべてのリンクとスマホ表示を確認する
- 画像を使うなら容量、代替テキスト、利用許可を確認する
- フォームを置くなら送信先、個人情報保護、迷惑送信対策を設計する
- 公開先へアップロードする前にバックアップを取る
Claude Codeが「公開できます」と答えても、自動的に安全・合法・検索上位になるわけではありません。公開作業は別の目的として小さく分けます。
よくあるつまずき
index.htmlのCSSファイル名、同じフォルダにあるか、保存済みか、ブラウザの再読み込みを確認します。Claudeへ「変更せず原因候補と確認順を示して」と頼むと切り分けやすくなります。まとめ
- 重要ファイルのない専用フォルダから始める
- /initとCLAUDE.mdは共通ルールを伝える仕組み
- 編集前に計画、編集後に表示とコードを確認する
- 修正は一度に一つ、変えない範囲も明記する
- /rewindは便利だが、Git・バックアップの代わりではない
- ローカル表示とインターネット公開は別の作業
コメント