小学生の宿題を彩り豊かに楽しくサポート！Markdown AIを使ったAI先生

## はじめに
みなさんは、小学生が宿題に取り組むとき、どのようなサポートが効果的だと思いますか？  
直接答えを教えるのではなく、**考える力を育むヒントを提供するAI**があったら便利ですよね。  

実は、そんな「考える力」を伸ばすAIを、 [**Markdown AI**](https://mdown.com/ja/) を使って簡単に作れるんです。  
この記事では、 **Markdown AI** を活用して開発した、 **小学生向け宿題サポートAI** をご紹介します！  

この記事では以下の内容をお届けします：  
- **Markdown AIの特徴と活用法**  
- **作成したツールの概要**  
- **色を楽しみながら学べる仕組み**  
- **実際のUIや機能の工夫**  
- **本ツールのこだわりポイント**

本記事のツールは[こちら](https://mdown.ai/content/b6c694e4-92e2-4c4f-b8b3-3fa32e33078d)からもご覧いただけます。

## Markdown AIの特徴と活用法
Markdown AIは、AIを組み込んだWebアプリケーション構築を誰でも可能にするシンプルなツールです。  

### **🚀 主な特徴と活用ポイント**  

- **✨ 直感的なUIデザイン**  
  **Markdown**形式でUIを記述可能。**AI**を簡単にWebページに組み込み、複雑な知識がなくてもプロ級の仕上がりを実現できます。  

- **⚙️ 動的なスクリプト対応**  
  JavaScriptを埋め込むことで、インタラクティブな動きを簡単に追加可能。直感的な体験を作り上げられます。  

- **👀 即時プレビュー機能**  
  コードを記述するたび、その場で動作や見た目をリアルタイムに確認可能。試行錯誤のスピードが大幅に向上します。  

- **🌐 公開の手軽さ**  
  作成したツールは、リンクひとつで簡単に公開可能。完成後すぐに共有でき、プロジェクトのアイデアを素早く発信できます。  

<br>
（実は、私自身もQiita以外でWebページを作るのは初めてでした。それでもMarkdown AIを使えば、作成から公開まで驚くほどスムーズに進めることができました。）


## 作成したツールの概要

このツールのコンセプトは「**考える力を伸ばすサポートAI**」です。  
学年ごとに適切な言葉遣いで子どもたちに寄り添い、学びを楽しい体験に変える工夫が詰まっています。  
さらに、**色について学べる仕組み**を搭載し、自然に学びの幅を広げることを目指しました。

### 主な特徴

1. **学年別のヒント提供**  
   学年に応じた言葉遣いと内容で、子どもが理解しやすい表現を採用。  

2. **カスタマイズ可能なUI**  
   好きな色を選び、楽しい学習体験を提供。  

3. **色の学びを取り入れた設計**  
   カラーピッカーを使ってRGB値の変化を体験しながら、色の仕組みを学べます。  

4. **考える力を伸ばすサポート**  
   答えを直接教えず、思考を促すヒントを提供します。  



## 色を楽しみながら学べる仕組み
色を通じて楽しく学べる仕組みが、このツールの大きな特徴です。
「色を変える」というシンプルな操作の中で、学びが広がる体験を提供します。

### 🌈 **色の変更とRGB値の理解**

#### 🎨 **好きな色を選んで背景をカスタマイズ！**

カラーピッカーを使えば、好きな色を選んで背景を変えられます。  
その時、RGB値（赤・緑・青の組み合わせ）がリアルタイムで変化する様子も確認可能です。

📌 **例えば…**  
- 赤色（`#FF0000`）から青色（`#0000FF`）に変えると、数字がどう変わる？  
- 混ぜる色を変えると、どんな新しい色が生まれる？  
👉 **「色を選ぶ」単純な作業が、色の仕組みを学ぶ第一歩に！**  
![RGB値変化の体験](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599258/443cfa52-9218-7377-52d4-f1919061f2eb.gif)

---

### 🔆 **明るさと文字色のバランスを体験！**

#### 👀 **背景と文字のコントラストをチェック！**

背景色が変わると文字色も自動で調整されます。この仕組みを体験することで、Webデザインの「視認性」の基本が自然に学べます。

📌 **例えば…**  
- 明るい背景に暗い文字だとどう見える？  
- 暗い背景に明るい文字を使うと、目に優しい？  
👉 **「見やすさ」を体感しながら学ぼう！**  
![コントラスト体験](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599258/32cf6cf5-d925-ae47-572d-e8872413c8bf.gif)

---

### ✨ **これらの体験で得られる魅力**

1. **実際に触れるからわかりやすい！**  
   カラーピッカーや文字色の自動調整を操作することで、「試して学ぶ」体験型の学びが可能です。理論だけでなく、実感として身につくのがポイントです。

2. **デザイン初心者も気軽にチャレンジ！**  
   小学生でも操作できるシンプルな設計なので、大人も子どもも楽しく体験できます。Webデザインに興味を持つ第一歩として最適です。


## 実際のUIと機能  

以下は完成したツールの一部です。学年別に適応したデザインが特徴的！  

**🎨 ツールの概要**  
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599258/fe86abcf-42dc-a0a3-30c4-28bd66109eba.png" width="500" alt="ツールの全体像">  

👉 [Markdown AIで作ったツールを試してみる](https://mdown.ai/content/b6c694e4-92e2-4c4f-b8b3-3fa32e33078d)  

**共有が簡単にできるのもMarkdown AIの魅力の一つです！**


### 🛠 **主な入力項目と機能**

1. **学年選択セレクター**  
   学年を選ぶと、背景色が変化します。これにより学年ごとのイメージに合ったUIを提供し、親しみやすさをアップさせました。

2. **質問入力フォーム**  
   分かりやすいテキストボックスを用意し、小学生が迷うことなく質問を書き込めるよう配慮しました。

3. **色変更オプション**  
   カラーピッカーで好きな色を選べます。これにより、使い手が自由に画面をカスタマイズでき、学ぶ楽しさが広がります。

---

### **使用例：小学6年生の算数の問題**

以下は、実際にツールを使用したときの画面例です。

> 質問: 半径5cmの円の面積が知りたい
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599258/452ffc13-7871-f7b9-a9f5-b212803432c5.png" width="500" alt="使用例">

#### 🔍 **例のポイント（小学6年生）**
- **学年選択**で「小学6年生」を選択したため、背景色が落ち着いたトーンに変化。
- **質問内容**：「半径5cmの円の面積が知りたい」と入力し、AIが具体的なヒントを提供します。
- **カラーピッカー**で背景を自由にカスタマイズしながら、学ぶ楽しさを体験できます。

---

### **使用例：小学3年生の道徳の問題**

次は、道徳的な視点を求める面白い問題の例です。

> 質問: もし学校の宿題がなくなったらどうなると思う？  
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599258/0ae80f45-856d-895a-3aaa-ab4011471436.png" width="500" alt="使用例">

#### 🔍 **例のポイント（小学3年生）**
- **学年選択**で「小学3年生」を選択したため、背景色が明るく爽やかなトーンに変化。  
- **質問内容**：「もし学校の宿題がなくなったらどうなると思う？」に対し、AIが優しい言葉で考えるヒントを提供します。  
  - 例: **「宿題がないと、勉強する時間が減るかもしれないよ。勉強しないと、どんなことが困るかな？」**  
- このような問いかけにより、自分で考える力を育てるサポートを行います。

---

### ✨ **ここがポイント！**

1. **多様な質問への対応**  
   道徳や算数のように異なるジャンルの質問にも対応でき、学びの幅を広げます。

2. **学年ごとの言葉遣いの変化**  
   小学6年生には論理的な説明、小学3年生には親しみやすい問いかけを行うことで、年齢に合ったサポートを実現しています。

3. **色変更機能によるカスタマイズ性**  
   カラーピッカーを活用することで、楽しく学べる環境を提供します。


## 実装コード全容
実装コードは長いので一部折りたたみます。必要に応じて展開してください。

### Markdown AIのプロンプトの作成画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599258/5e24fc7f-fb85-3809-6430-4ee19d3ad9ff.png)
対話機能を想定していないため、MemoryはOFFに設定しています。  
MemoryをONにすると、Markdownで挿入したコードややり取りの内容がPlaygroundに反映される仕組みです。ただし、以下の点に注意が必要です：

- Playgroundの履歴のみを削除することはできないようです。  
- Memoryをリセットする場合、モデル自体を削除して新たに作り直す必要があるようです。

仕様の詳細については、まだ十分に理解できていない部分もありますが、現時点での挙動を基に設定を決定しました。

<details><summary>Promptの中身</summary>


```:Promptの中身
あなたは小学生の宿題をサポートするAIです。目的は、小学生が自分で答えを考える力を伸ばすことです。そのため、答えを直接伝えるのではなく、考えるためのヒントを出してください。以下のルールを守りながら、サポートしてください。

### ルール
1. **学年ごとの口調**  
   学年に応じて適切な口調で話しかけてください。
   - **1年生・2年生**：やさしく、簡単な言葉でゆっくりと話しかける。最初に「この問題、ちょっとむずかしいよね」などの同調を含めてください。
   - **3年生・4年生**：少し優しく、少し論理的に話しかける。最初に「少し考えちゃう問題だね」などの同調を含めてください。
   - **5年生・6年生**：論理的で、思考を促すように話しかける。最初に「この問題、考えると面白いね」などの同調を含めてください。

2. **漢字の使用について**  
   その学年で習う漢字までを基本とし、難しい言葉は振り仮名や補足説明をつけてもよい。

3. **ヒントの内容**  
   答えを教えずに、考えを導くためのヒントを出してください。
   - 最初に必ず「同調」から始めて、小学生が話しかけられている感覚を持てるようにします。
   - 問いかけや例え話を使う。
   - ヒントの数は3～10個を目安としますが、必要に応じて調整可能です。

4. **ヒントの例**  
   - **1年生**：「この問題、ちょっとむずかしいよね。でも、〇〇をしてみるとわかるかも！」  
   - **3年生**：「これ、少し考えちゃう問題だね。□□について考えると、どんな答えが出るかな？」  
   - **6年生**：「この問題、考えると面白いね。〇〇の仕組みや背景を調べてみると、新しいヒントが見つかるね。」

---

### **同調を入れた流れの意図**
- **親しみやすさの向上**  
   「同調」を最初に入れることで、子どもが「自分の気持ちを理解してくれている」と感じやすくなります。

- **安心感を与える**  
   難しさを認めることで、プレッシャーを軽減し、問題に取り組む意欲を引き出せます。

- **導入がスムーズに**  
   最初に共感することで、その後のヒントが受け入れられやすくなります。
```

</details>


### Markdown AIの編集画面

**Markdown AIは、編集画面と実装画面をシームレスに行き来できる！**
![qiita_ui.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599258/59444890-c45c-d986-59d1-5153c4bbd494.gif)


<details><summary>実装コード</summary>


```html:実装コード
<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>
```


</details>


## まとめ

学ぶことは、新しい世界を広げることです。  
小さな疑問や好奇心が、思いがけない発見を生むきっかけになることもあります。  

今回ご紹介した[ツール](https://mdown.ai/content/b6c694e4-92e2-4c4f-b8b3-3fa32e33078d)は、 **Markdown AI** を使って、その学びの瞬間を支えるために作られました。  
学年ごとのヒントや、色を選びながら楽しむ機能を通じて、子どもたちの考える力を少しずつ育んでいけるはずです。  
<br>
**Markdown AIは、新しいアイデアを形にするためのパートナーです。**  
難しいことを簡単に、面白いことをもっと彩り豊かに。 

使ってみて、まさにそんな気持ちになれました。

## 参考記事
- [Markdown AI公式サイト](https://mdown.com/ja/)  

## 関連記事

https://qiita.com/nakaizumi_slj/items/fe56450e590fa6688055

https://qiita.com/calcMCalcm/items/e4509e62913f687a46fd

https://qiita.com/hook125/items/9dcb6f09061dd688f329

https://qiita.com/natsuakane/items/b1d0e893785ad262019f

https://qiita.com/waka_m/items/c43a04739a6f5fdf139c