Claude Codeにサイトを頼むときは「参考サイトの分析→目的・雰囲気・動き・量→声で中身→見たままの言葉で修正→ルールをスキル化」の5手順で進める

どんな問題を解決するか / いつ使うか

AIでサイトを作ったことがなく、最初の一言で手が止まるとき。毎回ゼロから頼み直すのをやめたいとき。

5つの手順

1. 参考サイトを分析させる：1通目は参考サイトのURLを貼って「このサイトを分析して」だけ。細部まで真似させず、あくまで参考程度にするのがポイント。
2. 2通目で目的・雰囲気・動き・量を伝える：例「海外の〇〇ブランドのサイトのようなイメージで、スクロールに合わせて動く演出をしっかり入れて、トップページを3ブロック作りたい」。ここに何のためのサイトかを足す。動きは「さっきの参考サイトの動きに合わせて」でも伝わる。ブロック数をざっくり伝えると、それに合わせて作ってくれる。
3. 言いたいことは声でまとめて話す：会社の説明や伝えたいことは音声入力で一気に話して渡す。
4. 見たままの言葉で1つずつ直す：「見出しが大きすぎる」のように見たままを伝える。全ページ共通の所は「共通にして」と頼むと共通ルールになる。
5. 出てきたルールをスキルにする：「今後作るホームページは今回のルールに沿って作って」とスキル（AIに覚えさせる手順書）にする。次からは中身を渡すだけでよい。

注意点

• 参考サイトのデザインや文章をそのまま写さない。分析させるのは構成や雰囲気の把握のため。
• 修正は1回に1か所ずつのほうが、AIが他の部分まで変えにくい（AI図解の「素人っぽさ」は、変える場所（見出し・余白・並び・文字）と残す部分をセットで指示して直す）。
• 参考サイトからルールを作る流れは 好きなサイトのスクショ3〜5枚をエージェントに分析させ、選んだ要素だけをDESIGN.mdにする と近い。

出典

• 投稿者: @tatsu_studio
• 投稿: @tatsu_studio · 2026-10-15
• 収集日: 2026-10-16（JST、10/15・10/16分の巡回をまとめて実施）