子どもプログラミング教室の教材サイトを制作

概要

自身が運営・指導する子どもプログラミング教室「Dream Tech School」の教材をWebサイトとして制作しました。

HTML・CSS・JavaScriptの教材を、MkDocsを使って体系的にまとめたオンライン教材サイトです。

課題

• 紙のプリント教材だと、更新・修正のたびに印刷し直す手間がかかる
• 子どもたちが自宅で復習したいときに教材を見返せない
• 完成見本のデモを紙面上では確認できない

解決策

MkDocsによる教材サイト構築

静的サイトジェネレーターのMkDocsを採用し、教材コンテンツをWebサイト化しました。

• オンライン閲覧：教室でも自宅でも、ブラウザからいつでも教材にアクセス可能
• 印刷対応レイアウト：紙で手元に置きたい場合にも、きれいに印刷できるスタイルを適用
• 完成見本のデモ：学習中のコードの完成イメージをオンラインで実際に動かして確認できる

子どもたちが分かりやすい構成

教室で実際に指導する中で得た知見を活かし、子どもたちが理解しやすい内容・順序で教材を構成しています。

• ステップバイステップで進められる構成
• コードの実行結果をすぐに確認できるデモページ
• つまずきやすいポイントには補足説明を追加

成果

• 教材の更新が即座に反映され、常に最新の内容を提供できる
• 子どもたちが自宅からでも教材にアクセスして復習できる
• 完成見本をオンラインで確認でき、学習のモチベーション向上につながった
• 日々の教室運営で実際に活用中

使用技術

• MkDocs（静的サイトジェネレーター）
• Markdown（教材コンテンツの記述）
• HTML / CSS / JavaScript（教材の題材およびデモページ）