<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像生成プロンプト作成機（超・完全版）</title>
<style>
body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; padding: 1em; background-color: #f0f2f5; color: #333; }
.container { display: flex; flex-direction: column; gap: 20px; max-width: 650px; margin: 0 auto; background: #fff; padding: 25px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
h1 { text-align: center; color: #444; font-size: 1.6em; margin-bottom: 10px; }
.section-box {
border: 1px solid #e1e4e8;
padding: 20px;
border-radius: 12px;
background-color: #fafbfc;
}
.section-label {
font-weight: bold;
color: #555;
display: block;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 5px;
}
/* 入力要素のデザイン */
.prompt-input, textarea, select {
width: 100%;
padding: 12px;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
background-color: #fff;
}
.prompt-input:focus, textarea:focus, select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}
/* 履歴周り */
.history-controls { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
select.history-select { flex-grow: 1; padding: 8px; border: 1px solid #ddd; }
.clear-btn { font-size: 0.85em; cursor: pointer; color: #d9534f; background: none; border: 1px solid #d9534f; border-radius: 6px; padding: 6px 10px; white-space: nowrap; }
/* ランダムボタン */
.random-btn {
width: 100%;
padding: 12px;
font-size: 1em;
font-weight: bold;
color: #fff;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 8px;
cursor: pointer;
margin-bottom: 15px;
transition: all 0.2s;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.random-btn:active { transform: translateY(2px); box-shadow: none; }
.random-btn:hover { opacity: 0.9; }
/* 詳細エリア */
textarea { height: 110px; line-height: 1.6; resize: vertical; }
/* 送信エリア */
.controls { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
button.send-btn {
padding: 12px 25px;
cursor: pointer;
font-size: 1em;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
font-weight: bold;
white-space: nowrap;
box-shadow: 0 4px 6px rgba(0,123,255,0.2);
}
button.send-btn:hover { background-color: #0056b3; }
</style>
</head>
<body>
<h1>🎨 超・画像生成プロンプト作成機</h1>
<div class="container">
<div class="section-box">
<label class="section-label">📌 1. 何を作りますか？（指示）</label>
<input type="text" id="instructionInput" class="prompt-input"
value="360度パノラマ画像を作って。">
<div class="history-controls">
<select id="instructionHistory" class="history-select" onchange="selectHistory()">
<option value="" disabled selected>履歴から選択...</option>
</select>
<button type="button" class="clear-btn" onclick="clearHistory()">履歴削除</button>
</div>
</div>
<div class="section-box">
<label class="section-label">🎲 2. どんな情景ですか？（詳細）</label>
<button class="random-btn" onclick="generateRandomPrompt()">
ランダムな情景を生成する (ワード数 3倍増量中!)
</button>
<textarea id="detailArea" placeholder="ボタンを押すと、ここに詳細な情景が生成されます..."></textarea>
</div>
<div class="section-box" style="background-color: #eef2ff; border-color: #d0d7de;">
<label class="section-label">🚀 3. AIを選択して作成</label>
<div class="controls">
<select id="aiSelector">
<option value="bing">Bing Image Creator (日本語OK/無料)</option>
<option value="firefly">Adobe Firefly (日本語OK/高品質)</option>
<option value="gemini">Google Gemini</option>
<option value="chatgpt">ChatGPT (DALL-E 3)</option>
<option value="claude">Claude (プロンプト相談用)</option>
<option value="perplexity">Perplexity (検索して作成)</option>
</select>
<button class="send-btn" onclick="askAI()">作成開始</button>
</div>
</div>
</div>
<script>
// ---------------------------------------------------------
// ■ 設定：ランダムワードリスト（大幅増量版）
// ---------------------------------------------------------
const promptData = {
locations: [
// SF・未来
"近未来都市の摩天楼", "ネオン輝くサイバーパンクな路地裏", "巨大な宇宙ステーションのドック",
"火星の居住ドーム", "浮遊する空中都市", "量子コンピュータの内部空間",
// ファンタジー
"古代遺跡が眠る密林", "魔法使いの隠れ家", "クリスタルの洞窟", "雲の上の神殿",
"ドラゴンの巣がある火山", "妖精が住む光る森", "中世ヨーロッパ風の城下町",
// 自然
"静かな湖畔のキャンプ場", "オーロラが見える雪原", "サンゴ礁が広がる海底",
"桜が満開の並木道", "紅葉が美しい日本庭園", "広大なサバンナ", "霧の立ち込める海岸",
// 日常・屋内
"日差しが差し込む図書館", "散らかった画家の部屋", "雨の日のカフェの窓辺",
"賑やかな夜の屋台通り", "誰もいない深夜のコンビニ", "レトロなゲームセンター"
],
times: [
// 時間
"夕暮れ時、マジックアワー", "満天の星空が広がる真夜中", "朝日が昇る早朝",
"太陽が照りつける真昼", "月明かりだけの静寂な夜",
// 天候・現象
"激しい雷雨の中", "しんしんと雪が降る日", "濃い霧に包まれた状態",
"虹がかかっている空", "花吹雪が舞っている", "ダイヤモンドダストが輝く",
"日食で薄暗い瞬間", "嵐の前の静けさ"
],
styles: [
// 画風・タッチ
"油絵のような重厚なタッチ", "水彩画風の淡い色彩", "高精細な写真のようなリアルさ(8k)",
"スタジオジブリ風のアニメスタイル", "新海誠風のドラマチックな背景", "浮世絵スタイル",
"ドット絵(ピクセルアート)", "アメコミ風のポップなスタイル", "鉛筆画のスケッチ風",
"3Dレンダリング(Unreal Engine 5)", "ミニチュア写真風(チルトシフト)", "墨絵スタイル"
],
details: [
// キャラ・生き物
"巨大な猫が寝ている", "空飛ぶクジラが泳いでいる", "小さなロボットが掃除をしている",
"フードを被った謎の人物が立っている", "サイボーグの少女が座っている", "沢山の柴犬が遊んでいる",
// 物・現象
"謎の古代文字が空中に浮かんでいる", "色とりどりの発光植物が生えている", "レトロな飛行船が飛んでいる",
"美味しそうなパンケーキが置かれている", "魔法陣が床に描かれている", "ガラスの破片が舞っている",
// 雰囲気
"ノスタルジックな雰囲気", "退廃的で不気味な空気感", "神々しく幻想的な光",
"活気に満ち溢れている", "孤独で寂しい雰囲気"
]
};
// ---------------------------------------------------------
// ■ 履歴管理機能
// ---------------------------------------------------------
const STORAGE_KEY = 'ai_image_instruction_history_v2'; // キー名を変更してバージョン管理
window.onload = function() { loadHistory(); };
function saveToHistory(text) {
if (!text) return;
let history = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
history = history.filter(item => item !== text);
history.unshift(text);
if (history.length > 20) history.pop();
localStorage.setItem(STORAGE_KEY, JSON.stringify(history));
loadHistory();
}
function loadHistory() {
const historySelect = document.getElementById('instructionHistory');
const history = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
historySelect.innerHTML = '<option value="" disabled selected>履歴から選択...</option>';
const defaults = [
"360度パノラマ画像を作って。",
"PCのデスクトップ壁紙(16:9)を作って。",
"スマホ用の縦長壁紙(9:16)を作って。",
"ファンタジー小説の挿絵を作って。",
"RPGのアイテムアイコン画像を作って。",
"ブログのアイキャッチ画像を作って。",
"リアルな写真風のポートレートを作って。"
];
const allItems = [...new Set([...history, ...defaults])];
allItems.forEach(text => {
const option = document.createElement('option');
option.value = text;
option.text = text.length > 40 ? text.substring(0, 40) + "..." : text;
historySelect.appendChild(option);
});
}
function selectHistory() {
document.getElementById('instructionInput').value = document.getElementById('instructionHistory').value;
}
function clearHistory() {
if(confirm("履歴を削除しますか？")) {
localStorage.removeItem(STORAGE_KEY);
loadHistory();
}
}
// ---------------------------------------------------------
// ■ ランダム生成機能
// ---------------------------------------------------------
function generateRandomPrompt() {
const detailArea = document.getElementById('detailArea');
const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
// 組み合わせロジック
const parts = [
pick(promptData.locations),
pick(promptData.times),
pick(promptData.styles)
];
// 70%の確率でディテールを追加
if (Math.random() > 0.3) parts.push(pick(promptData.details));
detailArea.value = parts.join("。\n") + "。";
// アニメーション効果（枠線を一瞬光らせる）
detailArea.style.borderColor = "#007bff";
setTimeout(() => detailArea.style.borderColor = "#ccc", 300);
}
// ---------------------------------------------------------
// ■ 送信機能 (Instruction + Detail)
// ---------------------------------------------------------
function askAI() {
const instruction = document.getElementById('instructionInput').value.trim();
const details = document.getElementById('detailArea').value.trim();
if (!instruction || !details) {
alert("指示と詳細の両方が必要です。");
return;
}
saveToHistory(instruction);
// プロンプト合体
// 画像生成特化AIの場合は、少し構成を変えると精度が上がりますが、
// 汎用性を重視して「指示 + 詳細」の形にします。
const finalPrompt = instruction + "\n\n【画像の詳細指示】\n" + details;
const aiService = document.getElementById('aiSelector').value;
const encodedPrompt = encodeURIComponent(finalPrompt);
let url = "";
switch (aiService) {
case "bing": url = "https://www.bing.com/images/create"; break;
case "firefly": url = "https://firefly.adobe.com/upload/text_to_image"; break;
case "gemini": url = "https://gemini.google.com/app"; break;
case "chatgpt": url = "https://chatgpt.com/"; break;
case "claude": url = "https://claude.ai/new"; break;
case "perplexity": url = `https://www.perplexity.ai/search?q=${encodedPrompt}`; break;
}
// PerplexityのみURLで自動実行
if (aiService === 'perplexity') {
window.open(url, '_blank');
}
// 他はクリップボードにコピーしてから開く
else {
if (navigator.clipboard) {
navigator.clipboard.writeText(finalPrompt).then(() => {
let serviceName = document.getElementById('aiSelector').options[document.getElementById('aiSelector').selectedIndex].text;
// BingやFirefly用のメッセージ
let msg = "プロンプトをコピーしました！\n\n" + serviceName + "が開きます。\n入力欄に「貼り付け（Ctrl+V）」して作成ボタンを押してください。";
if(confirm(msg)) {
window.open(url, '_blank');
}
});
} else {
alert("コピー機能が使えません。");
window.open(url, '_blank');
}
}
}
</script>
</body>
</html>
使用変数
| aiService | |
| allItems | |
| askAI -------( Function ) | |
| borderColor | |
| charset | |
| class | |
| clearHistory -------( Function ) | |
| defaults | |
| detailArea | |
| details | |
| encodedPrompt | |
| finalPrompt | |
| generateRandomPrompt -------( Function ) | |
| history | |
| historySelect | |
| id | |
| innerHTML | |
| instruction | |
| item | |
| lang | |
| loadHistory -------( Function ) | |
| msg | |
| onchange | |
| onclick | |
| onload | |
| option | |
| parts | |
| pick | |
| placeholder | |
| promptData | |
| q | |
| saveToHistory -------( Function ) | |
| selectHistory -------( Function ) | |
| serviceName | |
| STORAGE_KEY | |
| style | |
| text | |
| type | |
| url | |
| value |