こんにちは😊 前回は、ホームページがどんな仕組みでできているのか、Claude Codeへのお願いの仕方を一緒に見ていきましたね。
今回は、いよいよ実際に手を動かしていきます✨「難しそう…」と思うかもしれませんが、大丈夫です。今日もコードを自分で書く必要はありません。私と一緒に、画面を見ながら同じように進めてもらえればOKです。
今日は最後に、実際にホームページが画面に表示されるところまでやってみます。ここまでできたら100点です✨ では、一緒にやっていきましょう。
難しそうに見えても、ひとつずつ進めれば大丈夫です😊
まず、「セッション」という言葉について少しだけお話しします。難しそうに聞こえますが、意味はとてもシンプルです😊
誰かとLINEでずっと話しているようなイメージです。会話が長くなってくると、Claude Codeも前の話を引きずってしまうことがあります。そこで新しい作業を始めるときは、一度会話をきれいな状態にしてあげます。
Claude Codeの入力欄に、次のように入力してEnterを押します。
「今まで作ったものも消えちゃうの？」と思うかもしれませんが、大丈夫です。ここで消えるのは、Claude Codeとの会話の記憶だけ。作ったホームページのファイルが消えるわけではありません。机の上の資料はそのままで、「一回、頭の中だけ整理しよう」という感じです😊
リセットしたあとは、Claude Codeに「今、何を作っているのか」を簡単に教えてあげます。難しい説明はいりません。何を作っているか＋今日は何をしたいか、この2つを伝えればOKです。
今後は、/clear → 何を作っているか伝える → 今日やることを伝えるという流れで始めてみてください😊 今すぐ全部覚えなくても大丈夫。何度か使っているうちに自然と慣れていきますよ✨
ではここから、実際にホームページ制作の準備をしていきます。
パソコンの中にホームページ専用のフォルダを作ります。フォルダは、ホームページに必要なものをまとめて入れておく箱だと思ってください。今回はデスクトップに作ってみましょう。
デスクトップの何もないところで右クリックし、「新しいフォルダー」を選びます。名前は、たとえばこんな感じにしてみます。
日本語やスペース、特殊な記号を使うと、あとでトラブルの原因になることがあります。「フォルダ名は英語っぽくしておけば安心」くらいで覚えておけばOKです😊
VS Codeを起動し、「ファイル」メニューから「フォルダーを開く」を選びます。先ほど作ったフォルダを選んで、「フォルダーの選択」をクリックしましょう。
途中で「このフォルダーを信頼しますか？」という確認が出ることがあります。自分で作ったフォルダなので、「はい、作成者を信頼します」を選んで大丈夫です。
このフォルダの中でClaude Codeを起動します。VS Code上部の「ターミナル」から「新しいターミナル」を選び、出てきた入力欄に次のように入力してEnterを押します。
「>」のような入力できる状態になれば準備完了です✨
先にフォルダを開いて、そのあとClaude Codeを起動する。「今日はこの箱の中で作業してね」とClaude Codeに教えてから呼び出すイメージです。フォルダを開く → claude、この2つをセットで覚えておきましょう。
ここからが今日一番楽しいところです😊 最初から完璧な指示を書く必要はありません。今回は、会社名・業種・ページ構成・デザインのイメージ・見てもらいたい人、このあたりを伝えるテンプレートをそのまま使ってみましょう。
こんな感じでお願いしてみます。送ってみたら、少しの間Claude Codeが作業してくれるので待ちましょう。「何が起きてるんだろう…」と不安になるかもしれませんが、大丈夫です😊 私たちの代わりにホームページを作ってくれています。
作業の途中で「このファイルを変更してもいいですか？」と英語で確認が出ることがあります。最初はびっくりするかもしれませんが、ちゃんと進んでいるので安心してください。今回のように自分で作っているホームページなら「Yes」を選んで進めればOKです。「Yes, allow all edits during this session」を選ぶと、その回の作業中は毎回確認されずに済みます。
作業が終わったら、VS Codeの左側を見てみます。index.htmlというファイルができていると思います。
「え？ファイル1個だけ？」と思うかもしれませんが大丈夫です😊 Claude CodeはHTMLとデザインをひとつのindex.htmlにまとめて作ることがあります。むしろ最初のうちは、1つにまとまっている方が分かりやすいです。中のコードを読む必要はありません。今日の目的は、コードを理解することではなく、Claude Codeに作ってもらうことです。
VS Codeの左側にあるindex.htmlを右クリックし、「エクスプローラーで表示」を選びます。開いたら、index.htmlをダブルクリックしてみましょう。
自分ではコードを1行も書いていないのに、ホームページの形ができました。今できたものは完成品ではなく、最初のたたき台です。家を建てるときも、最初から家具やカーテンまで完成しているわけではないですよね。今は、ホームページの形ができた。それだけで100点です✨
「色を明るくしたい」「この部分はいらない」「文字を大きくしたい」など、気になるところがあればメモしておいてください。次回、その部分をClaude Codeと一緒に直していきます。
お疲れさまでした😊 今回は、Claude Codeを使ってホームページの枠組みを作るところまで一緒にやってみました。「思っていたよりちゃんとできてる！」と感じた方もいるかもしれません。
でも、ここからがもっと楽しくなってきます。次回はここから、デザインや画像、細かい部分を整えながらホームページの完成度を上げていきます。「ここをこうしたい」という希望をClaude Codeに伝えながら、一緒に育てていきましょう✨