ChatGPT・ClaudeのWeb制作プロンプト集｜コーディング・デザイン・SEOで使えるコピペテンプレート

ChatGPTやClaudeにコードを書いてもらったものの、既存のサイトに組み込めなかった。SEOの相談をしたら、それらしいけれど根拠の分からない回答が返ってきた。Web制作でAIを使っていて、こうした経験をした人は多いと思います。

原因の多くは、AIの性能よりも指示の出し方にあります。使っている環境、変えてはいけない部分、欲しい出力の形。この3つをプロンプトに書くだけで、回答は実務で使えるものに近づきます。

この記事では、Web制作の現場で使えるプロンプトを、コーディング・デザイン・SEOの3分野に分けて紹介します。すべてコピペで使える形にしてあります。【】の部分を自分の状況に書き換えて使ってください。

プロンプトの基本的な書き方や、仕事・日常で使えるプロンプトは、姉妹記事「【保存版】ChatGPT・Claudeのプロンプト集｜仕事と日常で使えるコピペテンプレートと書き方」で紹介しています。

Web制作でAIに指示するときの基本

Web制作のプロンプトでは、一般的な指示のコツに加えて、次の3つを意識すると回答の精度が上がります。

環境とバージョンを伝える

AIは、あなたのサイトがどんな環境で動いているかを知りません。環境を書かないと、AIは一般的な環境を想定して回答します。その結果、使っていないライブラリを前提にしたコードや、古い書き方が出てくることがあります。

最低限、次の情報を書いておくと安心です。

• CMSとそのバージョン（例：WordPress 6.x）
• PHPのバージョン
• 使っているテーマ、プラグイン、ビルドツール
• jQueryを使うか、素のJavaScriptで書くか
• 対応するブラウザ

既存コードを渡して変更範囲を限定する

「〇〇を実装して」とだけ頼むと、AIはゼロからコードを書き始めます。既存のサイトに組み込むなら、関係するコードを貼り付けたうえで、変更してよい範囲を指定しましょう。

「既存のクラス名は変更しない」「指定した関数以外は触らない」と書いておけば、意図しない書き換えを防げます。

出力の形を指定する

コード全体が欲しいのか、変更した部分だけが欲しいのかで、指示の書き方は変わります。長いファイルを毎回全文出力させると、確認に時間がかかるうえ、変更点も見落としやすくなります。

よく使う指定は次の3つです。

• コードのみを出力する（説明は不要）
• 変更した箇所のみを出力する（差分）
• 変更した箇所と、変更した理由を箇条書きで説明する

こうした条件は、次の章の最後に「実務で使える条件の書き方」としてまとめています。

Web制作（HTML・CSS・JavaScript・WordPress）のプロンプト

HTMLを作成する

こんなときに使える
LPのセクションや、お知らせ一覧などのパーツを一から作りたいとき。

あなたはWeb制作に詳しいフロントエンドエンジニアです。
以下の条件で、【作りたいパーツ（例：料金プランを3列で比較するセクション）】のHTMLを作成してください。

【掲載する内容】
【見出し、テキスト、ボタンなど、掲載する要素を箇条書きで】

【条件】
・セマンティックなHTML5のタグを使う（divの多用を避ける）
・クラス名は【BEM／FLOCSSなどの命名規則】に従う
・見出しは【h2】から始める
・画像にはalt属性を入れ、内容が分からない場合は【alt要確認】と書く
・CSSとJavaScriptは出力しない

【出力形式】
HTMLのコードのみを出力してください。

使い方・ポイント
見出しのレベルを指定しておくと、ページ全体の見出し構造とそろえやすくなります。altの中身をAIに考えさせず「要確認」にしているのは、画像に何が写っているかをAIは知らないためです。

CSSを作成する

こんなときに使える
HTMLはできていて、スタイルだけを書いてほしいとき。

以下のHTMLに対するCSSを作成してください。

【HTML】
（ここにHTMLを貼り付け）

【デザインの要件】
・【例：メインカラー #1a73e8、背景は白、角丸8px】
・【例：PCでは3列、768px以下で1列】

【条件】
・HTMLのクラス名は変更しない
・色と余白はCSS変数（カスタムプロパティ）で管理する
・【モバイルファースト】で書く
・!importantは使わない
・既存のCSSと競合しないよう、セレクタは【.p-price】の配下に限定する

【出力形式】
CSSのコードのみを出力してください。

使い方・ポイント
既存サイトにCSSを追加するときは、他のスタイルとの競合が問題になりがちです。セレクタの範囲を限定する指示を入れておくと、組み込んだ後にレイアウトが崩れるのを防げます。

