<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>超・ランダム創作メーカー</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(to right, #e0eafc, #cfdef3);
text-align: center;
padding: 50px;
}
h1 {
font-size: 32px;
color: #2c3e50;
}
button {
padding: 14px 28px;
font-size: 16px;
background-color: #2980b9;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
margin-top: 20px;
}
button:hover {
background-color: #1c5980;
}
.output {
background-color: #ffffff;
padding: 30px;
margin-top: 30px;
border-radius: 12px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
text-align: left;
}
.label {
font-weight: bold;
margin-top: 15px;
color: #34495e;
}
.story {
margin-top: 20px;
font-style: italic;
color: #444;
}
.divider {
border-top: 1px solid #ccc;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>🌟 超・ランダム創作メーカー</h1>
<button onclick="generateStory()">ストーリー生成</button>
<div class="output" id="output">
<p>ここに詳細な創作設定が表示されます。</p>
</div>
<script>
const names = ["リク", "アリア", "クロウ", "セラ", "ハルカ", "ジン", "ノエル", "ミカ"];
const ages = ["16歳", "17歳", "18歳", "19歳", "20歳", "21歳", "不明"];
const genders = ["男性", "女性", "性別不明"];
const worlds = [
"重力が反転する都市", "魔素が枯渇した世界", "永遠に昼の国", "夢と現実が混ざる領域", "言葉が禁止された国"
];
const races = ["人間", "魔族", "人形", "精霊", "サイボーグ", "異形の存在"];
const jobs = ["時間跳躍士", "記憶修復者", "夢喰い", "観測者", "黒衣の処刑人"];
const traits = ["無表情", "多重人格", "感情過多", "孤独を愛する", "異常な記憶力"];
const goals = ["過去を修正する", "存在の意味を探す", "禁忌の書を開く", "誰かを蘇らせる", "終わりを始める"];
const keywords = ["赤い月", "反転する時計塔", "封じられた祭壇", "黒炎の花", "鏡に映らない影"];
function random(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
function generateStory() {
const name = random(names);
const age = random(ages);
const gender = random(genders);
const world = random(worlds);
const race = random(races);
const job = random(jobs);
const trait = random(traits);
const goal = random(goals);
const keyword = random(keywords);
const result = `
<div class="label">🧑 キャラクター情報</div>
名前: ${name}<br>
年齢: ${age}<br>
性別: ${gender}<br>
種族: ${race}<br>
職業: ${job}<br>
性格: ${trait}
<div class="divider"></div>
<div class="label">🌍 世界観</div>
${world}
<div class="divider"></div>
<div class="label">🎯 目的</div>
${goal}
<div class="label">🗝️ キーワード</div>
${keyword}
<div class="story">
<br>――${name}は、${world}に生きる${race}の${job}。${trait}な性格の持ち主である彼（彼女）は、<br>
「${keyword}」にまつわる出来事をきっかけに、「${goal}」という運命を背負うことになる……。
</div>
`;
document.getElementById("output").innerHTML = result;
}
</script>
</body>
</html>
