そのまま写すと、人のサイトになる
参考が集まると、つい「このサイトと同じのを作って」と言いたくなります。言えば、たぶんかなり似たものが出てくるんですけど、それは人が作ったサイトを写真や文章や動きごと持ってきただけで、あなたのホームページではないです。
借りるのは構造だけ。素材と動きは持ってこない。
型に入れる物、入れない物
STEP 1 で引いた線を、型を作る側から見るとこうなります。左の列はプロが考え抜いた部分なので、借りるだけで仕上がりが変わる。
| 型に入れる（構造） | 型に入れない（中身） |
|---|---|
| ページの数と、メニューのつながり | 写真・イラスト・ロゴ |
| 1ページの中の、セクションの並び | 文章・キャッチコピー |
| 余白の広さ、文字の大きさの差 | サイト名・色の組み合わせ |
| どこで動くか（スクロールで出てくる、など） | 動きを作っているコードそのもの |
動きは「どこで、どんなふうに動くか」を言葉にするところまで借ります。中身は、作るときに自分の物として作ってもらいます。
URLを渡して、骨組みまで作らせる
ここからは、ページを作ってくれるAIで進めます。Claude Code や Codex のように、URLを開いて読めて、フォルダの中にファイルを作れるAIを使ってください。ページが何枚かに分かれるので、ファイルで残せるほうがあとで直すのも楽です。AIによっては、ページの古い中身を読んで分析してしまうことがあります。今のページと話が合わない時や、開けないと言われた時は、スクリーンショットを渡してください。新しいフォルダを1つ用意して、これを貼って送るだけです。
私のホームページを作るために、参考にしたいサイトから「型」を作ってほしいです。まず、次の順で1つずつ質問してください。 1. このホームページの目的と、見に来るのはどんな人か 2. 参考にしたいサイトのURLと、そのサイトのどこが良いと思ったか（1サイトずつ聞いて、私が「以上」と言うまで続けてください） 聞き終わったら、それぞれのURLのページを開いて読み、私が良いと思った所を中心に分析してください。中のページのURLがあれば、そちらも読んでください。ページが開けなかった時や、余白や動きのように文字だけでは分からない所は、推測で埋めずに、どのページのどこのスクリーンショットが欲しいかを私に伝えてください。 分析したら、複数のサイトの良い所を組み合わせて、私のホームページの骨組みを1枚にまとめてください。入れるのは次の5つだけです。 ・ページの一覧と、それぞれのページの役割 ・各ページの中の、セクションの並び ・余白の取り方、文字の大きさの差、並べ方の特徴 ・メニューの形と、ページ同士のつながり ・スクロールやマウスを乗せた時の演出（どこで、どんなふうに動くかを言葉で） 著作権に配慮して、参考サイトの文章・写真・イラスト・ロゴ・サイト名・動きのコードは書き写さず、見た目をそっくり再現する形にもしないでください。 まとめたら kata.md というファイルに保存し、先頭に、このホームページの目的と見に来る人を1〜2行で書いてください。どのサイトのどこを参考にしたかは、kata.md には入れずに、画面に一覧で見せてください。まだホームページは作らないでください。
補足 貼って送ると、まず目的と見に来る人を聞かれ、そのあとURLを1サイトずつ聞かれます。STEP 1 で控えたURLと一言を、そのまま貼って答えてください。スクリーンショットが欲しいと言われた時だけ、そのページを開いて撮って貼ります。
返ってきた骨組みを、目で確かめる
骨組みができたら、「kata.md の中身を見せて」と言えば画面に出ます。確かめるのは3つです。
- 参考にしたサイトの名前や文章が、kata.md にそのまま入っていないか
- 自分が「いいな」と言った所が、参考にした所の一覧に全部あるか
- ページの一覧が、自分のサイトの目的に合っているか
抜けていたら、「料金の並べ方が、骨組みに入っていません。入れてください」のように、名指しで足してもらえば大丈夫です。
気に入った動きは、参考のサイトとまったく同じにしてほしいと頼んだ。
僕はこのサイトを作っている時に、参考にした画面の派手な動きをそのまま持ち込んで、あちこちが動く落ち着かない画面にしたことがあります。動きは、そのサイトの中で何かのためにあるものなので、形だけ借りると暴れるんです。いいなと思った理由のほうを言葉にして、そこだけ借りてください。
借りるのは、並びと間の取り方。写真・文章・動きは自分の物にする。これで、名作の骨組みに自分の中身を載せる準備ができました。