【生成AI】フラッシュカードを生成AIでカスタマイズする方法
🌟プログラミングがわからなくても大丈夫！
生成AI（ChatGPT、Claude など）に頼めば、簡単にカスタマイズできます✨
🤖 使える生成AI（無料版でもOK）
• ChatGPT
• Claude（このフラッシュカードもClaudeで作りました）
• Gemini
• Copilot など
📋 基本の使い方
STEP 1：HTMLファイルを用意
1. GitHubからCVCフラッシュカードまたはマジックeフラッシュカードをダウンロード（R7/11/9時点）
2. HTMLファイルをテキストエディタで開く
3. コード全体をコピー
※今回は、私のCVCフラッシュカードのコードをそのまま添付しておきます。コピペでOK！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CVC母音フラッシュカード</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔤</text></svg>">
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; }
select { cursor: pointer; }
button { cursor: pointer; }
.letter-box {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: bold;
border-radius: 12px;
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 30px;
border-radius: 20px;
width: 90%;
max-width: 800px;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 10px 50px rgba(0,0,0,0.3);
}
.modal.show {
display: block;
}
</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-green-50 to-blue-50 p-4">
<div id="app" class="max-w-6xl mx-auto"></div>
<!-- モーダル -->
<div id="infoModal" class="modal">
<div class="modal-content">
<div class="flex justify-between items-center mb-6">
<h2 class="text-3xl font-bold text-blue-600">📘 保護者・教育者の方へ</h2>
<button onclick="closeModal()" class="text-4xl text-gray-500 hover:text-gray-700 font-bold leading-none">×</button>
</div>
<div class="space-y-6">
<!-- CVCの基礎説明 -->
<section>
<h3 class="text-xl font-bold text-gray-800 mb-3">📖 CVCとは？</h3>
<div class="bg-blue-50 border-2 border-blue-300 rounded-lg p-4">
<p class="text-gray-700 mb-3 text-base">
<strong>CVC</strong>は、英語フォニックスの基礎となる単語の型です。
</p>
<p class="text-sm text-gray-600 mb-2">
<strong>C</strong> = Consonant（子音）<br>
<strong>V</strong> = Vowel（母音：a, e, i, o, u）<br>
<strong>C</strong> = Consonant（子音）
</p>
<p class="text-sm text-gray-600">
例：<strong>c-a-t</strong>, <strong>d-o-g</strong>, <strong>s-u-n</strong>
</p>
</div>
</section>
<!-- 母音の音 -->
<section>
<h3 class="text-xl font-bold text-gray-800 mb-3">🎵 母音の基本の音</h3>
<div class="bg-green-50 border-2 border-green-300 rounded-lg p-4">
<p class="text-gray-700 mb-3 text-base">
CVCでは、母音を<strong>「短く」</strong>発音します：
</p>
<div class="text-sm text-gray-700 space-y-2">
<div class="flex items-center gap-2">
<span class="font-bold text-red-600 text-lg">a</span>
<span>→ ア（例：c<strong>a</strong>t, h<strong>a</strong>t）</span>
</div>
<div class="flex items-center gap-2">
<span class="font-bold text-blue-600 text-lg">e</span>
<span>→ エ（例：b<strong>e</strong>d, r<strong>e</strong>d）</span>
</div>
<div class="flex items-center gap-2">
<span class="font-bold text-green-600 text-lg">i</span>
<span>→ イ（例：p<strong>i</strong>g, b<strong>i</strong>g）</span>
</div>
<div class="flex items-center gap-2">
<span class="font-bold text-orange-600 text-lg">o</span>
<span>→ オ（例：d<strong>o</strong>g, h<strong>o</strong>t）</span>
</div>
<div class="flex items-center gap-2">
<span class="font-bold text-purple-600 text-lg">u</span>
<span>→ ア（ウに近い）（例：c<strong>u</strong>p, s<strong>u</strong>n）</span>
</div>
</div>
<p class="text-sm text-gray-600 mt-3">
<strong>注意：</strong>アルファベット読み（エイ・イー・アイ・オウ・ユー）とは違います！
</p>
</div>
</section>
<!-- 詳しい情報へのリンク -->
<section>
<div class="bg-purple-50 border-2 border-purple-300 rounded-lg p-4 text-center">
<p class="text-gray-700 mb-3 text-base">
📚 <strong>学習ステップ・効果的な使い方・発達特性に応じた工夫</strong>など、<br>
詳しい情報はnote記事をご覧ください
</p>
<a href="[noteのURL]" target="_blank" class="inline-block bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-6 rounded-lg mt-2 transform hover:scale-105 transition">
📝 note記事を読む
</a>
</div>
</section>
</div>
<button onclick="closeModal()" class="mt-6 w-full bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-4 rounded-lg transform hover:scale-105 transition">
閉じる
</button>
</div>
</div>
<script>
// CVC単語データ（全25個）
const allWords = [
// a の単語（5個）
{ word: 'cat', jp: 'ネコ', emoji: '🐱', c1: 'c', v: 'a', c2: 't' },
{ word: 'bag', jp: 'かばん', emoji: '🎒', c1: 'b', v: 'a', c2: 'g' },
{ word: 'hat', jp: 'ぼうし', emoji: '🎩', c1: 'h', v: 'a', c2: 't' },
{ word: 'map', jp: '<ruby>地図<rt>ちず</rt></ruby>', emoji: '🗺️', c1: 'm', v: 'a', c2: 'p' },
{ word: 'fan', jp: 'せんぷうき', emoji: '🌀', c1: 'f', v: 'a', c2: 'n' },
// e の単語（5個）
{ word: 'bed', jp: 'ベッド', emoji: '🛏️', c1: 'b', v: 'e', c2: 'd' },
{ word: 'pen', jp: 'ペン', emoji: '🖊️', c1: 'p', v: 'e', c2: 'n' },
{ word: 'ten', jp: '10', emoji: '🔟', c1: 't', v: 'e', c2: 'n' },
{ word: 'net', jp: 'あみ', emoji: '🥅', c1: 'n', v: 'e', c2: 't' },
{ word: 'red', jp: '<ruby>赤<rt>あか</rt></ruby>い', emoji: '🔴', c1: 'r', v: 'e', c2: 'd' },
// i の単語（5個）
{ word: 'pig', jp: 'ブタ', emoji: '🐷', c1: 'p', v: 'i', c2: 'g' },
{ word: 'big', jp: '<ruby>大<rt>おお</rt></ruby>きい', emoji: '📏', c1: 'b', v: 'i', c2: 'g' },
{ word: 'six', jp: '6', emoji: '6️⃣', c1: 's', v: 'i', c2: 'x' },
{ word: 'pin', jp: 'ピン', emoji: '📌', c1: 'p', v: 'i', c2: 'n' },
{ word: 'sit', jp: 'すわる', emoji: '🪑', c1: 's', v: 'i', c2: 't' },
// o の単語（5個）
{ word: 'dog', jp: 'イヌ', emoji: '🐶', c1: 'd', v: 'o', c2: 'g' },
{ word: 'box', jp: 'はこ', emoji: '📦', c1: 'b', v: 'o', c2: 'x' },
{ word: 'hot', jp: '<ruby>暑<rt>あつ</rt></ruby>い', emoji: '🥵', c1: 'h', v: 'o', c2: 't' },
{ word: 'top', jp: 'てっぺん', emoji: '⛰️', c1: 't', v: 'o', c2: 'p' },
{ word: 'fox', jp: 'キツネ', emoji: '🦊', c1: 'f', v: 'o', c2: 'x' },
// u の単語（5個）
{ word: 'bus', jp: 'バス', emoji: '🚌', c1: 'b', v: 'u', c2: 's' },
{ word: 'cup', jp: 'カップ', emoji: '☕', c1: 'c', v: 'u', c2: 'p' },
{ word: 'sun', jp: '<ruby>太陽<rt>たいよう</rt></ruby>', emoji: '☀️', c1: 's', v: 'u', c2: 'n' },
{ word: 'run', jp: '<ruby>走<rt>はし</rt></ruby>る', emoji: '🏃', c1: 'r', v: 'u', c2: 'n' },
{ word: 'fun', jp: '<ruby>楽<rt>たの</rt></ruby>しい', emoji: '🎉', c1: 'f', v: 'u', c2: 'n' }
];
let quizWords = [];
let currentQuestionIndex = 0;
let userAnswer = '';
let correctCount = 0;
let isAnswered = false;
let isQuizStarted = false;
let wrongAnswers = [];
let showRecords = false;
// モーダル制御
function openModal() {
document.getElementById('infoModal').classList.add('show');
}
function closeModal() {
document.getElementById('infoModal').classList.remove('show');
}
// モーダル外クリックで閉じる
window.onclick = function(event) {
const modal = document.getElementById('infoModal');
if (event.target === modal) {
closeModal();
}
}
// ランダムに10問を選ぶ
function startQuiz() {
const shuffled = [...allWords].sort(() => Math.random() - 0.5);
quizWords = shuffled.slice(0, 10);
currentQuestionIndex = 0;
userAnswer = '';
correctCount = 0;
isAnswered = false;
isQuizStarted = true;
wrongAnswers = [];
render();
}
// LocalStorageから記録を読み込む
function loadRecords() {
const saved = localStorage.getItem('cvcQuizRecords');
return saved ? JSON.parse(saved) : [];
}
// LocalStorageに記録を保存する
function saveRecord(record) {
const records = loadRecords();
records.push(record);
localStorage.setItem('cvcQuizRecords', JSON.stringify(records));
}
// 全記録を削除
function clearAllRecords() {
if (confirm('本当に全ての記録を削除しますか？')) {
localStorage.removeItem('cvcQuizRecords');
render();
}
}
// 回答処理
function handleAnswer(value) {
if (isAnswered) return;
userAnswer = value;
const currentWord = quizWords[currentQuestionIndex];
const isCorrect = value === currentWord.v;
if (isCorrect) {
correctCount++;
} else {
wrongAnswers.push({
word: currentWord.word,
jp: currentWord.jp,
correct: currentWord.v,
answer: value
});
}
isAnswered = true;
render();
// 自動で読み上げ
setTimeout(() => {
speak(currentWord.word);
}, 300);
}
// 次の問題へ
function nextQuestion() {
if (currentQuestionIndex < quizWords.length - 1) {
currentQuestionIndex++;
userAnswer = '';
isAnswered = false;
render();
} else {
showResult();
}
}
// 結果画面
function showResult() {
isQuizStarted = false;
const now = new Date();
const dateStr = `${now.getFullYear()}/${(now.getMonth()+1).toString().padStart(2,'0')}/${now.getDate().toString().padStart(2,'0')} ${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}`;
const accuracy = Math.round((correctCount / quizWords.length) * 100);
saveRecord({
date: dateStr,
accuracy: accuracy,
correct: correctCount,
total: quizWords.length,
wrongAnswers: [...wrongAnswers]
});
render();
}
function speak(text) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'en-US';
utterance.rate = 0.7;
window.speechSynthesis.speak(utterance);
}
function getVowelColor(vowel) {
const colors = {
'a': 'red',
'e': 'blue',
'i': 'green',
'o': 'orange',
'u': 'purple'
};
return colors[vowel] || 'gray';
}
function render() {
// 記録ページを表示
if (showRecords) {
const records = loadRecords();
document.getElementById('app').innerHTML = `
<div class="flex items-center justify-center min-h-screen py-8">
<div class="bg-white rounded-3xl shadow-2xl p-8 max-w-4xl w-full">
<div class="flex justify-between items-center mb-6">
<h1 class="text-4xl font-bold text-purple-600">📋 学習記録</h1>
<button onclick="showRecords = false; render();" class="bg-gray-500 hover:bg-gray-600 text-white text-lg font-bold px-6 py-3 rounded-xl shadow-lg transform hover:scale-105 transition">
← 戻る
</button>
</div>
${records.length === 0 ? `
<div class="text-center py-12">
<p class="text-2xl text-gray-500 mb-4">📝 まだ記録がありません</p>
<p class="text-lg text-gray-400">クイズを完了すると自動的に記録されます</p>
</div>
` : `
<div class="mb-4 flex justify-end">
<button onclick="clearAllRecords()" class="bg-red-500 hover:bg-red-600 text-white text-sm font-bold px-4 py-2 rounded-lg shadow-lg transform hover:scale-105 transition">
🗑️ 一括削除
</button>
</div>
<div class="space-y-3 max-h-[600px] overflow-y-auto">
${records.reverse().map((record, index) => `
<div class="bg-gradient-to-r from-blue-50 to-purple-50 border-2 border-blue-200 rounded-xl p-4">
<div class="flex items-center justify-between gap-4">
<span class="text-sm font-bold text-gray-700 whitespace-nowrap">📅 ${record.date}</span>
<span class="text-xl font-bold whitespace-nowrap ${record.accuracy === 100 ? 'text-green-600' : record.accuracy >= 80 ? 'text-blue-600' : record.accuracy >= 60 ? 'text-orange-600' : 'text-red-600'}">
${record.accuracy}% (${record.correct}/${record.total})
</span>
<div class="flex-1 min-w-0">
${record.wrongAnswers && record.wrongAnswers.length > 0 ? `
<div class="flex items-center gap-2">
<span class="text-xs font-bold text-red-600 whitespace-nowrap">❌</span>
<div class="flex flex-wrap gap-1">
${record.wrongAnswers.map(wa => `
<span class="inline-block bg-red-50 px-2 py-0.5 rounded text-xs font-bold text-gray-800">
${wa.word}
</span>
`).join('')}
</div>
</div>
` : `
<span class="text-xs font-bold text-green-700">🎉 全問正解！</span>
`}
</div>
</div>
</div>
`).join('')}
</div>
`}
</div>
</div>
`;
return;
}
if (!isQuizStarted) {
if (quizWords.length === 0) {
// スタート画面
document.getElementById('app').innerHTML = `
<div class="flex items-center justify-center min-h-screen">
<div class="bg-white rounded-3xl shadow-2xl p-12 text-center max-w-2xl">
<h1 class="text-5xl font-bold text-blue-600 mb-6">🔤 CVC母音<br>フラッシュカード</h1>
<p class="text-2xl text-gray-700 mb-4">CVC単語の真ん中の母音を選ぼう！</p>
<div class="bg-blue-50 border-2 border-blue-300 rounded-lg p-6 mb-8">
<p class="text-lg text-gray-700 mb-3">📝 <strong>全25個</strong>の単語から<strong>ランダムに10問</strong>出題されます</p>
<p class="text-lg text-gray-700 mb-3">🔊 回答すると<strong>自動で読み上げ</strong>されます</p>
<p class="text-lg text-gray-700">➡️ ボタンを押して次の問題へ進もう！</p>
</div>
<button onclick="startQuiz()" class="bg-blue-500 hover:bg-blue-600 text-white text-3xl font-bold px-12 py-6 rounded-2xl shadow-lg transform hover:scale-105 transition mb-4">
🚀 スタート！
</button>
<div class="flex justify-center gap-3">
<button onclick="showRecords = true; render();" class="bg-gray-500 hover:bg-gray-600 text-white text-sm font-bold px-6 py-3 rounded-xl shadow-lg transform hover:scale-105 transition">
📋 記録を見る
</button>
<button onclick="openModal()" class="bg-purple-500 hover:bg-purple-600 text-white text-sm font-bold px-6 py-3 rounded-xl shadow-lg transform hover:scale-105 transition">
📘 保護者・教育者の方へ
</button>
</div>
</div>
</div>
`;
} else {
// 結果画面
const score = Math.round((correctCount / quizWords.length) * 100);
let message = '';
let emoji = '';
if (score === 100) {
message = 'パーフェクト！すごい！';
emoji = '🎉🏆✨';
} else if (score >= 80) {
message = 'よくできました！';
emoji = '🎊👏';
} else if (score >= 60) {
message = 'がんばりました！';
emoji = '💪😊';
} else {
message = 'もう一度挑戦してみよう！';
emoji = '📚💡';
}
document.getElementById('app').innerHTML = `
<div class="flex items-center justify-center min-h-screen">
<div class="bg-white rounded-3xl shadow-2xl p-12 text-center max-w-2xl">
<h1 class="text-5xl font-bold text-purple-600 mb-6">🎯 結果発表</h1>
<div class="text-8xl mb-6">${emoji}</div>
<p class="text-3xl font-bold text-gray-800 mb-4">${message}</p>
<div class="bg-gradient-to-r from-purple-50 to-blue-50 border-2 border-purple-300 rounded-2xl p-8 mb-8">
<p class="text-6xl font-bold text-purple-600 mb-4">${correctCount} / ${quizWords.length}</p>
<p class="text-4xl font-bold text-blue-600">${score}%</p>
</div>
<button onclick="location.reload()" class="bg-green-500 hover:bg-green-600 text-white text-2xl font-bold px-10 py-5 rounded-2xl shadow-lg transform hover:scale-105 transition mb-4">
🔄 もう一度挑戦する
</button>
<div class="flex justify-center gap-3">
<button onclick="showRecords = true; render();" class="bg-gray-500 hover:bg-gray-600 text-white text-sm font-bold px-6 py-3 rounded-xl shadow-lg transform hover:scale-105 transition">
📋 記録を見る
</button>
<button onclick="openModal()" class="bg-purple-500 hover:bg-purple-600 text-white text-sm font-bold px-6 py-3 rounded-xl shadow-lg transform hover:scale-105 transition">
📘 保護者・教育者の方へ
</button>
</div>
</div>
</div>
`;
}
return;
}
// クイズ画面
const currentWord = quizWords[currentQuestionIndex];
const progress = currentQuestionIndex + 1;
const isCorrect = userAnswer === currentWord.v;
const isIncorrect = isAnswered && !isCorrect;
const color = getVowelColor(currentWord.v);
document.getElementById('app').innerHTML = `
<div class="flex items-center justify-center min-h-screen">
<div class="bg-white rounded-3xl shadow-2xl p-12 max-w-3xl w-full">
<!-- プログレスバー -->
<div class="mb-4">
<div class="flex justify-between items-center mb-2">
<span class="text-xl font-bold text-gray-600">問題 ${progress} / ${quizWords.length}</span>
<span class="text-xl font-bold text-green-600">✓ ${correctCount}問正解</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-4">
<div class="bg-blue-500 h-4 rounded-full transition-all duration-300" style="width: ${(progress / quizWords.length) * 100}%"></div>
</div>
</div>
<!-- 日本語の意味 -->
<div class="text-center mb-4">
<p class="text-6xl font-bold text-gray-800 mb-2">${currentWord.jp} ${currentWord.emoji}</p>
${!isAnswered ? `
<button onclick="speak('${currentWord.word}')" class="bg-blue-500 hover:bg-blue-600 text-white text-xl font-bold px-6 py-3 rounded-xl shadow-lg transform hover:scale-105 transition flex items-center gap-2 mx-auto">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414 1.414m2.828-2.828a9 9 0 000-12.728M12 18v.01"></path></svg>
<span>🔊 聞く</span>
</button>
` : ''}
</div>
<!-- 単語ボックス -->
<div class="flex items-center justify-center gap-3 mb-6">
<div class="letter-box bg-gray-200 text-gray-700" style="width: 70px; height: 70px; font-size: 2rem;">
${currentWord.c1}
</div>
<div class="letter-box ${isCorrect ? 'bg-green-200 border-4 border-green-500' : isIncorrect ? 'bg-red-200 border-4 border-red-500' : 'bg-yellow-100 border-4 border-yellow-400'}" style="width: 70px; height: 70px; font-size: 2rem;">
${userAnswer || '?'}
</div>
<div class="letter-box bg-gray-200 text-gray-700" style="width: 70px; height: 70px; font-size: 2rem;">
${currentWord.c2}
</div>
</div>
${!isAnswered ? `
<!-- 回答ボタン -->
<div class="grid grid-cols-5 gap-3 mb-4">
${['a', 'e', 'i', 'o', 'u'].map(v => {
const vColor = getVowelColor(v);
return `
<button onclick="handleAnswer('${v}')" class="bg-${vColor}-500 hover:bg-${vColor}-600 text-white text-4xl font-bold py-6 rounded-xl shadow-lg transform hover:scale-105 transition">
${v}
</button>
`;
}).join('')}
</div>
` : `
<!-- 結果表示 -->
<div class="mb-4">
${isCorrect ? `
<div class="bg-green-100 border-4 border-green-500 rounded-xl p-4 text-center">
<p class="text-4xl mb-2">🎉</p>
<p class="text-2xl font-bold text-green-700 mb-2">正解！</p>
<p class="text-7xl font-bold text-gray-800 mb-3">${currentWord.word}</p>
<button onclick="speak('${currentWord.word}')" class="bg-yellow-50 border-2 border-yellow-400 rounded-lg p-2 mb-2 w-full hover:bg-yellow-100 cursor-pointer">
<p class="text-xl text-yellow-700 font-bold">😄 言ってみよう！</p>
</button>
</div>
` : `
<div class="bg-blue-100 border-4 border-blue-500 rounded-xl p-4 text-center">
<p class="text-lg text-gray-600 mb-2">正しい答えは <span class="font-bold text-${color}-600 text-7xl">${currentWord.v}</span> だよ！</p>
<p class="text-7xl font-bold text-gray-800 mb-2">${currentWord.word}</p>
<button onclick="speak('${currentWord.word}')" class="bg-yellow-50 border-2 border-yellow-400 rounded-lg p-2 mb-2 w-full hover:bg-yellow-100 cursor-pointer">
<p class="text-xl text-yellow-700 font-bold">😄 言ってみよう！</p>
</button>
${currentWord.v === 'u' ? `
<div class="bg-purple-50 border-2 border-purple-400 rounded-lg p-2">
<p class="text-base text-purple-700 font-bold">👀 ポイント！</p>
<p class="text-sm text-gray-700 mt-1"><span class="font-bold text-purple-600">u</span> なのに、<span class="font-bold text-red-500">「ア」</span>と発音するパターンだね！</p>
</div>
` : ''}
</div>
`}
</div>
<!-- 次へボタン -->
<button onclick="nextQuestion()" class="w-full bg-blue-500 hover:bg-blue-600 text-white text-2xl font-bold py-4 rounded-xl shadow-lg transform hover:scale-105 transition">
${currentQuestionIndex < quizWords.length - 1 ? '➡️ 次の問題へ' : '📊 結果を見る'}
</button>
`}
</div>
</div>
`;
}
// ページ読み込み時に初期化＆描画
render();
</script>
</body>
</html>STEP 2：生成AIに依頼
コードが扱える生成AIに依頼しましょう！コードを貼り付けて、「こんな風に変更してほしい」とお願いするだけです。
📝 カスタマイズ例
🔤 単語を変更したい
•お使いの教科書や単語帳など→写真を撮って生成AIに読み込ませてリスト化してもらいます。
•子どもの好きなもの（例：マイクラなど）→『小学生向きの簡単なマイクラ英単語をリストアップして』など、希望に合わせて事前に生成AIに提案してもらいます。
🎨 色を変更したい
【変更内容】
- 母音「a」の色：赤 → ピンク
- 母音「e」の色：青 → 水色
- 母音「i」の色：緑 → 黄緑
📊 問題数を変更したい
・20問に変更して。
・５問に変更して。
🌈 デザイン全体を変更したい
-もっとカラフルで楽しい雰囲気に変更してください。
- 背景色をもっと明るく
- ボタンをもっと大きく
- 絵文字をもっと目立たせる
💡 依頼のコツ
✅ 良い依頼の例
具体的に書く：
✅「母音aの色を赤からピンクに変更してください」
✅「問題数を10問から15問に変更してください」
✅「単語を英検5級の単語に変更してください」
変更リストを明確に：
✅ 変更したい単語：
- cat → dog
- pen → book
- bed → desk
❌ 避けた方がいい依頼
曖昧すぎる：
❌「もっといい感じにして」
❌「かわいくして」
❌「うちの子向けに変えて」
情報不足：
❌「単語を変えて」← どの単語に？
❌「色を変えて」← 何色に？
🔄 修正の流れ
1. 依頼文を送る
↓
2. 生成AIが修正したコードを返してくれる
↓
3. コードをコピーして、新しいHTMLファイルに保存
※メモ帳にコピペして、ファイル名を『〇〇〇.html』に変更して保存！
↓
4. ブラウザで開いて確認
↓
5. うまくいかなければ、もう一度依頼
⚠️ 注意点
うまくいかないときは
😱エラーが出た場合：
生成AIに伝える：
「エラーが出ました。以下のエラーメッセージが表示されます：
（エラーメッセージをコピー）
修正してください。」
※【Shift】＋【Windows】＋【Ｓ】→スクリーンショット撮れます。
😣思い通りにならなかった場合：
「もう一度お願いします。
今度は〇〇を△△に変更してください。
💰 この方法のメリット
✅ プログラミング知識不要
✅ 短時間でカスタマイズ可能（5分〜）
✅ 何度でもやり直せる
✅ 無料で使える（生成AIの無料版でOK）
💬 困ったときは
困っていること自体をAIに伝えてみましょう！
お使いの端末や環境を伝えておくといいですよ😊
もしくはコメント欄で質問してください！
みんなで助け合いましょう🌈
※※※ お知らせ ※※※
・作成した学習支援ツールをまとめたマガジンの運用を始めます🌟
『こんなの作ってみたよ～』『カスタマイズしてみたよ～』という方、
『こんなのあるから試してみて！』という参考記事をお持ちの方、
一緒にシェアしていただけると嬉しいです😊💕
ご自身でツール作成してみたい初心者の方はコチラを参考にどうぞ！👇
🌟教育・発達支援・テクノロジーの現場にいらっしゃる皆様へ🌟
このnoteでは、発達障害児を育てる“親”として、日々の試行錯誤の中で見えてきたことをまとめていきます。責任のある発信を心掛けたいと思っていますが、専門家の視点で確認していただけると心強いです。
現場で支援や研究に関わる方からの補足・訂正・別視点などあれば、ご遠慮なくコメントで教えてください！
“親と専門家のゆるい共同研究🧪”として、このテーマを一緒に育てていただけたらうれしいです🌈
・スキ、フォロー、コメント励みになります！
これからもよろしくお願いいたします🌈
#神経発達症#発達障害#学習障害#発達支援#教育#生成AI#AI発達支援#AI教育#AI教育#AI個別最適化教育#学習支援ツール#英語学習#フォニックス#CVC#視覚優位
