作業フォルダを用意してVSCodeで開く

サイトを作り始める前に、専用の作業フォルダを1つ用意します。ファイルが散らからず、ClaudeCodeにも作業範囲が伝わりやすくなります。

最初のプロンプトを送ってみる

下のプロンプトはそのままコピペで使えます。要件を箇条書きで伝えるのがコツです。

フリーランスデザイナーのポートフォリオサイトの
トップページを作ってください。
要件：
- ファイル名：index.html
- デザイン：シンプル・白背景・読みやすい
- 内容：ヘッダー（名前・ナビ）、ファーストビュー（キャッチ
  コピーとCTAボタン）、実績紹介（3件のカード）、フッター
- フォント：Googleフォント
- レスポンシブ対応
- CSSはHTMLファイル内に書く（別ファイル不要）

ファイルが作られたか確認

プロンプトを送ると、ClaudeCodeがコードを書いてファイルとして保存します。目で見て成功を確認しましょう。

つまり生成が終わると index.html が作られ、VSCode左のファイル一覧に表示されます。表示されていれば成功です。

• 要件を細かく書くほど、イメージに近いものが返ってくる
• ファイル一覧に何も増えないときは、もう一度プロンプトを送ってみる

ブラウザで見た目を確認する

作られた index.html を実際にブラウザで開いて、デザインを目で確かめます。方法は2つあります。

• ファイルを右クリック →「Open with Live Server」Live Server拡張機能が必要。自動で表示が更新されて便利
• ファイルをそのままブラウザにドラッグ&ドロップ拡張機能なしでもすぐに確認できる手軽な方法

つまりまずは手軽に見たいならドラッグ&ドロップ、修正しながら確認するならLive Serverが快適です。

修正は日本語で伝えるだけ

直したいところは、コードをいじらずに日本語でお願いするだけで大丈夫です。一度に1つずつ伝えると確実です。

キャッチコピーを「デザインで、あなたのブランドを
輝かせる」に変えてください。
背景色を #F8F9FA にしてください。
ボタンの色を #2D6BE4 にしてください。

よくある最初の壁

はじめてだと詰まる場面もあります。落ち着いて、次のように対処すれば大丈夫です。