JavaScriptを作成する

こんなときに使える
アコーディオン、タブ、モーダルなどの動きを実装したいとき。

以下の動きを実装するJavaScriptを作成してください。

【実装したい動き】
【例：FAQの質問をクリックすると回答が開閉する。1つを開くと、他は閉じる】

【HTML】
（ここにHTMLを貼り付け）

【条件】
・ライブラリは使わず、素のJavaScript（ES6以降）で書く
・HTMLのクラス名は変更しない。必要な属性が足りない場合は、追加する内容を提案する
・キーボード操作とaria属性（aria-expandedなど）に対応する
・同じパーツがページ内に複数あっても動くようにする

【出力形式】
1. JavaScriptのコード
2. HTMLに追加が必要な属性の一覧（ある場合）
3. 処理の流れの説明（3行程度）

使い方・ポイント
「ページ内に複数あっても動く」は忘れやすい条件です。この条件を入れておくと、1つ目のパーツでしか動かないコードが出てくるのを防げます。jQueryを使っているサイトなら、「jQuery【バージョン】で書く」と指定してください。

WordPressのカスタマイズ（functions.php・テンプレート）

こんなときに使える
functions.phpに処理を追加したいときや、テンプレートファイルを修正したいとき。

あなたはWordPressのテーマ開発に詳しいエンジニアです。
以下のカスタマイズを行うコードを作成してください。

【やりたいこと】
【例：投稿一覧から特定カテゴリーの記事を除外したい】

【環境】
・WordPress：【バージョン】
・PHP：【バージョン】
・テーマ：【テーマ名／子テーマを使っているか】
・関係するプラグイン：【プラグイン名】

【条件】
・可能な限りプラグインを使わず、フックで実装する
・子テーマのfunctions.phpに書く前提にする
・関数名には接頭辞【mytheme_】を付け、他の関数と名前が重ならないようにする
・WordPressのコーディング規約に沿って書く
・出力する値は適切にエスケープする

【出力形式】
1. コード
2. どのファイルのどこに書くか
3. 使っているフックとその役割

使い方・ポイント
親テーマを直接編集すると、テーマを更新したときに変更が消えてしまいます。子テーマを前提にすると書いておけば、その点も考えたコードが返ってきます。関数名の接頭辞は、テーマやプラグインの関数と名前がぶつかるのを防ぐためのものです。

なお、AIの知識は学習した時点までのものなので、非推奨になった関数が出てくることがあります。公式ドキュメントで確認してから使いましょう。

PHPのコードを書く

こんなときに使える
CSVの加工やデータの集計など、WordPressに限らないPHPの処理を書きたいとき。

以下の処理をPHPで作成してください。

【処理内容】
【例：CSVファイルを読み込み、2列目が空の行を除いて、新しいCSVとして出力する】

【入力データの例】
（データのサンプルを数行貼り付け）

【条件】
・PHP【8.1】で動作すること
・外部ライブラリは使わない
・エラー時の処理（ファイルがない、形式が違う、など）を入れる
・処理のまとまりごとにコメントを入れる

【出力形式】
コードと、動作確認の手順を出力してください。

使い方・ポイント
入力データのサンプルを貼ると、AIが想定するデータ形式とのずれが減ります。実データに個人情報が含まれる場合は、ダミーのデータに置き換えてから貼り付けてください。

エラーの原因を調べる

こんなときに使える
エラーが出ているのに、原因の見当がつかないとき。

以下のコードでエラーが出ています。原因を調べてください。

【起きていること】
【例：ボタンをクリックしても何も起きない】

【エラーメッセージ】
（コンソールやログに出たエラーをそのまま貼り付け）

【コード】
（関係するコードを貼り付け）

【環境】
【ブラウザ、WordPress・PHPのバージョンなど】

【試したこと】
【例：キャッシュを削除した、プラグインを停止した】

【回答の条件】
・考えられる原因を、可能性が高い順に挙げる
・それぞれの原因について、確認する方法を示す
・コードだけでは判断できない場合は、推測で断定せず、必要な情報を質問する
・修正コードは変更した箇所のみを示す

使い方・ポイント
エラーメッセージは要約せず、そのまま貼り付けるのがコツです。「試したこと」も書いておけば、すでに試した対処法をもう一度提案されずに済みます。

コードレビューをしてもらう

こんなときに使える
納品やリリースの前に、自分のコードを第三者の目でチェックしたいとき。

