<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アバター生成ツール</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.glass-panel {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
</style>
</head>
<body class="bg-gradient-to-br from-blue-100 via-indigo-100 to-purple-100 min-h-screen flex items-center justify-center p-4 font-sans text-gray-800">
<div class="glass-panel max-w-4xl w-full rounded-3xl shadow-xl border border-white p-6 sm:p-8 space-y-6 relative overflow-hidden">
<div class="absolute -top-16 -right-16 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-2xl opacity-50"></div>
<div class="absolute -bottom-16 -left-16 w-32 h-32 bg-indigo-300 rounded-full mix-blend-multiply filter blur-2xl opacity-50"></div>
<div class="text-center relative z-10">
<h1 class="text-2xl font-extrabold text-indigo-900 flex items-center justify-center gap-2">
アバター生成くん (20連ガチャ)
</h1>
<p class="text-sm text-gray-500 mt-2">AIでイメージに合わせて生成します</p>
</div>
<div class="flex flex-col md:flex-row gap-6 relative z-10">
<div class="space-y-4 md:w-1/3 flex flex-col justify-start">
<div>
<label for="name-input" class="block text-sm font-bold text-gray-700 mb-1 ml-1">お名前</label>
<div class="relative flex gap-2">
<input type="text" id="name-input" placeholder="例: さくら" class="flex-1 pl-4 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none shadow-sm bg-white/80">
<button id="random-seed-btn" class="bg-white border border-gray-200 text-xl px-3 rounded-xl hover:bg-indigo-50 transition-colors shadow-sm" title="全員シャッフル">🎲</button>
</div>
</div>
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-4 rounded-xl border border-indigo-100 shadow-sm">
<label class="flex items-center gap-3 cursor-pointer font-bold text-indigo-900">
<input type="checkbox" id="ai-mode-toggle" class="w-5 h-5 text-indigo-600 rounded" checked>
✨ AIにおまかせ
</label>
</div>
<details id="manual-settings" class="group bg-white/60 border border-gray-200 rounded-xl overflow-hidden">
<summary class="px-4 py-3 font-bold text-gray-700 cursor-pointer hover:bg-white/80 flex justify-between items-center outline-none">
手動でカスタマイズ
<svg class="w-5 h-5 transform group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</summary>
<div class="p-4 border-t border-gray-200 space-y-4">
<div>
<label for="color-picker" class="block text-sm font-bold text-gray-700 mb-1 ml-1">ベースカラー</label>
<input type="color" id="color-picker" value="#6366f1" class="w-full h-10 rounded cursor-pointer">
</div>
<div>
<label for="style-select" class="block text-sm font-bold text-gray-700 mb-1 ml-1">スタイル</label>
<select id="style-select" class="w-full px-4 py-2 border border-gray-200 rounded-lg outline-none bg-white text-sm">
<optgroup label="人型スタイル">
<option value="lorelei">ローレライ</option>
<option value="micah">マイカ</option>
<option value="avataaars">アバター</option>
<option value="adventurer">冒険者</option>
<option value="notionists">ノーション</option>
<option value="open-peeps">手書き風</option>
</optgroup>
<optgroup label="動物・モンスター">
<option value="bottts">ロボット</option>
<option value="big-smile">ビッグスマイル</option>
<option value="identicon">モンスター</option>
<option value="adventurer-neutral">冒険者(中性)</option>
<option value="personas">ペルソナ</option>
</optgroup>
<optgroup label="アート・抽象">
<option value="pixel-art">ピクセルアート</option>
<option value="fun-emoji">ポップ絵文字</option>
<option value="croodles">ゆるかわ線画</option>
<option value="shapes">抽象図形</option>
<option value="thumbs">サムズアップ</option>
<option value="glass">ガラスアート</option>
</optgroup>
</select>
</div>
</div>
</details>
<button id="generate-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 rounded-xl shadow-lg transition-transform active:scale-95">
20個生成する
</button>
</div>
<div class="md:w-2/3 flex flex-col">
<div id="ai-comment-box" class="hidden mb-4 p-4 bg-white/90 rounded-2xl border-l-4 border-indigo-400 shadow-sm text-sm">
<p class="font-bold text-indigo-900 mb-1">AIの分析結果</p>
<p id="ai-comment-text"></p>
</div>
<div id="avatar-gallery" class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5 gap-3 bg-white/40 p-4 rounded-2xl border border-white flex-1 content-start min-h-[400px] max-h-[600px] overflow-y-auto"></div>
</div>
</div>
</div>
<script>
const apiKey = "";
const nameInput = document.getElementById('name-input');
const styleSelect = document.getElementById('style-select');
const aiModeToggle = document.getElementById('ai-mode-toggle');
const colorPicker = document.getElementById('color-picker');
const generateBtn = document.getElementById('generate-btn');
const avatarGallery = document.getElementById('avatar-gallery');
const aiCommentBox = document.getElementById('ai-comment-box');
const aiCommentText = document.getElementById('ai-comment-text');
async function analyzeNameWithAI(name) {
const prompt = `名前: ${name} のイメージに合う色(HEX, #なし)と最適なスタイルをJSONで提案してください。`;
const payload = {
contents: [{ parts: [{ text: prompt }] }],
systemInstruction: { parts: [{ text: "JSON形式で themeColor(6桁HEX), recommendedStyle, analysis を返すこと。recommendedStyleは利用可能なスタイルの中から選ぶこと。" }] },
generationConfig: { responseMimeType: "application/json" }
};
const res = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
const data = await res.json();
return JSON.parse(data.candidates[0].content.parts[0].text);
}
async function handleGenerate() {
const baseName = nameInput.value.trim() || 'Guest';
let style = styleSelect.value;
let bgColor = colorPicker.value.replace('#', '');
if (aiModeToggle.checked) {
const ai = await analyzeNameWithAI(baseName);
style = ai.recommendedStyle;
bgColor = ai.themeColor;
styleSelect.value = style;
aiCommentText.textContent = ai.analysis;
aiCommentBox.classList.remove('hidden');
}
avatarGallery.innerHTML = '';
for (let i = 1; i <= 20; i++) {
const url = `https://api.dicebear.com/9.x/${style}/svg?seed=${baseName + Math.random()}&backgroundColor=${bgColor}`;
const div = document.createElement('div');
div.className = 'bg-white rounded-2xl p-2 cursor-pointer hover:border-indigo-400 border-2 border-transparent transition-all';
div.innerHTML = `<img src="${url}" class="w-full h-full object-contain">`;
div.onclick = () => window.open(url, '_blank');
avatarGallery.appendChild(div);
}
}
generateBtn.onclick = handleGenerate;
handleGenerate();
</script>
</body>
</html>
自分のアバターを制作できます。 いろいろな種類が選べて楽しいので、ぜひやってみてください！