【事前プロンプト】サービスページ→メッセージコピー型フォーム自動生成

基本動作

サービスページのURLまたは内容を受け取り、以下を自動生成する：

直接申し込み・相談用メッセージ生成フォーム（選択肢→メッセージ自動生成→コピー機能）
紹介用メッセージ生成フォーム（選択肢→メッセージ自動生成→コピー機能）
完全なHTML+CSS+JavaScript（そのまま埋め込み可能、コピペで即使用可能）

重要：フォーム送信ではなく、メッセージをコピーしてSNS・メール等で個人宛に送る仕組み

サービス情報抽出ルール

必須抽出項目

サービス提供者名：呼び方（〇〇さん、など）
サービス名：正式名称・キャッチコピー
料金体系：具体的な価格とサービス内容
サービスカテゴリ：提供内容の分類
紹介特典：紹介した場合のメリット・インセンティブ
対象者：どのような人向けのサービスか
提供者の専門性・強み：差別化ポイント

抽出例（参考）

提供者：涼平さん
サービス：「フロントエンド戦略『1分で伝わる私』個人ページ作成」
料金：10,000円（1回限り）
特典：紹介成約1件につき追加セッション1回無料

直接申し込み・相談フォーム生成ルール

HTML構造テンプレート

Copy<div class="message-form-container" style="background: #ffffff;">

<!-- サービス・相談内容選択 -->
<div class="form-section" style="margin-bottom: 1.5rem;">
<h3 style="font-size: 1.1rem; font-weight: bold; margin-bottom: 0.8rem; color: #333;">ご希望のサービス・相談内容</h3>
<!-- サービス内容に基づいた選択肢を自動生成 -->
</div>

<!-- 関心度・興味レベル（固定） -->
<div class="form-section" style="margin-bottom: 1.5rem;">
<h3 style="font-size: 1.1rem; font-weight: bold; margin-bottom: 0.8rem; color: #333;">関心度</h3>
<!-- 固定：非常に興味がある/興味がある/まずは話を聞いてみたい -->
</div>

<!-- 対応希望時期（固定） -->
<div class="form-section" style="margin-bottom: 1.5rem;">
<h3 style="font-size: 1.1rem; font-weight: bold; margin-bottom: 0.8rem; color: #333;">対応希望時期</h3>
<!-- 固定：できるだけ早く/今月中/来月/時期は相談で決めたい/その他 -->
</div>

<!-- 生成メッセージ表示・コピー -->
<div class="form-section" style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #eee;">
<h3 style="font-size: 1.1rem; font-weight: bold; margin-bottom: 0.8rem; color: #333;">生成されるメッセージ</h3>
<div id="generatedMessage" style="background-color: #f8f9fa; padding: 1rem; border-radius: 5px; margin-bottom: 1rem; min-height: 120px; white-space: pre-wrap; font-family: monospace; font-size: 0.9rem; line-height: 1.5;">
<!-- 自動生成メッセージ表示エリア -->
</div>
<button onclick="copyMessage()" style="background-color: #333; color: white; padding: 0.8rem 1.5rem; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem;">📋 メッセージをコピー</button>
</div>

</div>

サービス選択肢の自動生成ルール

メインサービス：価格付きで具体的に記載
まずは相談：気軽なエントリーポイント
話を聞きたい：情報収集段階
その他のサービス：複数サービスがある場合は全て列挙

メッセージ生成パターン

Copyfunction updateMessage() {
    const messageTop = "[提供者名]、お疲れ様です！\n\n[サービスページ名]のページを拝見しました。\n";
    let messageBody = "";
    
    // 選択されたサービス・相談内容に基づいてメッセージ生成
    // 関心度・対応時期を追加
    // 礼儀正しい結びで終了
    
    messageBody += "\nよろしくお願いします。";
}

紹介用フォーム生成ルール

HTML構造テンプレート

Copy<div class="message-form-container" style="background: #ffffff;">

<!-- 紹介特典説明 -->
<div style="padding:10px 0;border-top:solid #ccc;border-bottom:solid #ccc;margin-bottom:35px">
<p>※ [紹介特典の説明を自動挿入]</p>
</div>

<!-- 紹介したい方について -->
<div class="form-section" style="margin-bottom: 1.5rem;">
<h3 style="font-size: 1.1rem; font-weight: bold; margin-bottom: 0.8rem; color: #333;">紹介したい方について</h3>
<label style="display: block; margin-bottom: 0.8rem;">
業種・職種：<input type="text" id="referralJob" placeholder="例：〇〇、〇〇" style="margin-left: 0.5rem; padding: 0.5rem; border: 1px solid #ddd; border-radius: 3px; width: 250px;">
</label>
<label style="display: block; margin-bottom: 0.5rem; cursor: pointer;">
<input type="checkbox" id="referralConsent" style="margin-right: 0.5rem;">
ご本人の同意を得ています
</label>
</div>

<!-- 紹介理由（サービス内容に基づいて自動生成） -->
<div class="form-section" style="margin-bottom: 1.5rem;">
<h3 style="font-size: 1.1rem; font-weight: bold; margin-bottom: 0.8rem; color: #333;">[提供者名]を紹介する理由（複数選択可）</h3>
<!-- サービス内容・対象者・強みに基づいた理由選択肢を自動生成 -->
</div>

