はじめに

みなさんは、小学生が宿題に取り組むとき、どのようなサポートが効果的だと思いますか？
直接答えを教えるのではなく、考える力を育むヒントを提供する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で作ったツールを試してみる

共有が簡単にできるのも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の中身

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は、新しいアイデアを形にするためのパートナーです。
難しいことを簡単に、面白いことをもっと彩り豊かに。

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

参考記事

Markdown AI公式サイト

関連記事