対話型AIでキーボードの教材資料を作った

by

関連記事

1. はじめに

対話型AI1を単なる質問回答ツールとして使っていませんか。
実際には、AIとの継続的な対話を通じて、より高品質な成果物を作ることができます。

完成した4ページの資料
1. はじめに
1. はじめに
1. はじめに
完成した4ページの資料

今回は、「小学生向けのキーボード使い方ガイド」を制作する過程を通して、効果的なAI活用の手法を具体的に紹介します。

keyboard_guide.htmlダウンロード
キーの意味とキーボードのつかいかた4ページ.pdfダウンロード

2. 段階的な要求設計

段階的な要求設計 STEP 1 基礎確認 具体的な質問から スタート STEP 2 目的明確化 対象と用途を 絞り込む STEP 3 事実確認 Web検索で 精度を担保 💡 一度に完成を求めない 基礎 → 目的設定 → 検証　の順で品質を上げる

2.1. 最初は具体的で限定的な質問から

対話の出発点は「WindowsとMacのキーボードの違いを教えてください」という基本的な質問でした。いきなり「完璧な教材を作って」と要求するのではなく、まず基礎知識を確認します。

プロンプト例（第1段階）：
「WindowsとMacのキーボードの違いを教えてください。
またそれらの機能や使い方についても教えてください。」

この段階で重要なのは、AIの回答の正確性を検証することです。実際に、変換キーと無変換キーの機能について「本当に正しいかどうか確認してみてください」と指示し、web検索ツール2を使って最新情報を取得しました。

プロンプト例（事実確認）：
「変換キーと無変換キー、半角全角キーについてはほんとに正しいかどうか
ちょっと確認をしてみてください。Windowsの場合です。あとMacの「かな」「英数」も。」

AIの知識には限界があるため、事実確認のプロセスは欠かせません。

2.2. 目的の明確化と段階的な詳細化

基本知識を確認した後、「初心者にわかりやすく教えたい」という目的を明示しました。すると、AIから「キーボードのキーをグループ分けして教える」という提案が出てきます。

プロンプト例（目的明確化）：
「それぞれのキーの使い方は、例のようなものではなくって、
そもそもどんな機能なのかというか、
そもそもどういうために使うキーなのかということをわかるようにしてください。
キーボード使い始めの初心者向けに、これはこういう意味のキーだよ
というの明確に区別できるように教えたいのです。」

さらに体系的な整理を求めると、より構造化された提案が得られます。

プロンプト例（構造化要求）：
「ここまで説明してきたキーボードのキーについて
初心者にわかりやすいようにグルーピングして教えたいんだけど、
どのようにしたらいいかな？」

ここでの対話は協働作業。一度に完璧な成果物を求めるのではなく、段階的に品質を向上させていきます。料理で例えるなら、最初に材料を確認し、次に調理法を相談し、味見をしながら調整していくような流れです。

3. 効果的なフィードバックループの構築

制作過程では以下のような段階的な改良を行いました。

フィードバックループの構築 作成 Markdown/HTML 改良 対象・表現の最適化 具体的な 指示を出す 「もっと良くして」ではなく 「⭐で重要度表示」「印刷用に余白調整」など具体的に

まず、基本的なMarkdown形式の資料を作成。最初は「初心者向け」という漠然とした設定でした。しかし対話を進める中で「小学校低学年向け」、さらに「小学校低学年から中学年向け」と、より具体的な対象に絞り込んでいきます。

小学生向けの読みやすいHTML形式に変換。さらに、難しい漢字にルビ（ふりがな）を追加。最後に、印刷に適した配色と余白調整を実施。

プロンプト例（対象調整）：
「いいね！これを小学校低学年向けにできますか？」
「これを小学校低学年から中学年向けにできますか？HTMLで、適宜 ルビを振って」

対象が明確になると、使用する言葉、説明の深さ、視覚的な工夫など、すべての要素が最適化されます。これは設計思考の基本原則である「ユーザー中心設計」3の実践例です。

また、「ボタンという表現をキーに直してください。これはキーボードだからです」のように、明確で理由も含めた修正指示を出します。抽象的な「もっと良くして」ではなく、何を、なぜ変更すべきかを具体的に伝えることが重要です。

各段階で、前の成果物を基盤として次の改良を加えていきます。この方法により、品質を段階的に向上させながら、最終的に高い完成度を実現できます。

3.1. 実用性を重視した設計思考

「例えば1番大事などという部分は⭐️の数で5段階評価にしたほうが見やすい」という提案により、重要度の表現方法を大幅に改善しました。従来の「いちばん だいじ・まいにち つかう」という文字説明から、⭐⭐⭐⭐⭐という視覚的表現に変更。使用頻度も🔥（毎日使う）、💡（便利・ときどき使う）、🎓（上級者向け）という絵文字で表現。

また、「これは資料として印刷するので、わかりやすい程度に余白を少なくしてください。配色についても印刷することを前提に考えてみてください」という指示により、実用性が大幅に向上しました。

プロンプト例（実用性重視）：
「いい感じなのですが、例えば1番大事などと言う部分は⭐️の数で
5段階評価にしたほうが見やすいと思うんですよね。
そのような簡潔にするための工夫を絵文字などを使ってグラフィカルにしてみてください。」