あなたは経験豊富なWebエンジニアです。
以下のコードをレビューしてください。

【コードの目的】
【例：お問い合わせフォームの送信処理】

【コード】
（ここにコードを貼り付け）

【レビューの観点】
・バグや、動作しない可能性がある箇所
・セキュリティ上の問題（XSS、SQLインジェクション、CSRFなど）
・パフォーマンス
・読みやすさ、保守しやすさ

【出力形式】
指摘ごとに、次の形式で出力してください。
・重要度（高／中／低）
・該当箇所
・問題点
・修正案

問題がない観点は「問題なし」と書いてください。

使い方・ポイント
重要度を付けてもらうと、どこから直せばよいか判断しやすくなります。「問題なし」と書かせるのは、AIに無理やり指摘を作らせないためです。

既存コードをリファクタリングする

こんなときに使える
動いてはいるものの、読みにくいコードや重複の多いコードを整理したいとき。

以下のコードをリファクタリングしてください。

【コード】
（ここにコードを貼り付け）

【目的】
【例：同じ処理の重複をなくし、あとから項目を追加しやすくしたい】

【条件】
・動作（入力と出力の結果）は変えない
・関数名、クラス名、HTMLのid・class名など、外部から参照される名前は変更しない
・一度にすべてを変えず、効果の大きい変更に絞る

【出力形式】
1. 変更後のコード
2. 変更した箇所と、その理由の一覧
3. 動作確認で見るべきポイント

使い方・ポイント
大事なのは「動作は変えない」と「外部から参照される名前は変えない」の2点です。これがないと、見た目は整っていても、他のファイルとつながらなくなったコードが返ってくることがあります。

レスポンシブ対応する

こんなときに使える
PC向けに作ったページを、スマホでも崩れないようにしたいとき。

以下のHTMLとCSSを、スマートフォンで崩れないように修正してください。

【HTML】
（貼り付け）

【CSS】
（貼り付け）

【現在の問題】
【例：スマホで横スクロールが出る、画像が画面からはみ出る】

【条件】
・ブレイクポイントは【768px】と【1024px】を使う
・PCでの表示は変えない
・HTMLはなるべく変更しない。変更が必要な場合は理由を説明する
・ボタンやリンクは、タップしやすいサイズにする

【出力形式】
追加・変更するCSSのみを出力し、変更点を箇条書きで説明してください。

使い方・ポイント
「PCでの表示は変えない」と書いておけば、確認はスマホ表示だけで済みます。ブレイクポイントには、サイト全体で統一している値を指定してください。

アクセシビリティをチェックする

こんなときに使える
公開前に、誰にとっても使いやすいページになっているか確認したいとき。

以下のHTMLを、アクセシビリティの観点でチェックしてください。

【HTML】
（貼り付け）

【チェックの基準】
WCAG 2.2のレベルAAを目安にしてください。

【確認してほしい点】
・見出しの階層
・画像の代替テキスト
・フォームのラベル
・キーボードだけで操作できるか
・aria属性の使い方

【出力形式】
問題点ごとに「該当箇所」「問題の内容」「修正案」を表にまとめてください。
HTMLだけでは判断できない項目（色のコントラスト比など）は、確認する方法を別に示してください。

使い方・ポイント
色のコントラストやスクリーンリーダーでの読み上げなど、コードを見ただけでは判断できない項目もあります。AIのチェックは一次確認として使い、最終的な確認は専用のツールや実機で行いましょう。

HTMLのSEOを改善する（見出し構造・構造化データ）

こんなときに使える
テンプレートや記事ページのHTMLを、検索エンジンに内容が伝わりやすい形にしたいとき。

以下のHTMLを、技術的なSEOの観点でチェックし、改善案を出してください。

【ページの種類】
【例：店舗の紹介ページ】

【HTML】
（貼り付け）

【確認してほしい点】
・h1〜h6の見出し構造
・titleタグとmeta description
・画像のalt属性
・構造化データ（JSON-LD）を追加すべきか

【条件】
・構造化データにはschema.orgの語彙を使う
・ページに書かれていない情報（住所、価格など）は作らず、【要入力】としておく

【出力形式】
問題点と修正案を示してください。構造化データを追加する場合は、JSON-LDのコードも出力してください。

使い方・ポイント
構造化データの内容は、ページに実際に表示されている内容と一致させる必要があります。AIに情報を作らせない指示を必ず入れておきましょう。

フォームのバリデーションを作る

こんなときに使える
お問い合わせフォームなどに、入力内容のチェックを付けたいとき。

