秋葉原教室式・小中学生プログラミング 0→100完全ロードマップ——Scratchから「自分のサイト公開」まで

「子どもにプログラミングを習わせたい。でも、Scratchの次に何を、どの順番で学べばいいのか分からない」——これは、教室への問い合わせで最も多くいただく声です。この記事は、Scratch から HTML/CSS、そして JavaScript で自分のWebサイトをURL付きで公開するまでの学習の全体地図を、秋葉原の実店舗教室が現場で見てきた観点で1本にまとめたものです。各段階で「何ができるようになるか」「どこでつまずくか」「次へ進むサインは何か」を、順を追って整理します。ブックマークして、お子さんの現在地を確認するのに使ってください。

このロードマップの全体像

子どものプログラミング学習は、ざっくり5つのフェーズで進みます。

大切なのは、年齢で区切るのではなく、お子さんの「今いるフェーズ」で考えることです。同じ小学5年生でも、フェーズ1の子もいればフェーズ3に進んでいる子もいます。以下、フェーズごとに見ていきます。

なお「何歳から始めるのが良いか」という年齢の観点は、小学生にプログラミングを習わせるベストな年齢は？で別途詳しく整理しています。

フェーズ0：準備期——「道具に慣れる」

意外と見落とされがちですが、プログラミング学習の土台はPC操作とタッチタイピングです。

キーボードに不慣れなまま始めると、「考えること」より「文字を探すこと」に意識が奪われてしまい、学習そのものが進みにくくなります。逆に、ここを早めに通過しておくと、後のフェーズでの伸びが明らかに変わります。

現場で見ていると、体験に来る子のおよそ4割はタイピングがほぼ未経験からのスタートです。特に小学校低学年（1〜3年生）に多い傾向があります。未経験から始めてもまったく問題ありませんが、家庭で少しずつキーボードに慣れておくと、その後の立ち上がりがスムーズになります。

• どのPCを選べばいいか → 子どもに最初に持たせるパソコンの選び方
• タイピングの始め方 → 小中学生のためのタッチタイピング入門

フェーズ1：Scratch期——「作るのは楽しい」を知る

多くの子が最初に触れるのが Scratch です。ブロックを並べるだけでキャラクターが動き、音が鳴り、ゲームができる。この「自分の操作で画面が反応する」体験が、学習の原動力になります。

この時期に育つのは、論理的に物事を組み立てる感覚です。「順番に処理が進む」「もし〜ならこうする（条件分岐）」「繰り返す（ループ）」といった概念を、遊びの中で自然に身につけていきます。この力は、段取りを考える・うまくいかない原因を探す・順序立てて説明する、といった形で家庭の中でも少しずつ表れてきます。

つまずきポイント：「楽しいだけ」で止まる

一方で、Scratch には一つの落とし穴があります。「楽しいだけ」で終わってしまうケースです。

ブロックを動かして遊ぶのは楽しい。でも、そこから「自分で何かを作り上げる」「もっと複雑なことに挑戦する」という方向に進まないと、学習としては停滞します。

次へ進むサインは、「自分でこういうものを作りたい」という具体的な欲求が出てきたときです。この声が出てきたら、フェーズ2への移行を考えるタイミングです。

フェーズ2：移行期——Scratch から HTML/CSS へ ★最大の壁

ここが、子どものプログラミング学習で最も大きな壁であり、同時に最も成長する瞬間です。

ブロックを並べる Scratch から、文字でコードを書く HTML/CSS へ。<h1> で見出しを作り、<p> で文章を入れ、CSS で色やレイアウトを整える——「本物のコードを書く」最初の体験です。

なぜここに壁があるのか、そしてどう乗り越えるのかは、Scratchの先にあるもの——HTML・CSS・JavaScriptを子どもが学ぶ意味で詳しく解説しています。

現場で見える「2つの反応」

このフェーズに入った子の反応は、はっきり二つに分かれます。

一つは「地味だな」という反応。Scratch のように画面でキャラクターが動かない。タグを書いてブラウザで確認する地道な作業に、最初は戸惑います。

もう一つは「これ、本物じゃん」という反応。「自分が書いたコードがブラウザに表示されている」「これって、普段見ているサイトと同じ仕組み？」と気づいたとき、表情がはっきり変わる子がいます。後者の気づきが出た子は、その後の伸びが速くなることが多いです。

