<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>AIイラストプロンプトメーカー</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root {
--primary: #6c63ff;
--bg: #f2f2f2;
--text: #333;
--card: white;
}
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text);
}
header {
background: var(--primary);
color: white;
padding: 20px;
text-align: center;
font-size: 1.8em;
}
.container {
max-width: 1000px;
margin: 30px auto;
background: var(--card);
padding: 30px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
select, button, textarea, input[type="file"] {
width: 100%;
padding: 10px;
font-size: 1em;
border-radius: 8px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.output {
background: #fafafa;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
white-space: pre-wrap;
}
button {
background: var(--primary);
color: white;
border: none;
margin-top: 15px;
cursor: pointer;
}
button:hover {
background: #574fd9;
}
.image-preview {
margin-top: 20px;
text-align: center;
}
.image-preview img {
max-width: 100%;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.gallery {
margin-top: 40px;
}
.gallery img {
max-width: 100%;
margin: 10px 0;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
@media (max-width: 600px) {
.container {
padding: 20px;
margin: 10px;
}
}
</style>
</head>
<body>
<header>🎨 AIイラストプロンプトメーカー</header>
<div class="container">
<div class="form-group">
<label>キャラクター</label>
<select id="subject">
<option>狐の少女</option>
<option>魔法少女</option>
<option>サイバーパンクの戦士</option>
<option>猫耳の少年</option>
<option>吸血鬼の姫</option>
<option>天使の戦士</option>
<option>竜騎士</option>
<option>宇宙探検家</option>
<option>妖精</option>
<option>獣人の女王</option>
<option>機械生命体</option>
<option>デジタル妖精</option>
<option>スチームパンクの発明家</option>
<option>氷の精霊</option>
<option>砂漠の王女</option>
<option>未来の警察官</option>
<option>忍者少女</option>
<option>異世界の商人</option>
<option>獣耳魔法使い</option>
<option>雷の神</option>
<option>闇の王子</option>
<option>炎の踊り子</option>
<option>時間を操る司書</option>
<option>ポストアポカリプスの旅人</option>
<option>音楽を操る精霊</option>
<option>風の精霊使い</option>
<option>森の守護者</option>
<option>未来の芸術家</option>
<option>魔界の王女</option>
<option>電脳世界のハッカー</option>
<option>サーカス団の団長</option>
<option>時計仕掛けの人形</option>
<option>図書館の魔導師</option>
<option>宇宙アイドル</option>
<option>夢の案内人</option>
<option>四季を司る女神</option>
<option>時間旅行者</option>
<option>戦場の傭兵</option>
<option>星を読む預言者</option>
<option>電脳巫女</option>
<option>古代の王</option>
<option>未来の料理人</option>
<option>天空の案内人</option>
<option>人魚の王女</option>
<option>炎を纏う戦士</option>
<option>異界の騎士</option>
<option>霧の中の影</option>
<option>雷獣の化身</option>
<option>植物を操る錬金術師</option>
<option>おとぎ話の語り部</option>
<option>重力を操る少女</option>
<option>古の預言者</option>
<option>空を旅する郵便屋</option>
<option>眠りを司る精霊</option>
<option>お祭りの踊り子</option>
<option>砂嵐の遊牧民</option>
<option>泡の海の守護者</option>
<option>魔法道具職人</option>
<option>氷と炎の二重人格者</option>
<option>デジタル世界の探偵</option>
<option>孤独な塔の詩人</option>
<option>空飛ぶ書斎の管理人</option>
<option>鏡の中の分身</option>
<option>古城に棲む亡霊</option>
<option>地下世界の旅人</option>
<option>異星文明の観測者</option>
<option>時間停止の魔術師</option>
<option>夢の記録者</option>
<option>霧の海の漁師</option>
<option>重力反転の案内人</option>
<option>時空の管理者</option>
<option>流星に乗る観測者</option>
<option>伝説の召喚士</option>
<option>影を操る使者</option>
<option>魔法にかけられた人形</option>
<option>未来都市のDJ</option>
<option>空想世界の画家</option>
<option>炎の道化師</option>
<option>廃墟に住む猫型ロボット</option>
<option>雲の牧場の飼育員</option>
<option>月光に踊る騎士</option>
<option>泡でできた人間</option>
<option>時の狭間に生きる者</option>
</select>
</div>
<div class="form-group">
<label>衣装</label>
<select id="clothing">
<option>着物</option>
<option>ゴスロリ</option>
<option>セーラー服</option>
<option>鎧</option>
<option>メイド服</option>
<option>学生服</option>
<option>忍者装束</option>
<option>水着</option>
<option>アイドル衣装</option>
<option>宇宙服</option>
<option>ウェディングドレス</option>
<option>スーツ</option>
<option>チャイナドレス</option>
<option>パーカーとジーンズ</option>
<option>ボロボロの服</option>
<option>軍服</option>
<option>ドレスアーマー</option>
<option>モダンファッション</option>
<option>魔導士のローブ</option>
<option>未来的スーツ</option>
<option>フリルのついたロングドレス</option>
<option>サイバースーツ</option>
<option>狩人の装束</option>
<option>伝統的な王族の衣装</option>
<option>修道女の服</option>
<option>ポンチョスタイル</option>
<option>レザージャケット</option>
<option>花柄のワンピース</option>
<option>ホログラムドレス</option>
<option>羽付きの礼装</option>
<option>ロリータドレス</option>
<option>海賊風コート</option>
<option>スポーツユニフォーム</option>
<option>カウガールスタイル</option>
<option>研究者の白衣</option>
<option>錬金術師のローブ</option>
</select>
</div>
<div class="form-group">
<label>シチュエーション</label>
<select id="scene">
<option>桜の下</option>
<option>未来都市</option>
<option>夕焼けの海辺</option>
<option>廃墟の寺院</option>
<option>暗い森</option>
<option>宇宙船の中</option>
<option>雪山</option>
<option>草原</option>
<option>古代遺跡</option>
<option>空中庭園</option>
<option>星空の下</option>
<option>雨の街角</option>
<option>異世界の市場</option>
<option>火山地帯</option>
<option>地下の書庫</option>
<option>空港の滑走路</option>
<option>無重力空間</option>
<option>深海の遺跡</option>
<option>サーカス会場</option>
<option>魔法学園の中庭</option>
<option>闘技場</option>
<option>王宮のバルコニー</option>
<option>雲の上</option>
<option>ネオン輝く夜の街</option>
<option>幽霊船の甲板</option>
<option>滝の裏の洞窟</option>
</select>
</div>
<div class="form-group">
<label>表情</label>
<select id="emotion">
<option>微笑んでいる</option>
<option>驚いている</option>
<option>泣いている</option>
<option>真剣な表情</option>
<option>照れている</option>
<option>怒っている</option>
<option>眠そう</option>
<option>無表情</option>
<option>ウィンクしている</option>
<option>笑いながら泣いている</option>
<option>楽しそうに笑っている</option>
<option>不機嫌そうな顔</option>
<option>恥ずかしそうに俯いている</option>
<option>驚愕している</option>
<option>勝ち誇っている</option>
<option>安心している</option>
<option>寂しげな表情</option>
<option>苦悩している</option>
</select>
</div>
<div class="form-group">
<label>スタイル</label>
<select id="style">
<option>アニメ調</option>
<option>リアル調</option>
<option>水彩風</option>
<option>ピクセルアート</option>
<option>モノクロスケッチ</option>
<option>デフォルメ</option>
<option>シネマティック</option>
<option>油絵風</option>
<option>幻想的</option>
<option>ミッドセンチュリー</option>
<option>ドット絵</option>
<option>イラスト風3D</option>
<option>和風アート</option>
<option>ポップアート</option>
<option>ネオンアート</option>
<option>墨絵風</option>
<option>ミニマリスト</option>
<option>ダークファンタジー</option>
</select>
</div>
<div class="form-group">
<label>ライティング</label>
<select id="lighting">
<option>夕日</option>
<option>月明かり</option>
<option>逆光</option>
<option>スポットライト</option>
<option>柔らかい光</option>
<option>ネオンライト</option>
<option>キャンドルライト</option>
<option>青白い光</option>
<option>モノクローム</option>
<option>ファンタジー風</option>
<option>雷光</option>
<option>神秘的な光</option>
<option>焚き火の明かり</option>
<option>都市の夜明かり</option>
<option>レーザーライト</option>
<option>朝焼け</option>
<option>逆光のシルエット</option>
</select>
</div>
<div class="form-group">
<label>構図</label>
<select id="aspect">
<option>全身</option>
<option>バストアップ</option>
<option>クローズアップ</option>
<option>後ろ姿</option>
<option>斜め上から</option>
<option>ローアングル</option>
<option>ハイアングル</option>
<option>俯瞰図</option>
<option>対面</option>
<option>ポートレート</option>
<option>シルエット</option>
<option>鏡越しの視点</option>
<option>一部だけ見せる</option>
<option>肩越し視点</option>
<option>手元のアップ</option>
<option>足元のアップ</option>
<option>寝転んだ構図</option>
<option>振り返った構図</option>
</select>
</div>
<button onclick="generatePrompt()">✨ プロンプト生成</button>
<button onclick="copyPrompt()">📋 コピー</button>
<div class="output" id="japaneseOutput"></div>
<div class="output" id="englishOutput"></div>
<div class="output"><strong>🚫 Negative Prompt:</strong><br><span id="negativePrompt"></span></div>
<div class="form-group">
<label>🎨 画像アップロード（作品ギャラリー）</label>
<input type="file" accept="image/*" onchange="previewUpload(event)">
</div>
<div class="gallery" id="gallery"></div>
</div>
<script>
function generatePrompt() {
const subject = document.getElementById("subject").value;
const clothing = document.getElementById("clothing").value;
const scene = document.getElementById("scene").value;
const emotion = document.getElementById("emotion").value;
const style = document.getElementById("style").value;
const lighting = document.getElementById("lighting").value;
const aspect = document.getElementById("aspect").value;
const ja = `「${scene}」で「${clothing}」を着た「${subject}」が「${emotion}」表情をしている。「${style}」「${lighting}」で「${aspect}」構図。`;
const en = `${translate(subject)}, wearing ${translate(clothing)}, ${translate(scene)}, ${translate(emotion)}, ${translate(style)}, ${translate(lighting)}, ${translate(aspect)}, masterpiece, best quality`;
document.getElementById("japaneseOutput").textContent = "📝 日本語説明:\n" + ja;
document.getElementById("englishOutput").textContent = "🧩 English Tags:\n" + en;
document.getElementById("negativePrompt").textContent = "low quality, bad anatomy, blurry, extra limbs, deformed, watermark, text, signature";
}
function copyPrompt() {
const ja = document.getElementById("japaneseOutput").textContent;
const en = document.getElementById("englishOutput").textContent;
const neg = document.getElementById("negativePrompt").textContent;
const full = `${ja}\n\n${en}\n\nNegative Prompt:\n${neg}`;
navigator.clipboard.writeText(full).then(() => alert("プロンプトをコピーしました！"));
}
function previewUpload(event) {
const files = event.target.files;
const gallery = document.getElementById("gallery");
for (let i = 0; i < files.length; i++) {
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement("img");
img.src = e.target.result;
gallery.appendChild(img);
}
reader.readAsDataURL(files[i]);
}
}
function translate(text) {
const dict = {
"狐の少女": "fox girl", "魔法少女": "magical girl", "サイバーパンクの戦士": "cyberpunk warrior",
"猫耳の少年": "catboy", "吸血鬼の姫": "vampire princess",
"着物": "kimono", "ゴスロリ": "gothic lolita", "セーラー服": "sailor uniform", "鎧": "armor", "メイド服": "maid outfit",
"桜の下": "under cherry blossoms", "未来都市": "in futuristic city", "夕焼けの海辺": "on sunset beach", "廃墟の寺院": "in ruined temple", "暗い森": "in dark forest",
"微笑んでいる": "smiling", "驚いている": "surprised", "泣いている": "crying", "真剣な表情": "serious", "照れている": "blushing",
"アニメ調": "anime style", "リアル調": "realistic", "水彩風": "watercolor", "ピクセルアート": "pixel art", "モノクロスケッチ": "monochrome sketch",
"夕日": "sunset lighting", "月明かり": "moonlight", "逆光": "backlight", "スポットライト": "spotlight", "柔らかい光": "soft light",
"全身": "full body", "バストアップ": "bust-up", "クローズアップ": "close-up"
};
return dict[text] || text;
}
</script>
</body>
</html>
