最初の一枚を、つくる。

まず、全体の流れ

やることはシンプルです。①作業フォルダで claude を起動 → ②日本語でページを頼む → ③ブラウザで開いて見る → ④気になる所を言葉で直す。この③と④をぐるぐる繰り返すうちに、だんだん理想の形に近づいていきます。一度で完成させようとしなくて大丈夫です。

① 作業フォルダで Claude Code を起動する

前の章で確認したとおり、まず作業するフォルダに移動してから起動します。デスクトップの練習用フォルダ（例：my-site）で始める場合はこうです。

cd ~/Desktop/my-site
claude

Claude Code が立ち上がり、文字を入力できる状態になればOKです。ここから先は、難しいコマンドはほとんど出てきません。日本語で話しかけるだけです。

② 日本語で「ページを作って」と頼む

では、最初の1枚をお願いしてみましょう。コツは「誰の・何のページか」を具体的に伝えること。下のプロンプトの〇〇や△△を、あなたの商売に置き換えて打ってみてください。

カフェの1ページのホームページを作ってください。お店の名前は「〇〇」、扱っているのは「△△」です。トップに大きな見出しと、お店の紹介文、連絡先を載せてください。

少し待つと、Claude が index.html という名前のファイルを作ってくれます。「ファイルを作りました」といった返事が出れば、あなたのフォルダの中に、最初のホームページが1枚できあがった状態です。

③ ブラウザで開いて、目で確かめる

できたページは、いつも使っているブラウザ（Chrome や Safari など）で開いて確認します。次のコマンドを Claude Code に頼んでもいいですし、ターミナルに直接入力してもかまいません。

open index.html

start index.html

ブラウザが開いて、見出しや紹介文が表示されれば大成功です。まだ素朴な見た目かもしれませんが、これがあなたの「最初の一枚」。ここから言葉で育てていきます。

④ 気になる所を、言葉で直す

ここからが、AIと作る面白いところです。見た目で気になった所を、そのまま日本語でお願いするだけ。たとえば、こんな具合に。

見出しの色を落ち着いた紺色にして、もう少し余白を広げてください。

スマホで見たときに文字が小さすぎるので、大きくしてください。

お願いするたびに Claude が index.html を書き直してくれます。直してもらったら、またブラウザを再読み込み（リロード）して確認。「頼む → 見る → また頼む」。この繰り返しを 反復（イテレーション） と呼びます。完成は、その先に少しずつ現れます。

この章で出てきた言葉

index.html

ホームページの「表紙」になるファイル。ブラウザはこの名前のファイルを最初に開きます。

ブラウザ

ホームページを見るためのソフト。Chrome や Safari、Edge など、普段ネットを見ている画面のことです。

リロード

再読み込み。ページを最新の状態に表示し直すこと。⌘ + R（Mac）／ Ctrl + R（Windows）。

反復（イテレーション）

「頼む → 見る → また頼む」を少しずつ繰り返すこと。AIと作るときの基本のリズムです。