Web制作・副業が捗るChatGPTプロンプト集｜提案・記事・コードのコピペ例30

生徒

ChatGPTを仕事に使いたいんですけど、いざ開くと何を書けばいいか分からなくて…。提案文とか記事とか、そのまま使えるプロンプトが欲しいです。

ペン博士

いい狙いだね！この記事ではWeb制作と副業の実務フローに沿って、コピペしてすぐ使えるプロンプトを30個そろえたよ。提案からコード、リライトまで、現場で本当に効くやつだけを厳選したから、順番に自分の案件に当てはめていこう！

「ChatGPTが便利なのは分かるけれど、実際の仕事のどこにどう使えばいいのか分からない」——Web制作や副業を始めたばかりの方から、WithCode編集部が最もよく受ける相談のひとつです。ツール自体はすでに手元にあるのに、いざ入力欄を前にすると手が止まってしまう。これは「良いプロンプト（指示文）の型」を持っていないことが原因であることがほとんどです。

逆に言えば、実務でそのまま使えるプロンプトの引き出しさえ増えれば、提案文づくり・ヒアリングの整理・記事の下書き・SEOのメタ情報・コードの生成やレビューといった「時間がかかるのに毎回ゼロから考えている作業」を、一気に短縮できます。この記事では、Web制作・副業の実務フローの順番に沿って、コピペしてすぐ使えるChatGPTプロンプトを30例まとめました。

単なるコピペ集で終わらせないために、それぞれのプロンプトについて「どこをどう書き換えれば自分の案件に合うか」というカスタムのコツ、そして最も重要なAIの出力を人がどう検証するかという観点までセットで解説します。著作権や機密情報の扱いなど、仕事で使うからこそ外せない注意点も後半でまとめています。

先に、この記事の結論をまとめます。

• ChatGPTのプロンプトは役割・前提・出力形式・制約の4点をそろえるだけで、出力の質が大きく変わる
• 提案・企画・記事・SEO・コーディングという実務フローごとに、使い回せる型を持つのが効率化の近道
• AIの出力は必ず人が検証する。とくにコード・数値・固有名詞・法律や料金に関わる記述はそのまま使わない
• クライアントの氏名・住所・未公開情報・パスワードなどの機密は、プロンプトに貼らないのが原則
• この記事の30個は、【　】の変数部分を自分の案件に置き換えるだけで動くように設計している

まず前提：質の高い出力を引き出すプロンプトの型

個別のプロンプトを見る前に、共通する「土台の考え方」を押さえておきましょう。ここを理解しておくと、この記事の30個を丸暗記しなくても、自分で無限にプロンプトを作れるようになります。ChatGPTから質の高い出力を引き出すプロンプトは、次の4つの要素で構成されています。

この記事のプロンプトは、すべてこの4要素を意識して作っています。うまくいかないときは、この4つのうちどれかが足りていないか、曖昧すぎないかを疑ってみてください。とくに「前提・文脈」が薄いと、当たり障りのない一般論しか返ってこなくなります。

変数【　】の使い方

この記事では、あなたが自分の案件に合わせて書き換える部分を【　】（すみつきカッコ）で示しています。たとえば【業種】や【サービス名】の部分を実際の値に置き換えてから、ChatGPTに貼り付けてください。プロンプト本体はコピペブロックにまとめてあるので、右上のコピーからそのまま使えます。

あなたは【立場・役割】です。
以下の前提をふまえて、【やってほしいこと】をしてください。

# 前提
- 対象: 【誰に向けたものか】
- 目的: 【何のためか】
- 補足情報: 【あれば箇条書きで】

# 出力形式
- 【表／箇条書き／文章 など】
- 【文字数や個数の指定】

# 制約
- 【文体・トーン・避けてほしいこと】

この4ブロック（役割／前提／出力形式／制約）を意識するだけで、同じChatGPTでも出力の精度は目に見えて上がります。まずはこの型を体に入れましょう。

初心者がやりがちなプロンプトの失敗と回避策

プロンプトがうまくいかないときのパターンは、実はほぼ決まっています。編集部が初心者の質問を見てきたなかで、頻出する失敗と、その回避策を表にまとめました。「思ったような答えが返ってこない」と感じたら、まずこの表と照らし合わせてみてください。

とくに多いのが、1番目と4番目です。前提が薄いと出力は一般論になり、制約がないとAIは「それっぽさ」を優先して事実を盛ってしまいます。この記事の30プロンプトは、いずれもこの失敗を避ける形で設計してあるので、書き換えるのは【　】の中身だけにとどめ、構造はそのまま使うのが安全です。

① クライアント対応で使えるプロンプト（提案・見積・ヒアリング・返信）

副業でもフリーランスでも、案件の入り口はクライアントとのやり取りです。ここでの言葉づかいや提案の説得力が、受注できるかどうかを大きく左右します。とはいえ提案文やメールの文面を毎回ゼロから考えるのは大きな負担です。ChatGPTを「たたき台を高速で作る相棒」として使うと、考える時間を「文章を書く時間」ではなく「戦略を練る時間」に回せるようになります。

プロンプト01｜提案文（初回アプローチ）の下書き

クラウドソーシングや問い合わせフォームからの初回提案は、テンプレっぽさが出ると即座に埋もれます。相手の課題に触れた「あなた向けの提案」に見せることが重要です。次のプロンプトでは、案件情報を渡して提案文のたたき台を作らせます。

あなたはWeb制作を専門とするフリーランスです。
以下の案件に応募するための提案文を作成してください。

# 案件情報
- 業種: 【例：美容室】
- 相手の悩み: 【例：予約が電話のみで取りこぼしが多い】
- 依頼内容: 【例：予約フォーム付きのコーポレートサイト制作】
- 予算: 【例：30万円前後】
- 自分の強み: 【例：飲食・美容系の制作実績が3件】

# 出力形式
- 400〜500字
- 冒頭で相手の悩みに触れ、次に解決策、最後に自分を選ぶ理由の順

# 制約
- 丁寧語。過度にへりくだらない
- 具体的な数字や手順を1つ以上入れる
- テンプレート感が出る決まり文句は避ける

出力された提案文は、そのまま送らずに「自分の実績・料金・納期」の部分だけは必ず事実で上書きしてください。AIは実績を推測で盛ってしまうことがあるためです。また、相手の悩みへの共感部分は、案件文に書かれていた具体的な言葉を1つ引用して差し込むと、一気に「読んでくれている感」が出ます。

編集部の経験上、提案文で差がつくのは「冒頭の一文」です。多くの応募者が自己紹介から入るなか、相手の課題に最初に触れるだけで、読まれる確率がぐっと上がります。AIに提案文を作らせるときも、冒頭を「私は〜です」で始めさせず、「〜というお悩み、拝見しました」のように相手起点で始めるよう指示するのがコツです。プロンプト内の「冒頭で相手の悩みに触れ」という一文が、まさにこの役割を果たしています。

プロンプト02｜見積の根拠を言語化する

「なぜこの金額なのか」を説明できないと、値切り交渉で押し切られたり、逆に安く見積もりすぎて疲弊したりします。見積の内訳と根拠を言葉にするのは、ChatGPTが得意な作業のひとつです。

あなたはWeb制作の見積を作るフリーランスです。
以下の制作内容について、見積の内訳と、各項目の金額の根拠を説明する文章を作ってください。

