🏫 先生向け プログラミング授業ガイド

ひなテックGamesとは

ひなテックGamesは、すべてHTML・CSS・JavaScriptで作られた無料のブラウザゲーム集です。 インストール不要・アカウント登録不要で、学校のChromebookやタブレットからすぐに遊べます。

ただのゲーム集ではありません。47本はScratchでも作り直してあり、ブロックを開いて中を読めます。 さらに全ゲームのソースコードを解説つきで公開し、そのコードをブラウザ上で書きかえて即座に動かせるようにしています。 「遊ぶ」から「作る」までを、同じ教材で地続きにたどれるのが特徴です。

🪜 遊ぶ → 読む → 変える → 作る の6段階

同じ1本のゲームを、学年や習熟度に応じて6つの段階で使い分けられます。 「2048で遊んだ子が、2048のブロックを読み、2048のコードを書きかえる」—— 教材を替えずに深めていけるので、同じ教室で進度が違っても同じ題材で話ができます。

段階やること使うページ目安身につくこと
① 遊ぶ ゲームで遊び、ルールと動きに気づく ゲーム一覧小1〜 「どうやって動いているんだろう？」という問い
② ブロックで
中を見る		 Scratchのエディタで中身を読む。学習用は変数も自作ブロックもぜんぶ日本語で、コメントに仕組みの説明つき Scratch版一覧小3〜 順次・繰り返し・条件分岐
③ ブロックで
作りかえる		 数や色のブロックを差しかえて動かす。.sb3ファイルを配って手元で改造もできる 各ゲームのScratch版小4〜 試行錯誤・変数の役割
④ コードを
読む		 同じゲームのHTML・CSS・JavaScriptを、ファイルごとの解説つきで読む 各ゲームの「ソースコードを見る」中1〜 3つの言語の役割分担
⑤ コードを
書きかえる		 ソースページの「このコードを書きかえて動かす」で、その場で数値を変えて実行する 各ゲームのソースページ中1〜 値と挙動の関係・仮説と検証
⑥ 自分で
作る		 AIにお願いしてコードを書いてもらい、貼り付けて動かし、直していく AI時代のゲームの作り方中2〜 問題を分解して伝える力

②③のブロックと④⑤のコードは、ScratchとJavaScriptの対応表でつなげられます。 「ずっと」は requestAnimationFrame、「もし〜なら」は if、自作ブロックは関数—— Scratchで身につけた考え方がそのまま使えることを実感できると、コードへの抵抗が一気に下がります。

📖 学習指導要領との対応

本サイトの教材がどこに当てはまり、どこには当てはまらないかを整理しました。 指導計画を立てるときの目安にしてください。

小学校

小学校では、プログラミングは教科として新設されたのではなく、各教科等の中で実施されます。 ねらいは「プログラミング的思考」の育成で、 小学校プログラミング教育の手引（第三版）では次のように定義されています。

自分が意図する一連の活動を実現するために、どのような動きの組合せが必要であり、一つ一つの動きに対応した記号を、どのように組み合わせたらいいのか、記号の組合せをどのように改善していけば、より意図した活動に近づくのか、といったことを論理的に考えていく力

同手引は実施の場面をA〜F分類に整理しています。本サイトの教材が向いているのは主にB分類・C分類です。

分類内容本サイトの位置づけ
A分類 学習指導要領に例示されている単元等で実施するもの。算数 第5学年「B図形」の正多角形の作図、理科 第6学年「A物質・エネルギー」の電気の利用が例示されています 対応しません。本サイトに、正多角形の作図や電気の利用を扱う教材はありません
B分類 学習指導要領に例示されてはいないが、各教科等の内容を指導する中で実施するもの 段階②③。Scratch版のブロックを読み、数を差しかえて動きの変化を確かめる
C分類 教育課程内で、各教科等とは別に実施するもの 段階②③。総合的な学習の時間などで、プログラミング的思考そのものを扱う場合

中学校 技術・家庭科（技術分野）

現行の学習指導要領（平成29年告示）では、内容「D 情報の技術」が4つの項目で構成され、 プログラミングを扱うのは(2)と(3)です。