以下のフォームに、入力チェック（バリデーション）を実装してください。

【HTML】
（フォームのHTMLを貼り付け）

【チェック内容】
・お名前：必須
・メールアドレス：必須、メールアドレスの形式
・電話番号：任意、数字とハイフンのみ
・お問い合わせ内容：必須、【1000】文字以内

【条件】
・JavaScriptで、送信する前と、入力欄から離れたときにチェックする
・エラーメッセージは、各入力欄の下に表示する
・エラーの内容がスクリーンリーダーでも伝わるようにする
・サーバー側でも同じチェックが必要なことを、注意点として書く

【出力形式】
JavaScriptのコードと、HTMLに追加が必要な要素を出力してください。

使い方・ポイント
JavaScriptによるチェックは、ブラウザ側の操作で回避できてしまいます。セキュリティ対策としてはサーバー側のチェックも欠かせません。プロンプトにその旨を入れておくと、回答にも注意点として含まれます。

正規表現を作る

こんなときに使える
入力チェックや、テキストの一括置換に使う正規表現を作りたいとき。

以下の条件に一致する正規表現を作成してください。

【用途】
【例：JavaScriptで郵便番号の入力をチェックする】

【一致させたい例】
・123-4567
・1234567

【一致させたくない例】
・123-456
・１２３－４５６７（全角）

【出力形式】
1. 正規表現
2. 各部分の意味
3. 上の例のそれぞれが一致するかどうかの確認結果

使い方・ポイント
一致させたい例と、一致させたくない例の両方を書くのがコツです。正規表現は言語によって書き方が少し違うため、使う言語（JavaScript、PHPなど）も指定してください。AIの確認結果をそのまま信じず、正規表現のテストツールでも試しておくと安心です。

実務で使える条件の書き方

ここまでのプロンプトに入れてきた条件は、組み合わせて使えます。よく使うものを下にまとめました。プロンプトの末尾に、必要な行だけを貼り付けて使ってください。

【出力の条件】
・コードのみを出力し、説明は不要です
・既存のコードはなるべく変更しないでください
・変更した箇所のみを出力してください（ファイル全体は不要です）
・変更した箇所と、変更した理由を箇条書きで説明してください
・クラス名、id名、関数名は変更しないでください
・新しいライブラリやプラグインは追加しないでください
・分からない点は推測で書かず、先に質問してください
・コード内のコメントは日本語で書いてください

「コードのみを出力」と「変更した理由を説明」は両立しないので、どちらか一方を選びましょう。確認に時間をかけられるときは説明付き、急いでいるときはコードのみ、と使い分けるのがおすすめです。

Webデザインのプロンプト

Webデザインでは、AIにデザインそのものを作らせるより、考えを整理したり言葉にしたりする用途で使う方が役立ちます。

デザインコンセプトを作る

こんなときに使える
制作に入る前に、デザインの方向性を決めたいとき。

あなたは経験豊富なWebデザイナーです。
以下のサイトのデザインコンセプトを3案提案してください。

【サイトの概要】
【例：地域密着の歯科医院のホームページ】

【ターゲット】
【例：30〜40代の子育て世代】

【サイトの目的】
【例：初診の予約を増やす】

【クライアントの要望】
【例：清潔感、親しみやすさ】

【出力形式】
案ごとに、次の項目を出してください。
・コンセプト名
・コンセプトの説明（2〜3文）
・色の方向性
・フォントの方向性
・写真やイラストの方向性
・この案が向いている理由

使い方・ポイント
3案を出してもらうと、比べながら方向性を絞り込めます。ヒアリングシートの内容をそのまま貼り付けて使うのも効果的です。

配色案を出す

こんなときに使える
配色に迷ったときや、いくつかの方向性を比べたいとき。

以下のサイトの配色案を3パターン提案してください。

【サイトの概要】
【業種、ターゲット、与えたい印象】

【条件】
・メインカラー、サブカラー、アクセントカラー、背景色、テキストの色を決める
・色はカラーコード（HEX）で示す
・テキストと背景の組み合わせは、コントラスト比4.5:1以上を目安にする
・【ロゴの色 #○○○○○○】を必ず使う

【出力形式】
パターンごとに表にまとめ、それぞれの色の使いどころと、配色の意図を説明してください。

使い方・ポイント
AIはコントラスト比の計算を間違えることがあります。採用する前に、コントラストチェッカーなどのツールで確認してください。

レイアウト案を出す

こんなときに使える
トップページやLPで、セクションを並べる順番を考えたいとき。