# 制作内容
- ページ数: 【例：トップ＋下層4ページ】
- 主な機能: 【例：お問い合わせフォーム、Googleマップ、スマホ対応】
- 素材: 【例：写真は支給、文章はこちらで作成】
- 想定合計金額: 【例：25万円】

# 出力形式
- 表（項目 / 金額 / 根拠となる作業内容）
- 表の下に、クライアントに口頭で説明するときの一言コメントを添える

# 制約
- 相手が非エンジニアでも分かる言葉で
- 「デザイン費」など曖昧な項目は、何をする費用か具体化する

金額そのものはAIに決めさせないのがコツです。自分で決めた金額の「根拠づけ」と「説明の言語化」にAIを使うと、交渉に強くなります。

副業を始めたばかりの人ほど、見積の説明が苦手で「相場より安く出してしまう」傾向があります。しかし、内訳と根拠を丁寧に言語化できると、同じ金額でもクライアントの納得感がまったく変わります。たとえば「デザイン費5万円」とだけ書くより、「ワイヤーフレーム作成・トップページのデザイン・スマホ最適化を含む」と分解して見せたほうが、作業の価値が伝わり、値切りの余地も減ります。この「分解して見せる」作業は、まさにAIが得意とするところです。

プロンプト03｜ヒアリング項目を洗い出す

初回打ち合わせで聞き漏らすと、後から仕様変更が発生して工数が膨らみます。業種や依頼内容に合わせたヒアリングシートをAIに作らせておくと、打ち合わせの質が安定します。

あなたはWeb制作の要件定義を担当するディレクターです。
【業種：例 歯科医院】のコーポレートサイトを制作するにあたり、
初回打ち合わせで聞くべきヒアリング項目を洗い出してください。

# 出力形式
- カテゴリ別（目的・ターゲット・掲載内容・デザイン・機能・運用・スケジュール・予算）に分ける
- 各カテゴリに質問を3〜5個
- 質問の横に「なぜ聞くのか」を一言添える

# 制約
- クライアントが答えやすい、具体的な聞き方にする
- 専門用語には短い補足をつける

このプロンプトの【業種】を差し替えるだけで、案件ごとのヒアリングシートが数秒で用意できます。出力をそのままGoogleドキュメントに貼り、打ち合わせ中はチェックリストとして使うと聞き漏らしが激減します。

ヒアリングで見落としがちなのが「運用」と「スケジュール」です。作る段階の話は盛り上がりやすい一方、「公開後に誰が更新するのか」「いつまでに公開したいのか」は後回しにされがちで、ここが曖昧なまま進むと、納品直前に「やっぱり自分で更新できるようにしたい」といった大きな仕様変更が発生します。AIに作らせたヒアリング項目に、これらのカテゴリが含まれているかを必ず確認し、抜けていれば自分で追加してください。ヒアリングの質は、後工程の手戻りを直接左右します。

プロンプト04｜納品後・修正依頼への返信文

「ここも直してほしい」という追加依頼が、当初の見積範囲を超えていることは珍しくありません。関係を壊さずに、しかし追加費用や別途対応であることを伝える——この匙加減の難しい返信もAIが助けてくれます。

あなたはクライアント対応が丁寧なWeb制作フリーランスです。
以下の状況で、クライアントへの返信メールを作成してください。

# 状況
- 当初の契約: 【例：5ページの制作】
- 追加の依頼: 【例：ブログ機能の追加】
- 伝えたいこと: 【例：対応可能だが別途見積が必要】

# 出力形式
- メール本文（件名も含む）
- 200〜300字

# 制約
- 感謝→現状の確認→追加対応の提案、の流れ
- 断っている印象を与えず、前向きな言葉で
- 金額は入れず、「別途お見積り」とする

AIが作った返信文は、送信前に相手の名前・案件名・具体的な日付を必ず自分で入れましょう。汎用的に作られているため、固有情報が抜けたまま送ると、かえって事務的な印象になります。

クライアント対応でAIが本当にありがたいのは、「言いにくいことを、角を立てずに伝える」場面です。追加費用の相談、納期の延長のお願い、認識のズレの指摘——こうしたメールは、初心者だと言葉選びに悩んで何時間もかかることがあります。AIに「前向きな言い方で」「感謝から始めて」と指示すると、感情的にならず、しかし言うべきことは伝わる文面のたたき台が一瞬で手に入ります。そこに自分の言葉で温度を足せば、関係を保ったまま必要な交渉ができます。コミュニケーションの型を持っておくことは、技術力と同じくらい、案件を続けるうえで大切です。

② 企画・設計で使えるプロンプト（サイト構成・要件・キャッチコピー）

受注が決まったら、次はサイトの骨組みを考えるフェーズです。サイトマップ・ワイヤーフレームの要件・キャッチコピーといった「設計の言語化」は、経験が浅いと時間がかかりがちですが、ここもAIとの相性が抜群です。ゼロから考えるのではなく、AIのたたき台を叩いて磨くという進め方に切り替えると、設計の質もスピードも上がります。

プロンプト05｜サイト全体の構成（サイトマップ）案

どんなページが必要か、階層はどうするか。業種と目的を渡すと、標準的なサイト構成を提案してくれます。これをベースにクライアントと「このページは要る／要らない」を詰めていくと、要件が固まりやすくなります。

あなたは情報設計（IA）に強いWebディレクターです。
以下の条件で、サイトの構成案（サイトマップ）を提案してください。

# 条件
- 業種: 【例：工務店】
- サイトの目的: 【例：施工事例で信頼を得て問い合わせにつなげる】
- ターゲット: 【例：注文住宅を検討する30〜40代】

# 出力形式
- 第1階層／第2階層の入れ子リスト
- 各ページに「そのページの目的」を一言添える

# 制約
- 目的に対して不要なページは入れない
- 問い合わせへの導線が自然になる構成にする

出力されたサイトマップは、あくまで一般的なパターンです。クライアント固有の「載せたい情報」があるはずなので、ヒアリング結果（プロンプト03）と突き合わせて、過不足を調整してください。

サイトマップづくりでAIが特に役立つのは、「この業種なら普通どんなページがあるか」という業界の相場観を素早く得られる点です。たとえば工務店なら『施工事例』『会社概要』『スタッフ紹介』『お客様の声』といった定番ページを提示してくれます。初心者は、そもそもどんなページが必要かの引き出しが少ないため、この「定番の型」を先に押さえられると、クライアントとの打ち合わせで的外れな提案をせずに済みます。そのうえで、そのクライアントならではの強み（自社工場がある、女性設計士がいる等）を活かすページを足していくのが、良い設計の進め方です。

プロンプト06｜ワイヤーフレームの要件を言葉にする

デザインツールでワイヤーを引く前に、「各セクションに何を置くか」を言葉で決めておくと、手戻りが減ります。とくにトップページのファーストビューは、成果を左右する重要パートです。

あなたはUXを重視するWebデザイナーです。
【業種：例 オンラインヨガ教室】のトップページについて、
上から順に並べるべきセクション構成と、各セクションに入れる要素を提案してください。

# 前提
- サイトの目的: 【例：無料体験の申し込み】
- ターゲット: 【例：運動不足を感じる在宅ワーカー】

# 出力形式
- セクションを上から順に番号付きで
- 各セクションに「見出しの例」と「入れる要素」を記載

