今回作るもの
index.html という1ファイルだけです。中に「Hello Claude Code」と表示するシンプルなページを作ります。
Workshop
Hello Claude Code のHTMLページを作る
このページでは、Claude Codeに最初のお願いをして、index.html を作ってもらい、ブラウザで表示を確認するところまで進めます。最初の Hello, World 的なワークとしてぴったりの内容です。
Step 1
はじめに確認すること
この回では、今いるプロジェクトフォルダの中で Claude Code を使って、最初のHTMLファイルを作ります。コードを自分で全部書かなくても進められるので、まずは「作ってもらって確認する」体験をしてみましょう。
前提
この回では、最初に C:\aruru-code の中へ hello-claude-code というプロジェクトフォルダを作って始めるのがおすすめです。詳しい作り方は 新しいプロジェクトフォルダを作る を見ればそのまま進められます。
この回の作業フォルダ
Windows: C:\aruru-code\hello-claude-code
Mac: ~/aruru-code/hello-claude-code
今回はこれで十分
見た目を作り込む必要はありません。まずはファイルが作られて、ブラウザで開ければ成功です。
今回の学び
Claude Codeにお願いして、ファイルを作ってもらい、その結果を自分で確認する流れを体験します。
Step 2
最初の依頼をする
Claude Code に、index.html を作って Hello Claude Code を表示するページを作ってもらいます。まずは短く分かりやすい依頼で大丈夫です。
依頼文
Prompt
このフォルダに index.html を作ってください。
画面の中央に「Hello Claude Code」と表示する、とてもシンプルなHTMLページにしてください。送信したら、Claude Code がファイルを作り始めます。まずはそのまま任せてみましょう。
Step 3
できたファイルを確認する
依頼が終わったら、index.html ができているかを確認します。ターミナルではなく、いつものファイル画面で見るやり方で大丈夫です。
Windows
エクスプローラーで、今作業しているプロジェクトフォルダを開きます。
index.html というファイルが見えたらOKです。
Mac
Finderで、今作業しているプロジェクトフォルダを開きます。
index.html というファイルが見えたらOKです。
一覧の中に index.html が見えたらOKです。
もし見当たらなければ、Claude Code に「index.html が作られていないので、もう一度作ってください」と追加で頼めば大丈夫です。
Step 4
ブラウザで開いてみる
ファイルができたら、ブラウザで開いて表示を見てみましょう。ここも、ファイルをダブルクリックするやり方で大丈夫です。
Windows
エクスプローラーで index.html をダブルクリックします。
既定のブラウザで開いて、中央に Hello Claude Code が見えれば成功です。
Mac
Finderで index.html をダブルクリックします。
既定のブラウザで開いて、中央に Hello Claude Code が見えれば成功です。
余裕があればやってみる
表示を見たあとに、Claude Code へ「背景色を薄いベージュにしてください」や「文字を少し大きくしてください」と一言だけ追加で頼んでみると、修正の流れまで体験できます。
Step 5
できたか確認する
最後に、今日できるようになったことを短く確認しておきましょう。
01
Claude Code に最初の依頼を送れた
02
index.html が作られた
03
ブラウザで Hello Claude Code を表示できた
04
Claude Code に作ってもらって、結果を確認する流れがつかめた
今回の作業まとめ
今回は、Claude Code にシンプルな依頼を出して、実際に index.html を作ってもらい、そのファイルをブラウザで開いて確認するところまで進めました。つまり、「お願いする → ファイルができる → 自分で確認する」という、Claude Code を使う基本の流れを最初の小さな成功体験としてつかんだ形です。
