Claude Codeで初めてのWebページを
作る実践ガイド｜
日本語指示だけで動く
対象：Claude Codeインストール済み・初心者 ／ 読了時間：約15分 ／ 更新：2026年
今日はいよいよ「実際に何かを作る」体験をする。
この記事を読み終えるころには、
ブラウザで表示できる自分だけのWebページが1枚完成している状態になる。
コードを書く必要はない。日本語で「こうして」と言い続けるだけだ。
「本当にそれだけで動くの？」と思っている人ほど、最初の体験が刺さる。
一緒にやってみよう。
作業前の準備：専用フォルダを作る
Claude Codeは「起動したフォルダの中でだけ作業する」仕組みになっている。つまり、どのフォルダでClaude Codeを起動するかがとても重要だ。デスクトップや重要なシステムフォルダでいきなり起動すると、思わぬ場所にファイルが作られる可能性があるため、最初に「作業専用フォルダ」を作る習慣をつけよう。
PowerShellを開いて、以下のコマンドを順番に実行する。
❯ のプロンプトが表示されたらClaude Codeが起動している。ここに日本語で話しかけると動き始める。
最初にやること：/init でプロジェクトを初期化する
Claude Codeを起動したら、最初に`/init`コマンドを実行することを強くおすすめする。これはClaude Codeに「このフォルダで作業するための設定ファイル（CLAUDE.md）」を自動で作ってもらうコマンドだ。
Claude Codeが起動した状態で、/initと入力してEnterを押す。
これでC:\claude-work\CLAUDE.mdというファイルが作られる。中身はプロジェクトの設定が書かれた小さなファイルだ。
CLAUDE.mdとは何か
CLAUDE.mdは、「このフォルダでClaude Codeを使う際のルールブック」だ。Claude Codeはこのフォルダで起動するたびにCLAUDE.mdを読み込む。ここに「日本語で回答して」「コメントは日本語で書いて」などを書いておくと、毎回同じ指示を入力しなくて済む。
# プロジェクト設定
## 言語
– 回答・コメントはすべて日本語で
– コード内のコメントも日本語で書く
## 作業スタイル
– ファイルを作成・変更する前に「何をするか」を先に教えて
– 作業が終わったらブラウザで確認できる方法も教えて
CLAUDE.mdはメモ帳などで普通に編集できるテキストファイルだ。使いながら「これも設定しておきたい」と思ったことを追加していくのが自然な使い方だ。
✅ これで一連の流れは完了
専用フォルダでClaude Codeが起動して、/initでCLAUDE.mdが作られた。いよいよWebページを作り始めよう。
実践①：自己紹介ページを作る
最初のお題は「自己紹介ページ」だ。自分の名前・好きなこと・一言コメントが書かれたシンプルなWebページを1枚作ってもらう。
Claude Codeに次のように話しかける。名前や内容は自分のものに変えて構わない。
自己紹介ページを作って。
名前：田中 花子
趣味：読書・料理・散歩
ひとこと：「毎日をちょっとだけ丁寧に」
シンプルで読みやすいデザインで。
白い背景に、名前を大きく中央に表示して。
完成したらブラウザで確認できるようにして。
しばらくすると、Claude Codeが画面に作業内容を表示しながらファイルを作り始める。
自己紹介ページを作ります。以下のファイルを作成します：
・index.html（ページの構造）
・style.css（デザイン）
▶ index.html を作成中…
▶ style.css を作成中…
✔ 完了しました。
ブラウザで確認するには、C:\claude-work\index.html をダブルクリックしてください。
C:\claude-workフォルダを開いてindex.htmlをダブルクリックするとブラウザで開ける。自分の名前が書かれたWebページが表示されたら成功だ。
Claude Codeは初回や重要な操作の前に「このファイルを作成してよいですか？（y/n）」と確認してくることがある。「y」と入力してEnterを押すと作業を続行する。「n」で中止できる。内容を確認してから「y」を押す習慣をつけると安心だ。
実践②：デザインを修正する
「できたけど、もう少しこうしたい」という修正も日本語で伝えるだけでいい。Claude Codeはすでに作ったファイルの中身を理解した状態で続きから作業してくれる。
以下のような追加指示を試してみよう。それぞれ一つずつ試すと変化がわかりやすい。
背景色を薄いラベンダー色にして。名前の文字を紫色にして。
趣味のリストに絵文字を追加して。読書は📚、料理は🍳、散歩は🚶のイメージで。
スマホで見たときにも読みやすいように、スマホ対応（レスポンシブデザイン）にして。
修正が終わったらもう一度index.htmlをブラウザでリロード（F5キー）して変化を確認しよう。「あれ、思ったより違う」と感じたら、さらに言葉で修正を伝えればいい。この繰り返しがClaude Codeの基本的な使い方だ。
実践③：2ページ構成に拡張する
一枚のページが完成したら、次は複数ページに拡張してみよう。「自己紹介ページ」と「好きなものリストページ」をリンクでつなぐ2ページ構成のWebサイトを作る。
「好きなものリスト」ページを新しく作って（favorites.html）。
内容：
・好きな本：「舟を編む」三浦しをん
・好きな食べ物：カレーライス
・好きな場所：図書館
index.htmlに「好きなものリストへ」というリンクボタンを追加して。
favorites.htmlには「自己紹介へ戻る」というリンクも入れて。
デザインはindex.htmlと統一感を持たせて。
Claude Codeがfavorites.htmlを新規作成し、同時にindex.htmlにリンクボタンを追加する。2つのファイルを整合させながら作業してくれる点がClaude Codeの強みだ。
覚えておくと便利なコマンド・操作
Claude Codeを使い続ける中でよく使うコマンドをまとめておく。すべて覚える必要はないが、知っているだけで作業効率が上がる。
-
/init
プロジェクトの設定ファイル（CLAUDE.md）を自動生成する。新しいフォルダで作業を始めるときに最初に実行する
-
/clear
会話の文脈（コンテキスト）をリセットする。「なんか話が噛み合わなくなってきた」と感じたらこれを使う。作成済みのファイルは消えない
-
/help
使えるコマンドの一覧を表示する。「他に何ができる？」と思ったらまずここを見る
-
Ctrl+C
実行中の作業を中断する。Claude Codeが長い時間作業していて「ちょっと待って」と言いたいときに押す
-
exit
Claude Codeを終了してPowerShellに戻る。作業が一段落したら使う
プロンプトをうまく書くコツ
Claude Codeは日本語の指示を非常によく理解してくれるが、いくつかのコツを知っておくとより思い通りの結果が出やすくなる。
| コツ | NG例 | OK例 |
|---|---|---|
| 目的とゴールを先に伝える | 「かっこよくして」 | 「ビジネス向けのシンプルなデザインにして。フォントは黒、背景は白で清潔感を出して」 |
| 「〜しないで」も使う | 「シンプルに」 | 「余計なアニメーションや装飾は入れないで。テキストと余白だけのシンプルな構成で」 |
| 一度に多くを頼みすぎない | 「デザイン変えて、画像追加して、アニメーションつけて、スマホ対応にして」 | まずデザインから変更→確認→次の修正、と段階的に進める |
| 気に入らない部分を具体的に言う | 「なんか違う」 | 「名前の文字が小さすぎる。もっと大きくして。ページ上部に目立つように表示したい」 |
コンテキストが長くなってきたらリセットする
Claude Codeは会話を続けるほど「今回のセッションで話してきた内容」を蓄積する。これをコンテキストと呼ぶ。ただしコンテキストが長くなりすぎると、指示の意図を汲み取りにくくなる場合がある。
・「さっきと違う結果が出てきた」
・「前に決めたことを無視して作業している」
・「なんか話が噛み合わなくなってきた」
/clearで文脈をリセットしてから、改めて「現状の整理」と「次にやりたいこと」を伝え直すと精度が戻る。
作成済みのファイルは消えないので、安心してリセットしていい。
よくある疑問に答えます
まとめ
- Claude Codeは「起動したフォルダ内でのみ作業する」。作業前に専用フォルダを作って移動してから起動する
- 最初に/initを実行してCLAUDE.mdを作ると、毎回の設定入力が省ける
- CLAUDE.mdは「Claude Codeへのルールブック」。日本語回答・コメントの言語・作業スタイルを書いておける
- 日本語で「こうして」と伝えるだけでファイル作成・デザイン修正・複数ページ構成まで対応してくれる
- 「なんか違う」を繰り返してブラッシュアップするのが基本ワークフロー。一発で完成させようとしなくていい
- 会話が噛み合わなくなったら/clearでリセット。作成済みファイルは消えないので安心して使える
- 不安なら作業前のフォルダコピー（バックアップ）を習慣にしておくと気軽に試せる
一度やると「プログラミングってこういうことか」という感覚が少し変わる。
コードの意味がわからなくていい。
「こうしたい」を言い続ける練習が、そのままClaude Codeの使い方の習得につながる。
完璧なページを作ろうとしなくていい。
まず「動くものができた」という体験を積み重ねることが一番大事だ。
EC・WEB・音楽・医療・フィットネスと幅広い現場を渡り歩いてきた現役ディレクターが、WEB・AIの世界に飛び込もうとしている娘に向けて、本音で解説するブログです。正確な情報を初心者に届けることを最優先にしています。
コメント