# 制約
- ファーストビューで価値と行動喚起が伝わる構成にする
- 申し込みボタンをどこに置くか明記する

ワイヤーは「見た目」より「情報の順番と優先度」が本質です。AIに順番のたたき台を作らせ、そこに自分の判断を上乗せすると、説得力のある設計になります。

プロンプト07｜キャッチコピーを量産して選ぶ

キャッチコピーは、1つだけ考えると煮詰まります。AIに大量に出させて、その中から光るものを選び、自分で磨くのが効率的です。

あなたはコピーライターです。
以下のサービスのキャッチコピーを10案、方向性を変えて出してください。

# サービス
- 内容: 【例：初心者向けオンラインプログラミング教室】
- 強み: 【例：現役エンジニアの個別サポート】
- ターゲット: 【例：未経験から副業を目指す社会人】

# 出力形式
- 10案を箇条書き
- 各案に「どんな感情に訴えるか」を一言添える

# 制約
- ありきたりな表現（『あなたの夢を叶える』等）は避ける
- 具体的なベネフィットが伝わる言葉を優先する

コピーは、そのまま採用するより「良い言い回しの部品を集める」感覚で使うのがおすすめです。A案の前半とC案の後半を組み合わせる、といった編集を自分で加えると、オリジナリティのある一本になります。

キャッチコピーづくりでAIが本当に役立つのは、「自分の頭では出てこない切り口」を見せてくれる点です。一人で考えると、どうしても似たような表現ばかりになりがちですが、「10案、方向性を変えて」と指示すると、ベネフィット訴求・不安の解消・数字の提示・問いかけ型など、バリエーション豊かな案が並びます。そのなかから「これは思いつかなかった」という切り口を拾い、自分の言葉で磨く。この発想を広げる壁打ち相手としての使い方こそ、AIコピーの真価です。ただし、事実と異なる誇大なコピー（『業界No.1』など根拠のないもの）は、景品表示法などに触れる恐れがあるため、必ず裏付けを確認してから使ってください。

③ ブログ・記事づくりで使えるプロンプト（構成・執筆・リライト・タイトル）

オウンドメディアやブログ記事の受注は、副業でも定番の案件です。記事づくりは「構成→執筆→リライト→タイトル」という工程に分かれており、それぞれにAIを差し込むと、品質を落とさずに制作スピードを上げられます。ただしAIが書いた文章をそのまま納品するのは危険です。この点は後半のFAQでも詳しく触れます。

プロンプト08｜記事の構成案（見出し）を作る

記事の質は構成でほぼ決まります。キーワードと読者像を渡して、検索意図を満たす見出し構成を作らせましょう。

あなたはSEOに強いWeb編集者です。
以下のテーマで、検索上位を狙える記事の構成案（見出し）を作ってください。

# テーマ
- キーワード: 【例：観葉植物 初心者 育て方】
- 読者: 【例：初めて観葉植物を買った20〜30代】
- 読者が知りたいこと: 【例：枯らさない水やりと置き場所】

# 出力形式
- h2とh3の入れ子構成
- 各h2に、そこで書くべき内容を一言添える

# 制約
- 読者の疑問に答える順番に並べる
- 網羅性を意識しつつ、話が重複しないようにする

出力された構成は、実際に検索して上位記事と見比べてください。AIは「一般的にありそうな構成」を出すのが得意ですが、その分野の最新事情や一次情報が抜けることがあります。競合が触れていて自分の構成にない論点は、追加する価値が高いです。

記事制作で成果を分けるのは、この構成段階での「読者の疑問を並べる順番」です。検索してきた読者は、頭のなかに疑問を順番に持っています。たとえば『観葉植物 初心者 育て方』で検索する人は、「どれを買えばいい？→水やりは？→置き場所は？→枯れたらどうする？」という流れで知りたいはずです。AIの出した構成が、この読者の思考の順番に沿っているかを必ずチェックしてください。順番がちぐはぐだと、いくら内容が正しくても読者は途中で離脱します。編集部では、構成案を作ったら一度「自分が検索者になったつもりで上から読む」検証を必ず入れています。

プロンプト09｜見出しに沿って本文を執筆する

構成が固まったら、見出しごとに本文を書かせます。記事全体を一度に書かせるより、セクション単位で指示したほうが密度の高い文章になります。

あなたは分かりやすい解説が得意なWebライターです。
以下の見出しの本文を書いてください。

# 見出し
「【例：観葉植物の水やりの頻度と見極め方】」

# 前提
- 読者: 【例：初心者】
- 記事全体のトーン: 【例：やさしい先輩が教える口調】

# 出力形式
- 500〜700字
- 最初に結論、次に理由と具体例

# 制約
- 専門用語には短い補足をつける
- 断定できない部分は言い切らず、条件を添える
- 誇張・根拠のない数字は書かない

「誇張・根拠のない数字は書かない」という一文を入れておくと、AIが得意な「それっぽい数字の捏造」をかなり抑えられます。事実確認の手間が減る、実用的なひと工夫です。

本文執筆でAIを使うときの落とし穴が、この「もっともらしい嘘」です。AIは「約7割の人が〜」「一般的には〜と言われています」といった、根拠のなさそうな一般論や数字を、さも事実のように書いてしまうことがあります。記事は公開されれば読者が信じますし、誤情報を載せればメディアの信頼を失います。だからこそ、本文を書かせた後は数字・統計・断定的な主張を一つずつチェックし、裏の取れないものは削るか、条件付きの表現に直してください。編集部では、AIが出した文章に含まれる「数字」には、必ず黄色いマーカーを引いて確認する運用にしています。

プロンプト10｜既存の文章をリライトする

自分やクライアントが書いた原稿を、読みやすく整えるのもAIの得意分野です。「何を残し、何を変えるか」を指定するのがポイントです。

あなたは編集者です。
以下の文章を、意味を変えずに読みやすくリライトしてください。

# 元の文章
「【ここにリライトしたい文章を貼る】」

# 出力形式
- リライト後の文章
- その下に「どこをなぜ直したか」を3点

# 制約
- 一文を短くし、主語と述語を明確にする
- 事実関係は変えない
- 元の文章にない情報を足さない

「元の文章にない情報を足さない」という制約は必須です。これを書かないと、AIが親切心で勝手に事実を追加してしまい、リライトのはずが内容の改変になってしまうことがあります。

リライトは、既存記事のSEOテコ入れや、クライアントの書いた原稿の整えなど、実務で登場する頻度がとても高い作業です。AIは、一文が長くて読みにくい文章を短く区切ったり、回りくどい言い回しを簡潔にしたりするのが得意です。ただし注意したいのは、リライトのつもりが「別の記事」になってしまうケース。とくにクライアントの原稿を扱うときは、書き手の意図やニュアンスを勝手に変えないよう、「意味・事実・主張は変えず、読みやすさだけ整える」と明確に指示してください。リライト後は、元の文章と並べて、言いたいことがズレていないかを必ず見比べる習慣をつけましょう。

プロンプト11｜クリックされるタイトル案を作る

記事タイトルは、クリック率と検索順位の両方に影響します。複数案を出させて、その中から選び、自分で微調整するのが王道です。

あなたはSEOとコピーの両方に詳しい編集者です。
以下の記事のタイトル案を10個出してください。