以下のページのレイアウト案を作成してください。

【ページの種類】
【例：Webセミナーの申込用LP】

【ページの目的】
【例：申込フォームへの誘導】

【掲載したい情報】
【箇条書きで】

【条件】
・ファーストビューからフォームまで、ユーザーが迷わない流れにする
・スマートフォンでの表示を優先して考える

【出力形式】
上から順に、セクション名・掲載内容・そのセクションの役割を表にまとめてください。

使い方・ポイント
各セクションの「役割」まで書いてもらうと、なぜその順番なのかをクライアントに説明しやすくなります。ワイヤーフレームを作る前のたたき台として使えます。

UIを改善する

こんなときに使える
ボタンやフォームなど、画面の使いにくい部分を改善したいとき。

以下の画面のUIについて、改善点を提案してください。

【画面】
（スクリーンショットを添付、またはHTMLを貼り付け）

【画面の目的】
【例：会員登録フォーム】

【気になっている点】
【例：入力の途中で離脱する人が多い】

【出力形式】
改善点を重要度の高い順に5つ挙げ、それぞれ「問題点」「改善案」「期待できる効果」を書いてください。

使い方・ポイント
スクリーンショットを使うときは、画像を読み込めるAIを使ってください。ChatGPTもClaudeも画像の添付に対応していますが、プランや利用環境によっては使えない場合があります。

UXを改善する

こんなときに使える
サイト全体の使い勝手や、ユーザーがたどる流れを見直したいとき。

以下のサイトについて、ユーザー体験（UX）の改善点を洗い出してください。

【サイトの概要】
【業種、目的】

【想定ユーザー】
【例：仕事の合間にスマホで情報を調べる会社員】

【ユーザーの主な流れ】
【例：検索から記事ページに来る → サービスページを見る → 問い合わせる】

【分かっているデータ】
【例：サービスページの離脱率が高い（アクセス解析の数値があれば記載）】

【条件】
・データがない部分は、仮説であることを明記する
・流れの段階ごとに、ユーザーがつまずきそうな点を挙げる

【出力形式】
段階ごとに「つまずきそうな点」と「改善案」を表にまとめてください。

使い方・ポイント
アクセス解析の数値を渡すと、根拠のある提案になりやすくなります。データなしで出てきた提案は仮説として扱い、検証してから採用しましょう。

デザインレビューをしてもらう

こんなときに使える
完成したデザインを、提出前に客観的にチェックしたいとき。

あなたはWebデザインのディレクターです。
添付したデザインをレビューしてください。

【デザインの概要】
【例：美容室のトップページ、PC版】

【ターゲットと目的】
【例：20〜30代女性、予約を増やす】

【レビューの観点】
・情報の優先順位が伝わるか
・余白、揃え、文字サイズに一貫性があるか
・ボタンなど、操作できる要素が分かりやすいか
・ターゲットに合った印象になっているか

【出力形式】
良い点を3つ、改善点を5つ挙げてください。改善点には具体的な修正案を付けてください。

使い方・ポイント
良い点も挙げてもらうと、変えずに残すべき部分が分かります。修正の方向性を決めるときに役立ちます。

競合サイトを分析する

こんなときに使える
制作に入る前に、競合サイトと比べて差別化できるポイントを探したいとき。

以下の競合サイトの情報をもとに、比較分析をしてください。

【自社（クライアント）の概要】
【業種、強み、ターゲット】

【競合サイトの情報】
（各サイトのトップページの文章、スクリーンショット、構成のメモなどを貼り付け）

【分析の観点】
・ターゲット
・打ち出している強み
・デザインの印象
・問い合わせまでの導線

【条件】
・貼り付けた情報に書かれていないことは推測で補わず、「情報なし」と書く

【出力形式】
比較表と、自社が差別化できるポイントを3つ出してください。

使い方・ポイント
利用環境によっては、URLを渡してもAIがページを読み込めなかったり、古い情報をもとに回答したりすることがあります。確実に分析してもらうには、ページの文章やスクリーンショットを直接渡してください。

デザインを言語化する

こんなときに使える
「なんとなく良い」と感じるデザインの理由を、言葉にしたいとき。

添付したデザインについて、特徴と、その意図として考えられることを言語化してください。

【観点】
・配色
・フォント
・レイアウトと余白
・写真やイラストの使い方
・全体の印象

【出力形式】
観点ごとに「見た目の特徴」と「その効果」を分けて書いてください。
意図については断定せず、「〜と考えられる」という形で書いてください。

