はじめに
みなさんは、小学生が宿題に取り組むとき、どのようなサポートが効果的だと思いますか？
直接答えを教えるのではなく、考える力を育むヒントを提供するAIがあったら便利ですよね。
実は、そんな「考える力」を伸ばすAIを、 Markdown AI を使って簡単に作れるんです。
この記事では、 Markdown AI を活用して開発した、 小学生向け宿題サポートAI をご紹介します！
この記事では以下の内容をお届けします：
- Markdown AIの特徴と活用法
- 作成したツールの概要
- 色を楽しみながら学べる仕組み
- 実際のUIや機能の工夫
- 本ツールのこだわりポイント
本記事のツールはこちらからもご覧いただけます。
Markdown AIの特徴と活用法
Markdown AIは、AIを組み込んだWebアプリケーション構築を誰でも可能にするシンプルなツールです。
🚀 主な特徴と活用ポイント
-
✨ 直感的なUIデザイン
Markdown形式でUIを記述可能。AIを簡単にWebページに組み込み、複雑な知識がなくてもプロ級の仕上がりを実現できます。 -
⚙️ 動的なスクリプト対応
JavaScriptを埋め込むことで、インタラクティブな動きを簡単に追加可能。直感的な体験を作り上げられます。 -
👀 即時プレビュー機能
コードを記述するたび、その場で動作や見た目をリアルタイムに確認可能。試行錯誤のスピードが大幅に向上します。 -
🌐 公開の手軽さ
作成したツールは、リンクひとつで簡単に公開可能。完成後すぐに共有でき、プロジェクトのアイデアを素早く発信できます。
（実は、私自身もQiita以外でWebページを作るのは初めてでした。それでもMarkdown AIを使えば、作成から公開まで驚くほどスムーズに進めることができました。）
作成したツールの概要
このツールのコンセプトは「考える力を伸ばすサポートAI」です。
学年ごとに適切な言葉遣いで子どもたちに寄り添い、学びを楽しい体験に変える工夫が詰まっています。
さらに、色について学べる仕組みを搭載し、自然に学びの幅を広げることを目指しました。
主な特徴
-
学年別のヒント提供
学年に応じた言葉遣いと内容で、子どもが理解しやすい表現を採用。 -
カスタマイズ可能なUI
好きな色を選び、楽しい学習体験を提供。 -
色の学びを取り入れた設計
カラーピッカーを使ってRGB値の変化を体験しながら、色の仕組みを学べます。 -
考える力を伸ばすサポート
答えを直接教えず、思考を促すヒントを提供します。
色を楽しみながら学べる仕組み
色を通じて楽しく学べる仕組みが、このツールの大きな特徴です。
「色を変える」というシンプルな操作の中で、学びが広がる体験を提供します。
🌈 色の変更とRGB値の理解
🎨 好きな色を選んで背景をカスタマイズ！
カラーピッカーを使えば、好きな色を選んで背景を変えられます。
その時、RGB値（赤・緑・青の組み合わせ）がリアルタイムで変化する様子も確認可能です。
📌 例えば…
- 赤色（
#FF0000）から青色（#0000FF）に変えると、数字がどう変わる？ - 混ぜる色を変えると、どんな新しい色が生まれる？
👉 「色を選ぶ」単純な作業が、色の仕組みを学ぶ第一歩に！
🔆 明るさと文字色のバランスを体験！
👀 背景と文字のコントラストをチェック！
背景色が変わると文字色も自動で調整されます。この仕組みを体験することで、Webデザインの「視認性」の基本が自然に学べます。
📌 例えば…
- 明るい背景に暗い文字だとどう見える？
- 暗い背景に明るい文字を使うと、目に優しい？
👉 「見やすさ」を体感しながら学ぼう！
✨ これらの体験で得られる魅力
-
実際に触れるからわかりやすい！
カラーピッカーや文字色の自動調整を操作することで、「試して学ぶ」体験型の学びが可能です。理論だけでなく、実感として身につくのがポイントです。 -
デザイン初心者も気軽にチャレンジ！
小学生でも操作できるシンプルな設計なので、大人も子どもも楽しく体験できます。Webデザインに興味を持つ第一歩として最適です。
実際のUIと機能
以下は完成したツールの一部です。学年別に適応したデザインが特徴的！
🎨 ツールの概要
共有が簡単にできるのもMarkdown AIの魅力の一つです！
🛠 主な入力項目と機能
-
学年選択セレクター
学年を選ぶと、背景色が変化します。これにより学年ごとのイメージに合ったUIを提供し、親しみやすさをアップさせました。 -
質問入力フォーム
分かりやすいテキストボックスを用意し、小学生が迷うことなく質問を書き込めるよう配慮しました。 -
色変更オプション
カラーピッカーで好きな色を選べます。これにより、使い手が自由に画面をカスタマイズでき、学ぶ楽しさが広がります。
使用例：小学6年生の算数の問題
以下は、実際にツールを使用したときの画面例です。
質問: 半径5cmの円の面積が知りたい
🔍 例のポイント（小学6年生）
- 学年選択で「小学6年生」を選択したため、背景色が落ち着いたトーンに変化。
- 質問内容：「半径5cmの円の面積が知りたい」と入力し、AIが具体的なヒントを提供します。
- カラーピッカーで背景を自由にカスタマイズしながら、学ぶ楽しさを体験できます。
使用例：小学3年生の道徳の問題
次は、道徳的な視点を求める面白い問題の例です。
質問: もし学校の宿題がなくなったらどうなると思う？
🔍 例のポイント（小学3年生）
- 学年選択で「小学3年生」を選択したため、背景色が明るく爽やかなトーンに変化。
-
質問内容：「もし学校の宿題がなくなったらどうなると思う？」に対し、AIが優しい言葉で考えるヒントを提供します。
- 例: 「宿題がないと、勉強する時間が減るかもしれないよ。勉強しないと、どんなことが困るかな？」
- このような問いかけにより、自分で考える力を育てるサポートを行います。
✨ ここがポイント！
-
多様な質問への対応
道徳や算数のように異なるジャンルの質問にも対応でき、学びの幅を広げます。 -
学年ごとの言葉遣いの変化
小学6年生には論理的な説明、小学3年生には親しみやすい問いかけを行うことで、年齢に合ったサポートを実現しています。 -
色変更機能によるカスタマイズ性
カラーピッカーを活用することで、楽しく学べる環境を提供します。
実装コード全容
実装コードは長いので一部折りたたみます。必要に応じて展開してください。
Markdown AIのプロンプトの作成画面
対話機能を想定していないため、MemoryはOFFに設定しています。
MemoryをONにすると、Markdownで挿入したコードややり取りの内容がPlaygroundに反映される仕組みです。ただし、以下の点に注意が必要です：
- Playgroundの履歴のみを削除することはできないようです。
- Memoryをリセットする場合、モデル自体を削除して新たに作り直す必要があるようです。
仕様の詳細については、まだ十分に理解できていない部分もありますが、現時点での挙動を基に設定を決定しました。
Promptの中身
あなたは小学生の宿題をサポートするAIです。目的は、小学生が自分で答えを考える力を伸ばすことです。そのため、答えを直接伝えるのではなく、考えるためのヒントを出してください。以下のルールを守りながら、サポートしてください。
### ルール
1. **学年ごとの口調**
学年に応じて適切な口調で話しかけてください。
- **1年生・2年生**：やさしく、簡単な言葉でゆっくりと話しかける。最初に「この問題、ちょっとむずかしいよね」などの同調を含めてください。
- **3年生・4年生**：少し優しく、少し論理的に話しかける。最初に「少し考えちゃう問題だね」などの同調を含めてください。
- **5年生・6年生**：論理的で、思考を促すように話しかける。最初に「この問題、考えると面白いね」などの同調を含めてください。
2. **漢字の使用について**
その学年で習う漢字までを基本とし、難しい言葉は振り仮名や補足説明をつけてもよい。
3. **ヒントの内容**
答えを教えずに、考えを導くためのヒントを出してください。
- 最初に必ず「同調」から始めて、小学生が話しかけられている感覚を持てるようにします。
- 問いかけや例え話を使う。
- ヒントの数は3～10個を目安としますが、必要に応じて調整可能です。
4. **ヒントの例**
- **1年生**：「この問題、ちょっとむずかしいよね。でも、〇〇をしてみるとわかるかも！」
- **3年生**：「これ、少し考えちゃう問題だね。□□について考えると、どんな答えが出るかな？」
- **6年生**：「この問題、考えると面白いね。〇〇の仕組みや背景を調べてみると、新しいヒントが見つかるね。」
---
### **同調を入れた流れの意図**
- **親しみやすさの向上**
「同調」を最初に入れることで、子どもが「自分の気持ちを理解してくれている」と感じやすくなります。
- **安心感を与える**
難しさを認めることで、プレッシャーを軽減し、問題に取り組む意欲を引き出せます。
- **導入がスムーズに**
最初に共感することで、その後のヒントが受け入れられやすくなります。
Markdown AIの編集画面
Markdown AIは、編集画面と実装画面をシームレスに行き来できる！
実装コード
<div style="font-family: 'Arial', sans-serif; padding: 20px; border-radius: 10px; max-width: 500px; margin: auto; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);">
<h2 id="main-title" style="text-align: center;">AI先生がヒントを教えてくれるよ！</h2>
<div style="margin-bottom: 15px;">
<label for="grade-select" style="display: block; font-weight: bold; margin-bottom: 5px;">学年をえらんでね:</label>
<select id="grade-select" style="width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc;">
<option value="" disabled selected>何年生？</option>
<option value="1">1年生</option>
<option value="2">2年生</option>
<option value="3">3年生</option>
<option value="4">4年生</option>
<option value="5">5年生</option>
<option value="6">6年生</option>
</select>
</div>
<div style="margin-bottom: 15px;">
<label for="question-input" style="display: block; font-weight: bold; margin-bottom: 5px;">聞きたいことを書いてね:</label>
<input type="text" id="question-input" placeholder="ここに書いてね！"
style="width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc;">
</div>
<div style="margin-bottom: 15px;">
<label for="color-picker" style="display: block; font-weight: bold; margin-bottom: 5px;">好きな色に変えてみよう！:</label>
<input type="color" id="color-picker" value="#ffffff"
style="width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc;">
</div>
<div style="text-align: center;">
<button type="button" id="ask-button"
style="background-color: #D4EED1; color: black; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold;">
ヒントをもらう！
</button>
</div>
<div id="answer-output" style="margin-top: 20px; background-color: #fff; padding: 15px; border-radius: 5px; border: 1px solid #ddd; display: none; color: black;">
<strong>ヒント:</strong>
<div id="answer-text" style="margin-top: 10px;"></div>
</div>
</div>
<script>
(() => {
const gradeColors = {
"1": { background: "#FFFCE5", button: "#FFF5B8" },
"2": { background: "#FFF0F0", button: "#FFC4C4" },
"3": { background: "#E8F5FF", button: "#B3D9FF" },
"4": { background: "#E8FBE8", button: "#C1E5C1" },
"5": { background: "#F9F3E7", button: "#D8C8A6" },
"6": { background: "#F5EBF8", button: "#D4BFE6" }
};
const gradeSelect = document.getElementById('grade-select');
const button = document.getElementById('ask-button');
const colorPicker = document.getElementById('color-picker');
const mainTitle = document.getElementById('main-title');
// RGB色を暗くする関数
const darkenColor = (hexColor, amount) => {
let color = hexColor.slice(1);
let r = parseInt(color.substring(0, 2), 16);
let g = parseInt(color.substring(2, 4), 16);
let b = parseInt(color.substring(4, 6), 16);
r = Math.max(0, Math.min(255, r - amount));
g = Math.max(0, Math.min(255, g - amount));
b = Math.max(0, Math.min(255, b - amount));
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
};
// 明るさを判定して文字色を切り替える関数
const updateTextColor = (hexColor) => {
let color = hexColor.slice(1);
let r = parseInt(color.substring(0, 2), 16);
let g = parseInt(color.substring(2, 4), 16);
let b = parseInt(color.substring(4, 6), 16);
const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
const textColor = brightness < 128 ? "#FFFFFF" : "#000000";
document.body.style.color = textColor;
button.style.color = textColor;
mainTitle.style.color = textColor;
};
// 学年が変更されたときに色を変える
gradeSelect.addEventListener('change', () => {
const selectedGrade = gradeSelect.value;
if (!selectedGrade) return; // 選択されていない場合は何もしない
const colors = gradeColors[selectedGrade];
document.body.style.backgroundColor = colors.background;
button.style.backgroundColor = darkenColor(colors.background, 30);
updateTextColor(colors.background);
colorPicker.value = colors.background;
});
// カラーピッカーで選んだ色を適用
colorPicker.addEventListener('input', (e) => {
const selectedColor = e.target.value;
document.body.style.backgroundColor = selectedColor;
button.style.backgroundColor = darkenColor(selectedColor, 30);
updateTextColor(selectedColor);
});
button.addEventListener('click', async () => {
button.disabled = true;
button.textContent = "考え中…";
const grade = gradeSelect.value;
const question = document.getElementById('question-input').value.trim();
if (!grade) {
alert("学年を選んでください！");
button.disabled = false;
button.textContent = "ヒントをもらう！";
return;
}
if (!question) {
document.getElementById('answer-output').style.display = "block";
document.getElementById('answer-text').innerText = "聞きたいことを入力してね！";
button.disabled = false;
button.textContent = "ヒントをもらう！";
return;
}
const modelId = 'p2rMneMkoDKbvwSv2KSGJ8';
const serverAi = new ServerAI();
const prompt = `学年: ${grade}\n質問: ${question}`;
const answer = await serverAi.getAnswerText(modelId, '', prompt);
document.getElementById('answer-output').style.display = "block";
document.getElementById('answer-text').innerText = answer;
button.disabled = false;
button.textContent = "ヒントをもらう！";
});
})();
</script>
まとめ
学ぶことは、新しい世界を広げることです。
小さな疑問や好奇心が、思いがけない発見を生むきっかけになることもあります。
今回ご紹介したツールは、 Markdown AI を使って、その学びの瞬間を支えるために作られました。
学年ごとのヒントや、色を選びながら楽しむ機能を通じて、子どもたちの考える力を少しずつ育んでいけるはずです。
Markdown AIは、新しいアイデアを形にするためのパートナーです。
難しいことを簡単に、面白いことをもっと彩り豊かに。
使ってみて、まさにそんな気持ちになれました。
参考記事
関連記事