# 記事の内容
- テーマ: 【例：初心者向けの観葉植物の育て方】
- 狙うキーワード: 【例：観葉植物 初心者】

# 出力形式
- 10案を箇条書き
- 各案に、含めた狙い（数字/ベネフィット/悩み訴求など）を一言

# 制約
- 32文字前後に収める
- キーワードを前半に入れる
- 煽りすぎ・誇大表現は避ける

タイトルは、キーワードを前半に置くと検索結果で見やすくなります。AIの案の中から「キーワードの位置」と「クリックしたくなる要素」のバランスが良いものを選び、自分のメディアのトーンに合わせて言葉を整えましょう。

④ SEO対策で使えるプロンプト（メタディスクリプション・alt・キーワード整理）

SEOは地味な作業の積み重ねです。メタディスクリプション、画像のalt属性、キーワードの整理といった「効果はあるが手間がかかる」タスクこそ、AIに任せると効率が跳ね上がります。ただしAIはあなたのサイトの実際の中身を見ていないため、出力は必ずページの実態と照らし合わせて確認します。

プロンプト12｜メタディスクリプションを作る

検索結果に表示される説明文（メタディスクリプション）は、クリック率に直結します。記事の要点とキーワードを渡して、規定文字数で作らせましょう。

あなたはSEOライターです。
以下の記事のメタディスクリプションを作ってください。

# 記事の内容
- テーマ: 【例：CSSボタンのデザイン集】
- 狙うキーワード: 【例：CSS ボタン おしゃれ】
- 読者が得られること: 【例：コピペで使える見本30種】

# 出力形式
- 3案
- 各案は全角120文字前後

# 制約
- キーワードを自然に含める
- クリックしたくなるベネフィットを入れる
- 記事にない内容は書かない

文字数は媒体によって最適値が変わりますが、スマホでの表示を考えると全角120文字前後が無難です。AIが出した案は、実際の記事内容と食い違っていないか（＝誇大になっていないか）を必ず確認してください。

メタディスクリプションで初心者がやりがちなのが、「記事にない魅力的なこと」を書いてしまうことです。クリック率を上げたい一心で「完全無料テンプレ配布中！」などと書いても、記事内にそれがなければ、読者はがっかりして即座に離脱します。この「期待と中身のズレ」は、検索エンジンからの評価も下げるため、AIの出力が記事の実態に沿っているかは、必ず自分の目で確認してください。書いてよいのは「記事を読めば得られること」だけ、と覚えておきましょう。

プロンプト13｜画像のalt属性を考える

alt属性は、画像が表示されない時の代替テキストであり、アクセシビリティとSEOの両面で重要です。画像の内容と文脈を伝えて、適切なalt文を作らせます。

あなたはアクセシビリティに配慮するWeb制作者です。
以下の画像に付けるalt属性のテキストを提案してください。

# 画像の情報
- 何が写っているか: 【例：ノートパソコンでコードを書く手元】
- 使う場所: 【例：プログラミング学習の記事の冒頭】

# 出力形式
- alt文の案を3つ
- 各案の長さを変える（簡潔／標準／やや詳しめ）

# 制約
- 画像の内容を客観的に説明する
- 「〜の画像」という語尾は付けない
- キーワードの詰め込みはしない

altは「キーワードを詰める場所」ではなく「画像の内容を伝える場所」です。SEO目的で無関係な語を入れると逆効果になるので、AIにも客観的な説明を依頼しましょう。

alt属性は、目の見えない人がスクリーンリーダーで画像の内容を知るための大切な情報でもあります。つまりSEOだけでなく、アクセシビリティ（誰もが使えること）の観点からも重要なのです。初心者はalt属性を空欄のまま放置しがちですが、画像1枚ずつに適切な説明を付けるのは、慣れないうちは意外と手間がかかります。AIに複数案を出させて、画像の役割（装飾なのか、内容を伝えるものなのか）に応じて選ぶと、作業がぐっと楽になります。なお、純粋な装飾画像はalt属性を空にするのが適切な場合もあるので、「この画像は何のために置いているのか」を意識して判断してください。

プロンプト14｜関連キーワードを洗い出して整理する

1つの記事で拾うべき関連語・共起語を洗い出しておくと、網羅性の高い記事になります。メインキーワードを渡して、関連キーワードをカテゴリ別に整理させます。

あなたはSEOのキーワード設計を担当する専門家です。
メインキーワード「【例：副業 プログラミング】」に対して、
記事内で触れると良い関連キーワードを洗い出してください。

# 出力形式
- カテゴリ別（悩み系／方法系／比較系／不安系 など）に分ける
- 各カテゴリに5〜8語
- 検索意図が近いものをグルーピングする

# 制約
- 実在しそうにない不自然な語は出さない
- あくまで候補であり、需要は別途確認が必要だと明記する

重要なのは、AIが出したキーワードには実際の検索需要データが伴っていないという点です。AIの出力は「アイデアの種」として使い、実際に記事へ入れるかどうかは、キーワードツールや実際の検索結果を見て判断してください。

とはいえ、この「関連キーワードの洗い出し」は、記事の網羅性を高めるうえで非常に役立ちます。検索してくる読者は、メインキーワードの背後にさまざまな悩みや疑問を抱えています。『副業 プログラミング』で検索する人なら、「未経験でもできる？」「どれくらい稼げる？」「本業にバレない？」といった不安を持っているはずです。こうした読者の隠れた疑問をAIに列挙させ、それぞれに記事内で答えていくと、一つのキーワードで幅広い検索意図をカバーできる、質の高い記事になります。AIをキーワード発想の壁打ち相手として使い、需要の裏取りは自分で行う——この分業が実務では効きます。

⑤ コーディングで使えるプロンプト（HTML/CSS/JS生成・レビュー・バグ調査・命名）

ここからは、AIの真骨頂ともいえるコーディング支援です。HTMLやCSS、JavaScriptの生成はもちろん、書いたコードのレビュー、エラーの原因調査、リファクタリング、命名の相談まで、AIはペアプログラミングの相棒として非常に優秀です。ただし生成されたコードは必ず自分の目と手元の環境で検証する——これはコーディングにおける絶対のルールです。

プロンプト15｜要件からHTML/CSSを生成する

作りたいパーツの要件を具体的に伝えると、HTMLとCSSをまとめて生成してくれます。レスポンシブやアクセシビリティの要件も、最初に指定しておきましょう。

あなたはWeb制作の実務経験が豊富なフロントエンドエンジニアです。
以下の要件で、HTMLとCSSを書いてください。

# 作りたいもの
- 内容: 【例：料金プランを3つ横並びで比較するカード】
- 各カードの要素: 【例：プラン名・料金・特徴3つ・申込ボタン】

# 要件
- スマホ（600px以下）では縦積みにする
- CSSは外部ファイル前提でクラス設計する
- 色は指定しやすいようCSS変数でまとめる

# 出力形式
- HTMLとCSSを分けて提示
- 各ブロックに、何をしているか短いコメントを入れる

# 制約
- 冗長なコードは避け、初心者が読める範囲にする

コーディングでAIを使うときの最大のメリットは、「ゼロからタイピングする時間」を「読んで直す時間」に変えられることです。とくにレスポンシブ対応やベンダープレフィックスのような定型作業は、AIが一瞬で書いてくれます。一方で、AIはあなたのプロジェクトの既存ルールを知りません。だからこそ、生成されたコードは「そのまま使う素材」ではなく「土台の下書き」と捉え、自分の環境に合わせて仕上げる工程を必ず挟みます。