使い方・ポイント
参考サイトを分析してデザインの引き出しを増やしたいときや、チーム内で方向性を共有したいときに使えます。

クライアント向けのデザイン説明文を作る

こんなときに使える
デザインを提出するときに、意図を分かりやすく伝えたいとき。

以下のデザインについて、クライアント向けの説明文を作成してください。

【デザインの内容と意図】
（箇条書きでメモを書く。例：
・メインカラーは、信頼感を出すため紺色にした
・ファーストビューに実績の数字を入れた
・予約ボタンを画面下に固定した）

【クライアント】
【例：Webに詳しくない飲食店のオーナー】

【条件】
・専門用語を使わない
・「なぜそうしたか」を、クライアントのお客様の目線で説明する
・【400】文字程度

【出力形式】
メールにそのまま貼れる文章で出力してください。

使い方・ポイント
意図のメモは自分で書き、文章にする部分だけをAIに任せるのがコツです。デザインの意図そのものをAIに考えさせると、実際の意図とずれた説明になることがあります。

SEO・ブログ記事作成のプロンプト

SEOのプロンプトを使う前に、1つ知っておいてほしいことがあります。ChatGPTやClaudeは、検索ボリュームや検索順位といった実データを持っていません。「月間検索数が多いキーワードを教えて」と聞くと、それらしい数値が返ってくることがあります。しかし、その数値は根拠のない推測かもしれません。Web検索ができる環境でも、正確な検索ボリュームは取得できないと考えておきましょう。

そのため、この章のプロンプトは、Search ConsoleやGoogleキーワードプランナー、ラッコキーワードなどのツールで取得したデータを、自分で貼り付けて使う前提にしています。AIには、データの整理や分析、文章づくりを任せます。

ブログタイトルを作る

こんなときに使える
記事を書き終えたあとに、クリックされやすいタイトルを考えたいとき。

以下の記事のタイトル案を10個作成してください。

【記事の内容】
【記事の要約、または見出し構成を貼り付け】

【狙うキーワード】
【メインキーワード】【サブキーワード】

【想定読者】
【例：WordPressを始めたばかりの個人事業主】

【条件】
・32文字前後にする
・メインキーワードは、なるべく前半に入れる
・記事の内容以上のことを約束しない（誇張しない）
・「最強」「完全」などの強すぎる言葉は使わない

【出力形式】
タイトル案と、それぞれの狙いを一言で書いてください。

使い方・ポイント
「記事の内容以上のことを約束しない」は大事な条件です。タイトルと内容がずれていると、読者はすぐに離脱してしまいます。

記事構成を作る

こんなときに使える
記事を書き始める前に、見出し構成を作りたいとき。

以下の条件で、ブログ記事の見出し構成を作成してください。

【狙うキーワード】
【キーワード】

【想定読者と悩み】
【例：自分でWordPressサイトを作ったが、表示が遅くて困っている人】

【記事のゴール】
【例：読者が自分で表示速度の改善を試せるようになる】

【自分の経験・独自の情報】
【例：実際に改善した事例、使っているプラグイン】

【条件】
・記事タイトルがh1になるため、見出しはh2から始める
・h2とh3で構成する
・自分の経験・独自の情報を書く見出しを必ず入れる

【出力形式】
見出し構成と、各見出しで書く内容を1行ずつ出力してください。

使い方・ポイント
いちばん大事なのは「自分の経験・独自の情報」の欄です。AIだけで作った構成は、検索上位の記事と似た内容になりがちです。実体験を書く場所を先に決めておくと、他の記事との違いを出しやすくなります。

検索意図を分析する

こんなときに使える
あるキーワードで検索する人が、何を知りたいのかを整理したいとき。

以下のキーワードで検索するユーザーの検索意図を分析してください。

【キーワード】
【キーワード】

【検索上位の記事の情報】
（検索結果の上位5〜10記事のタイトルと見出しを貼り付け）

【出力形式】
1. 顕在ニーズ（ユーザーがはっきり知りたいこと）
2. 潜在ニーズ（ユーザー自身も気づいていない、本当に解決したいこと）
3. 上位記事に共通している内容
4. 上位記事に足りていないと考えられる内容

貼り付けた情報から分かることと、推測を分けて書いてください。

使い方・ポイント
上位記事のタイトルと見出しを貼り付けると、実際の検索結果に基づいた分析になります。貼り付けない場合、回答はAIの一般的な知識からの推測になります。

SEOキーワードを整理する（ツールのデータを渡す前提）

こんなときに使える
キーワードツールで集めたキーワードを、記事ごとに振り分けたいとき。

