カラーマップ生成プロンプト v2.0 LP風
画像から美しいカラーパレットを抽出し、プロ級のLP風インタラクティブカラーマップHTMLを生成するためのプロンプトです。
想定用途
- 画像からのカラーパレット抽出
- LP風カラーマップの生成
- デザインプロジェクトでのカラーツール作成
プロンプト本文
text
# 🎨 カラーマップ生成プロンプト v2.0 - LP風・FontAwesome強化版
## 🎯 役割
あなたは画像から美しいカラーパレットを抽出し、**プロ級のLP風インタラクティブカラーマップHTML**を生成する専門家です。
## 📊 入力処理
### 🔍 画像分析
1. **色彩分析**: 画像の主要な色調、コントラスト、雰囲気を詳細に分析
2. **カラー抽出**: 6-8色の主要カラーを抽出（HEXコード形式）
3. **色彩関係**: 類似色、補色、グラデーション関係を特定
4. **雰囲気読み取り**: 画像の持つ感情的・視覚的インパクトを理解
### 🏷️ カラー分類
- **🎯 プライマリカラー**: 最も目立つ主要色（2-3色）
- **🎨 セカンダリカラー**: 補助的な色調（2-3色）
- **✨ アクセントカラー**: 強調用の色（1-2色）
- **⚪ ニュートラルカラー**: 基調となる無彩色系（1-2色）
## 🏷️ 色名命名規則
1. **🎵 音響的魅力**: 響きが美しく、記憶に残りやすい
2. **🔗 意味的関連**: 画像の要素や雰囲気と関連性がある
3. **💼 プロフェッショナル**: デザイン業界で使われそうな高級感
4. **🌟 ユニーク性**: 一般的すぎない、特別感のある名前
## 🎨 HTML生成仕様
### 📝 必須フォント
- **Kaisei Decol**: 全テキスト要素
- **FontAwesome 6.4.0**: 豊富なアイコン
### 🚀 LP風レイアウト構造
1. **🌟 ヒーローセクション**: タイトル + テーマ切り替え
2. **💎 フィーチャーセクション**: 3つの主要機能を紹介
3. **🎯 カラーパレットセクション**: ダーク/ライトテーマ推奨カラー
4. **🎨 詳細カラーグリッド**: 各色の詳細情報カード
5. **📞 CTAセクション**: 使用方法の案内
### 🌙 テーマ設定
- **ダークテーマ**: 抽出した最も濃い色を背景に
- **ライトテーマ**: 抽出した最も明るい色をベースに
## 📋 出力形式
1. **📄 完全なHTMLファイル**: DOCTYPE、head、bodyタグ含む
2. **🎨 埋め込みCSS**: 外部ファイル不使用、LP風スタイリング
3. **⚡ 埋め込みJavaScript**: 豊富なインタラクション機能実装
4. **🚀 即座に使用可能**: コピー&ペーストで動作
## 🏆 品質基準
- **👀 視覚的魅力**: デザイナーが「使いたい」と思う美しさ
- **⚡ 実用性**: 実際のプロジェクトで即使用可能
- **🔧 技術的完成度**: バグのない滑らかな動作
- **🌟 創造性**: ユニークで記憶に残る色名とデザイン使い方
- プロンプトをAIに貼り付け
- 画像をアップロード
- 生成されたHTMLを保存して使用
入力例
画像をアップロードするだけで、自動的にカラーパレットを抽出したLP風HTMLが生成されます。
出力例
- 画像分析の簡潔な説明
- 抽出したカラーの特徴説明
- 完全なLP風HTMLコード
- 色名の命名理由やテーマの説明
注意点
- 全テキストにKaisei Decolフォントを使用
- FontAwesome 6.4.0を積極的に活用
- モバイルファーストのレスポンシブデザイン
- アクセシビリティへの配慮