第4章 ページを作ってもらう
この章が終わると
あなたのサービス紹介ページがパソコンの中にできて、ブラウザで見られる状態になります。
やることは3つです。
① ページを作ってもらう
② 自分の目で見る
③ 納得いくまで直してもらう前の章の最後に「材料はそろいました。あとは、渡すだけです」と書きました。
その渡し方を、この章でやります。むずかしいことは何もありません。売りものメモ.md を読んでページにしたい、と相談するだけです。相談の切り出しの文は、こちらで用意しました。
① ページを作ってもらう
下の文をそのままコピーして、「Code」の入力欄に貼りつけて、送信してください。今回は、直すところがありません。
このフォルダの「売りものメモ.md」を読んでください。
この内容で、サービスの紹介ページを作りたいです。
場所は、このフォルダの中に「homepage」というフォルダを作って、
その中に「index.html」という名前で作ってください。
申し込みの受け付けはあとで作るので、その欄は「準備中」にしておいてください。
デザインや構成は相談して決めたいです。
まず、あなたの提案を見せてください。送ると、Claudeが「こんな構成・こんな雰囲気でどうでしょう」と提案してきます。あとは日本語で答えて決めていくだけです。色も雰囲気も、あなたの好みで構いません。決めきれないところは「おまかせします」でも進みます。
写真は、ここではまだ入れません。文字が固まってからのほうが選びやすいので、写真は第9章で入れます。
フォルダとファイルの名前について
homepage と index.html は、こちらで決めました。この2つの名前は、そのまま使ってください。
とくに index.html という名前には意味があるので、変えないでください。あとで公開するときに、この名前でないとうまくいきません。
そして homepage フォルダは、あとで公開するときにそのまま使います（第8章）。中身が増えても、この1つのフォルダにまとまっている形にしておくと、そのときが楽になります。
.html（エイチティーエムエル）は、ページの本体になるファイルの種類です。
ブラウザで開ける形、と思っておけば十分です。
② 自分の目で見る
Claudeが「作りました」と報告してくれたら、できたものを見にいきます。
- デスクトップの
claude-workフォルダを開きます - 中に
homepageというフォルダができています。開きます index.htmlをダブルクリックします
ブラウザが立ち上がって、ページが表示されます。
あなたのサービスのページが、画面に出ています。
自分の言葉で話した内容が、形になって並んでいるはずです。ここまでで、あなたが打ち込んだ文字はほとんどありません。それでも、これはまぎれもなくあなたのページです。
まだ誰にも見えていません。いまはあなたのパソコンの中だけにあります。ですから、遠慮なく、じっくり眺めてください。ここからが本番です。
③ 納得いくまで直してもらう
一発で「これだ」というものが出てくることは、まずありません。それが普通です。 第2章で「往復が本番です」と書いたのは、この章のためでした。
直してもらう言い方には、型があります。5つ覚えれば十分です。
見たまま言う
きれいな指示の言葉は要りません。 見て思ったことを、そのまま言ってください。
字が小さいです
なんだか寂しい感じがします
もっと大人っぽくしてください
これで通じます。「余白を」「配色を」といった言い方を探さなくて大丈夫です。感想のまま伝えるほうが、かえって早く伝わります。
場所を指す
直したい場所があるときは、画面のどこかを言葉で指します。
一番上の大きな文字を、もう少し短くしてください
料金の下に、支払い方法を一行足してください
「一番上の」「〜の下の」「〜という文字のところ」——この言い方で十分です。
言葉で指しにくいときは、その部分のスクショを撮って貼りつけて「ここを直してください」でも通じます。
選ばせてもらう
自分でも何がいいか分からないときは、出してもらってから選びます。
3案作ってください。選びます
第3章で使ったのと同じ技です。デザインでも同じように効きます。ゼロから考えるより、並んだものから選ぶほうがずっと楽です。
戻す
直したあとで「さっきのほうが良かった」と思ったら、戻せます。
さっきのほうが良かったので、ひとつ前に戻してください
これが言えると分かっていると、遠慮がなくなります。それに、材料の 売りものメモ.md はずっと残っています。元の材料があるかぎり、ページは何度でも作り直せます。 思いついたことは、どんどん試してみてください。
確かめてもらう
ひととおり直し終わったら、仕上げにこう頼んでおきます。
おかしなところがないか、全体を見直してください
見落としを拾ってくれます。何度直しても構いませんが、「もう十分かな」と思ったところが、そのページの完成です。
最後に、雇い主の目で確かめる
Claudeの見直しが終わったら、最後はあなたの目で確かめます。チェックするのは3つだけです。
- 料金の数字は合っているか
- サービス名と、あなたの名前の表記は合っているか
- 申し込み方法の欄が「準備中」になっているか
なぜこの3つかというと、ここはあなたにしか正解が分からないからです。Claudeも書き間違えることはありますが、文章の流れなら読めば気づけます。数字と名前だけは、元を知っている人が見るしかありません。
違っていたら、「料金が12,000円になっていますが、15,000円です。直してください」と言えば、その場で直ります。
うまくいかないときは
ダブルクリックしたら、メモ帳のような別のアプリで開いた
index.html を右クリックして、「プログラムから開く」を選びます。出てきた一覧から Edge か Chrome を選べば、ページの形で表示されます。
表示が崩れている／思っていたのと違いすぎる
その画面のスクショを撮って、Claudeに貼りつけてください。
こう見えています。直してください
これで伝わります。合言葉の「スクショして聞けばOK」は、英語の画面だけでなく、こういうときにも効きます。言葉で説明しにくいものは、見せるのがいちばん早いです。
直しているうちに、わけが分からなくなった
仕切り直せます。
いったん白紙に戻します。売りものメモを読んで、ページを最初から作り直してください
材料の 売りものメモ.md から作り直すので、話がこんがらがっていても確実に仕切り直せます。何度でも大丈夫です。
この章のチェックリスト
全部にチェックが入ったら、第5章へ。
ページはできました。でも、いまのままでは申し込みを受け取れません。 「準備中」のままにしてある、あの欄です。
次の章では、Googleフォームで申し込みの受付口を作って、そこにつなぎます。ここが入ると、このページは「見てもらうページ」から「申し込みが受け取れるページ」に変わります。