以下は、キーワードツールで取得したキーワードと月間検索数のデータです。
このデータを整理し、記事単位でグループ分けしてください。

【データ】
（キーワードと検索数をそのまま貼り付け）

【サイトのテーマ】
【例：WordPressの使い方を解説するブログ】

【条件】
・検索意図が同じキーワードは、同じグループにまとめる
・検索数はデータにある数値だけを使い、推測した数値を加えない
・サイトのテーマと関係が薄いキーワードは、別に分けて示す

【出力形式】
グループごとに、代表キーワード・含まれるキーワード・合計検索数・記事タイトル案を表にまとめてください。

使い方・ポイント
キーワードが多い場合は、CSVファイルを添付する方法もあります（ファイルの添付に対応している環境の場合）。合計検索数のような計算を含む部分は、念のため表計算ソフトでも確認してください。

記事をリライトする（Search Consoleのデータを活用）

こんなときに使える
順位やクリック率が伸びない既存の記事を改善したいとき。

以下の記事をリライトするための改善案を出してください。

【記事の本文】
（貼り付け）

【Search Consoleのデータ（過去3か月）】
（検索クエリ、表示回数、クリック数、平均掲載順位を貼り付け）

【リライトの目的】
【例：「〇〇 やり方」での順位を上げたい】

【条件】
・データに出ている検索クエリのうち、記事で答えられていない内容を洗い出す
・既存の内容のうち、残すべき部分は残す
・データから言えることと、推測を分けて書く

【出力形式】
1. データから分かること
2. 追加・修正すべき内容（見出し単位）
3. 削除・統合を検討すべき内容
4. タイトルとmeta descriptionの改善案

使い方・ポイント
Search Consoleの「検索パフォーマンス」でページのURLを絞り込むと、その記事がどんな検索クエリで表示されているかが分かります。このデータを渡すことで、実際に訪れている読者のニーズに沿ったリライトができます。

meta titleを作る

こんなときに使える
記事タイトルとは別に、検索結果に表示するタイトルを設定したいとき。

以下の記事のmeta title（titleタグ）の案を5つ作成してください。

【記事タイトル】
【タイトル】

【記事の要約】
【3〜5行程度】

【狙うキーワード】
【キーワード】

【条件】
・全角30文字前後にする
・キーワードは前半に入れる
・末尾に「｜【サイト名】」を付ける（この部分は文字数に含めない）

使い方・ポイント
検索結果に表示される文字数は、画面の幅などによって変わります。文字数はあくまで目安と考え、重要な言葉を前半に置くことを優先しましょう。

meta descriptionを作る

こんなときに使える
検索結果に表示される説明文を設定したいとき。

以下の記事のmeta descriptionを3案作成してください。

【記事の要約】
【3〜5行程度】

【狙うキーワード】
【キーワード】

【条件】
・全角100〜120文字程度
・キーワードを自然な形で1回含める
・記事を読むと何が分かるのかを具体的に書く
・記事にない内容は書かない

使い方・ポイント
meta descriptionは、検索結果にそのまま表示されるとは限りません。Googleがページ内の文章から自動で説明文を作ることもあります。それでも、記事の内容を正確に要約しておくことは大切です。

FAQを作る

こんなときに使える
記事の最後に「よくある質問」を追加したいとき。

以下の記事の内容をもとに、よくある質問（FAQ）を5つ作成してください。

【記事の本文】
（貼り付け）

【参考にする情報】
【例：Search Consoleの検索クエリ、実際にお客様から受けた質問】

【条件】
・回答は記事の内容に基づいて書き、記事にない情報は加えない
・記事内で答えられていない質問を入れる場合は、「記事への追記が必要」と明記する
・回答は1問あたり【100〜150】文字

【出力形式】
Q&A形式で出力してください。

使い方・ポイント
実際に受けた質問や検索クエリを参考情報に入れると、読者のニーズに合ったFAQになります。記事にない内容をAIが書き足さないよう、条件で制限しておきましょう。

内部リンク案を出す

こんなときに使える
関連する記事同士をつないで、サイト内を回遊してもらいたいとき。

以下の記事に、内部リンクを入れる案を作成してください。

【リンクを入れる記事】
（本文を貼り付け）

【サイト内の記事一覧】
（記事タイトルとURLの一覧を貼り付け）

【条件】
・読者にとって自然な流れでリンクする
・リンクは1記事あたり【3〜5】か所まで
・一覧にない記事は提案しない

