会社HP制作
制作の基礎知識
プロジェクト・フォルダ・HTML/CSS/JS の仕組みをざっくり理解する
プロジェクトとフォルダの定義
「プロジェクト」とは何か
Web制作では、1つのホームページを作るために必要なファイルをまとめたフォルダ全体のことを「プロジェクト」と呼びます。
ファイル構成とブラウザの読み込み
プロジェクトの3ファイルをブラウザが読み込んで、画面にホームページが表示されます。
（レンダリング）
画面に表示すること
もっと快適に。
VS Code でフォルダを開く ＝ プロジェクトを開く、ということ。Claude Code は「今開いているフォルダ」の中にファイルを作ったり編集したりします。
トップページのHTMLは index.html という名前にするのが慣習です。
ブラウザは最初に index.html を探して表示するため、必ずこの名前にしましょう。
HTML・CSS・JavaScript の3つの役割
それぞれの役割
3つのファイルはそれぞれ異なる役割を持っています。人間の体にたとえて覚えましょう。
3つを足していくとどう変わるか
実際にHTMLだけ → CSSを追加 → JavaScriptを追加、の順番で画面がどう変わるか見てみましょう。
役割を「なんとなく知っている」だけで十分です。Claude が自動でどのファイルを変えるべきか判断してくれるので、ファイルの中身を直接触る必要はほとんどありません。
AIへ普段の言葉で指示して自動修正を任せる
専門用語を知らなくても指示できる
Claude Code の大きな強みは、プログラミングの知識がなくても日本語の自然な文章で指示できる点です。「HTMLのh1タグのfont-sizeを変えて」といった専門的な言い方は一切不要です。
「見出しの文字を大きくして」「背景を白にして」「ボタンの色を青に変えて」—— このような普段使いの言葉で、どのファイルのどこを変更すればいいかをClaudeが判断して修正してくれます。
「もっとかっこよくして」「読みやすくして」といった曖昧な言葉でも Claude はある程度意図を汲んでくれます。気に入らなければ「さっきの方が良かった」と言えばOKです。
指示の例文集
ヘッダーに会社名「株式会社〇〇」とメニュー（会社概要・サービス・お問い合わせ）、
その下にキャッチコピーと写真が入るヒーローエリアを作って。
全体的に青と白をベースにしたシンプルなデザインにして。
ボタンの角も少し丸くしてほしい。
スマホでは縦に並ぶように直して。
3件の口コミを横に3列で並べて。
各カードに星5つの評価・コメント・お客様のお名前（〇〇様）を入れて。
修正・変更の上手な頼み方
場所と変更内容を一緒に伝えると、Claude が意図を正確に把握できます。
曖昧な指示: 「色を変えて」
具体的な指示: 「ヘッダーの背景色を濃い紺色に変えて」
「高級ホテルのような雰囲気」「シンプルでスタートアップっぽいデザイン」など、 ビジュアルのイメージを言葉で伝えるだけでもClaudeは理解できます。
一度で完璧にならなくて大丈夫です。「もう少し余白を広くして」「フォントを変えて」と 繰り返し伝えながらブラッシュアップしていきましょう。
Claudeが修正したら、ブラウザでファイルを開いて意図通りに変わっているか自分の目で確認しましょう。
VS Code の左側でファイルを右クリック →「エクスプローラーで表示」→ ブラウザでファイルを開いて確認できます。
この章の確認チェックリスト
| ☐ | プロジェクト＝サイトのファイルをまとめたフォルダ、と理解した |
| ☐ | index.html / style.css / script.js の3つの役割を説明できる |
| ☐ | HTML → CSS → JS の順番でページが整っていくことを理解した |
| ☐ | 普段の言葉でClaudeに指示できることを確認した |