「これは資料として印刷をするので、
なるべくわかりやすい程度に余白を少なくしてもらえるとうれしいです。
その他配色についても印刷すると言うことを前提に考えてみてください。」

白黒印刷でも読みやすいよう、グラデーションを単色に変更。余白を調整してA4用紙に効率良く収まるよう最適化。@media printを使用して印刷専用のCSSスタイルを追加。最初はシンプルなテキスト中心の構成でした。しかし、対話を重ねる中で、各グループに適切なアイコンを追加（📝文字入力、🔤文字種類変更、✏️編集など）。ヒントやポイントにも絵文字を追加（💡基本のコツ、🌟重要ポイント、🛡️安心メッセージなど）。

この変更により、小学生でも一目で重要度と使用頻度を理解できるようになりました。

4. 技術的な実装における工夫

技術的な実装の工夫 ルビ表記 じ 字 <ruby>タグで ふりがなを表示 印刷でも正確に レンダリング 印刷対応CSS 🖨 @media print で 印刷専用スタイル 背景色を強制表示 A4に最適化 絵文字評価 ⭐⭐⭐ 重要度を⭐5段階 使用頻度を🔥💡🎓 小学生でも 一目で理解

4.1. HTMLとCSSの最適化

ルビ表記にはHTML標準のタグ4を使用しました。これにより、ブラウザの標準機能で正しく表示され、印刷時も適切にレンダリングされます。

<span class="key"><ruby>Shift<rt>シフト</rt></ruby></span>
Code language: HTML, XML (xml)

4.2. 印刷対応の技術的配慮

@media print5 を使用して印刷専用スタイルを定義。背景色の強制表示（-webkit-print-color-adjust: exact）6により、印刷時も視覚的な区別を維持。余白とフォントサイズを印刷用に最適化し、A4用紙で読みやすい形式に調整。

これらの技術的工夫により、デジタル表示と印刷の両方で最適な見た目を実現しました。

4.3. 効果的な対話のコツ

  • 段階的なアプローチ
  • 検証と修正のサイクル
  • 具体性と明確性

抽象的な指示「もっと良くして」ではなく、「⭐で重要度を表示」「印刷用に余白調整」など、具体的な改善指示を出すことで、より的確な改良が可能になります。

一度に完璧な成果物を求めるのではなく、基本機能→詳細化→視覚改善→実用性向上という段階的なアプローチにより、効率的に高品質な成果物を作成できます。

AIの回答をそのまま受け入れるのではなく、事実確認や実用性の検証を行い、必要に応じて修正を重ねることで、信頼性の高い成果物を作ることができます。

5. 継続的な品質改善のプロセス

継続的な品質改善 💡 AIの提案を評価・採用 グループ分け・学習順序・視覚改善など 🔄 フィードバックで反復修正 「括弧ではなくルビで」など段階的に解決 ✅ 高品質な成果物が完成 デジタル表示・印刷の両対応を実現 完璧を 最初から 求めない 継続的な 改善こそが 品質を 高める
  • AIからの建設的な提案活用
  • エラー修正と改善の反復

AIは単に指示に従うだけでなく、グループ分けの提案、学習順序の提案、視覚的改善のアイデアなど、建設的な提案を数多く行いました。これらの提案を評価し、必要に応じて採用することで、より良い成果物を作ることができます。

「キーにも読み仮名が振ってあるとわかりやすいと思いました」「キーの読み仮名は括弧書きではなく、上にルビを表示するだけで良いです」といったフィードバックにより、段階的に問題を解決していきます。

この過程では、完璧を最初から求めるのではなく、継続的な改善により品質を向上させることが重要です。

6. まとめ

対話型AIとの効果的な協働により、単なる情報提供を超えた高品質な教材制作が可能になります。重要なのは、段階的な要求設計、具体的なフィードバック、実用性重視の設計思考、そして継続的な品質改善です。AIを単なるツールとしてではなく、協働パートナーとして活用することで、個人の能力を大幅に拡張し、プロフェッショナルレベルの成果物を効率的に作成できます。

  1. ChatGPT、Claude、Geminiなどの大規模言語モデル（LLM）ベースの対話システムを指します。単発の質問回答ではなく、文脈を保持した継続的な対話が可能な点が特徴です。 – 大規模言語モデルとは何か？ChatGPTの仕組みを理解する
  2. Claude、ChatGPT Plus、Copilotなどの対話型AIに搭載されているリアルタイム情報検索機能。最新情報や事実確認が必要な場合に有効です。 – ChatGPT Plusのウェブブラウジング機能の使い方
  3. User-Centered Design（UCD）。製品やサービスの設計において、実際の利用者のニーズや行動を重視する設計手法です。 – ユーザー中心設計（UCD）の基本プロセス
  4. HTML5で標準化されたルビ（振り仮名）を表示するためのタグ。 – HTMLのrubyタグでルビを正しく表示する方法
  5. CSSメディアクエリの一種。印刷時にのみ適用されるスタイルを定義できます。画面表示と印刷表示を使い分ける際に必須の技術です。 – CSS @media printで印刷用スタイルを作成する方法
  6. Webkitベースのブラウザ（Chrome、Safari等）で印刷時に背景色や画像を強制的に表示するCSSプロパティ。印刷コスト削減のため、通常は背景色は印刷されません。 – 印刷時に背景色を表示する方法