生成されたコードは、次のような観点で必ず自分の手で直します。

• クラス名が案件のルールに合っているか（プロジェクト固有の命名規則に合わせる）
• 余白や色が既存のデザインと揃っているか
• スマホ表示で本当に崩れないか（実機・検証ツールで確認）
• 不要なコードや、意図の分からない指定が混ざっていないか

参考までに、AIが生成しがちなカードのCSS構造を、変数でまとめた例を示します。こうした「土台」を受け取り、色や余白を自分の案件に合わせて調整していくイメージです。

.pricing-card {
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --accent: #2563eb;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 24px;
}
.pricing-card .price {
  color: var(--accent);
  font-size: 32px;
  font-weight: 700;
}
@media (max-width: 600px) {
  .pricing-wrap {
    flex-direction: column; /* スマホでは縦積み */
  }
}

プロンプト16｜JavaScriptで動きを付ける

ハンバーガーメニューやタブ切り替えなど、よくある動きはAIに任せると速いです。「どんな時に何が起きるか」を日本語で明確に伝えるのがコツです。JavaScriptは、HTMLやCSSに比べて初心者がつまずきやすい分野ですが、「よくある動き」に関しては、世の中に大量のサンプルがあるため、AIも精度高く生成できます。逆に、複雑な独自ロジックや、外部サービスと連携する処理になるほど、AIの出力をそのまま信じるのは危険になります。まずは定番の動きから任せていくのがおすすめです。

あなたはバニラJavaScriptに詳しいフロントエンドエンジニアです。
以下の動きを実装するJavaScriptを書いてください。

# 実装したい動き
- 【例：ボタンを押すとメニューが開閉する（ハンバーガーメニュー）】
- 【例：メニューが開いている時にもう一度押すと閉じる】

# 前提
- jQueryは使わない（バニラJS）
- HTMLのボタンには id="menu-btn"、メニューには id="menu" が付いている

# 出力形式
- コードと、動作の流れの短い説明

# 制約
- アクセシビリティのため aria-expanded を切り替える
- コードにコメントを入れる

JavaScriptは、コピペしただけでは動かないことがよくあります。AIが前提としたidやクラス名が、自分のHTMLと一致しているかを必ず確認してください。生成されたコードの一例が次のようなものです。前提のズレがないか照合するイメージを持ってください。

const btn = document.getElementById('menu-btn');
const menu = document.getElementById('menu');

btn.addEventListener('click', () => {
  const isOpen = menu.classList.toggle('is-open');
  // 開閉状態を支援技術に伝える
  btn.setAttribute('aria-expanded', isOpen);
});

この例ではmenu-btnとmenuというidを前提にしています。自分のHTMLで別のidやクラスを使っているなら、コードのほうを書き換えるか、AIに「HTMLはこうです」と実際のマークアップを見せて作り直させます。初心者がJavaScriptのコピペでつまずく原因の大半は、この「HTMLとJSの名前のズレ」です。動かないときは、まずブラウザの開発者ツール（F12）のコンソールにエラーが出ていないかを確認する癖をつけましょう。「〜is null」というエラーは、指定した要素が見つかっていないサインです。

プロンプト17｜自分のコードをレビューしてもらう

書いたコードをAIにレビューさせると、自分では気づかない改善点が見つかります。「何を見てほしいか」を指定すると、的を射た指摘が返ってきます。

あなたはコードレビューが得意なシニアエンジニアです。
以下のコードをレビューしてください。

# 見てほしい観点
- 可読性（変数名・構造）
- 保守性（重複や無駄がないか）
- アクセシビリティ上の問題

# コード
```
【ここに自分のコードを貼る】
```

# 出力形式
- 指摘を「重要度：高/中/低」に分けて箇条書き
- 各指摘に、修正例を添える

# 制約
- なぜ直すべきかの理由も説明する

レビューは「修正例」まで出させると、そのまま学びになります。指摘の理由を理解しながら直すことで、次からAIに頼らずに書けるコードが増えていきます。

コードレビューは、独学の副業エンジニアにとって特に価値が高い使い方です。会社に所属していれば先輩がコードを見てくれますが、一人で作業していると「このコードで本当にいいのか」を確かめる相手がいません。AIに観点を指定してレビューさせれば、可読性・保守性・アクセシビリティといった実務で問われるポイントを、自分の書いたコードで具体的に学べます。ただし、AIの指摘がすべて正しいとは限りません。「なぜそう直すべきか」の理由に納得できないときは、鵜呑みにせず、公式ドキュメントや別の情報源で裏を取る——この姿勢が、AIに使われるのではなく使いこなす分かれ目になります。

プロンプト18｜エラー・バグの原因を調査する

エラーメッセージやうまく動かないコードを貼って、原因を一緒に探ってもらいます。「何を期待して、実際どうなったか」をセットで伝えるのが、早く解決するコツです。

あなたはデバッグに強いエンジニアです。
以下のコードが期待通りに動きません。原因と修正方法を教えてください。

# 期待する動作
- 【例：ボタンを押すと数字が1増える】

# 実際の動作
- 【例：押しても数字が変わらない／コンソールにエラーが出る】

# エラーメッセージ（あれば）
- 【例：Uncaught TypeError: ...】

# コード
```
【ここにコードを貼る】
```

# 出力形式
- 原因の説明
- 修正後のコード
- 同じミスを防ぐためのポイント

AIが提示した修正案は、必ず自分の環境で動かして確認してください。エラーメッセージの一部を貼るだけでも精度は上がりますが、機密情報（APIキーやパスワード）がエラーログに混ざっている場合は、その部分を伏せてから貼ることを忘れないでください。

デバッグでAIを使うときのコツは、「期待する動作」「実際の動作」「エラーメッセージ」の3点セットで渡すことです。初心者は「動きません、直してください」だけで頼りがちですが、これではAIも推測でしか答えられず、的外れな修正が返ってきます。何を期待して、実際どうなったのかを言葉にする——この作業自体が、実は問題を切り分けるデバッグの基本そのものです。AIに説明しようと状況を整理しているうちに、自分で原因に気づくことも少なくありません。エラーメッセージは省略せず、可能なら全文をそのまま貼るのが、早く解決するコツです。

プロンプト19｜コードをリファクタリングする

動いてはいるけれど読みにくい、冗長になってしまったコードを整理させます。「動作は変えずに」と明記するのが最重要です。

あなたはリファクタリングが得意なエンジニアです。
以下のコードを、動作を一切変えずに読みやすく整理してください。

# コード
```
【ここにコードを貼る】
```

# 出力形式
- リファクタリング後のコード
- 変更点を「何を・なぜ」の形で箇条書き

# 制約
- 外から見た動作は完全に同じにする
- 過度に高度な書き方より、初心者にも読める書き方を優先する

リファクタリング後は、元のコードと同じ結果になるかをテストで確認します。「初心者にも読める書き方を優先」と添えないと、AIが最新の高度な構文を使いすぎて、かえってチームで保守しづらいコードになることがあります。リファクタリングは「動くコードを、より読みやすく・変更しやすくする」作業であって、「かっこよく書き直す」作業ではありません。とくに複数人で保守するコードでは、誰が読んでも分かる素直な書き方のほうが価値が高い、という点は忘れないでください。

