会社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が必要なファイルを自動で作成します。VS Codeの左側にファイル一覧が表示されます。
ブラウザで枠組みを確認する
ファイル一覧の index.html を右クリックして「エクスプローラーで表示」を選択します。
エクスプローラーが開いたら、index.html をブラウザウィンドウへドラッグするか、
ダブルクリックで開きます。
最初は仮のテキストや色が入った状態で表示されます。 これが「HPの枠組み」です。ここから修正・ブラッシュアップを重ねていきます。
「色が違う」「このセクションは不要」「文字が小さい」など、気になった点をメモしておきましょう。 次のセッションで修正指示として使います。
最初の生成はあくまで「叩き台」です。色・レイアウト・文章など、何度でも修正できます。 まず枠組みを作ることが大切で、ここから少しずつ育てていくのがHP制作の流れです。
この章の確認チェックリスト
| ☐ | /clear でセッションをリセットできることを確認した |
| ☐ | 英数字のフォルダ名でプロジェクトフォルダを作った |
| ☐ | VS Code でフォルダを開いて claude コマンドを起動した |
| ☐ | プロンプトテンプレートを使ってHPの枠組みを生成した |
| ☐ | ブラウザで index.html を開いて確認した |