ユーモアセンスが足りない。圧倒的に。
一人っ子やんちゃ男児の育児に奮闘中のワーママです。
子育てにユーモアセンスってめっちゃ大事だったりしませんか…？
子供のちょっとしたミスや困った行動への声掛けの幅が、ユーモアセンスによって恐ろしく左右されると思っています。
片付けをしてくれないときに
「片付けをしてね」「お部屋キレイにならないと困るんだよ」
と言っているだけではなかなか子供に響きません…。
「お片付け選手権、ただいま参加者募集中で～す！！！」
と子供の興味を引くユーモアが求められるのです…。
パパママには演技スキルも求められますね！！(？)
ちょっと面白い言い回しを思いつけば自分自身の気持ちも楽しくしちゃう効果もあると思います！(たぶん)
だから！！！！！！ユーモアセンスが欲しい！！！！
少しでも楽しく育児を乗り越えていくために！！！！
ユーモアトレーニングアプリ作ってみた
センスは磨くしかない。じゃぁ、練習するしかない！と
ユーモアをトレーニングするアプリを作成してみました。
Claudeに全てお任せ。
ちょちょいとお願いしただけでこんなアプリを作成してくれました！
Claudeに依頼した内容
- ユーモアスキルを高める一問一答形式
- ランダムなシチュエーションを想定してどんな声かけをするかを問う
- 回答を送信すると採点をしてほしい
- 回答例も提示して欲しい
- そのまま公開できるようにコードを書いて欲しい
こんな感じでお願いしたらすぐに作成してくれました。
生成してもらったコードはコチラ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子育てユーモアトレーニング</title>
<style>
body {
font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f0f8ff;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.situation {
font-size: 1.2em;
margin-bottom: 20px;
padding: 15px;
background-color: #e6f3ff;
border-radius: 5px;
}
.input-area {
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 100px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
margin-right: 10px;
}
button:hover {
background-color: #45a049;
}
.feedback {
margin-top: 20px;
padding: 15px;
border-radius: 5px;
}
.score-details {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.score-item {
flex: 1;
margin-right: 10px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
}
.example-answer {
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
margin-top: 10px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>子育てユーモアトレーニング</h1>
<p>お子さんとの日常でユーモアのある対応ができるようになりましょう！</p>
<div class="situation" id="situation"></div>
<div class="input-area">
<textarea id="answer" placeholder="あなたならどう声をかけますか？"></textarea>
<button onclick="checkAnswer()">回答を送信</button>
<button onclick="nextSituation()">次の問題へ</button>
</div>
<div id="feedback" class="feedback hidden">
<div id="score-details" class="score-details"></div>
<div class="comment"></div>
<div class="example-answer"></div>
</div>
</div>
<script>
const situations = [
{
scenario: "2歳の子どもが公園で砂を食べようとしています。",
evaluationCriteria: {
humorLevel: "子どもの興味を面白く転換できているか",
empathyLevel: "子どもの気持ちを理解し尊重しているか",
creativityLevel: "想像力を刺激する表現があるか",
redirectionSkill: "望ましくない行動を穏やかに止められているか"
},
examples: [
"「おいしそうだね〜。でもお砂場のおやつは、お腹が痛くなっちゃうんだって。代わりにお家でもっとおいしいおやつ食べようか？」",
"「あら〜、お砂場マスターになりたいの？でも食べちゃうと砂場の妖精さんが困っちゃうよ〜」"
]
},
{
scenario: "4歳の子どもが靴下を左右逆に履いて得意げです。",
evaluationCriteria: {
humorLevel: "子どもの自信や達成感を笑いに変換できているか",
empathyLevel: "子どもの気持ちを尊重し、否定していないか",
creativityLevel: "ユニークな視点や面白い表現があるか",
encouragementLevel: "子どもの挑戦や工夫を褒めているか"
},
examples: [
"「わぁ！今日の靴下さん、反対側の世界を冒険してるんだね！」",
"「おや？靴下さんたち、今日は特別な遊びを思いついたのかな？」"
]
},
{
scenario: "3歳の子どもが雨の日に外で遊びたいとぐずっています。",
evaluationCriteria: {
humorLevel: "状況を面白く捉え直せているか",
empathyLevel: "子どもの欲求や気持ちを理解しているか",
creativityLevel: "室内での代替案に創造性があるか",
redirectionSkill: "子どもの気分を前向きに変えられているか"
},
examples: [
"「お空がお水のシャワーをくれてるね。今日はお家でカッパを着て傘をさして雨ごっこしようか？」",
"「雨の日は、お家が特別な遊び場に変身するんだよ。今日は何に変身させようかな〜？」"
]
},
{
scenario: "5歳の子どもが野菜を食べたくないと言っています。",
evaluationCriteria: {
humorLevel: "野菜を面白く食べさせる工夫があるか",
empathyLevel: "子どもの好み・気持ちを理解しているか",
creativityLevel: "野菜を魅力的に見せる想像力があるか",
nutritionEducation: "食べることの意義を楽しく伝えられているか"
},
examples: [
"「このブロッコリーね、実は小さな木なんだよ。恐竜さんになって食べる？それとも巨人さんになって食べる？」",
"「あ！このニンジン食べたら、うさぎさんみたいにジャンプできるようになるかもね！」"
]
},
{
scenario: "4歳の子どもが片付けを嫌がっています。",
evaluationCriteria: {
humorLevel: "片付けを遊びに変換できているか",
empathyLevel: "子どもの気持ちを理解し、強制していないか",
creativityLevel: "ゲーム性のある誘い方をしているか",
motivationLevel: "子どもの意欲を引き出す工夫があるか"
},
examples: [
"「おもちゃたちが『お家に帰りたいよ〜』って言ってるよ。みんなをお家まで送ってあげよう！」",
"「片付けレースの始まりだよ！お片付けヒーローになれるかな？」"
]
}
];
let currentSituation = 0;
function showSituation() {
document.getElementById('situation').textContent = situations[currentSituation].scenario;
document.getElementById('answer').value = '';
document.getElementById('feedback').classList.add('hidden');
}
function checkAnswer() {
const answer = document.getElementById('answer').value.trim();
if (!answer) {
alert('回答を入力してください');
return;
}
const currentScenario = situations[currentSituation];
const feedback = document.getElementById('feedback');
const scoreDetailsDiv = document.getElementById('score-details');
const commentDiv = feedback.querySelector('.comment');
const exampleDiv = feedback.querySelector('.example-answer');
// 詳細な評価システム
const evaluationResults = evaluateAnswer(answer, currentScenario);
// スコア詳細の表示
scoreDetailsDiv.innerHTML = Object.entries(evaluationResults.criteriaScores)
.map(([key, score]) => `
<div class="score-item">
<strong>${getCriteriaName(key)}</strong>
<br>スコア: ${score}/5
</div>
`).join('');
// コメント生成
const overallComment = generateDetailedComment(evaluationResults);
commentDiv.innerHTML = `
<h3>総合評価</h3>
<p>総合スコア: ${evaluationResults.totalScore}/25</p>
<p>${overallComment}</p>
`;
// 回答例の表示
exampleDiv.innerHTML = `
<h3>参考になる回答例：</h3>
${currentScenario.examples.map(ex => `<p>${ex}</p>`).join('')}
`;
feedback.classList.remove('hidden');
}
function getCriteriaName(key) {
const criteriaNames = {
humorLevel: "ユーモアレベル",
empathyLevel: "共感力",
creativityLevel: "創造性",
redirectionSkill: "誘導スキル",
encouragementLevel: "励まし方",
nutritionEducation: "栄養教育",
motivationLevel: "意欲喚起"
};
return criteriaNames[key] || key;
}
function evaluateAnswer(answer, scenario) {
const criteriaScores = {};
// 各評価基準のスコアリング
Object.keys(scenario.evaluationCriteria).forEach(criterion => {
let score = 0;
// 基本点
if (answer.length > 10) score++;
// ユーモア関連の評価
if (answer.includes('？') || answer.includes('！')) score++;
// 具体的な表現の評価
if (answer.includes('ね') || answer.includes('よ')) score++;
// シナリオ固有の評価
switch(criterion) {
case 'humorLevel':
if (answer.match(/遊び|変身|冒険|マスター/)) score++;
break;
case 'empathyLevel':
if (answer.match(/〜|そうだね/)) score++;
break;
case 'creativityLevel':
if (answer.match(/恐竜|巨人|妖精|お家/)) score++;
break;
case 'redirectionSkill':
if (answer.match(/代わりに|じゃなくて/)) score++;
break;
}
// 最大5点に制限
criteriaScores[criterion] = Math.min(score, 5);
});
// 総合スコアの計算
const totalScore = Object.values(criteriaScores).reduce((a, b) => a + b, 0);
return { criteriaScores, totalScore };
}
function generateDetailedComment(evaluationResults) {
const totalScore = evaluationResults.totalScore;
if (totalScore >= 20) {
return '素晴らしい対応です！子どもの気持ちを完璧に理解し、創造的で温かいユーモアが光っています。親子のコミュニケーションが自然と深まる素敵な声かけですね。';
} else if (totalScore >= 15) {
return 'とても良い着眼点です。さらに想像力を膨らませたり、子どもの気持ちに寄り添う言葉を加えると、もっと素敵な声かけになりますよ。';
} else if (totalScore >= 10) {
return '工夫の跡が見られますが、もう少し子どもの視点に立った創造的な表現を心がけてみましょう。ユーモアと共感を意識すると、もっと良くなります。';
} else {
return '子どもとのコミュニケーションには、もう少し遊び心と想像力が必要です。具体的な回答例を参考に、より温かく面白い声かけを心がけましょう。';
}
}
function nextSituation() {
currentSituation = (currentSituation + 1) % situations.length;
showSituation();
}
// 初期表示
showSituation();
</script>
</body>
</html>
実際に使ってみて
簡単に作成してもらったアプリなので、このまま実用にするには少し物足りなさがあります😅
もっとこうなったら良いなぁと考えたのは
- もっと設問のバリエーションがたくさん欲しい
- 採点をもっと細かく指摘して欲しい
- 会話するようにユーモアのアドバイスが欲しい
本格的に開発するならAPIを使用するともっと色々なケースの提案や採点、アドバイスをもらえそうだな～と思いました。
とりあえず形にするにはぴったり
本格開発を行う前に、雰囲気を知ると具体的なイメージが湧いていいな～と作ってみて感じました。思いついたアイディアをとりあえず形にしてみるのにどんどん使ってみたいと思います！