項目本サイトの位置づけ
(1) 生活や社会を支える
情報の技術		 段階④。実際に社会で動いているWebアプリの中身をそのまま読めます。説明用に書き直したコードではありません
(2) ネットワークを利用した
双方向性のあるコンテンツの
プログラミングによる
問題の解決		 段階④⑤⑥の前段の練習として。本サイトの教材そのものは双方向性のあるコンテンツの制作ではないため、この項目を直接ねらう教材ではなく、コードを読み書きする力をつけるための準備と位置づけてください
(3) 計測・制御の
プログラミングによる
問題の解決		 対応しません。センサやアクチュエータを扱わないためです
(4) 社会の発展と
情報の技術		 段階⑥。AIにコードを書かせる体験は、情報の技術のこれからを考える材料になります

高等学校 情報Ⅰ

項目本サイトの位置づけ
(3) コンピュータと
プログラミング		 段階④⑤。アルゴリズム、分岐と反復、配列、関数といった要素が、実際に動くゲームの中でどう使われているかを読めます。たとえば2048は、盤面を回転させることで4方向の移動を1つの処理にまとめています

※ 学習指導要領の項目名は文部科学省の公開資料に基づいています。各段階への当てはめは本サイト運営者による整理であり、文部科学省が示したものではありません。実際の指導計画に合わせて取捨選択してご利用ください。

✅ 授業で使いやすい理由

動作環境

校内フィルタで本サイトが開けないとき

学校のフィルタリング設定によっては本サイトが開けないことがあります。その場合でも、 段階①②③（遊ぶ・ブロックで見る・作りかえる）は本家Scratchだけで完結できます。 scratch.mit.edu は多くの自治体で許可されているため、hinatech の作品一覧を Google Classroom に貼れば同じ授業ができます（遊ぶ版と学習用で94作品）。 段階④以降のコードを読む・書きかえる工程は本サイトが必要なので、 許可リストへの hinata-ya.tech の追加をご検討ください。

🔒 安全性について

本サイトで児童・生徒が入力できるのは、スコアランキングに登録する12文字までのニックネームだけです。 文章や画像を投稿できる機能はなく、児童・生徒どうしが直接やりとりする手段はありません。

実装していない機能

コードを実行できるページについて

AI時代のゲームの作り方と各ゲームのソースページには、 コードをその場で実行できるプレイグラウンドがあります。次の設計で安全性を確保しています。

ニックネームの安全対策

取得している情報

導入の判断にあたって追加の情報が必要な場合は、 運営元のひなテックまでお気軽にお問い合わせください。

📚 教科・学年別おすすめゲーム

🔢 算数・数学

ゲーム 学べること 対象
2048パズル2のべき乗、足し算の戦略的思考小3〜
数独論理的思考、数の排除法小4〜
15パズル空間認識、手順の最適化小2〜
三目並べ場合分け、必勝法の探究小1〜
リバーシ先読み、数の大小比較小3〜

💻 プログラミング的思考

ゲーム 学べること 対象
倉庫番順序立てて考える力、試行錯誤小2〜
迷路ゲームアルゴリズム、経路探索小3〜
タワーディフェンス戦略的思考、リソース管理小4〜
タイピングゲームタイピング練習、ローマ字入力小3〜
神経衰弱記憶力、パターン認識小1〜

🔬 理科（物理の感覚）

ゲーム 学べること 対象
ブロック崩し反射角、速度と方向小4〜
ポンゲーム速さと角度の関係小3〜
フラッピーバード重力と加速度の体感小3〜
おさかなサバイバル食物連鎖、大きさの比較小2〜

⏰ 45分授業の進行例

例①「2048で学ぶ2のべき乗」（小学4年〜）

時間 内容
5分導入 —「2×2は？ 4×4は？ どんどん2をかけていくと…？」
15分プレイ — 2048をプレイ。目標：512を作ろう！
10分観察 —「出てきた数をメモしよう」「2→4→8→16→…全部2の何乗？」
10分発展 —「2を10回かけるといくつ？」「ソースコードを見てみよう」
5分まとめ — 振り返りと感想共有

例②「迷路とアルゴリズム」（小学3年〜）

時間 内容
5分導入 —「迷路を解くコツは？ ルールを言葉にしてみよう」
15分プレイ — 迷路ゲームをプレイ。「右手法」を試してみよう
15分言語化 — 自分の解き方を「①右を見る ②進めるなら進む ③…」とステップで書く
10分共有 — 他の人の手順と比較。「それってプログラムと同じだね！」

