landing-page

ランディングページジェネレーター

デプロイ可能な完全なランディングページを、単一の HTML ファイルとして生成します。ビルド手順や依存関係は不要です。ブラウザーで開くか、どこにでもデプロイできます。

ワークフロー

1. 概要を確認する

ユーザーに次の情報を尋ねます。

項目	必須	例
ビジネス／製品名	はい	"Acme Plumbing"
価値提案	はい	"ニューカッスル全域で24時間対応の緊急水道修理"
ターゲット層	はい	"ハンターバレーの住宅所有者"
メインの CTA	はい	"今すぐ電話" ／ "見積もりを依頼" ／ "登録"
サブの CTA	いいえ	"詳しく見る" ／ "料金を見る"
ブランドカラー	いいえ	メイン：#1E40AF、アクセント：#F59E0B
ロゴの URL またはテキスト	いいえ	ロゴ画像の URL、またはビジネス名を使用
電話番号／メールアドレス	いいえ	お問い合わせセクション用
希望するセクション	いいえ	デフォルト：ヒーロー、特長、お客様の声、FAQ、フッター

ブランドカラーの指定がない場合は、color-palette スキルを使って生成するよう提案するか、無難なデフォルト（スレート／ブルー）を使用します。

2. HTML を生成する

単一の HTML ファイルを作成します。内容は次のとおりです。

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  
  <script src="https://cdn.tailwindcss.com"></script>
  <script>tailwind config with custom colours</script>
</head>
<body>
  
  
  
  
  
  
  
  
</body>
</html>

3. セクションのパターン

ナビゲーション

• ロゴ／名前とセクションへのアンカーリンクを含む、上部固定ナビゲーション
• モバイル用ハンバーガーメニュー（CSS のみ、または最小限の JS）
• ナビゲーション内の CTA ボタン（右寄せ）

ヒーロー

• ファーストビューに全幅で表示
• 見出し（h1）— ビジネス名ではなく価値提案
• サブ見出し — 補足説明を1～2文で記載
• メインの CTA ボタン（大きく、コントラストの高い色）
• 任意：ヒーロー画像のプレースホルダー、またはグラデーション背景
• パターン：デスクトップでは左寄せのテキスト（画像と60／40の分割）、モバイルでは中央揃え

特長／サービス

• レスポンシブグリッドに3～6項目を配置（モバイルは1列、デスクトップは2～3列）
• 各項目：アイコンのプレースホルダー＋見出し＋簡潔な説明
• セマンティックな見出しを使用（セクションには h2、項目には h3）

ソーシャルプルーフ／お客様の声

• 引用、名前、役職／会社名を含むお客様の声カードを2～3枚
• 該当する場合は星評価
• 代替案：顧客／パートナーのロゴバー

料金（任意）

• 2～3段階の料金カード（ベーシック／プロ／エンタープライズのパターン）
• 「おすすめ」のプランを強調表示
• 各プランの機能比較リスト
• 各プランに CTA ボタン

FAQ

• アコーディオン形式（JS 不要の details／summary）
• よくある質問を4～6件
• SEO 用に Schema.org の FAQPage マークアップを追加

フッター

• ビジネス名、連絡先情報、ソーシャルリンク
• 法的リンク（プライバシー、利用規約）のプレースホルダー
• 著作権年（自動更新には JS を使用）

4. 技術要件

レスポンシブ：モバイルファーストで、ブレークポイントは3つ

Default: mobile (< 640px)
sm: 640px+ (tablet)
lg: 1024px+ (desktop)

ダークモード：ライト／ダーク／システムの3状態切り替え

• 色には CSS カスタムプロパティを使用
• <html> に .dark クラスを設定 — CSS のメディアクエリは使用しない
• 切り替えと localStorage による設定保持のための小さな JS スニペット

アクセシビリティ：

• 適切な見出し階層（h1 → h2 → h3、飛ばさない）
• すべての画像に alt テキストのプレースホルダーを設定
• インタラクティブ要素にフォーカス可視化スタイルを設定
• 十分な色のコントラスト（最小4.5:1）
• コンテンツへのスキップリンク

SEO：

• セマンティックな HTML5 要素（header、main、section、footer）
• OG メタタグ（タイトル、説明、画像、URL）
• Twitter カードのメタタグ
• 正規 URL
• ローカルビジネスの場合は、LocalBusiness 用の JSON-LD を追加（seo-local-business スキルを参照）

パフォーマンス：

• コアコンテンツの描画に JS は不要
• 画像を遅延読み込み（loading="lazy"）
• システムフォントスタックを使用（外部フォントのリクエストなし）
• 単一ファイル — Tailwind CDN 以外の外部 CSS／JS は使用しない

5. 色の適用

ユーザーがブランドカラーを指定した場合、Tailwind をインラインで設定します。

<script>
tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: { DEFAULT: '#1E40AF', light: '#3B82F6', dark: '#1E3A8A' },
        accent: { DEFAULT: '#F59E0B', light: '#FBBF24', dark: '#D97706' },
      }
    }
  }
}
</script>

色の指定がない場合は、Tailwind 組み込みのパレットを使用します（ニュートラルにはスレート、メインカラーにはブルー）。

6. 出力

ユーザーが指定した場所にファイルを書き込みます。指定がない場合は ./index.html を使用します。

生成後：

1. プレビュー方法をユーザーに伝えます：open index.html（macOS）またはローカルサーバー用の python3 -m http.server
2. デプロイ方法を提案します：Cloudflare Pages にドラッグする、Netlify Drop を使う、または Workers 用に wrangler deploy を実行する
3. 差し替えが必要なプレースホルダーコンテンツ（画像、お客様の声、電話番号）を一覧にします

品質ルール

1. プレースホルダーに意味のないテキストを使わない — ビジネスの種類に基づいた、現実的なプレースホルダーテキストを生成してください
2. レイアウトを崩さない — レスポンシブグリッドを頭の中で確認してください：1列 → 2列 → 3列
3. インラインスタイルを使わない — Tailwind クラスのみを使用してください
4. 実際に動作するインタラクション — セクションへのスムーズスクロール、動作するアコーディオン、動作するダークモード切り替えを実装してください
5. デフォルトでアクセシブルにする — 見た目のためにアクセシビリティを犠牲にしないでください
6. オーストラリアの慣習に合わせる — ビジネスがオーストラリアにある場合は、+61 の電話番号形式、オーストラリア英語のスペル、ABN のプレースホルダーを使用してください

バリエーション

リクエスト	アプローチ
「近日公開ページ」	ヒーローのみ + メール登録フォーム + カウントダウンタイマー
「製品ローンチ」	ヒーロー + 特長 + 価格 + CTA を中心とした構成
「ポートフォリオ」	ヒーロー + プロジェクトグリッド + 概要 + お問い合わせ
「イベントページ」	ヒーロー + スケジュール + 登壇者 + 会場 + 登録 CTA
「アプリのダウンロード」	ヒーロー + 特長 + スクリーンショット + アプリストアバッジ

ページの目的に合わせてセクションの選択を調整してください。すべてのページに価格や FAQ が必要なわけではありません。