【出力形式】
「リンクを入れる箇所（前後の文章）」「リンク先の記事」「アンカーテキスト案」「リンクする理由」を表にまとめてください。

使い方・ポイント
WordPressの記事一覧は、管理画面からコピーするか、XMLサイトマップから取得できます。「一覧にない記事は提案しない」と書いておかないと、存在しない記事へのリンクを提案されることがあります。

記事ネタを出す

こんなときに使える
次に書く記事のテーマを決めたいとき。

以下のブログの記事ネタを20個提案してください。

【ブログのテーマ】
【例：Web制作の現場で役立つ情報】

【想定読者】
【例：駆け出しのWeb制作フリーランス】

【既存の記事タイトル】
（重複を避けるため、既存記事のタイトル一覧を貼り付け）

【自分が書ける経験・得意分野】
【例：WordPressの案件が多い、補助金を使った制作の経験がある】

【出力形式】
「記事タイトル案」「想定される読者の悩み」「自分の経験を活かせるポイント」を表にまとめてください。
検索数などの数値は出さないでください。

使い方・ポイント
出てきたネタは、キーワードツールで検索数を調べてから優先順位を決めるのがおすすめです。「検索数などの数値は出さない」と指定しておけば、根拠のない数値に惑わされずに済みます。

コードやSEOの回答を改善する追加プロンプト

最初の回答が期待と違ったときは、プロンプトを一から書き直すより、同じ会話の中で追加の指示を出す方が早く改善できます。

コードの修正・確認に使う

変更した箇所だけを出力してください。

2回目以降の修正で特に役立ちます。長いコードを毎回全文出力されると、確認が大変になるためです。

このコードの動作確認の手順を、確認する項目ごとに書いてください。

想定外の入力や操作があったときに、このコードで問題が起きないか確認してください。

空欄のまま送信された場合や、極端に長い入力、ボタンの連続クリックなど、見落としやすいケースを確認するときに使えます。

このコードは【PHP 7.4】で動きますか？動かない部分があれば、対応した書き方を示してください。

非推奨の関数や古い書き方が含まれていないか確認してください。

今の回答に誤りや見落としがないか見直してから、修正版を出してください。

文章・SEO案の改善に使う

もっと具体的にしてください。具体例や手順を入れられる箇所があれば入れてください。

専門用語を減らし、Web制作に詳しくない人でも分かる表現にしてください。

この構成で、検索ユーザーの疑問に答えられていない部分はありますか？

上位の記事と差別化するために、加えられる独自の視点を提案してください。

今の内容のうち、事実確認が必要な部分を挙げてください。

最後の指示は、記事を公開する前のチェックに使えます。

Web制作・SEOでAIを使うときの注意点

コードは必ず自分で動作確認する

AIが出すコードは、見た目が正しくても動かないことがあります。存在しない関数やオプションが使われていることもあります。また、AIの知識は学習した時点までのものなので、最新バージョンで変わった仕様に対応していない場合があります。本番環境に入れる前に、テスト環境やローカル環境で動作を確認してください。

顧客情報・APIキー・パスワードを貼り付けない

コードやデータを貼り付けるときは、APIキー、パスワード、データベースの接続情報、お客様の個人情報が含まれていないか確認しましょう。含まれている場合は、ダミーの値に置き換えてから貼り付けます。

入力した内容がAIの学習に使われるかどうかは、サービスやプラン、設定によって異なります。業務で使う場合は、利用しているサービスの設定と、会社やクライアントとの取り決めを確認しておきましょう。

SEOの数値はツールのデータを渡す

ここまで何度か触れたように、AIは検索ボリュームや順位の実データを持っていません。数値が必要な判断は、Search Consoleやキーワードツールのデータをもとに行ってください。AIには、そのデータの整理や、改善案のたたき台づくりを任せると効果的です。

まとめ

Web制作やSEOでAIを使うときの基本は、環境、変えてはいけない部分、欲しい出力の形の3つを伝えることです。これだけで、実務でそのまま使える回答が返ってきやすくなります。

この記事のプロンプトは、【】の部分を書き換えればそのまま使えます。すべてを覚えておく必要はありません。ブックマークしておき、必要になったときに該当するプロンプトをコピーして使ってください。自分の業務に合わせて条件を足していくと、使いやすいテンプレートに育っていきます。

プロンプトの基本的な書き方、どんな場面でも使える万能テンプレート、メール作成や議事録整理などのプロンプトは、姉妹記事で紹介しています。

→【保存版】ChatGPT・Claudeのプロンプト集｜仕事と日常で使えるコピペテンプレートと書き方