「サイトを作ってほしい」と言われて受注できたのに、そこから先で毎回止まる。
どんなページが必要かを決めるのに何日もかかる。原稿をお願いしても、いつまで経っても送られてこない。プラグインを更新したら画面が真っ白になって、検索しても同じ症状が見つからない。見積もりを出したら「思ったより高いですね」と言われて、何にお金がかかっているのかをうまく説明できない。
制作そのものより、その前後で時間が溶けていく——Web制作を一人で受けていると、これがずっと続きます。
このページでは、その詰まりどころをAIに手伝わせるためのプロンプトを、場面別に5種類、そのままコピーできる形で公開します。会員登録は不要です。 ChatGPTでもClaudeでもGeminiでも、コピーして貼り付ければ今すぐ使えます。
対象は、WordPressやノーコードツールでサイトを作っている方、コードはあまり書かずに制作を受けている方です。プログラムが書けることを前提にしたプロンプトは入れていません。
制作の時間は「作業」より「その前後」に溶けている
一人でWeb制作を受けている方の1案件を分解すると、こうなります。
| 工程 | 実際にかかっていること | AIに任せられるか |
|---|---|---|
| サイト構成を決める | 何ページ必要か、各ページに何を書くか。白紙から決めるのがいちばん重い | ◎ たたき台づくりは得意（下の①） |
| 原稿を待つ／書く | クライアントから原稿が来ない。結局こちらで書くことになる | ◎ たたき台があれば話が進む（下の②） |
| デザイン・コーディング | ここは手を動かす仕事 | △ 部分的に |
| 不具合が出たとき | 白画面・レイアウト崩れ・メールが届かない。原因の切り分けが難しい | ○ 切り分けの手順を出させる（下の③） |
| 見積もり・提案 | 何にいくらかかるのかを説明できず、値切られる | ○ 説明の言葉をつくる（下の④） |
| コードを触るとき | 検索して出てきたコードを貼るが、意味が分からないまま使っている | ○ 意味を教えてもらう（下の⑤） |
デザインとコーディングは手を動かすしかありません。でも、その前後の「考える・調べる・説明する」は、ほぼ全部たたき台をAIに出させることができます。
そして重要なのは、たたき台が出た瞬間にクライアントとの会話が進むことです。白紙を前に「どうしましょうか」と聞くより、「こういう構成を考えてみたのですが」と出したほうが、相手も意見を言えます。止まっていた案件が動きます。
そのまま使えるプロンプト（5種類）
下のボタンで、使いたい場面を選んでください。それぞれコピーボタンが付いています。
使い方は3ステップです。
- 場面を選んで、コピーボタンを押す
- ChatGPT・Claude・Geminiなど、いつも使っているAIの入力欄に貼り付ける
[ ]で囲まれた部分だけ、自分の案件の内容に書き換えて送信する
書き換えるのは [ ] の中身だけで大丈夫です。それ以外の部分は、AIに正しい手順を踏ませるための指示なので、消さずにそのまま送ってください。
使いたい場面を選んでください（5種類）
サイト構成案（サイトマップ）をつくる
こんなときに： ヒアリングは終わったが、何ページ作るか決まっていないとき。クライアントにそのまま見せられる形で出させるので、打ち合わせの資料がそのまま用意できます。
あなたは、中小企業のホームページ制作を数多く手がけてきたWebディレクターです。
以下の【案件の情報】をもとに、サイトの構成案（サイトマップ）と、
各ページに何を書くかの中身の案を作成してください。
■ 案件の情報
・クライアントの業種・事業内容：
[例：地域密着の工務店。注文住宅とリフォームの両方をやっている。社長と職人4名]
・サイトの目的：
[例：問い合わせを増やしたい。特にリフォームの相談を増やしたい]
・想定しているお客さん：
[例：同じ市内に住む40〜60代。持ち家があり、水回りや外壁の傷みが気になっている]
・いま持っている素材：
[例：施工写真は200枚くらいある。お客様の声は口頭でならいくつか聞ける。会社案内のパンフはあり]
・競合・参考にしたいサイト：
[例：特になし / 大手リフォーム会社のサイトを「きれいだ」と言っていた]
・予算・規模の感覚：
[例：あまり大きくない。10ページ前後で収めたい]
■ 出力条件
1. 【サイトマップ】
階層が分かる形で。各ページに「なぜこのページが必要か」を1行添えること。
ページ数は、上記の予算・規模の感覚に合わせること。多すぎる提案をしないこと。
2. 【各ページの中身】
ページごとに、載せる要素を上から順に箇条書きで。
それぞれ「クライアントに用意してもらうもの」か「こちらで作るもの」かを明記すること。
3. 【最初に作るべき3ページ】
予算や時間が足りない場合に、どこから作れば目的に近づくか。理由も添えること。
4. 【このヒアリングでは決まっていないこと】
構成を確定する前に、クライアントに確認すべきことを質問文の形で。
■ 守ってほしいこと
・専門用語（LP、CTA、ファーストビュー等）を使う場合は、
初めて出たところに一言の言い換えを添えること。クライアントに見せる資料になるため。
・「SEOに強い」「集客できる」といった、根拠なく効果を約束する表現を使わないこと。
・素材が無いのに写真を大量に使う構成など、実現できない提案をしないこと。
それでは、上記の条件に従って出力してください。
原稿のたたき台をつくる
こんなときに： 「原稿はこちらで用意します」と言われたまま、1か月経っても届かないとき。完成品ではなく、赤入れしてもらうためのたたき台として渡すのが一番早いです。
あなたは、中小企業のホームページの文章を書いてきたコピーライターです。
以下の【情報】をもとに、ホームページに載せる原稿のたたき台を作成してください。
これはクライアントに赤入れしてもらうための下書きです。
■ 情報
・会社・お店：
[例：創業35年の地域密着の工務店。社長と職人4名。社長は現場に出る]
・このページ：
[例：リフォームのサービス紹介ページ]
・読む人：
[例：同じ市内の40〜60代。水回りの傷みが気になっているが、
どこに頼んでいいか分からず、大手は高そうだと思っている]
・ヒアリングで聞けたこと（断片で構いません）：
[例：
・社長が必ず現場を見てから見積もりを出す
・追加費用が出ないように、最初に細かく説明する
・地元なのですぐ来られる
・職人はみんな10年以上いる
]
・言ってはいけないこと：
[例：「業界最安値」など根拠のない一番手表現、工期の断言]
■ 出力条件
1. 【見出しの案】3パターン（方向性を変えること）
2. 【本文のたたき台】
・見出し／本文の形で、そのままページに流し込める形にすること
・1文を短くし、専門用語を使わないこと
・読む人が知りたい順（不安→それがどう解消されるか→どうすればいいか）に並べること
3. 【クライアントに確認すべきこと】
事実かどうか確認しないと書けない部分を、質問文の形で。
4. 【あったほうがいい写真】
文章に合わせて、どんな写真を撮ってもらえばいいかを具体的に。
■ 守ってほしいこと
・ヒアリングで聞けていないことを、事実であるかのように書かないこと。
どうしても必要な場合は「（要確認）」と明記すること。
・数字（実績件数、創業年数、満足度など）を勝手に作らないこと。
・誇張した表現や、効果を約束する表現を使わないこと。
それでは、上記の条件に従って出力してください。
不具合の原因を切り分ける
こんなときに： サイトが真っ白になった、レイアウトが崩れた、問い合わせメールが届かない。検索しても同じ症状が出てこないときに、何から確認すればいいかを順番に出させます。
あなたは、WordPressサイトの保守を長く担当してきたWeb制作者です。
以下の【症状】について、原因を切り分けるための確認手順を、
**安全な順（元に戻せる順）** に並べて出してください。
■ 症状
[例：管理画面にはログインできるが、サイトの表示側が真っ白になった]
■ 分かっていること
・いつから：[例：昨日の夕方まで見えていた。今朝見たら白かった]
・直前にしたこと：[例：プラグインの更新をまとめて実行した。3つくらい]
・環境：[例：WordPress、エックスサーバー、テーマは購入したもの、プラグイン15個くらい]
・自分でできること：[例：管理画面の操作、FTPでのファイルアップロード、サーバーのファイルマネージャー]
・自分でできないこと：[例：SSH、コマンドの操作、PHPを読んで直すこと]
■ 出力条件
1. 【考えられる原因】可能性の高い順に。それぞれ、なぜそう考えられるかを1行で。
2. 【確認する手順】
・番号を振って、上から順にやれば切り分けられる形にすること
・**各手順に「元に戻す方法」を必ず添えること**
・「自分でできないこと」に挙げた操作を必要とする手順は使わないこと。
どうしても必要な場合は、その旨をはっきり書いて別枠にすること
3. 【やってはいけないこと】
慌てているときにやりがちで、状況を悪化させる操作。
4. 【先にやっておくべきこと】
触る前に取っておくバックアップと、その取り方。
5. 【自分で対応せず、専門家に頼むべき状況】
どういう結果が出たらそう判断すべきか。
■ 守ってほしいこと
・実行するとデータが消える可能性のある操作には、必ず警告を書くこと。
・存在しない管理画面のメニュー名やファイル名を、確信がないまま書かないこと。
不確かな場合は「環境により名称が異なる場合があります」と添えること。
それでは、上記の条件に従って出力してください。
見積もりの中身を説明する
こんなときに： 金額を出したら固まられた、値切られた、「そんなにかかるんですか」と言われた。何にお金がかかっているのかを、相手の言葉で説明するためのプロンプトです。
あなたは、中小企業向けのWeb制作を一人で受けている制作者の相談相手です。
以下の【見積もり】について、クライアントに納得してもらえる説明を作成してください。
値引きの提案ではなく、何にどれだけの手間がかかるのかを伝えるための説明です。
■ 見積もりの内容
[例：
・トップページ デザイン＋制作 12万円
・下層ページ 6ページ 18万円
・お問い合わせフォーム 3万円
・WordPress構築・初期設定 8万円
・スマホ対応 含む
・合計 41万円
]
■ 相手
[例：地域の工務店の社長。60代。ホームページは10年前に知人に作ってもらったきり。
相場が分からず、「知り合いは10万でできたと言っていた」と話している]
■ こちらの状況
・[例：一人で受けている。写真の選定と原稿の整えもこちらでやる想定]
・[例：公開後3か月は軽微な修正を無料で対応するつもり]
■ 出力条件
1. 【説明の骨子】
何にお金がかかっているのかを、専門用語を使わずに。
「1ページあたり◯円」ではなく、「そのページで何をしているのか」で説明すること。
2. 【そのまま話せる説明文】
打ち合わせで口頭で話せる長さ（2〜3分）。
相手を下に見た言い方、専門知識をひけらかす言い方をしないこと。
3. 【「知り合いは10万でできた」への答え方】
他社や他者を否定せずに、何が違うのかを説明する形で。
4. 【予算が足りない場合の代案】
ページ数を減らす／段階的に作る等、金額を下げるのではなく範囲を調整する案を2〜3個。
それぞれ、何をあきらめることになるかも正直に書くこと。
5. 【この見積もりで抜けていそうなもの】
後から追加費用の話になりやすい項目（ドメイン・サーバー代、写真撮影、
保守、原稿作成など）で、書かれていないもの。
■ 守ってほしいこと
・相手を急かす表現、不安をあおる表現を使わないこと。
・「早速」「直ちに」など、対応の速さを強調する副詞を使わないこと。
・効果（問い合わせが何件増える等）を約束する表現を使わないこと。
それでは、上記の条件に従って出力してください。
コピーしたコードの意味を読み解く
こんなときに： 検索して出てきたコードを貼ったら動いた。でも、何をしているのか分からないまま置いている。意味が分かると、次から自分で調整できます。
あなたは、Web制作を始めたばかりの人に教えるのが上手な講師です。
以下の【コード】が何をしているのかを、プログラミングを学んだことがない人にも
分かるように説明してください。そのうえで、安全に手を加える方法を教えてください。
■ コード
[ここに、貼り付けたコードをそのまま入れてください]
■ どこに書いてあるか
[例：WordPressの子テーマの functions.php / style.css の一番下 / ヘッダーの中]
■ やりたいこと
[例：この余白をもう少し狭くしたい / スマホのときだけ非表示にしたい]
■ 出力条件
1. 【このコードは何をしているか】
ひとことで言うと何か → そのあと、行ごとに何をしているかを平易な言葉で。
専門用語を使う場合は、初めて出たところで言い換えを添えること。
2. 【触っていい場所と、触ってはいけない場所】
数字や色など、変えても壊れにくい部分と、
消すと動かなくなる部分を、はっきり分けて示すこと。
3. 【やりたいことを実現する変更案】
変更後のコード全体を出すこと（差分だけでなく、貼り替えられる形で）。
何を変えたのかを1行で説明すること。
4. 【壊れたときに戻す方法】
触る前にやっておくべきこと（コピーの取り方など）を具体的に。
5. 【このコードの気になる点】
古い書き方、動作しなくなる可能性、セキュリティ上の懸念があれば指摘すること。
無ければ「特になし」と書くこと。
■ 守ってほしいこと
・「とりあえずこう書けば動きます」で終わらせず、必ず理由を添えること。
・確信のない断定をしないこと。環境によって変わる場合はその旨を書くこと。
それでは、上記の条件に従って出力してください。
精度を上げる、書き換えのコツ
| 書き換える場所 | コツ |
|---|---|
| クライアントの業種・事業内容 | 「工務店」だけだと一般論しか出ません。「注文住宅とリフォームの両方」「社長が現場に出る」「職人4名」まで書くと、提案の中身が急に具体的になります |
| いま持っている素材 | ここを書かないと、実現できない構成が出てきます。「写真がない」「お客様の声は取れない」も、正直に書いたほうが使える案が出ます |
| 自分でできること／できないこと（③） | ここが一番効きます。 SSHやコマンドが使えないなら、そう書いてください。書かないと、実行できない手順が並んだ回答が返ってきて、時間だけが過ぎます |
| 相手（④） | 年代・過去の経験・言っていた言葉をそのまま書くと、説明の言葉遣いが変わります。「知り合いは10万でできたと言っていた」のような一言が特に効きます |
そして、一度で満足しないことです。
- 「この構成だとページが多すぎるので、7ページに収まる案にして」
- 「この説明は専門用語が多いので、60代の方に話す前提で書き直して」
- 「手順3が自分にはできないので、別の方法に置き換えて」
やりとりを2〜3回重ねるだけで、そのまま使える水準になります。
使う前に、これだけは守ってください
1. クライアントの情報をそのまま貼らない
無料版のAIサービスでは、入力した内容がAIの学習に使われる場合があります。公開前のサイトの内容、クライアントの社名や住所、まだ発表していないサービス名は、そのまま貼らないでください。
「A社」「X市の工務店」のように伏せ字にするだけで、出てくる答えの質はほとんど変わりません。AIが見ているのは固有名詞ではなく、文脈だからです。
サーバーのパスワード、FTPの接続情報、データベースの接続情報は、伏せ字にする以前に絶対に貼らないでください。 ③のプロンプトで不具合を相談するときも、これらは不要です。必要になったら、それは自分で対応せず専門家に頼む場面です。
2. 出てきたコードを、意味が分からないまま本番に貼らない
⑤のプロンプトを作ったのは、この習慣を変えるためです。
AIが出すコードは、たいてい動きます。ただ、古い書き方だったり、そのサイトの他の部分と衝突したり、セキュリティ上まずい書き方だったりすることがあります。 そして、動いてしまうので気づきません。気づくのは、半年後にクライアントから「フォームから連絡が来なくなった」と言われたときです。
必ず、次の順番を守ってください。
- 触る前にファイルのコピーを取る（元に戻せる状態を作る）
- 本番ではなく、テスト環境やローカルで試す
- ⑤で意味を確認してから貼る
「動いたからOK」は、自分ひとりの趣味のサイトなら構いません。お金をもらって作っているサイトでは、戻せる状態を作ってから触る、が最低ラインです。
プロンプトの限界と、その次の一歩
ここまでの5つを使えば、構成案も原稿も見積もりの説明も、白紙から始めなくてよくなります。ただ、しばらく使っていると、必ず同じ壁にぶつかります。
毎回、同じ情報を打ち直していることに気づくはずです。
案件が変わるたびに、クライアントの業種と規模を書き直す。自分の得意な構成のパターンを、毎回一から説明し直す。前回いい答えが出たプロンプトを探して、また貼る。「自分でできないこと」の欄を、毎回同じ内容で埋める。
そして、いちばん引っかかるのはここです。コードを貼り付けて動かすことはできても、「自分の仕事に合わせた道具」を作ることはできない。
これは、あなたの実力が足りないからではありません。ブラウザのチャット画面という道具の限界です。
ここから先に進む方法は、実はひとつだけです。
自分専用の道具を、自分で作ってしまうこと。
たとえば、こういうものです。
- 業種と規模を選ぶだけで、自分のやり方に沿った構成案が出てくる、自分だけのツール
- ヒアリングシートに入力すると、見積もりと提案書が両方できあがる仕組み
- 納品したサイトの更新状況を一覧で確認できる、保守用の小さな画面
「それってプログラマーの話でしょう」と思われたかもしれません。数年前まではそうでした。
いまは、日本語で「こういうものを作りたい」と伝えるだけで、AIがコードを書いて動くものにしてくれます。Claude Code というツールを使えば、プログラムを書けなくても、自分の仕事に合わせた道具を自分で作れます。
そして——Web制作をやっている方は、実はかなり有利です。
ドメインを取ったことがある。サーバーにファイルを上げたことがある。HTMLとCSSがどういうものか、なんとなく分かる。フォルダとファイルの構造に慣れている。まったくの未経験者が数か月かけて越える段差を、あなたはもう越えています。
だから、結果が出るのが早いです。 同じ手順で次の案件にも展開できます。
- コーディングを外注していた部分を、自分の中に取り戻せます
- 「サイトを作る人」から「その会社の仕組みを作る人」に変わると、単価が変わります
- 「WordPressでは難しいですね」と断っていた相談を、受けられるようになります
- 保守や運用の相談が、継続的な仕事になります
クロラボは、プログラミング未経験の人が、Claude Code で自分のオリジナルアプリを作れるようになるためのスクールです。
「非エンジニア向け」と書いているのは、それくらい初心者の方を想定しているという意味です。すでにコードを書いて仕事をしている方には物足りない内容です。逆に、「サイトは作れるけれど、プログラムは書けない」という方には、ちょうどいい段差になっているはずです。
会社の業務改善に使っている方もいますが、いまは「個人が自分の武器を持つ」ことをベースにしています。
プロンプトをコピーして使う段階は、入り口としてはとても良いです。ただ、そこで止まってしまうと、来年も同じように検索してコードを貼り続けることになります。
自分の道具を、自分で作れる側に回ってみませんか。