プロンプト20｜変数・関数・クラスの命名を相談する

命名は、コードの読みやすさを大きく左右する割に、初心者が悩みやすいポイントです。役割を説明して、候補を出してもらいましょう。

あなたは命名規則に詳しいエンジニアです。
以下の役割を持つ【変数／関数／クラス】の名前の候補を出してください。

# 役割
- 【例：ユーザーがフォームを送信したかどうかを保持する真偽値】

# 前提
- 言語: 【例：JavaScript】
- 命名の慣習: 【例：キャメルケース】

# 出力形式
- 候補を5つ
- 各候補に、そう名付ける理由を一言

# 制約
- 一般的で誤解のない英単語を使う
- 真偽値は is/has などの接頭辞を検討する

命名に迷ったらAIに相談する癖をつけると、コードの読みやすさが安定します。「なぜその名前が良いか」の説明も一緒に読むと、命名のセンス自体が育ちます。

「命名なんて動けばどうでもいい」と思うかもしれませんが、実務では名前の良し悪しがコードの読みやすさを大きく左右します。たとえば真偽値の変数にflagとだけ付けると、後で読んだときに「何のフラグ？」となりますが、isSubmitted（送信済みか）なら、名前を見ただけで役割が分かります。初心者のうちは英単語のストックが少なく、命名で手が止まりがちなので、AIに「この役割ならどんな名前が適切か」を聞きながら進めると、コードの質と英語力の両方が底上げされます。慣れてくると、AIに頼らなくても自然と良い名前が浮かぶようになります。

プロンプト21｜正規表現やコマンドを作ってもらう

正規表現やターミナルのコマンドは、覚えるより「やりたいことを説明して作ってもらう」ほうが速い領域です。

あなたは正規表現とコマンドラインに詳しいエンジニアです。
以下のやりたいことを実現する【正規表現／コマンド】を作ってください。

# やりたいこと
- 【例：文章の中からメールアドレスだけを抽出したい】

# 環境
- 【例：JavaScript／macOSのターミナル など】

# 出力形式
- 完成したコード／コマンド
- 各部分が何を意味するかの分解説明

# 制約
- なぜそう書くのか、初心者にも分かるように説明する

正規表現は少しの違いで挙動が変わるため、AIの出力は必ず実際のデータで試してから使ってください。とくにファイルを削除・上書きするようなコマンドは、意味を理解せずに実行すると取り返しがつきません。

⑥ 学習・効率化で使えるプロンプト（理解・要約・タスク整理・振り返り）

AIは制作の実務だけでなく、スキルアップそのものの相棒にもなります。分からない概念の解説、長い記事の要約、タスクの整理、日々の振り返りなど、学びと段取りを効率化するプロンプトを持っておくと、成長スピードが上がります。

プロンプト22｜分からない概念を初心者向けに解説してもらう

あなたはプログラミング初心者に教えるのが得意な講師です。
「【例：非同期処理とは何か】」について、初心者にも分かるように説明してください。

# 出力形式
- 身近なたとえ話を使った説明
- 次に、Web制作の実務でどう関係するか
- 最後に、簡単なコード例

# 制約
- 専門用語を使うときは必ず補足する
- 分かった気にさせるだけの曖昧な説明は避ける

「たとえ話→実務での関係→コード例」の順で説明させると、抽象的な概念が一気に腹落ちします。分からない言葉が出てきたら、そのまま追加で質問を重ねられるのがAI学習の強みです。

従来、独学でつまずいた初心者は「分からない言葉を調べたら、その説明にまた分からない言葉が出てくる」という無限ループに陥りがちでした。AIなら「その言葉も分かりません、もっと簡単に説明してください」と何度でも聞き返せます。しかも相手は疲れたり呆れたりしません。編集部では、これを「レベルを下げてもらう」学習法と呼んでいます。「小学生にも分かるように」「料理にたとえて」といった注文をつけると、難しい概念でも驚くほど飲み込みやすくなります。ただし、たとえ話はあくまで理解の入り口です。実装で使う正確な仕様は、必ず公式ドキュメントで確認しましょう。

プロンプト23｜長い記事やドキュメントを要約する

あなたは要約が得意な編集者です。
以下の文章を、要点を落とさずに要約してください。

# 文章
「【ここに要約したい文章を貼る】」

# 出力形式
- 3行の全体要約
- その下に、重要ポイントを箇条書きで5つ

# 制約
- 元の文章にない情報は足さない
- 数字や固有名詞は正確に残す

公式ドキュメントや技術記事の要約は便利ですが、要約は理解のとっかかりと割り切りましょう。実装に関わる重要な部分は、必ず原文にあたって確認する習慣をつけてください。

長い技術記事や公式ドキュメントを前に「読む気が起きない」ときも、まず要約で全体像をつかむと、心理的なハードルが下がります。全体の地図を先に手に入れてから細部を読むと、理解のスピードが上がるからです。ただし、要約はどうしても情報が抜け落ちます。とくにコードの書き方・引数・注意事項といった実装に直結する部分は、要約だけで判断すると事故のもとです。要約で当たりをつけ、実際に手を動かす箇所は原文で確認する——この二段構えが、速さと正確さを両立させるコツです。

プロンプト24｜大きなタスクを手順に分解する

あなたはプロジェクト管理が得意なディレクターです。
「【例：初めてのポートフォリオサイトを作る】」というゴールを、
初心者が迷わず進められる手順に分解してください。

# 出力形式
- 大きなステップ（5〜7個）に分ける
- 各ステップに、具体的な作業を3つずつ
- つまずきやすいポイントを一言添える

# 制約
- 抽象的すぎず、明日から動ける粒度にする

「何から手をつければいいか分からない」状態を抜け出すのに、この分解プロンプトはとても効きます。出てきた手順をToDoリストに写せば、そのまま行動計画になります。

副業やフリーランスで挫折する人の多くは、能力がないのではなく、「やることが大きすぎて動けなくなる」パターンにはまっています。『ポートフォリオを作る』という目標は、そのままでは大きすぎて手がつきません。これを「まず1ページのプロフィールを作る」「次に制作実績を1つ載せる」というレベルまで分解できると、ようやく最初の一歩が踏み出せます。AIは、このタスクを「明日から動ける粒度」まで砕く作業がとても得意です。つまずいたら、そのステップをさらに細かく分解してもらう、という使い方も覚えておくと、行動が止まりにくくなります。

プロンプト25｜1日の作業を振り返って改善点を出す

あなたは成長を支援するコーチです。
以下の1日の作業内容をもとに、良かった点と改善点を整理してください。

# 今日やったこと
- 【例：LPのコーディング、提案文の作成、CSSの学習】
# うまくいかなかったこと
- 【例：レスポンシブ対応に時間がかかった】

# 出力形式
- 良かった点3つ
- 改善点3つと、明日の具体的な一手

# 制約
- 責めるのではなく、次につながる前向きな視点で

毎日の振り返りをAIと行うと、成長の方向性が言語化されます。とくに独学の副業では、フィードバックをくれる相手がいないことが多いので、AIを「毎日の振り返り相手」にするのは想像以上に効果があります。「今日はレスポンシブ対応に時間がかかった」という反省を渡せば、「メディアクエリの基本を先に整理しておくと速くなる」といった具体的な次の一手を返してくれます。漠然と「今日はダメだった」で終わらせず、次につながる形で言語化する——この習慣が、独学のスピードを大きく変えます。

