例①：詳細プロンプト
以下の要件でHPを作成してください：
【サービス概要】
- HP名：ShinCode - Tech Creator & Developer
- ターゲット：20~50代の企業担当者（マーケティング、人事、事業開発部門）
- 主な価値提案：
【デザイン要件】
- スタイル：モダン × ミニマル × プロフェッショナル
- カラー：
- フォント：Noto Sans JP（本文）、Inter（英字・数字）
- 参考にしたいサイトの雰囲気：
【技術要件】
- Tailwind CSSを使用（CDN経由）
- レスポンシブ対応（モバイルファースト）
- 1ファイルで完結するHTML
- スムーズスクロール、ホバーエフェクト、フェードインアニメーション付き
【セクション構成】
- ヒーローセクション
- 実績・数字セクション
- サービス内容（4つ）
- 強み・選ばれる理由（3つ）
- 制作実績・ポートフォリオ
- ご依頼の流れ
- 料金目安（参考価格帯）
- FAQ
- CTA + フッター
【トーン・印象】
- 信頼できる技術者であることが伝わる
- 親しみやすさとプロフェッショナルのバランス
- 「この人に頼みたい」と思わせる温かみ
例②：ロールプレイ型プロンプト
あなたは年収2000万円以上を稼ぐシリコンバレーのシニアフロントエンドエンジニアです。
Apple、Stripe、Vercelでデザインシステムを構築した経験があります。
以下の要件でLPを作成してください。
あなたの経験とセンスを最大限に活かし、
「これが本当にAIが作ったの？」と驚かれるレベルのクオリティで仕上げてください。
【サービス概要】
- HP名：ShinCode - Tech Creator & Developer
- ターゲット：20~50代の企業担当者（マーケティング、人事、事業開発部門）
- 主な価値提案：
【デザイン要件】
- スタイル：モダン × ミニマル × プロフェッショナル
- カラー：
- フォント：Noto Sans JP（本文）、Inter（英字・数字）
- 参考にしたいサイトの雰囲気：
【技術要件】
- Tailwind CSS（CDN経由）
- レスポンシブ対応（モバイルファースト）
- 1ファイルで完結するHTML
- スムーズスクロール
- ホバーエフェクト（transform, shadow変化）
- スクロール時のフェードインアニメーション（CSS or 軽量JS）
【セクション構成】
- ヒーローセクション
- 実績・数字セクション
- サービス内容（4つのカード）
- 強み・選ばれる理由（3つ）
- 制作実績・ポートフォリオ
- ご依頼の流れ（5ステップ）
- 料金目安
- FAQ（4つ）
- CTA + フッター
【避けてほしいこと】
- 安っぽいグラデーション
- 要素の詰め込みすぎ
- 余白の少ないレイアウト
- 統一感のないフォントサイズ
- 小さすぎるボタン
【意識してほしいこと】
- 十分な余白（セクション間は py-24 以上）
- 視覚的階層の明確さ
- 一貫したスペーシングシステム
- 控えめだが効果的なアニメーション
- 「この人に仕事を頼みたい」と思わせる信頼感
HTMLのコードブロックのみを出力してください。説明は不要です。
例③：プロンプト比較・選択型プロンプト：その①
あなたは年収2000万円以上を稼ぐシリコンバレーのシニアフロントエンドエンジニアです。
Apple、Stripe、Vercelでデザインシステムを構築した経験があります。
以下の要件でヒーローセクションを3パターン作成してください。
それぞれ全く異なるアプローチで、どれも「これがAI？」と驚かれるクオリティで仕上げてください。
【共通要件】
- HP名：ShinCode - Tech Creator & Developer
- キャッチコピー：「技術を、届ける。」
- サブコピー：「10万人以上に届けてきたプログラミング教育と、AI×SaaS開発の知見で、御社の課題を解決します。」
- CTA：「お問い合わせ」「サービス一覧を見る」の2つ
- Tailwind CSS（CDN経由）
- レスポンシブ対応
- ホバーエフェクト付きボタン
【パターンA：ダークモード × グラデーション × 大胆タイポグラフィ】
- 背景：#0F172A → #1E293B のグラデーション、または紫〜青のグラデーション
- テキスト：白、キャッチコピーは text-6xl md:text-8xl くらい大胆に
- アクセント：グラデーションテキスト or グロウエフェクト
- 雰囲気：Linear、Raycast のようなダークでクールな印象
- 微細なグリッドパターンやノイズテクスチャがあると尚良い
【パターンB：ライトモード × クリーン × ミニマル】
- 背景：#FFFFFF or #FAFAFA、シンプルな幾何学模様 or なし
- テキスト：#0F172A（ダークネイビー）
- アクセント：#3B82F6（ブルー）をボタンやアンダーラインに
- 雰囲気：Stripe、Notion のようなクリーンで信頼感のある印象
- 余白をたっぷり取った、呼吸できるレイアウト
【パターンC：スプリットレイアウト × インタラクティブ】
- 左側：テキストコンテンツ（キャッチコピー、サブコピー、CTA）
- 右側：コードエディタ風のUI or ターミナル風のアニメーション or 抽象的な3D風グラフィック（CSSで表現）
- 背景：ダークまたはライト、どちらでもOK
- 雰囲気：Vercel、GitHub のような開発者向けの印象
- 右側のビジュアルは、技術者・開発者であることが伝わるもの
【出力形式】
- 各パターンを完全なHTMLとして出力（<!DOCTYPE html>から）
- パターンごとに区切りを入れて、どれがA/B/Cか明記
- 説明は不要、コードのみ出力
【クオリティチェック】
各パターンが以下を満たしているか確認してください：
□ ファーストビューで「プロが作った」と感じる
□ 余白が十分にある（詰め込み感がない）
□ CTAボタンが目立つ
□ モバイルでも美しく表示される
□ ホバー時の変化が心地よい
例③：プロンプト比較・選択型プロンプト：その②
【サービス概要】
- HP名：ShinCode - Tech Creator & Developer
- ターゲット：20~50代の企業担当者（マーケティング、人事、事業開発部門）
- 価値提案：
の事業HPを作るので、HPデザイン案を5つ出して作ってください。
例④：リバースエンジニアリング型プロンプト
https://linear.app/ のデザインを参考に、以下の要件でLPを作成してください。
デザインのテイスト、余白感、アニメーションなど、可能な限り再現してください。
特に意識してほしいポイント：
- ダークな配色とグラデーションの美しさ
- セクション間の大胆な余白
- 控えめだが洗練されたホバー・スクロールアニメーション
- タイポグラフィの階層感（大きな見出し、読みやすい本文）
- 「プロダクトとして完成されている」という信頼感
【サービス概要】
- HP名：ShinCode - Tech Creator & Developer
- ターゲット：20~50代の企業担当者（マーケティング、人事、事業開発部門）
- 価値提案：
【セクション構成】
- ヒーローセクション
- 実績・数字セクション
- サービス内容（4カード）
- 強み（3つ）
- 制作実績
- ご依頼の流れ（5ステップ）
- 料金目安
- FAQ（4つ）
- CTA + フッター
【技術要件】
- Tailwind CSS（CDN経由）
- レスポンシブ対応
- 1ファイルで完結するHTML
- スムーズスクロール
- ホバー・フェードインアニメーション
HTMLコードのみ出力してください。説明は不要です。