例③「ブロック崩しで学ぶ角度と反射」（小学4年〜）

時間 内容
5分導入 —「ボールを壁に投げると、どう跳ね返る？」
15分プレイ — ブロック崩しをプレイ。「パドルのどこに当てると、どう飛ぶ？」
15分実験 — 入射角と反射角の関係を図に描いてみる
10分まとめ —「鏡の反射も同じ仕組み！」理科とのつながり

例④「ブロックを1つ変えると何が起きる？」（小学4年〜／段階②③）

Scratch版を題材に、予想 → 変更 → 確認をくり返します。変数の役割を体で覚える回です。

時間 内容
5分導入 — ブロックくずしのScratch版で遊ぶ。「もっと簡単にするには、どこを変えればいい？」
10分予想 —「中を見る」でブロックを眺め、変えたい数字に見当をつけてノートに予想を書く（ここが肝心）
15分実験 — 実際に数字を変えて動かす。予想と違ったら、なぜ違ったかを考える
10分共有 — 「バーを長くした人」「ボールを遅くした人」で見せ合う。同じ『簡単にする』でも方法が違うことに気づく
5分まとめ — 数字に名前が付いていること（＝変数）を確認する

例⑤「AIにゲームを作ってもらおう」（中学1年〜／段階⑥）

AIを「答えをもらう道具」ではなく「うまく頼む相手」として扱う回です。AI時代のゲームの作り方のプレイグラウンドを使います。

時間 内容
5分導入 — サンプルを実行して見せる。「これを1行も書かずに作れます」
10分頼み方を考える — 作りたいゲームを条件の箇条書きにする。「1つのHTMLにまとめて」「外部ライブラリなし」を必ず入れる
15分実行 — 出てきたコードを貼って動かす。動かなくても失敗ではないことを先に伝えておく
10分直す — エラー欄に出た内容をそのままAIに伝えて直してもらう。この往復こそが本題
5分まとめ — うまくいった頼み方を出し合う。「曖昧に頼むと曖昧なものが返る」

⚠️ エラーは失敗ではありません

プレイグラウンドにはエラー表示が付いていて、「カッコが閉じていません」「その名前が見つかりません」のように日本語の手がかりが出ます。 コードが動かないとき、多くの子は「自分には向いていない」と受け取ってしまいます。 「エラーは、どこを直せばいいか教えてくれるメッセージ」だと最初に伝えておくと、その後の粘り強さがまるで変わります。 授業では、あえて1文字消してわざとエラーを出して見せるのがおすすめです。

📋 Google Classroomでの配布方法

  1. Classroomで「授業」→「課題を作成」を選択
  2. 「リンクを追加」で使いたいゲームのURLを貼り付け
    例: https://hinata-ya.tech/games/games/2048/
  3. 指示欄に「目標スコアを目指してプレイしよう」などの課題を記入
  4. 「配布」をクリック

💡 ヒント：ゲーム一覧ページ（https://hinata-ya.tech/games/）を配布すれば、生徒が自由にゲームを選べます。

段階に合わせて配るURL

配るもの URLの形
① 遊ぶ.../games/games/2048/
②③ ブロックを見る・作りかえる.../games/games/2048/scratch/
④⑤ コードを読む・書きかえる.../games/games/2048/source/
⑥ 自分で作る.../games/tutorials/ai-game-dev/

2048 の部分を他のゲーム名に置きかえれば、そのまま使えます。 Scratchの学習用ファイル（.sb3）は課題に添付して配ることもできます。 各Scratch版ページの「学習用ファイル(.sb3)をダウンロード」から取得してください。ダウンロードも改造も自由です。

🔗 教材へのリンク

ページ 内容
ゲーム一覧70種類以上。段階①で使います
Scratch版一覧47本。中を見て作りかえられます。段階②③
ゲームの作り方ステップごとの解説。段階④
ScratchとJavaScriptの対応表ブロックからコードへの橋渡し。②③と④⑤をつなぎます
AI時代のゲームの作り方AIに頼んで作る。段階⑥

ご質問・授業での活用事例の共有など、お気軽にお問い合わせください

ひなテック公式サイトへ →