プロンプトを自分の武器にする：カスタムのコツと出力の検証手順

ここまでの25プロンプトに加え、ここでは「使いこなし」を一段深めるための応用プロンプト5つと、AI出力を安全に扱うための検証手順を解説します。この章を押さえると、紹介したプロンプトを自分の案件に合わせて自在に改造できるようになります。

プロンプト26｜プロンプト自体をAIに改善してもらう

「思った出力にならない」ときは、プロンプトそのものをAIに直させるのが近道です。AIは、自分が理解しやすい指示の形を知っています。

あなたはプロンプト設計の専門家です。
以下のプロンプトを、より意図通りの出力が得られるように改善してください。

# 元のプロンプト
「【ここに自分のプロンプトを貼る】」

# 得たい結果
「【本当はこういう出力がほしい、を書く】」

# 出力形式
- 改善後のプロンプト
- どこをなぜ変えたかの説明

これは「AIにAIの使い方を教わる」という、少し不思議に感じるかもしれない使い方ですが、実際にとても効果的です。自分では何が悪いのか分からないプロンプトも、AIから見れば「前提が足りない」「出力形式が曖昧」といった改善点がはっきりしていることが多いのです。改善版のプロンプトと「なぜ変えたか」の説明を読むと、プロンプト設計の考え方そのものが身につき、次からは最初から良い指示が書けるようになります。

プロンプト27｜出力のトーンや文字数を後から微調整する

一度出た回答を「もっと短く」「もっとやわらかく」と調整するのも、立派な使いこなしです。追撃の指示は短くて構いません。

今の回答を、以下の条件で調整してください。
- 文字数: 【例：半分の長さに】
- トーン: 【例：もっとカジュアルに／もっとかしこまって】
- 追加: 【例：具体例を1つ足す】

最初から完璧なプロンプトを目指すより、「出させてから直す」対話のほうが、結果的に速くて質も上がります。会話できるのがAIの強みです。

初心者ほど「一発で完璧な指示を書かなければ」と気負ってしまいますが、AIは会話を続けられるツールです。まずはざっくり出させて、「ここをこう変えて」「もう少し具体的に」と注文を重ねていくほうが、結果的に早くゴールにたどり着きます。検索エンジンでは一度の入力で答えを探しますが、AIはやり取りを重ねて答えを育てるもの——この違いを理解すると、使い方が一段上手くなります。

プロンプト28｜複数の視点で検証させる

自分の企画やコードを、あえて批判的な視点でチェックさせると、抜けや穴が見つかります。

以下の【企画／文章／コード】を、3つの立場から批判的にレビューしてください。

# 対象
「【ここに対象を貼る】」

# レビューする立場
- 厳しいクライアント
- 初めて見るユーザー
- 保守を担当する別のエンジニア

# 出力形式
- 各立場からの指摘を3つずつ
- 最後に、優先して直すべき点をまとめる

自分が作ったものは、どうしても「作り手目線」で見てしまい、抜けに気づけません。そこで、あえて別の立場になりきってレビューさせると、「初めて見る人には言葉が難しすぎる」「保守する人にはコメントが足りない」といった、自分では見落としていた視点が出てきます。これは納品前のセルフチェックとして非常に有効です。とくに『厳しいクライアント』の立場でレビューさせると、実際の打ち合わせで指摘されそうな点を先回りして潰せるので、修正依頼の回数そのものを減らせます。

プロンプト29｜クライアント向けの説明に翻訳する

技術的な内容を、非エンジニアのクライアントに伝わる言葉に置き換えるのも、AIの得意技です。

あなたは技術をわかりやすく伝える翻訳者です。
以下の技術的な内容を、非エンジニアのクライアントにも伝わる説明に書き換えてください。

# 元の内容
「【例：SSL証明書を導入してhttps化する必要があります】」

# 出力形式
- クライアント向けの説明文（150字前後）
- なぜ必要かのメリットも添える

# 制約
- 専門用語をそのまま使わない
- 不安を煽らず、前向きな言い方にする

エンジニアが陥りやすいのが「専門用語のまま説明してしまう」ことです。SSL、CMS、レスポンシブといった言葉は、我々には当たり前でも、クライアントには何のことか分かりません。説明が伝わらないと「よく分からないけど、なんだか高そう」という不信につながります。AIに「非エンジニアに伝わる言葉で」と翻訳させると、相手が納得して意思決定できる説明が作れます。編集部では、提案書やメールで専門用語を使うたびに、この翻訳プロンプトを通す運用をしています。説明のうまさは、そのまま信頼と受注率につながる、地味だけれど効く武器です。

プロンプト30｜チェックリストを作らせて納品前に使う

納品前の確認を毎回思い出しでやると、抜けが出ます。案件の種類に合わせたチェックリストをAIに作らせ、テンプレートとして使い回しましょう。

あなたはWeb制作の品質管理を担当するディレクターです。
【例：コーポレートサイト】を納品する前に確認すべきチェックリストを作ってください。

# 出力形式
- カテゴリ別（表示・リンク・SEO・表示速度・スマホ対応・フォーム動作 など）
- 各カテゴリにチェック項目を3〜5個
- チェックボックス形式で

# 制約
- 実務で見落としやすい項目を優先的に入れる

納品前チェックリストは、一度作ってしまえば案件が変わっても使い回せる資産になります。経験を積むと「前回ここを見落として指摘された」という項目が増えていくので、そのたびにリストへ追記していくと、自分だけの品質基準が育ちます。AIに作らせた汎用リストをベースに、自分の失敗経験を足していく——これが、同じミスを繰り返さないための一番確実な方法です。

以上で30個のプロンプトの紹介は終わりです。どれも【　】を自分の案件に置き換えるだけで使えます。まずは今日の作業に近いものを1つ選んで、実際に試してみてください。最初は思ったような出力にならなくても、前提を足したり出力形式を指定したりと少しずつ調整すれば、必ず精度は上がっていきます。大切なのは、完璧なプロンプトを一発で書くことではなく、AIと対話しながら磨いていく姿勢です。

AI出力の検証手順（4ステップ）

プロンプトを活かすうえで最も大切なのが、この検証です。AIの出力は「よくできた下書き」であって「完成品」ではありません。次の4ステップを、あらゆる出力に対して習慣にしてください。

1. 事実確認：数字・固有名詞・料金・法律に関わる記述は、必ず一次情報で裏を取る（AIは平然と誤った事実を出すことがある）
2. 動作確認：コードは自分の環境で実際に動かす。想定通りに動くか、エラーが出ないかを目で見る
3. 文脈確認：案件やターゲットに本当に合っているか、自分の判断で読み直す。AIは前提を知らない
4. 自分の言葉に：最終的に、自分の責任で出せる状態まで手を入れる。丸ごとのコピペで納品しない

この4ステップを飛ばすと、「AIが書いたから」では済まされないトラブル——誤情報の掲載、動かないコードの納品、著作権侵害——につながります。AIは作業を速くしてくれますが、最終的な責任を持つのは常に人間です。

著作権・機密情報の注意点

仕事でAIを使うからこそ、次の点は必ず守ってください。

