通常マーケティング・営業

Webマーケット業のランディングページを作成するプロンプト

プロンプトエンジニア認定試験の課題の４番目です。

（Canvasを使うと作成したページをプレビューできます。）

プロンプト本文

# 実行指示:
- {商品・サービス}の魅力を明確に抽出し、{ターゲット顧客}に響く視覚的に優れたランディングページを構築してください。
- {ベネフィット}がしっかり伝わるように、{コンセプト}から得られる訴求要素を戦略的に強調し、行動を促進する{CTA}を組み込んでください。
- ランディングページは{# ページ文章ルール}と{# ページコードルール}と{# 出力フォーマット}に則って、HTML5の完全構成（<!DOCTYPE html>や<head>内の<meta>などを含む）でコードブロック出力してください。
  - 必要なCSSは<style>タグを用いてまとめて記述し、レスポンシブ対応のメディアクエリも設定してください。

# 情報:

商品・サービス="
undefined
"

ターゲット顧客="
undefined
"

コンセプト="
undefined
"

ベネフィット="
undefined
"

CTA="
undefined
"

# 出力フォーマット:
## メニュー（内部リンク）
## ヘッダータイトル
## CTA（画面の下部に常時表示）
## ヘッダータイトルのイメージ画像
## [商品・サービス]に関する問題提起
## [商品・サービス]に関する問題のイメージ画像
## [商品・サービス]に関するストーリー
## [商品・サービス]に関するストーリーのイメージ画像
## [商品・サービス]の特徴
## [商品・サービス]の特徴のイメージ画像
## [商品・サービス]を利用するメリット
## [商品・サービス]を利用するメリットのイメージ画像
## [商品・サービス]を利用することで得られるベネフィット
## [商品・サービス]を利用することで得られるベネフィットのイメージ画像
## ユーザーの声
## FAQと回答
## オファーとCTA
## 問合せ先

# ページ文章ルール:
1. ターゲットに直接語りかける文体
   - 「あなた」「～しましょう」といった呼びかけを用いて、読者が自分事として捉えやすい表現を使用する。
2. ベネフィットをわかりやすく深掘りする
   - 提供する価値（ベネフィット）が具体的にイメージできるよう、状況例やメリットを詳しく記述する。  
   - 「○○できる」「○○が向上する」といった読者に得られる成果を明確にする。
3. 読者の疑問や不安を想定し、解決策を示す
   - 想定される悩みに対し、具体的な解決策を盛り込む。  
   - それによって読者が「自分の悩みを解決してくれそうだ」と感じられるよう配慮する。
4. 感情と論理の両面から訴求する
   - 「ワクワク感」「安心感」「将来的な展望」などの感情に触れる言葉を丁寧に織り交ぜつつ、「こうすれば成果が出る」といった論理的根拠も示す。
5. 行動を後押しする具体的なCTAを配置する
   - CTA（行動喚起）は、読者が次のアクションに移りやすいよう、明確なボタンや文言を使ってわかりやすく配置する。  
   - CTAの理由づけ（今すぐ申し込むと得られるメリットなど）も合わせて示し、誘導を強化する。
6. 不要な前置きや抽象表現を減らし、結論から書く
   - ランディングページ内では読み手が「これは自分に関係あるか」を最初の数秒で判断するため、結論や重要なメッセージを先に置く構成にする。  
7. 専門用語は噛み砕いて説明する
   - 専門性のある用語は、初めて聞く人でも理解できるよう簡潔に解説を入れる。  
   - 読者層に合わせた用語レベルに調整する。
8. ビジュアルを前提とした文章設計をする  
   - 視覚的に映えるデザインや画像の挿入箇所を想定しつつ、文章同士が詰まらないように配分を考える。  
   - 「ここで図解を入れる」「ここで利用者の声を引用する」といった想定を踏まえ、文章とビジュアルが相乗効果を生むようにまとめる。

# ページコードルール:
1. HTML5のセマンティックタグを使用する  
   - `header`, `main`, `article`, `section`, `footer` などのセマンティックタグを正しく使い、可読性とSEOに配慮した構造を作成する。
2. レスポンシブデザインに対応する  
   - `<meta name="viewport" content="width=device-width, initial-scale=1.0">` を必ず入れ、CSSのメディアクエリを利用して、スマートフォンやタブレットなど様々な画面サイズに対応したレイアウトを構築する。
3. 見出しの階層構造を正しく定義する  
   - `h1`（ページ全体のタイトル）、`h2`/`h3`（セクションやブロック単位の見出し）など、適切なレベルで見出しタグを割り当てる。
4. スタイルはCSSにまとめて記述する  
   - インラインスタイルではなく、`<style>`タグまたは外部CSSファイルを使用してレイアウトや色・フォントなどのデザインを調整する。  
   - ランディングページ特有のデザインであればCSSクラス名をわかりやすく設定する。
5. 画像やアイコンは適切に最適化し、`alt`属性を付与する  
   - ランディングページ内で大きなインパクトを与えるビジュアルやアイコンを使う場合は、サイズを適切に圧縮し、ページ表示速度を低下させないようにする。  
   - アクセシビリティのため、`img`タグには必ず`alt`属性を入れる。
6. アニメーションや動的要素はCSSで実装し、JS依存を最小限に抑える  
   - シンプルなフェードイン、ホバーエフェクトなどはCSSのトランジションやアニメーションで実装する。  
   - ただし、フォーム送信などのインタラクティブな処理が必要な場合はJavaScriptを適切に利用する。
7. 軽量・シンプルなレイアウト構造を保つ  
   - 不要な入れ子構造を避け、必要最小限のタグで分かりやすく管理しやすいHTMLを生成する。  
   - ランディングページでは最終的なコンバージョン（申し込み・登録など）に導くため、過度に複雑な要素を避けて、ユーザーが目的を達成しやすいUI/UXを目指す。
8. フォントや配色は汎用フォント・標準色を用いつつ、自由度を確保  
   - Webフォントを使用する場合は表示速度への影響を考慮し、必要最小限のセットにとどめる。  
   - テーマカラーとアクセントカラーを明確に定義し、全体のデザインに一貫性を持たせる。
9. メタタグを適切に設定する  
   - `description`, `keywords`, `og:xxxx`(FacebookなどのSNS向けOpen Graph) などを設定して、検索エンジンやSNSでシェアされたときにも見栄えの良い情報が表示されるようにする。
10. HTMLのバリデーションに合格する構文を保つ  
   - 開始タグと終了タグのペアをきちんと合わせ、属性名のスペルミスなどを防ぐ。  
   - 生成したHTMLがエラーや警告なく表示されるようにすることで、表示崩れのトラブルを減らし、メンテナンス性を高める。

# 補足:
- 指示の復唱はしないでください。
- 自己評価はしないでください。
- [# 出力フォーマット]から外れた余計な前置きや結論は書かないでください。

# 前提条件：
- タイトル：ランディングページを作成するプロンプト
- 依頼者条件：自身の商品やサービスのコンセプトや魅力を明確に伝えたいWebマーケッター。
- 前提情報：ランディングページの目的、ターゲット層、提供する価値（ベネフィット）が整理されている。
- 目的と目標：コンセプトとオファーが確実に伝わり、見た人が迷わず行動できるランディングページを作成する。

# 実行指示:
- {商品・サービス}の魅力を明確に抽出し、{ターゲット顧客}に響く視覚的に優れたランディングページを構築してください。
- {ベネフィット}がしっかり伝わるように、{コンセプト}から得られる訴求要素を戦略的に強調し、行動を促進する{CTA}を組み込んでください。
- ランディングページは{# ページ文章ルール}と{# ページコードルール}と{# 出力フォーマット}に則って、HTML5の完全構成（<!DOCTYPE html>や<head>内の<meta>などを含む）でコードブロック出力してください。
- 必要なCSSは<style>タグを用いてまとめて記述し、レスポンシブ対応のメディアクエリも設定してください。

# 情報:

商品・サービス="

"

ターゲット顧客="

"

コンセプト="

"

ベネフィット="

"

CTA="

"

# 出力フォーマット:
## メニュー（内部リンク）
## ヘッダータイトル
## CTA（画面の下部に常時表示）
## ヘッダータイトルのイメージ画像
## [商品・サービス]に関する問題提起
## [商品・サービス]に関する問題のイメージ画像
## [商品・サービス]に関するストーリー
## [商品・サービス]に関するストーリーのイメージ画像
## [商品・サービス]の特徴
## [商品・サービス]の特徴のイメージ画像
## [商品・サービス]を利用するメリット
## [商品・サービス]を利用するメリットのイメージ画像
## [商品・サービス]を利用することで得られるベネフィット
## [商品・サービス]を利用することで得られるベネフィットのイメージ画像
## ユーザーの声
## FAQと回答
## オファーとCTA
## 問合せ先

# ページ文章ルール:
1. ターゲットに直接語りかける文体
- 「あなた」「～しましょう」といった呼びかけを用いて、読者が自分事として捉えやすい表現を使用する。
2. ベネフィットをわかりやすく深掘りする
- 提供する価値（ベネフィット）が具体的にイメージできるよう、状況例やメリットを詳しく記述する。
- 「○○できる」「○○が向上する」といった読者に得られる成果を明確にする。
3. 読者の疑問や不安を想定し、解決策を示す
- 想定される悩みに対し、具体的な解決策を盛り込む。
- それによって読者が「自分の悩みを解決してくれそうだ」と感じられるよう配慮する。
4. 感情と論理の両面から訴求する
- 「ワクワク感」「安心感」「将来的な展望」などの感情に触れる言葉を丁寧に織り交ぜつつ、「こうすれば成果が出る」といった論理的根拠も示す。
5. 行動を後押しする具体的なCTAを配置する
- CTA（行動喚起）は、読者が次のアクションに移りやすいよう、明確なボタンや文言を使ってわかりやすく配置する。
- CTAの理由づけ（今すぐ申し込むと得られるメリットなど）も合わせて示し、誘導を強化する。
6. 不要な前置きや抽象表現を減らし、結論から書く
- ランディングページ内では読み手が「これは自分に関係あるか」を最初の数秒で判断するため、結論や重要なメッセージを先に置く構成にする。
7. 専門用語は噛み砕いて説明する
- 専門性のある用語は、初めて聞く人でも理解できるよう簡潔に解説を入れる。
- 読者層に合わせた用語レベルに調整する。
8. ビジュアルを前提とした文章設計をする
- 視覚的に映えるデザインや画像の挿入箇所を想定しつつ、文章同士が詰まらないように配分を考える。
- 「ここで図解を入れる」「ここで利用者の声を引用する」といった想定を踏まえ、文章とビジュアルが相乗効果を生むようにまとめる。

# ページコードルール:
1. HTML5のセマンティックタグを使用する
- `header`, `main`, `article`, `section`, `footer` などのセマンティックタグを正しく使い、可読性とSEOに配慮した構造を作成する。
2. レスポンシブデザインに対応する
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">` を必ず入れ、CSSのメディアクエリを利用して、スマートフォンやタブレットなど様々な画面サイズに対応したレイアウトを構築する。
3. 見出しの階層構造を正しく定義する
- `h1`（ページ全体のタイトル）、`h2`/`h3`（セクションやブロック単位の見出し）など、適切なレベルで見出しタグを割り当てる。
4. スタイルはCSSにまとめて記述する
- インラインスタイルではなく、`<style>`タグまたは外部CSSファイルを使用してレイアウトや色・フォントなどのデザインを調整する。
- ランディングページ特有のデザインであればCSSクラス名をわかりやすく設定する。
5. 画像やアイコンは適切に最適化し、`alt`属性を付与する
- ランディングページ内で大きなインパクトを与えるビジュアルやアイコンを使う場合は、サイズを適切に圧縮し、ページ表示速度を低下させないようにする。
- アクセシビリティのため、`img`タグには必ず`alt`属性を入れる。
6. アニメーションや動的要素はCSSで実装し、JS依存を最小限に抑える
- シンプルなフェードイン、ホバーエフェクトなどはCSSのトランジションやアニメーションで実装する。
- ただし、フォーム送信などのインタラクティブな処理が必要な場合はJavaScriptを適切に利用する。
7. 軽量・シンプルなレイアウト構造を保つ
- 不要な入れ子構造を避け、必要最小限のタグで分かりやすく管理しやすいHTMLを生成する。
- ランディングページでは最終的なコンバージョン（申し込み・登録など）に導くため、過度に複雑な要素を避けて、ユーザーが目的を達成しやすいUI/UXを目指す。
8. フォントや配色は汎用フォント・標準色を用いつつ、自由度を確保
- Webフォントを使用する場合は表示速度への影響を考慮し、必要最小限のセットにとどめる。
- テーマカラーとアクセントカラーを明確に定義し、全体のデザインに一貫性を持たせる。
9. メタタグを適切に設定する
- `description`, `keywords`, `og:xxxx`(FacebookなどのSNS向けOpen Graph) などを設定して、検索エンジンやSNSでシェアされたときにも見栄えの良い情報が表示されるようにする。
10. HTMLのバリデーションに合格する構文を保つ
- 開始タグと終了タグのペアをきちんと合わせ、属性名のスペルミスなどを防ぐ。
- 生成したHTMLがエラーや警告なく表示されるようにすることで、表示崩れのトラブルを減らし、メンテナンス性を高める。

# 補足:
- 指示の復唱はしないでください。
- 自己評価はしないでください。
- [# 出力フォーマット]から外れた余計な前置きや結論は書かないでください。

商品・サービス

ターゲット顧客

コンセプト

ベネフィット

CTA