こんにちは😊 前回は「Claude Codeってどんな AI なの？」というお話をしましたね。
今回は、いよいよホームページ作りに入っていきます✨ ……と言っても、身構えなくて大丈夫です。
「HTML」「CSS」「JavaScript」なんて言葉を見ると、「なんだか難しそう」と思ってしまいますよね。実は、最初の頃の私もそうでした😊
でも今日は、コードを書けるようになる必要はありません。「ホームページってこんな仕組みでできているんだ」というイメージだけ持って帰ってもらえれば十分です。それでは、一緒に見ていきましょう。
難しい言葉も出てきますが、全部覚えようとしなくて大丈夫です😊 なんとなくイメージできれば十分ですよ。
まず最初に出てくるのが「プロジェクト」という言葉です。難しく聞こえますが、実はとてもシンプルです😊
旅行に行くとき、服や充電器、お財布などを全部スーツケースにまとめますよね。ホームページも同じで、画像や文章、デザインのデータなど必要なものを全部まとめた箱、それが「プロジェクト」です。
「プロジェクト＝ホームページの箱」くらいで覚えておけばOKです✨
これからVS Codeでは「フォルダを開く」という操作をします。これは「このホームページを編集しますよ」とClaude Codeに教えてあげるイメージです😊
Claude Codeは、そのフォルダの中を見ながらホームページを作ったり、修正したりしてくれます。だから、最初にフォルダを開くことがとても大切なんですね✨
ここから少しだけ、ホームページの仕組みをのぞいてみましょう😊 ホームページは、実は3人で協力して作っているようなイメージなんです。
つまり、HTMLが中身、CSSがデザイン、JavaScriptが動き。この3人が協力してホームページを作っています😊 ここは何となく分かれば十分、覚えなくて大丈夫です。
「全部覚えないとダメなのかな…」と思った方、安心してください😊 Claude Codeを使うなら、ほとんど覚える必要はありません。Claude Codeが考えてくれるからです✨
私たちがやることは、コードを書くことではなく「こんなホームページにしたい」を伝えることなんです。例えばこんな感じでOKです。
専門用語を使わなくても大丈夫。普段話している日本語でお願いすればOKです😊
もう一つ大事なことがあります。Claude Codeは、一回お願いしたら終わりではありません。
「もう少し明るくして」「やっぱり前の方が好き」「余白を広げて」というふうに、会話しながら少しずつ完成させていきます。人と打ち合わせをするような感覚ですね✨
だから、最初から完璧な指示を出そうとしなくて大丈夫です😊
お疲れさまでした😊 今日は少しだけホームページの仕組みについてお話ししました。難しい言葉も出てきましたが、全部覚える必要はありません。「ホームページって、こんな仕組みなんだな」くらいで十分です✨
次のレッスンからは、いよいよClaude Codeにお願いしながら、実際にホームページを作っていきます。ここから一気に楽しくなっていきますので、ぜひ楽しみにしていてくださいね😊