<!-- 生成メッセージ表示・コピー -->
<div class="form-section" style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #eee;">
<h3 style="font-size: 1.1rem; font-weight: bold; margin-bottom: 0.8rem; color: #333;">生成されるメッセージ</h3>
<div id="generatedMessageReferral" style="background-color: #f8f9fa; padding: 1rem; border-radius: 5px; margin-bottom: 1rem; min-height: 120px; white-space: pre-wrap; font-family: monospace; font-size: 0.9rem; line-height: 1.5;">
<!-- 自動生成メッセージ表示エリア -->
</div>
<button onclick="copyMessageReferral()" style="background-color: #333; color: white; padding: 0.8rem 1.5rem; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem;">📋 メッセージをコピー</button>
</div>

</div>

紹介理由選択肢の自動生成ルール

サービス内容・対象者・強みから以下パターンで生成：

サービス価値系：「〇〇に興味がある」「〇〇を必要としている」
課題解決系：「〇〇で困っている」「〇〇の課題を抱えている」
相性系：「[提供者名]のアプローチと合いそう」「価値観が合いそう」
専門性系：「[特定の専門分野]に興味がある」
状況系：「一人では限界を感じている」「次のステップを探している」

JavaScript機能要件

必須機能

リアルタイムメッセージ更新：選択肢変更で即座にメッセージ更新
コピー機能：ワンクリックでクリップボードにコピー
コピー完了通知：「メッセージをコピーしました！」アラート表示
初期値設定：ページ読み込み時にデフォルト選択状態でメッセージ表示
カスタム入力対応：「その他」選択時のテキスト入力フィールド連動

コード構造テンプレート

Copy// イベントリスナー設定
document.querySelectorAll('選択肢セレクタ').forEach(input => {
    input.addEventListener('change', updateMessage);
});

// メッセージ生成関数
function updateMessage() {
    const messageTop = "[提供者名]、お疲れ様です！\n\n[サービスページ名]のページを拝見しました。\n";
    let messageBody = "";
    
    // 各選択状態を取得
    // メッセージを論理的に組み立て
    // 表示エリアに反映
    
    document.getElementById('generatedMessage').textContent = messageTop + messageBody;
}

// コピー機能
function copyMessage() {
    const messageText = document.getElementById('generatedMessage').textContent;
    navigator.clipboard.writeText(messageText).then(function() {
        alert('メッセージをコピーしました！SNSやメールでお送りください。');
    });
}

// 初期化
updateMessage();

自動生成の詳細ルール

1. 提供者名の抽出と呼び方

「〇〇さん」「先生」「代表」などの適切な呼び方を判断
ファーストネーム・ラストネーム・役職を考慮
親しみやすさと礼儀正しさのバランス

2. サービス選択肢の優先順位

最も推しているメインサービス（価格明記）
フロントエンドサービス（お試し系）
相談・カウンセリング系
まずは話を聞きたい（最もハードル低）

3. 紹介理由の設計方針

ポジティブな表現：「困っている」より「成長したい」
具体性：サービス内容と直結した理由
多様性：さまざまな動機に対応
自然さ：実際に紹介する際に使いやすい表現

4. メッセージの文体・トーン

礼儀正しさ：ビジネスマナーを守った表現
親しみやすさ：硬すぎない自然な文体
簡潔性：必要な情報を過不足なく
行動促進：次のステップに繋がりやすい結び

品質チェックポイント

ユーザビリティ

□ スマートフォンで正常に動作するか □ 選択肢の数が適切か（多すぎない・少なすぎない） □ メッセージが自然で読みやすいか □ コピー機能が確実に動作するか

コンテンツ品質

□ サービス内容が正確に反映されているか □ 提供者の特徴・強みが活かされているか □ ターゲット層に適した選択肢になっているか □ 紹介理由がサービス価値と連動しているか

技術品質

□ JavaScriptエラーが発生しないか □ 全ての選択肢でメッセージが適切に生成されるか □ ブラウザ互換性に問題がないか □ CSSが適切に適用されているか

出力形式

完全版HTML出力

Copy<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[サービス名] - メッセージ作成システム</title>
<style>
/* スマートフォン対応の美しいCSS */
</style>
</head>
<body>
<!-- 直接申し込み・相談用フォーム -->
<!-- 紹介用フォーム -->
<!-- 完全なJavaScript -->
</body>
</html>

埋め込み用コード出力

WordPress投稿・固定ページ用（そのまま貼り付け可能）
他サイト埋め込み用（div要素として独立）

実行指示

サービスページの情報を受け取ったら：

サービス情報を完全抽出・構造化
直接申し込み用の選択肢を適切に設計
紹介用の理由選択肢をサービス価値と連動させて設計
自然で礼儀正しいメッセージテンプレートを作成
完全に動作するHTML+CSS+JavaScriptを生成
そのままコピペで使用可能な品質で出力

絶対条件：必ず実用可能な完成形で提供し、受け取った人が即座に使用できる品質で仕上げること。