会社HP制作
制作の実践
セッション管理・フォルダ準備から、AIで枠組みを一気に作るまで
チャット履歴をリセットする新規セッションの使い方
「セッション」とは何か
Claude Code を使っていると、会話のやり取りが積み重なっていきます。この1回の作業の流れをセッションと呼びます。
会話が長くなるほど、Claudeが過去のやり取りをすべて読み込もうとするため、指示の精度が落ちたり、応答が遅くなることがあります。新しいタスクを始めるときは、会話をリセットして新鮮な状態から始めましょう。
/clear コマンドで履歴をリセットする
Claude Code のターミナルで /clear と入力するだけで、会話の履歴をリセットできます。ファイルは消えないので安心してください。
Claude: style.css を更新しました。
> もう少し余白を広くして
Claude: padding を調整しました。
> /clear
会話履歴をリセットしました。ファイルはそのまま残っています。
> | ← 新しいセッション開始。ここから新しい指示を入れる
/clear はあくまで会話の記憶をリセットするだけです。
作成済みの index.html や style.css などのファイルはそのまま残ります。
新しいセッションで最初に何を伝えるか
セッションをリセットしたら、Claudeはプロジェクトの情報を覚えていません。最初にプロジェクトの概要を一言伝えると、その後の指示が通りやすくなります。
Claude: 了解しました。index.html にお問い合わせフォームのセクションを追加し、style.css にスタイルを追記します。どのような項目（名前・電話番号・内容など）を含めますか？
「/clear → プロジェクト概要を一言 → 今日やること」この順番で始めると、毎回スムーズに作業できます。
PCフォルダーの作成方法とAIツールへの読み込み手順
プロジェクトフォルダを作成する
制作を始める前に、会社HP専用のフォルダをPCに作ります。フォルダ名は英数字・ハイフンのみにしてください（スペースや日本語はトラブルの原因になります）。
スペース・日本語・特殊記号（! @ # $ など）はNG。
yamada-plumbing や abc-company-hp のように英数字とハイフンだけで付けましょう。
VS Code でフォルダを開く
デスクトップまたはスタートメニューから VS Code を開きます。
上部メニューの 「ファイル」→「フォルダーを開く」 をクリックします。
または Ctrl + K → Ctrl + O のショートカットでも開けます。
デスクトップの yamada-plumbing フォルダを選択して「フォルダーの選択」をクリックします。
確認ダイアログが出たら 「はい、作成者を信頼します」 をクリックします。
ターミナルで claude を起動します。
ターミナルで claude コマンドを起動する
上部メニュー 「ターミナル」→「新しいターミナル」 をクリックします。
画面下にターミナルパネルが表示されます。
ターミナルに claude と入力して Enter を押します。
claude
プロンプト（入力待ち状態）が表示されたら、このフォルダ内でAIが作業できる状態です。
Claude Code へようこそ！ > | ← ここに指示を入力する
VS Code でフォルダを開かずに claude を起動すると、どこにファイルを作ればいいかAIがわかりません。必ずフォルダを開いてからコマンドを打ちましょう。
ざっくりした指示でHPの枠組みを自動生成する
指示に含めるべき情報
最初の指示には、会社のことをざっくり伝えるだけでOKです。以下の5つの情報を含めると、Claudeが全体の構成を自動で考えてくれます。
| 情報の種類 | 例 | なくてもいい？ |
|---|---|---|
| 会社名 | 株式会社山田配管 | 必須 |
| 業種・事業内容 | 配管工事・リフォーム | 必須 |
| ページ構成 | 会社概要・サービス・お問い合わせ | あった方が良い |
| デザインイメージ | 青と白・シンプル・信頼感 | あった方が良い |
| ターゲット | 地域の一般家庭・管理会社 | なくてもOK |
プロンプトテンプレート（そのまま使えます）
以下の黄色い部分を自分の会社情報に書き換えて、そのままコピー＆ペーストしてください。
住所や代表者名など、まだ決まっていない情報は「○○」や「後で入れる」と書いておけばOKです。 Claudeはプレースホルダーとして処理してくれます。
生成されたファイルを確認する
指示を送ると、Claudeがファイルを作成しようとします。このとき、以下のような確認画面が表示されることがあります。
Save file to continue…
Do you want to make this edit to index.html?
> 1. Yes
2. Yes, allow all edits during this session (shift+tab)
3. No
これは「ファイルを書き換えていいですか？」という確認です。どちらかを選んで進めましょう。
| 選択肢 | 意味 | おすすめ |
|---|---|---|
| 1. Yes | このファイルへの変更だけ許可する | 慎重に確認したいとき |
| 2. Yes, allow all edits during this session | 今のセッション中はすべての変更を自動で許可する | 初心者におすすめ |
| 3. No | この変更をキャンセルする | 間違えて入力したとき |
毎回確認が出るとテンポが崩れます。慣れないうちは 2 を押してセッション中の変更をまとめて許可するのがおすすめです。新しいセッション（/clear 後）を始めると、また最初から聞かれます。
許可すると、Claudeがファイルを作成します。VS Codeの左側にファイル一覧が表示されます。
Claude Code はデフォルトで index.html の中にCSSもデザインもまとめて書きます。
style.css や script.js が別に作られないことも多いので、慌てなくて大丈夫です。
「CSSは style.css に分けて」と指示に一言加えると、別ファイルで作ってもらえます。ただし最初は1ファイルにまとまっている方が管理しやすいのでおすすめです。
ブラウザで枠組みを確認する
ファイル一覧の index.html を右クリックして「エクスプローラーで表示」を選択します。
エクスプローラーが開いたら、index.html をブラウザウィンドウへドラッグするか、
ダブルクリックで開きます。
最初は仮のテキストや色が入った状態で表示されます。 これが「HPの枠組み」です。ここから修正・ブラッシュアップを重ねていきます。
「色が違う」「このセクションは不要」「文字が小さい」など、気になった点をメモしておきましょう。 次のセッションで修正指示として使います。
最初の生成はあくまで「叩き台」です。色・レイアウト・文章など、何度でも修正できます。 まず枠組みを作ることが大切で、ここから少しずつ育てていくのがHP制作の流れです。
この章の確認チェックリスト
| ☐ | /clear でセッションをリセットできることを確認した |
| ☐ | 英数字のフォルダ名でプロジェクトフォルダを作った |
| ☐ | VS Code でフォルダを開いて claude コマンドを起動した |
| ☐ | プロンプトテンプレートを使ってHPの枠組みを生成した |
| ☐ | ブラウザで index.html を開いて確認した |