• 機密情報を貼らない：クライアントの氏名・住所・電話番号・未公開情報・パスワード・APIキーなどは、プロンプトに入力しない。必要なら【　】のように伏せて渡す
• 生成物の権利：AIの出力をそのまま自分の著作物として扱えるとは限らない。とくにロゴやイラストは、商用利用の可否を利用規約で確認する
• 既存物との類似：AIが既存のコードや文章に酷似したものを出すことがある。納品前に、明らかな盗用になっていないかを確認する
• サービスの規約：契約でAI利用が禁止・制限されている案件もある。使う前にクライアントの意向を確認するのが安全

「便利だから」で機密を貼ってしまうのが最も危険です。入力した情報がどう扱われるかはサービス次第なので、クライアントの情報は伏せる・持ち込まないを徹底しましょう。

コピペした後にやるべきこと

プロンプトをコピペして出力を得たら、必ず次の作業をセットで行ってください。これをやるかどうかで、AIを「仕事で使える人」と「使いこなせない人」が分かれます。

よくある質問

Q. AIが書いたコードを、そのまま納品してもいいですか？

おすすめしません。生成されたコードは「よくできた下書き」であり、そのまま動く保証はありません。必ず自分の環境で動作を確認し、案件の命名規則や既存デザインに合わせて整えたうえで、自分が責任を持てる状態にしてから納品してください。また、AIが既存コードに酷似したものを出す可能性もあるため、盗用になっていないかの確認も欠かせません。「AIが書いたから」という理由は、クライアントには通用しないと考えておきましょう。

Q. 提案文がどうしてもテンプレっぽくなってしまいます。

原因はたいてい「前提・文脈」が薄いことです。プロンプトに相手の具体的な悩みや、案件文にあった言葉を1つ以上入れてみてください。さらに、AIの出力をそのまま送らず、冒頭に相手固有の一文（見つけた課題や共感）を自分で足すと、一気に「あなた向けの提案」に見えます。テンプレ感は、汎用的な出力を無編集で使うときに最も強く出ます。

Q. AIの回答の正確性はどこまで信じていいですか？

「アイデアや文章のたたき台としては信頼できるが、事実の裏取りは必須」というのが実務での結論です。AIは、もっともらしい誤情報（ハルシネーション）を自信満々に出すことがあります。とくに数字・料金・法律・最新情報・固有名詞は、必ず一次情報で確認してください。逆に、文章の構成や言い回し、コードのたたき台といった「正解が一つでない領域」では、非常に頼りになります。

Q. クライアントの情報をプロンプトに貼ってもいいですか？

氏名・住所・電話番号・未公開の資料・パスワード・APIキーといった機密情報は、プロンプトに貼らないでください。入力した情報がどう扱われるかはサービスの規約次第であり、情報漏えいのリスクがあります。どうしても文脈が必要なら、【業種】【サービス名】のように一般化・伏字にして渡します。契約でAI利用が制限されている場合もあるため、迷ったらクライアントに確認するのが安全です。

Q. どのモデル（バージョン）を使うのがいいですか？

一般的に、無料版より有料版のほうが、長い文章の理解やコード生成の精度が高い傾向があります。ただし、この記事で紹介したような提案文・記事の下書き・要約・簡単なコードであれば、無料版でも十分に実用的です。まずは無料の範囲で使い倒し、「もっと長い文脈を扱いたい」「コードの精度を上げたい」と感じたら有料版を検討する、という順番がおすすめです。モデルは頻繁に更新されるため、最新の仕様は公式情報で確認してください。

Q. 記事やコードの生成に、画像や図も作らせられますか？

テキスト中心のChatGPTでも、図の「構成」や「説明文」は作れます（例：フローチャートの各ステップを言語化する）。画像そのものの生成は、画像生成に対応した機能やツールを使う必要があります。ただし、生成した画像を商用利用してよいかは利用規約によって異なるため、クライアントワークで使う際は必ず規約を確認し、権利関係をクリアにしてから使ってください。

Q. プロンプトを毎回書くのが面倒です。効率化できますか？

この記事のプロンプトを、よく使うものだけメモアプリやテキストファイルにまとめておくのがおすすめです。【　】の部分だけ書き換えれば使えるので、実質「穴埋め」で済みます。さらに、ChatGPTには過去のやり取りや前提を覚えさせる機能もあるので、自分の仕事のスタイル（文体・よく使う制約）を一度伝えておくと、毎回の指示を短くできます。

Q. AIに頼りすぎると、自分のスキルが伸びないのでは？

使い方次第です。出力を「丸コピー」するだけだとスキルは伸びませんが、「なぜこの出力なのか」を理解しながら使い、最後は自分で手を入れる使い方なら、むしろ学習は加速します。とくにコードレビュー（プロンプト17）や概念解説（プロンプト22）は、分からないことをその場で聞ける「家庭教師」として非常に優秀です。AIは、基礎を学ぶ意欲がある人ほど大きな武器になります。

まとめ

この記事では、Web制作・副業の実務フローに沿って、コピペしてすぐ使えるChatGPTプロンプトを30例紹介しました。クライアント対応・企画設計・記事づくり・SEO・コーディング・学習という6つの場面を、AIとの分業でどう効率化するか、具体的なプロンプトとともに見てきました。どのプロンプトも、役割・前提・出力形式・制約という4つの要素で組み立てられており、この型さえ理解すれば、自分の案件に合わせて自在に応用できます。

同時に、AIを仕事で使ううえで絶対に外せないのが検証と責任でした。AIの出力はあくまで下書きであり、事実確認・動作確認・文脈確認をして、最後は自分の言葉と判断で仕上げること。そして機密情報を貼らない、著作権を確認するといった配慮を怠らないこと。この土台があってこそ、AIは信頼できる相棒になります。

・プロンプトは4要素で作る：役割・前提・出力形式・制約をそろえれば、出力の質は劇的に上がる
・実務フローごとに型を持つ：提案・企画・記事・SEO・コード・学習で使い回すと効率が跳ね上がる
・出力は必ず人が検証：事実確認と動作確認を徹底し、機密は貼らず、最後は自分の責任で仕上げる

「プロンプトで効率化はできたけれど、AIに頼らず自分でコードを書ける力もつけたい」——そう感じたら、WithCodeで基礎から手を動かして学ぶのが一番の近道です。土台となるHTML/CSS/JavaScriptが身につけば、AIの出力を正しく検証・修正できるようになり、副業でもフリーランスでも「本当に稼げる」実力が手に入ります。

関連記事

• ChatGPT・Geminiで話題になった神プロンプト30選｜今すぐ使える実例つき
• ChatGPTとGeminiの使い分けプロンプト集｜同じ指示で出力を比較してわかる得意分野
• コピペで使えるChatGPTプロンプト50選｜仕事が爆速になるバズり指示文まとめ
• AIにコードレビューとリファクタリングをさせる方法｜Web制作者向けプロンプトの型と実践手順
• ChatGPTのGPTs（マイGPT）でWeb制作業務を効率化する方法｜作り方から実務での活用例まで
• 【実務活用ガイド】v0 by Vercelで実現する爆速Web制作！AI駆動プロトタイピングの完全マニュアル
• RAG構成でChatGPT APIを使った自社データ参照チャットボットの作り方【完全ガイド】｜Python・OpenAI・Streamlit実装コード付き徹底解説

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！