<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像プロンプト生成機 (10項目版)</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: 800px; 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);
}
/* 数値調整グリッド */
.settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.setting-item {
background: #fff;
border: 1px solid #ddd;
padding: 10px;
border-radius: 8px;
text-align: center;
}
.setting-item label {
display: block;
font-size: 0.85em;
color: #666;
margin-bottom: 5px;
font-weight: bold;
}
.setting-item input[type="number"] {
width: 100%;
padding: 8px;
text-align: center;
font-size: 1.1em;
border: 1px solid #ccc;
border-radius: 6px;
}
/* 履歴周り */
.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;
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: 150px; 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; }
button.copy-btn {
padding: 12px 25px;
cursor: pointer;
font-size: 1em;
background-color: #28a745; /* 緑色 */
color: white;
border: none;
border-radius: 8px;
font-weight: bold;
white-space: nowrap;
box-shadow: 0 4px 6px rgba(40, 167, 69, 0.2);
}
button.copy-btn:hover { background-color: #218838; }
.sub-label { font-size: 0.8em; color: #888; margin-top: -5px; margin-bottom: 10px; display:block;}
</style>
</head>
<body>
<h1>🎨 超・画像生成プロンプト作成機 (10項目版)</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. 要素の個数を指定（0で除外）</label>
<span class="sub-label">ジャンルを組み合わせたり、雰囲気を選んでください</span>
<div class="settings-grid">
<div class="setting-item"><label>SF背景</label><input type="number" id="n_sf_bg" value="1" min="0"></div>
<div class="setting-item"><label>SF物体</label><input type="number" id="n_sf_obj" value="0" min="0"></div>
<div class="setting-item"><label>ファンタジー背景</label><input type="number" id="n_fantasy_bg" value="0" min="0"></div>
<div class="setting-item"><label>ファンタジー物体</label><input type="number" id="n_fantasy_obj" value="0" min="0"></div>
<div class="setting-item"><label>自然背景</label><input type="number" id="n_nature_bg" value="0" min="0"></div>
<div class="setting-item"><label>自然物体</label><input type="number" id="n_nature_obj" value="0" min="0"></div>
<div class="setting-item"><label>時間</label><input type="number" id="n_time" value="1" min="0"></div>
<div class="setting-item"><label>天候</label><input type="number" id="n_weather" value="1" min="0"></div>
<div class="setting-item"><label>明るい雰囲気</label><input type="number" id="n_atm_bright" value="0" min="0"></div>
<div class="setting-item"><label>暗い雰囲気</label><input type="number" id="n_atm_dark" value="0" min="0"></div>
</div>
<button class="random-btn" onclick="generateRandomPrompt()">
設定した個数でランダム生成する！
</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="gemini">Google Gemini</option>
<option value="bing">Bing Image Creator (日本語OK)</option>
<option value="firefly">Adobe Firefly</option>
<option value="chatgpt">ChatGPT (DALL-E 3)</option>
<option value="claude">Claude</option>
<option value="perplexity">Perplexity</option>
</select>
<button class="copy-btn" onclick="askAI(false)">コピーのみ</button>
<button class="send-btn" onclick="askAI(true)">立ち上げて開始</button>
</div>
</div>
</div>
<script>
// ---------------------------------------------------------
// ■ 設定：ランダムワードリスト (会話に基づいて生成)
// ---------------------------------------------------------
const promptData = {
sf_bg: [
"近未来都市の摩天楼", "浮遊する空中都市", "ディストピアな地下都市", "ホログラム広告が溢れる繁華街",
"海底に沈んだ未来都市の廃墟", "植物と機械が融合したソーラーパンクな庭園", "二つの月が浮かぶ異星の空",
"アステロイドベルトの採掘基地", "ブラックホールの事象の地平線", "未知の惑星の原生林", "氷の惑星の秘密基地",
"デジタル雨が降る街", "発光するキノコの森", "磁気嵐の吹き荒れる荒野", "垂直農場の緑",
"シールド越しに見る超新星爆発", "テラフォーミングされた惑星の地表", "惑星直列の夜", "バイオルミネセンスの海",
"月面クレーターの影", "異次元への裂け目", "スペースコロニーの円筒内部", "酸性雨が降り注ぐ工業地帯",
"クリスタルで覆われた渓谷", "人工太陽に照らされた巨大地下空洞", "オーロラが輝く極地の氷原", "雲海に突き出る尖塔群"
],
sf_obj: [
"火星の居住ドーム", "ダイソン球の巨大構造物", "ガス惑星の軌道プラットフォーム", "銀河を背景にした宇宙艦隊",
"巨大な恒星間移民船", "錆びついた巨大ロボットの残骸", "空を覆う巨大な宣伝飛行船", "宇宙を泳ぐ巨大生物",
"要塞化した移動都市", "砂漠に埋もれた宇宙船", "多層構造のハイウェイ", "エネルギー採掘リグ",
"未来のスポーツスタジアム", "軌道エレベーターのアンカー", "古代文明の黒いモノリス", "大気を浄化する巨大プラント",
"惑星を囲む巨大なリング", "墜落した軍事衛星", "成層圏まで伸びる世界樹", "シンギュラリティの塔"
],
fantasy_bg: [
"古代遺跡が眠る密林", "クリスタルの洞窟", "妖精が住む光る森", "中世ヨーロッパ風の城下町",
"エルフの聖なる泉", "霧深い沼地", "空飛ぶ島々", "薄暗い地下ダンジョンの通路",
"グリフォンが飛び交う渓谷", "灼熱の溶岩地帯", "オーロラが輝く雪原", "巨大なキノコの森",
"精霊が集まる湖畔", "虹の架かる滝", "星降る夜の野営地", "ランタンの灯る石畳の道",
"呪われた森", "マナの奔流", "迷いの森", "オアシスの蜃気楼", "夜光虫の海", "神々の黄昏",
"彼岸花が咲き乱れる冥界の河原", "巨人の骨が散らばる荒野", "重力が歪んだ魔法地帯", "天まで届く大瀑布"
],
fantasy_obj: [
"雲の上の神殿", "ドラゴンの巣がある火山", "ドワーフの地下要塞", "世界樹の根本", "満月の夜の古城",
"伝説の聖剣が刺さった岩", "召喚魔法陣と光の柱", "人魚が泳ぐサンゴ礁の宮殿", "氷の女王が住む水晶の城",
"砂漠に半分埋もれた巨像", "廃墟となった神殿", "雷雨の中の塔", "不動の巨大ゴーレム", "オークの砦",
"空飛ぶ帆船", "海賊船とクラーケン", "ツタの絡まる石橋", "ステンドグラスの大聖堂", "異界へのゲート",
"カボチャの馬車", "森の奥のお菓子の家", "雲を突き抜ける豆の木", "深海の沈没船", "天空の回廊",
"女神の彫像", "英雄の記念碑", "動く城", "バベルの塔のような未完の巨塔", "剣の墓場", "竜巻の中に建つ魔術師の塔"
],
nature_bg: [
"静かな湖畔のキャンプ場", "オーロラが見える雪原", "サンゴ礁が広がる海底", "桜が満開の並木道",
"紅葉が美しい日本庭園", "広大なサバンナ", "霧の立ち込める海岸", "険しい山岳地帯",
"エメラルドグリーンの透き通る海", "波打ち際の白い砂浜", "木漏れ日が差し込む深い森",
"満天の星空と天の川", "燃えるような夕焼け空", "入道雲が湧き上がる夏の空", "一面に広がるひまわり畑",
"ラベンダー畑の紫の絨毯", "雪を頂いた壮大な山脈", "熱帯雨林のジャングル", "苔むした岩と清流",
"砂丘に描かれた風紋", "マングローブの林", "竹林の小径", "雲海に浮かぶ山頂", "岩肌が露出した荒涼とした大地",
"新緑のブナ林", "風に揺れる黄金色の麦畑", "色とりどりの高山植物の群生", "薄明光線が降り注ぐ谷",
"月明かりに照らされた海", "紅葉で真っ赤に染まる山肌", "落ち葉の絨毯", "秋のすすき野原",
"野生の馬が走る草原", "ホタルが飛び交う小川", "イチョウ並木のトンネル", "ブドウ畑の丘",
"サボテンの生える砂漠", "霧氷のついた枝", "夜明け前の蒼い世界", "湿原の木道", "菜の花畑とローカル線",
"棚田の夕暮れ", "茶畑の幾何学模様", "塩湖の鏡張り", "バオバブの並木道", "入江の漁村", "嵐の海",
"雪解け水が流れる川", "水芭蕉の群生地", "ネモフィラの青い丘", "コスモス畑", "彼岸花が咲く畦道",
"樹氷の森", "流氷の海", "リアス式海岸", "干潟の夕景", "朝靄に包まれた牧場", "サトウキビ畑", "パイナップル畑",
"五色の石が転がる河原", "真っ白な石灰岩の棚田", "コバルトブルーの温泉地帯", "極夜の氷原"
],
nature_obj: [
"グランドキャニオンのような渓谷", "大迫力の巨大な滝", "水面に映る逆さ富士", "鍾乳洞の神秘的な空間",
"噴煙を上げる火山", "切り立ったフィヨルド", "カルスト台地の奇岩", "ダブルレインボー", "皆既日食の瞬間",
"流れ星が降り注ぐ夜", "紫色の雷光", "桜吹雪が舞う川沿い", "銀世界に佇む一本松", "凍りついた滝",
"渡り鳥の群れ", "クジラが泳ぐ大海原", "藤棚の下", "蜃気楼が見える地平線", "水平線に沈む太陽",
"青の洞窟", "孤島のリゾート", "氷河の崩落", "オアシスの泉", "間欠泉の噴出", "セコイアの巨木",
"断崖絶壁の灯台", "火口湖のエメラルドグリーン", "渓谷の吊り橋", "風車のある風景", "水車小屋と小川",
"蓮の花が咲く池", "テーブルマウンテンのような台地", "柱状節理の断崖", "巨大な一枚岩（モノリス）",
"ハートの形をした浮島", "古代杉の切り株", "竜の背のような岩礁"
],
time: [
"夜明け前", "早朝", "日の出", "朝", "午前", "正午", "真昼", "午後",
"夕方", "夕暮れ", "日没", "黄昏時", "マジックアワー", "ブルーアワー",
"夜", "真夜中", "深夜", "丑三つ時"
],
weather: [
"快晴", "青空", "曇り", "霧", "濃霧", "朝霧",
"雨", "小雨", "霧雨", "天気雨", "土砂降り", "豪雨", "雷雨", "嵐", "台風",
"雪", "吹雪", "雹", "ダイヤモンドダスト",
"虹", "天使の梯子", "蜃気楼", "花吹雪", "オーロラ",
"日食", "月食", "満月", "新月", "星空", "流星群", "天の川"
],
atm_bright: [
"神々しく幻想的な光", "活気に満ち溢れている", "夢の中にいるような感覚", "昭和レトロな暖かい雰囲気",
"80年代のポップな色彩", "ヴェイパーウェイヴのような幻想的な空間", "希望に満ちた明るい未来感",
"幸福感に包まれた優しい世界", "エネルギッシュで力強い躍動感", "清涼感のある爽やかな風",
"祝祭のような賑やかな喧騒", "魔法がかかったようなキラキラした空気", "アニメーションのような鮮やかな色彩",
"ロマンチックで甘い雰囲気", "夢心地のふわふわした感覚", "おとぎ話のようなメルヘンチックな世界",
"パステルカラーの可愛らしい空間", "洗練されたラグジュアリーな空間", "ボタニカルで癒やされる空間",
"近未来的なスタイリッシュさ", "壮大な冒険の予感", "勝利のファンファーレが聞こえる高揚感",
"トロピカルで開放的な空気", "コメディタッチの陽気な世界", "聖なる祝福に満ちたオーラ"
],
atm_dark: [
"ノスタルジックなセピア色の世界", "色あせた古い写真のような質感", "退廃的で不気味な空気感",
"孤独で寂しい雰囲気", "緊張感のある張り詰めた空気", "ゾクッとするような恐怖感",
"狂気に満ちたサイケデリックな空間", "ゴシックで重厚な空気", "絶望的な終末感", "闇に飲み込まれそうな気配",
"神秘的で厳かな静寂", "異次元のような浮遊感", "幽玄で儚い美しさ", "古代の神話のような荘厳さ",
"映画のワンシーンのようなドラマチックな構図", "孤独で静謐な時間", "世界から取り残されたような寂しさ",
"音のない静止した世界", "哀愁漂う夕暮れの空気", "冷たく無機質な質感", "ハードボイルドで渋い世界観",
"鉄と油の匂いがする無骨な雰囲気", "戦場のような張り詰めた緊張感", "スチームパンクな蒸気の煙る空気",
"ミニマルで整然とした美しさ", "カオスで雑多なエネルギー", "瞑想的な深い精神世界",
"記憶の断片のような曖昧なイメージ", "クリスタルのように透き通った空気", "嵐の前の不穏な静けさ",
"白昼夢のような非現実感", "インダストリアルな荒廃感", "監獄のような息苦しい閉塞感",
"呪われた不浄な空気", "深淵から見つめられている気配", "電子ドラッグのような陶酔感"
]
};
// ---------------------------------------------------------
// ■ 履歴管理機能
// ---------------------------------------------------------
const STORAGE_KEY = 'ai_image_instruction_history_v5'; // バージョン更新
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();
}
}
// ---------------------------------------------------------
// ■ ランダム生成機能 (10項目対応)
// ---------------------------------------------------------
function generateRandomPrompt() {
const detailArea = document.getElementById('detailArea');
const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
let allParts = [];
// UIのIDとデータキーの紐付け
const config = [
{ id: 'n_sf_bg', data: promptData.sf_bg },
{ id: 'n_sf_obj', data: promptData.sf_obj },
{ id: 'n_fantasy_bg', data: promptData.fantasy_bg },
{ id: 'n_fantasy_obj',data: promptData.fantasy_obj },
{ id: 'n_nature_bg', data: promptData.nature_bg },
{ id: 'n_nature_obj', data: promptData.nature_obj },
{ id: 'n_time', data: promptData.time },
{ id: 'n_weather', data: promptData.weather },
{ id: 'n_atm_bright', data: promptData.atm_bright },
{ id: 'n_atm_dark', data: promptData.atm_dark }
];
// 各設定をループして取得
config.forEach(item => {
const count = parseInt(document.getElementById(item.id).value) || 0;
for(let i = 0; i < count; i++) {
allParts.push(pick(item.data));
}
});
if (allParts.length === 0) {
detailArea.value = "（要素が選択されていません。数値を1以上に設定してください）";
return;
}
// 結合して表示
detailArea.value = allParts.join("。\n") + "。";
// アニメーション効果
detailArea.style.borderColor = "#007bff";
setTimeout(() => detailArea.style.borderColor = "#ccc", 300);
}
// ---------------------------------------------------------
// ■ 送信機能
// ---------------------------------------------------------
function askAI(isLaunch) {
const instruction = document.getElementById('instructionInput').value.trim();
const details = document.getElementById('detailArea').value.trim();
if (!instruction || !details) {
alert("指示と詳細の両方が必要です。");
return;
}
saveToHistory(instruction);
const finalPrompt = instruction + "\n\n【画像の詳細指示】\n" + details;
if (navigator.clipboard) {
navigator.clipboard.writeText(finalPrompt).then(() => {
if (!isLaunch) {
alert("クリップボードにコピーしました！");
} else {
launchService(finalPrompt);
}
}).catch(err => {
alert("コピーに失敗しました。");
});
} else {
if (!isLaunch) {
alert("このブラウザではコピー機能が制限されています。");
} else {
launchService(finalPrompt);
}
}
}
function launchService(promptText) {
const aiService = document.getElementById('aiSelector').value;
const encodedPrompt = encodeURIComponent(promptText);
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;
}
if (aiService === 'perplexity') {
window.open(url, '_blank');
} else {
let serviceName = document.getElementById('aiSelector').options[document.getElementById('aiSelector').selectedIndex].text;
let msg = "プロンプトをコピーしました！\n\n" + serviceName + "を別タブで開きますか？\n（開いた先で貼り付けてください）";
if(confirm(msg)) {
window.open(url, '_blank');
}
}
}
</script>
</body>
</html>
使用変数
| aiService | |
| allItems | |
| allParts | |
| askAI -------( Function ) | |
| borderColor | |
| charset | |
| class | |
| clearHistory -------( Function ) | |
| config | |
| count | |
| defaults | |
| detailArea | |
| details | |
| encodedPrompt | |
| err | |
| finalPrompt | |
| generateRandomPrompt -------( Function ) | |
| history | |
| historySelect | |
| i | |
| id | |
| innerHTML | |
| instruction | |
| item | |
| lang | |
| launchService -------( Function ) | |
| length | |
| loadHistory -------( Function ) | |
| min | |
| msg | |
| onchange | |
| onclick | |
| onload | |
| option | |
| pick | |
| placeholder | |
| promptData | |
| q | |
| saveToHistory -------( Function ) | |
| selectHistory -------( Function ) | |
| serviceName | |
| STORAGE_KEY | |
| style | |
| text | |
| type | |
| url | |
| value |