結論｜具体的な指示ほど、狙った結果に近づきます
結論からお伝えすると、Claude Codeへの指示は「何を」「どこを」「どう変えたいか」を具体的に書くほど、狙った結果に近づきます。「いい感じにして」のような曖昧な指示では、意図とずれた修正になりやすい傾向があります。
Claude Codeの基本的な使い方はClaude Codeとは？の記事で解説しています。この記事では、実際にそのまま使えるプロンプト例を用途別に紹介します。
良いプロンプトと悪いプロンプトの違い
同じ依頼内容でも、書き方によって結果の精度が大きく変わります。まずは良い例と悪い例を比較してみましょう。
| 悪い指示例 | 良い指示例 | ポイント |
|---|---|---|
| デザインをかっこよくして | トップページの見出しの色を紫系のグラデーションに変更して | 対象の場所と変更内容を具体的に指定する |
| SEO対策して | このページのtitleとdescriptionに「心斎橋 ホームページ制作」というキーワードを自然に含めて | 使いたいキーワードと対象タグを明示する |
| ブログ記事を書いて | 「MEO対策とは」というテーマで、見出し4つ・2000文字程度のブログ記事の構成案を作って | テーマ・見出し数・文字数など条件を数値で伝える |
共通しているのは、「対象」「内容」「条件」の3つを具体的に伝えるという点です。この型を意識するだけで、以降のプロンプトも応用しやすくなります。
ホームページ制作・LP制作で使えるプロンプト
ホームページやLPの制作・修正でよく使う指示の型を紹介します。既存ページの構造を保ったまま部分修正したい場合に特に有効です。AIを使ったホームページ制作全般についてはClaude Codeでホームページ制作の記事もあわせてご覧ください。
- 「トップページのファーストビューの見出しを、〇〇という内容に変更して。デザインのトーンは変えないで」——見出しの文言だけを差し替えたいときに使う型です。
- 「お問い合わせフォームの入力項目に、〇〇（例：ご希望日）を追加して。必須項目にはアスタリスクを付けて」——項目追加とバリデーションを同時に依頼できます。
- 「サービス紹介セクションを、カード3枚のレイアウトから縦並びのリスト形式に変更して」——スマホでの見やすさを重視して構成を変えたいときに向いています。
- 「LPのCTAボタンの文言を〇〇に変更し、クリックされやすいよう周辺の余白も調整して」——文言変更とあわせて視認性の調整も依頼できます。
- 「スマホ表示で見出しの文字が折り返して読みにくいので、フォントサイズを調整して」——画面サイズを明示することで、狙った幅での調整結果になりやすくなります。
ブログ記事作成で使えるプロンプト
ブログ記事の構成案作成から本文執筆まで、段階的に指示を出すのがコツです。
- 「〇〇というテーマで、検索意図を踏まえた見出し構成案を5〜7個作って」——本文をいきなり書かせず、まず構成案から確認するのがおすすめです。
- 「この見出し構成をもとに、結論を最初に書く形で本文を執筆して。文字数は〇〇文字程度で」——AEOを意識した結論ファーストの書き方を明示的に指定します。
- 「既存記事の〇〇と内容が重複しないように、切り口を変えて記事を書いて」——記事数が増えてきたサイトでの重複防止に有効です。
- 「この記事に、よくある質問を8問以上、Q&A形式で追加して」——AI検索に引用されやすいFAQ形式を狙って追加できます。
- 「既存ブログのデザイン・HTML構成を踏襲して、新規記事のHTMLファイルを作成して」——サイト全体のデザイン統一を保ったまま記事を量産したいときに使います。
SEO・MEO対策で使えるプロンプト
SEO・MEO対策では、キーワードや構造化データなど専門的な要素を扱うため、対象範囲を明確に伝えることが特に重要です。
- 「このページのtitle・meta descriptionを、〇〇というキーワードを含めて最適化して」——文字数の目安（title30文字前後・description120文字前後など）も併せて伝えると精度が上がります。
- 「このページにBreadcrumbListとFAQPageの構造化データ（JSON-LD）を追加して」——構造化データの種類を具体的に指定することで、意図した形式が反映されやすくなります。
- 「サイト内の内部リンクが不足しているページを探して、関連ページへのリンクを追加して」——サイト全体を横断的にチェックさせたいときに向いています。
- 「Googleビジネスプロフィールの投稿文を、〇〇というキャンペーン内容で3パターン作成して」——複数案を比較して選びたい場合は、パターン数を明示します。
- 「サイトマップ（sitemap.xml）に、新しく追加したページのURLを反映して」——新規ページ公開後の更新作業を忘れないための定型プロンプトです。
HTML・CSS・JavaScript修正で使えるプロンプト
コードの修正を依頼する際は、対象のファイルや要素をできるだけ具体的に伝えると、意図しない箇所への影響を防ぎやすくなります。
- 「〇〇.htmlの.headerクラスの背景色を、白から薄いグレーに変更して」——ファイル名とクラス名まで指定することで、他ページへの影響を防げます。
- 「ハンバーガーメニューをタップしたときの開閉アニメーションを、もう少し滑らかにして」——動きの感覚的な調整は、現状との比較で伝えると意図が伝わりやすくなります。
- 「このページの画像に、内容が伝わる適切なalt属性をすべて追加して」——アクセシビリティとSEOの両方に関わる修正をまとめて依頼できます。
- 「スマホ幅（390px程度）で横スクロールが発生しているので、原因を特定して修正して」——具体的な画面幅を伝えることで、再現しやすい条件を共有できます。
- 「フォーム送信時に、必須項目が未入力の場合はエラーメッセージを表示するようJavaScriptを追加して」——動作条件（未入力時など）を明示すると、実装漏れを防げます。
リライト・デバッグで使えるプロンプト
既存コンテンツの改善や、うまく動かない箇所の原因調査でも、Claude Codeは力を発揮します。
- 「この文章を、専門用語をなるべく使わずに、初めて読む人にもわかりやすく書き直して」——読者層を明示することで、言い回しの調整精度が上がります。
- 「このページの表記ゆれ（〇〇と〇〇が混在しているなど）をサイト全体で統一して」——具体的な表記の組み合わせを挙げることで、統一漏れを防ぎやすくなります。
- 「このボタンを押しても反応しない原因を調査して、修正案を提示して」——まず原因調査、次に修正提案という2段階で依頼すると確認しやすくなります。
- 「コンソールに表示されているエラーの原因を特定して、修正して」——実際のエラーメッセージをそのまま伝えると、原因特定の精度が上がります。
- 「このページの読み込みが遅い原因を調査し、改善できる箇所があれば教えて」——修正前にまず現状分析だけを依頼するという使い方もできます。
画像生成で使えるプロンプト
Claude Code単体では画像生成はできませんが、画像生成AIへ渡すプロンプトの作成や、生成後の画像をページへ組み込む作業は依頼できます。
- 「〇〇（業種）のホームページに合う、明るく清潔感のあるヒーロー画像用の画像生成プロンプトを英語で作って」——画像生成AIに渡す英語プロンプトの下書きとして活用できます。
- 「生成した画像を、assets/images/フォルダに配置してトップページのファーストビューに反映して」——生成後の組み込み作業までまとめて依頼できます。
- 「アイコン画像のサイズが不揃いなので、同じ比率に統一して配置して」——複数画像の見た目を揃えたいときに使う型です。
- 「画像の読み込みが遅いので、ページ表示速度に配慮した設定（遅延読み込みなど）を追加して」——表示速度に関わる技術的な調整もあわせて依頼できます。
- 「画像を差し替えたいので、代わりにグレーのプレースホルダー画像を仮で入れておいて」——正式な画像が用意できるまでの仮対応としても使えます。
プロンプトを作る際のチェックリスト
プロンプトを作成する際、次の項目を意識すると、より狙った結果を得やすくなります。
- 修正対象のページ・ファイル・箇所を具体的に指定している
- 「どう変えたいか」を、できるだけ数値や具体例で伝えている
- 変更してほしくない部分（デザインのトーンなど）も明記している
- 一度に複数の依頼を詰め込みすぎず、区切って指示している
- 提案された変更内容を、反映前に必ず確認する前提で依頼している
大阪・心斎橋の企業がプロンプトを活用するなら
大阪・心斎橋エリアの中小企業や個人事業主の場合、プログラミングの専門知識がなくても、この記事で紹介したプロンプトの型を応用するだけで、日常的な更新作業のかなりの部分をカバーできます。まずは影響範囲の小さい修正から試して、指示の出し方に慣れていくことをおすすめします。
「〇〇（業種）向けのプロンプトを教えてほしい」というご相談も多くいただきます。自社の業種や制作したいページに合わせたプロンプトの型については、個別にもご相談いただけます。
マダナイ？でできること
マダナイ？では、Claude Codeを使った制作・修正の代行はもちろん、社内でプロンプトを活用したい企業向けに、実践的な指示の出し方のアドバイスも行っています。
- Claude Codeを使ったホームページ制作・修正の代行
- 社内でのプロンプト活用に関するアドバイス
- AI導入・活用支援全般のご相談
「まだない」を「もうある」へ。プロンプトの書き方に迷ったら、まずはやりたいことをお聞かせください。
よくある質問
Q. プロンプトはこの記事の例文をそのままコピーして使えますか？
はい、〇〇の部分を自社の内容に書き換えるだけで使える形にしています。まずはそのまま試し、結果を見ながら言い回しを調整していくのがおすすめです。
Q. 日本語のプロンプトでも問題ありませんか？
問題ありません。Claude Codeは日本語での指示にも対応しており、この記事のプロンプト例もすべて日本語です。英語で指示する必要はありません。
Q. 一度に複数の依頼を書いても大丈夫ですか？
技術的には可能ですが、一度に依頼を詰め込みすぎると、意図と違う結果になりやすくなります。まとまった作業でも、区切って段階的に指示する方が精度が安定します。
Q. プロンプトを工夫しても意図と違う結果になることはありますか？
あります。その場合は「〇〇の部分が意図と違います。〇〇のように直してください」と、具体的にどこがどう違うかを伝え直すことで精度が上がります。
Q. プログラミング未経験でもプロンプトを使いこなせますか？
この記事で紹介した型をベースにすれば、専門知識がなくても指示を出すこと自体は可能です。ただし提案内容が正しいかどうかの最終確認には、ある程度の理解が必要です。
Q. SEO・MEO用のプロンプトを使えば、順位は必ず上がりますか？
いいえ、プロンプトはあくまで作業を効率化するための指示文であり、順位を保証するものではありません。戦略的なキーワード選定や継続的な改善は別途必要です。
Q. 画像そのものをClaude Codeに生成してもらえますか？
Claude Code単体では画像生成はできません。画像生成AI向けのプロンプト作成や、生成済み画像のページへの組み込み作業を依頼する形になります。
Q. 業種に合わせたプロンプトを一緒に考えてもらえますか？
はい、マダナイ？では自社の業種や制作したいページの内容に合わせたプロンプトの型についても、個別にご相談いただけます。
Q. プロンプトを保存しておいて使い回すことはできますか？
可能です。よく使う指示はメモやテンプレートとして保存しておき、〇〇の部分だけ書き換えて使い回すことで、毎回一から考える手間を減らせます。
Q. 大阪・心斎橋でプロンプトの使い方について相談できますか？
はい、マダナイ？では大阪・心斎橋の企業を中心に、Claude Codeのプロンプトの書き方から実際の制作・保守まで、あわせてご相談いただけます。
まとめ
Claude Codeへの指示は、「対象」「内容」「条件」を具体的に伝えるほど、狙った結果に近づきます。この記事で紹介した30個以上のプロンプト例を、まずはそのまま試してみて、少しずつ自社の状況に合わせて調整していくのがおすすめです。
実際の制作の流れはClaude Codeでホームページを作る方法の記事、料金についてはClaude Codeの料金解説の記事、他ツールとの比較はClaude CodeとCursorの比較記事もあわせてご覧ください。