なお、この移行は一足飛びには進みません。当教室では Scratch で土台を固めながら、2〜3年ほどかけてじっくりテキストコードへ移していきます。「早く先へ」ではなく「焦らず積み上げる」ことが、結果的に後の伸びにつながります。お子さんが移行期で足踏みしているように見えても、それは自然なペースです。

この壁の越え方

この時期に「難しい」「行きたくない」という声が出るのは、珍しいことではありません。むしろ、それだけ真剣に取り組んでいるサインです。

無理に押し進めるより、一度立ち止まって「できていること」を確認し直す方が、早く抜け出せることが多いです。「分からない」を“用語・文法・設計”のどれかに分けて整理するだけでも、つまずきはぐっと軽くなります。

フェーズ3：制作期——「自分のサイトを公開する」

HTML/CSS の基本を一通り学ぶと、「自分の好きなものを作りたい」という能動的な姿勢に切り替わります。好きなゲームの紹介ページ、自分のプロフィールサイト——作りたいものを実現するために知識を使う段階です。

そして、このフェーズが目指すゴールが「自分のサイトを公開する」ことです。

大掛かりなものではありません。無料のホスティングサービスを使えば、URLが発行され、誰でも見られる状態になる——それだけのことです。でも、これは子どもにとって大きな目標になります。

自分が書いたコードが、URLとしてインターネット上に存在し、スマートフォンでも表示され、「これ見て」と友達に送れる。この「公開」を目標に据えると、HTML/CSS の学習に「何のために学ぶのか」という軸が生まれます。手を動かして作ったものが形になっていく過程そのものが、「プログラミングを習っている自分」から「Webサイトを作れる自分」への変化を後押しします。

作った作品は、ひとつのページにまとめて「ポートフォリオ」として残していくと、成長の記録になり、次に作りたいもののアイデアにもつながります。

フェーズ4：応用期——JavaScript・コンテスト・進路へ

自分のサイトを作れるようになった子の自然な「次」が、JavaScript です。「ボタンを押したら何かが動く」「入力に反応する」——静的なページに“動き”を足す言語です。

ここまで来ると、学びはぐっと広がります。

• 動くものを作る：JavaScriptで小さなゲーム（じゃんけん・クリックゲームなど）を作る
• 作品を外に出す：プログラミングコンテストに挑戦する
• 進路につなげる：高校「情報I」や受験への接続を意識する

中学生は、学校の情報の授業に物足りなさを感じていた子ほど、この応用期で「自分の作りたいもの」に向かって伸びていく傾向があります。

横断テーマ：保護者の関わり方

最後に、全フェーズを通して大切なことを。保護者自身がプログラミングを分かっている必要はありません。

大事なのは、技術を教えることではなく、続けられる環境と関心を向け続けることです。未経験の保護者がどう関わればいいかはプログラミングが未経験の保護者ができる家庭サポートに、費用を「投資」としてどう考えるかはプログラミング教室の費用を投資として見るにまとめています。

まとめ：年齢ではなく「現在地」で考える

• フェーズ0 準備期：PC操作・タイピングの土台をつくる
• フェーズ1 Scratch期：「作るのは楽しい」と論理の芽生え。"作りたい"が出たら次へ
• フェーズ2 移行期（最大の壁）：Scratch→HTML/CSS。「本物のコード」を初めて書く
• フェーズ3 制作期：自分のサイト公開を目標に、「作れる自分」になる
• フェーズ4 応用期：JavaScript・コンテスト・進路へ広げる

このロードマップは、上から順に一直線に進むものではありません。行きつ戻りつしながら、お子さんのペースで進んでいきます。大切なのは「今どのフェーズにいるか」を見極め、次のサインを見逃さないことです。

今日からの一歩

このロードマップを、お子さんに当てはめてみてください。

1. お子さんの「現在地」を1つ特定する — 上の5フェーズのどこにいるかを当てはめてみる
2. 「次へ進むサイン」を知っておく — 各フェーズの「次へ進むサイン」を頭に入れ、その言葉が出たら一歩進める
3. 現在地を体験レッスンで確かめる — 自己判断が難しければ、実際の授業でお子さんの今の段階を一緒に確認する