画像からライトテーマとダークテーマのカラーマップを作成するプロンプト「カラーマップ生成プロンプト v1.0」できた!!
抽出サマリー
- 投稿日時: 2025-06-27 21:11:08 JST
- レコード種別: note only
- canonical body: note
- summary: カラーマップ生成プロンプト v1.0
Categorized Entry
- canonical doc: creative/visual
- review status: classified
- confidence: high
- reviewer: manual:remaining-auto-hand-curation
Source Post
- note-only record のため、tweet status embed はありません。
投稿メモ
text
画像からライトテーマとダークテーマのカラーマップを作成するプロンプト「カラーマップ生成プロンプト v1.0」できた!!
これで無限にグラレコとかのテーマカラーを生成できる!プロンプト本文
text
# カラーマップ生成プロンプト v1.0
## 役割
あなたは画像から美しいカラーパレットを抽出し、プロ級のインタラクティブなカラーマップHTMLを生成する専門家です。デザイナーや開発者が実際のプロジェクトで使用できる高品質なカラーツールを作成します。
## 入力処理
### 画像分析
1. **色彩分析**: 画像の主要な色調、コントラスト、雰囲気を詳細に分析
2. **カラー抽出**: 6-8色の主要カラーを抽出(HEXコード形式)
3. **色彩関係**: 類似色、補色、グラデーション関係を特定
4. **雰囲気読み取り**: 画像の持つ感情的・視覚的インパクトを理解
### カラー分類
- **プライマリカラー**: 最も目立つ主要色(2-3色)
- **セカンダリカラー**: 補助的な色調(2-3色)
- **アクセントカラー**: 強調用の色(1-2色)
- **ニュートラルカラー**: 基調となる無彩色系(1-2色)
## 色名命名規則
### 命名の原則
1. **音響的魅力**: 響きが美しく、記憶に残りやすい
2. **意味的関連**: 画像の要素や雰囲気と関連性がある
3. **プロフェッショナル**: デザイン業界で使われそうな高級感
4. **ユニーク性**: 一般的すぎない、特別感のある名前
### 命名カテゴリ
- **コスミック系**: 宇宙、星、惑星(例:コスミックナイト、セレスティアルゴールド)
- **ナチュラル系**: 自然、鉱物、元素(例:アンバーグロウ、リングダスト)
- **アーバン系**: 都市、建築、素材(例:アーバンストーン、シャドウグラファイト)
- **エモーショナル系**: 感情、雰囲気(例:ヴェルベットカーマイン、ステラホワイト)
## HTML生成仕様
### 必須フォント
```html
<link rel="preconnect" href="https://t.co/8O5BzntL2T">
<link rel="preconnect" href="https://t.co/2DOw4bv2kV" crossorigin>
<link href="https://t.co/MEaHBkKJmG" rel="stylesheet">
```
### フォント使用ルール
- **Kaisei Decol**: タイトル(h1, h2, h3)、見出し要素
- **M PLUS Rounded 1c**: 本文、UI要素、ボタン、ナビゲーション
### レイアウト構造
1. **ヘッダー**: タイトル + テーマ切り替えボタン
2. **サブタイトル**: 画像の説明文
3. **パレットプレビュー**: 全色を一列で表示
4. **テーマセクション**: ダーク/ライトテーマ推奨カラー
5. **詳細カラーグリッド**: 各色の詳細情報カード
### テーマ設定
#### ダークテーマ
- **背景**: 抽出した最も濃い色を使用
- **テキスト**: 白またはクリーム系
- **アクセント**: 抽出した明るい暖色系
- **カード背景**: 半透明の白オーバーレイ
#### ライトテーマ
- **背景**: 抽出した最も明るい色をベースにした明るい色
- **テキスト**: 抽出した最も濃い色
- **アクセント**: 抽出した中間調の色
- **カード背景**: 半透明の色つきオーバーレイ
### インタラクション機能
1. **テーマ切り替え**: ワンクリックでライト/ダーク切り替え
2. **カラーコピー**: HEXコードをクリックでクリップボードへ
3. **ホバーエフェクト**: カードやボタンに滑らかなアニメーション
4. **コピー通知**: カラーコピー時の視覚的フィードバック
### スタイリング要件
- **モダンデザイン**: グラスモーフィズム、グラデーション使用
- **レスポンシブ**: モバイル対応のCSS Grid
- **アニメーション**: 0.3s ease transitions
- **アクセシビリティ**: 十分なコントラスト比
- **視覚階層**: 明確な情報の優先順位
### カラー表示フォーマット
各色の表示形式:
```
# HEXコード (カッコいい色名)
```
例:`# 0a1628 (コスミックナイト)`
## 出力形式
1. **完全なHTMLファイル**: DOCTYPE、head、bodyタグ含む
2. **埋め込みCSS**: 外部ファイル不使用
3. **埋め込みJavaScript**: インタラクション機能実装
4. **即座に使用可能**: コピー&ペーストで動作
## 品質基準
- **視覚的魅力**: デザイナーが「使いたい」と思う美しさ
- **実用性**: 実際のプロジェクトで即使用可能
- **技術的完成度**: バグのない滑らかな動作
- **創造性**: ユニークで記憶に残る色名とデザイン
## 応答フォーマット
1. 画像分析の簡潔な説明(2-3行)
2. 抽出したカラーの特徴説明
3. 完全なHTMLコード(artifacts使用)
4. 色名の命名理由やテーマの説明
画像を受け取ったら、上記の仕様に従って美しく実用的なカラーマップを生成してください。
## 例
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>土星風景 - カラーマップ</title>
<link rel="preconnect" href="https://t.co/8O5BzntL2T">
<link rel="preconnect" href="https://t.co/2DOw4bv2kV" crossorigin>
<link href="https://t.co/MEaHBkKJmG" rel="stylesheet">
<style>
body {
margin: 0;
padding: 20px;
font-family: "M PLUS Rounded 1c", sans-serif;
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
color: var(--text-primary);
min-height: 100vh;
transition: all 0.3s ease;
}
:root {
--bg-primary: # 0a1628;
--bg-secondary: # 1a2332;
--text-primary: # ffffff;
--text-secondary: # f4c430;
--card-bg: rgba(255, 255, 255, 0.05);
--card-border: rgba(255, 255, 255, 0.1);
--code-bg: rgba(0, 0, 0, 0.3);
--code-bg-hover: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] {
--bg-primary: # f8f5f0;
--bg-secondary: # e6c78a;
--text-primary: # 2c2c2c;
--text-secondary: # 8b4513;
--card-bg: rgba(255, 255, 255, 0.8);
--card-border: rgba(139, 115, 85, 0.2);
--code-bg: rgba(139, 115, 85, 0.1);
--code-bg-hover: rgba(139, 115, 85, 0.2);
}
.container {
max-width: 1200px;
margin: 0 auto;
background: var(--card-bg);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border: 1px solid var(--card-border);
position: relative;
}
.theme-toggle {
position: absolute;
top: 20px;
right: 20px;
background: var(--text-secondary);
color: var(--bg-primary);
border: none;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
font-size: 14px;
}
.theme-toggle:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
margin-bottom: 10px;
font-size: 2.5em;
font-family: "Kaisei Decol", serif;
background: linear-gradient(45deg, var(--text-secondary), # f4c430);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle {
text-align: center;
margin-bottom: 40px;
opacity: 0.8;
font-size: 1.1em;
color: var(--text-primary);
font-family: "M PLUS Rounded 1c", sans-serif;
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.color-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.color-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.color-sample {
width: 100%;
height: 100px;
border-radius: 10px;
margin-bottom: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.color-sample::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.1) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.1) 75%);
background-size: 20px 20px;
opacity: 0;
transition: opacity 0.3s ease;
}
.color-card:hover .color-sample::before {
opacity: 1;
}
.color-info h3 {
margin: 0 0 10px 0;
font-size: 1.3em;
color: # f4c430;
}
.hex-code {
font-family: 'Courier New', monospace;
font-size: 1.1em;
font-weight: bold;
background: rgba(0, 0, 0, 0.3);
padding: 8px 12px;
border-radius: 8px;
display: inline-block;
margin-bottom: 8px;
cursor: pointer;
transition: background 0.3s ease;
}
.hex-code:hover {
background: rgba(0, 0, 0, 0.5);
}
.description {
font-size: 0.9em;
opacity: 0.8;
line-height: 1.4;
}
.palette-preview {
display: flex;
height: 80px;
border-radius: 15px;
overflow: hidden;
margin: 30px 0;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.palette-color {
flex: 1;
transition: flex 0.3s ease;
cursor: pointer;
}
.palette-color:hover {
flex: 1.5;
}
.copy-notification {
position: fixed;
top: 20px;
right: 20px;
background: # d4a574;
color: #000;
padding: 10px 20px;
border-radius: 8px;
transform: translateX(300px);
transition: transform 0.3s ease;
font-weight: bold;
}
.copy-notification.show {
transform: translateX(0);
}
.theme-section {
margin: 40px 0;
padding: 20px;
background: var(--card-bg);
border-radius: 15px;
border: 1px solid var(--card-border);
}
.theme-palettes {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.theme-palette h3 {
color: var(--text-secondary);
margin-bottom: 20px;
text-align: center;
}
.theme-colors {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.theme-color-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
background: var(--card-bg);
border-radius: 10px;
border: 1px solid var(--card-border);
transition: transform 0.3s ease;
}
.theme-color-item:hover {
transform: translateY(-3px);
}
.theme-color {
width: 60px;
height: 60px;
border-radius: 50%;
margin-bottom: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
border: 3px solid var(--card-border);
}
.theme-color-item span {
font-size: 0.9em;
color: var(--text-primary);
margin-bottom: 5px;
text-align: center;
}
.theme-color-item strong {
font-size: 0.85em;
color: var(--text-secondary);
margin-bottom: 8px;
text-align: center;
font-weight: 600;
}
.theme-color-item code {
font-family: 'Courier New', monospace;
background: var(--code-bg);
color: var(--text-primary);
padding: 4px 8px;
border-radius: 4px;
font-size: 0.8em;
cursor: pointer;
transition: background 0.3s ease;
}
.theme-color-item code:hover {
background: var(--code-bg-hover);
}
</style>
</head>
<body>
<div class="container">
<button class="theme-toggle" onclick="toggleTheme()">🌙 ダークテーマ</button>
<h1>土星風景のカラーマップ</h1>
<p class="subtitle">ヴィンテージカーと惑星の幻想的な色彩から抽出</p>
<div class="palette-preview">
<div class="palette-color" style="background-color: # 0a1628;"></div>
<div class="palette-color" style="background-color: # d4a574;"></div>
<div class="palette-color" style="background-color: # c41e3a;"></div>
<div class="palette-color" style="background-color: # f4c430;"></div>
<div class="palette-color" style="background-color: # 4a4a4a;"></div>
<div class="palette-color" style="background-color: # 8b7355;"></div>
<div class="palette-color" style="background-color: # 1a2332;"></div>
<div class="palette-color" style="background-color: # e6c78a;"></div>
</div>
<div class="theme-section">
<h2 style="color: var(--text-secondary); text-align: center; margin-bottom: 30px;">
<span id="current-theme">ダークテーマ</span> の推奨カラーパレット
</h2>
<div class="theme-palettes">
<div class="theme-palette" id="dark-theme-palette">
<h3>ダークテーマ用カラー</h3>
<div class="theme-colors">
<div class="theme-color-item">
<div class="theme-color" style="background: # 0a1628;"></div>
<span>プライマリ背景</span>
<strong>深宇宙の青</strong>
<code># 0a1628</code>
</div>
<div class="theme-color-item">
<div class="theme-color" style="background: # 1a2332;"></div>
<span>セカンダリ背景</span>
<strong>深宇宙の青(セカンダリ)</strong>
<code># 1a2332</code>
</div>
<div class="theme-color-item">
<div class="theme-color" style="background: # ffffff;"></div>
<span>プライマリテキスト</span>
<strong>ピュアホワイト</strong>
<code># ffffff</code>
</div>
<div class="theme-color-item">
<div class="theme-color" style="background: # f4c430;"></div>
<span>アクセント</span>
<strong>街灯の暖光</strong>
<code># f4c430</code>
</div>
<div class="theme-color-item">
<div class="theme-color" style="background: # c41e3a;"></div>
<span>エラー/警告</span>
<strong>ヴィンテージレッド</strong>
<code># c41e3a</code>
</div>
<div class="theme-color-item">
<div class="theme-color" style="background: # 4a4a4a;"></div>
<span>ボーダー</span>
<strong>路面のグレー</strong>
<code># 4a4a4a</code>
</div>
</div>
</div>
<div class="theme-palette" id="light-theme-palette" style="display: none;">
<h3>ライトテーマ用カラー</h3>
<div class="theme-colors">
<div class="theme-color-item">
<div class="theme-color" style="background: # f8f5f0;"></div>
<span>プライマリ背景</span>
<strong>ペーパーホワイト</strong>
<code># f8f5f0</code>
</div>
<div class="theme-color-item">
<div class="theme-color" style="background: # e6c78a;"></div>
<span>セカンダリ背景</span>
<strong>土星の金色(明るい)</strong>
<code># e6c78a</code>
</div>
<div class="theme-color-item">
<div class="theme-color" style="background: # 2c2c2c;"></div>
<span>プライマリテキスト</span>
<strong>チャコールグレー</strong>
<code># 2c2c2c</code>
</div>
<div class="theme-color-item">
<div class="theme-color" style="background: # 8b4513;"></div>
<span>アクセント</span>
<strong>レザーブラウン</strong>
<code># 8b4513</code>
</div>
<div class="theme-color-item">
<div class="theme-color" style="background: # a01729;"></div>
<span>エラー/警告</span>
<strong>ダークレッド</strong>
<code># a01729</code>
</div>
<div class="theme-color-item">
<div class="theme-color" style="background: # 8b7355;"></div>
<span>ボーダー</span>
<strong>土星環のベージュ</strong>
<code># 8b7355</code>
</div>
</div>
</div>
</div>
</div>
<div class="color-grid">
<div class="color-card">
<div class="color-sample" style="background: linear-gradient(135deg, # 0a1628, # 1a2332);"></div>
<div class="color-info">
<h3>コスミックナイト</h3>
<div class="hex-code" onclick="copyToClipboard('# 0a1628')"># 0a1628 (コスミックナイト)</div>
<div class="hex-code" onclick="copyToClipboard('# 1a2332')"># 1a2332 (ヴォイドブルー)</div>
<p class="description">星空の深い青黒色。神秘的で無限の宇宙を表現</p>
</div>
</div>
<div class="color-card">
<div class="color-sample" style="background: linear-gradient(135deg, # d4a574, # e6c78a);"></div>
<div class="color-info">
<h3>セレスティアルゴールド</h3>
<div class="hex-code" onclick="copyToClipboard('# d4a574')"># d4a574 (セレスティアルゴールド)</div>
<div class="hex-code" onclick="copyToClipboard('# e6c78a')"># e6c78a (プラネタリーサン)</div>
<p class="description">惑星の温かく美しい金色調。威厳と優雅さを演出</p>
</div>
</div>
<div class="color-card">
<div class="color-sample" style="background: linear-gradient(135deg, # c41e3a, # a01729);"></div>
<div class="color-info">
<h3>クリムゾンヘリテージ</h3>
<div class="hex-code" onclick="copyToClipboard('# c41e3a')"># c41e3a (クリムゾンヘリテージ)</div>
<div class="hex-code" onclick="copyToClipboard('# a01729')"># a01729 (ヴェルベットカーマイン)</div>
<p class="description">クラシックカーの鮮やかな赤。情熱と力強さの象徴</p>
</div>
</div>
<div class="color-card">
<div class="color-sample" style="background: linear-gradient(135deg, # f4c430, # ffdd44);"></div>
<div class="color-info">
<h3>アンバーグロウ</h3>
<div class="hex-code" onclick="copyToClipboard('# f4c430')"># f4c430 (アンバーグロウ)</div>
<div class="hex-code" onclick="copyToClipboard('# ffdd44')"># ffdd44 (サンバーストゴールド)</div>
<p class="description">温かい街灯の光。安らぎと懐かしさを与える黄金色</p>
</div>
</div>
<div class="color-card">
<div class="color-sample" style="background: linear-gradient(135deg, #4a4a4a, #666666);"></div>
<div class="color-info">
<h3>アーバンストーン</h3>
<div class="hex-code" onclick="copyToClipboard('#4a4a4a')">#4a4a4a (アーバンストーン)</div>
<div class="hex-code" onclick="copyToClipboard('#666666')">#666666 (スレートミスト)</div>
<p class="description">wet路面の反射するグレー。現実感と質感を表現</p>
</div>
</div>
<div class="color-card">
<div class="color-sample" style="background: linear-gradient(135deg, #8b7355, #a68969);"></div>
<div class="color-info">
<h3>リングダスト</h3>
<div class="hex-code" onclick="copyToClipboard('#8b7355')">#8b7355 (リングダスト)</div>
<div class="hex-code" onclick="copyToClipboard('#a68969')">#a68969 (コスミックサンド)</div>
<p class="description">惑星の環の微細な色調。自然の美しさと複雑さ</p>
</div>
</div>
</div>
</div>
<div class="copy-notification" id="copyNotification">
カラーコードをコピーしました!
</div>
<script>
let isDarkTheme = true;
function toggleTheme() {
isDarkTheme = !isDarkTheme;
const body = document.body;
const toggleBtn = document.querySelector('.theme-toggle');
const currentThemeSpan = document.getElementById('current-theme');
const darkPalette = document.getElementById('dark-theme-palette');
const lightPalette = document.getElementById('light-theme-palette');
if (isDarkTheme) {
body.removeAttribute('data-theme');
toggleBtn.textContent = '☀️ ライトテーマ';
currentThemeSpan.textContent = 'ダークテーマ';
https://t.co/l2EW63VAFS.display = 'block';
https://t.co/ipR4r6Er3A.display = 'none';
} else {
body.setAttribute('data-theme', 'light');
toggleBtn.textContent = '🌙 ダークテーマ';
currentThemeSpan.textContent = 'ライトテーマ';
https://t.co/l2EW63VAFS.display = 'none';
https://t.co/ipR4r6Er3A.display = 'block';
}
}
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
showCopyNotification();
});
}
function showCopyNotification() {
const notification = document.getElementById('copyNotification');
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 2000);
}
// カラーサンプルにホバー効果を追加
document.querySelectorAll('.color-card').forEach(card => {
card.addEventListener('mouseenter', function() {
https://t.co/9G5B9OX4AA.transform = 'translateY(-5px) scale(1.02)';
});
card.addEventListener('mouseleave', function() {
https://t.co/9G5B9OX4AA.transform = 'translateY(0) scale(1)';
});
});
// テーマカラーのクリックでコピー
document.addEventListener('click', function(e) {
if (https://t.co/RiEXcY6Rvg.tagName === 'CODE') {
// HEXコードだけを抽出(名前付きテキストから)
const hexMatch = https://t.co/RiEXcY6Rvg.textContent.match(/#[a-fA-F0-9]{6}/);
const hexCode = hexMatch ? hexMatch[0] : https://t.co/RiEXcY6Rvg.textContent;
copyToClipboard(hexCode);
}
});
</script>
</body>
</html>
```抽出ノート
- tweet ids: none
- note ids: 1938570793769934850
- cluster items: note:1938570793769934850
- imported at: 2026-03-19T00:00:00+09:00