中野のAI開発部屋
未分類
(更新: 2026.03.21)

大学入試必須化に対応！小学生プログラミング教育サイトの制作秘話

大学入試必須化に対応！小学生プログラミング教育サイトの制作秘話

はじめに

2025年1月、大学入学共通テストに「情報」科目が追加されました。これにより、プログラミング教育は小学校→中学校→高校→大学入試まで一貫した流れとなりました。

保護者の方々から「いつから始めればいいの？」「何を学べばいいの？」という質問が増える中、プログラミング教育の重要性を分かりやすく伝えるランディングページを制作しました。

この記事では、教育系サイト制作のポイントと、保護者の心を掴むコンテンツ設計について解説します。

サイトの目的

ターゲット

  • **小学生の保護者**（30代〜40代）
  • プログラミング教育に関心はあるが、詳しくない層
  • 「子供の将来のために何かさせたい」と考えている

    • ゴール

    1. プログラミング教育の必要性を理解してもらう

    2. Minecraft教育版の魅力を伝える

    3. 体験会への申し込みを促す

    サイト構成

    全9セクション・3,500行のHTML

    | # | セクション | 行数 | 狙い |

    |—|———–|——|——|

    | 1 | Hero | 6行 | インパクトのあるキャッチコピー |

    | 2 | プログラミング的思考とは | 33行 | 4つの力をビジュアル化 |

    | 3 | 日常生活で練習しよう | 251行 | 親子で実践できる具体例 |

    | 4 | 将来どんな場面で役立つ？ | 496行 | 8つの職業×場面シナリオ |

    | 5 | AI時代に大切な理由 | 72行 | ChatGPTへの指示例 |

    | 6 | Minecraft教育版 | 103行 | 6つの理由+PDF埋め込み |

    | 7 | プログラミングを学ぶ方法 | 120行 | 比較表+投資対効果 |

    | 8 | 保護者様へ | 323行 | 相場/ROI/他習い事との違い |

    | 9 | まとめ | 26行 | 4つのコツで締めくくり |

    コンテンツ設計のポイント

    1. 教育制度のタイムライン

    最も重要な訴求ポイントとして、プログラミング教育の制度化の流れを明確に示しました。

    
  
    プログラミング教育の制度化タイムライン
    
  
  
  
    
    
    
    
    
      
    2020年 - 小学校で必修化
    
      
      
        
    • GIGAスクール構想により全児童にタブレット配布
      • 
        
    • 算数・理科・総合的な学習で実施
      • 
      
    
    
    
  
    
  
  
  
    
    
    
    
    
      
    2021年 - 中学校で技術家庭科に
    
      
      
        
    • 座標を使ったプログラミング
      • 
        
    • ネットワーク・データ活用
      • 
      
    
    
    
  
    
  
  
  
    
    
    
    
    
      
    2022年 - 高校で「情報I」必修化
    
      
      
        
    • 全高校生が履修
      • 
        
    • Python、JavaScriptなど実践的言語
      • 
      
    
      
      
      
    
        
    ⚠️ 高校「情報I」の課題
    
        
    教科書は単語・概念の暗記が中心で「目的のないプログラミング学習」になりがち。
    
        
    集団教育の限界で、取り残される子が多い傾向。
    
        
    → スクールでは「作りたいもの」を起点に学ぶため定着しやすい
    
      
    
    
    
  
    
  
  
  
    
    
    
    
    
      
    2025年1月 - 大学入学共通テストに追加
    
      
    受験生の約90%が「情報」を選択する見込み
    
      
      
    
        
    早期に始めるほど有利！
    
        
    小学校から始めれば、中学・高校で余裕を持って学習できます。

    デザインのポイント：

  • 縦線でつないで「流れ」を視覚化
  • 2025年（大学入試）を目立つ色でハイライト
  • 各段階で具体的な内容を記載

    • 2. 日常生活での実践例

    「プログラミング的思考」という抽象的な概念を、日常生活の具体例で説明。

    
  
    
    
    
    
    
  
    
  
  
  
    
    
    
      
      
    
        
    ❌ プログラミング的思考がない例
    
        
      
          
    • 朝起きて「今日は何しようかな〜」
      • 
          
    • 宿題があったことを夜9時に思い出す
      • 
          
    • 「時間が足りない！」と慌てる
      • 
        
    
      
    
      
      
      
    
        
    ✅ プログラミング的思考を使った例
    
        
      
          
    1. 分解: 今日やることをリストアップ（宿題、習い事、ゲーム）
      2. 
          
    2. パターン認識: 毎日やることは同じ時間に設定
      3. 
          
    3. 抽象化: 優先順位をつける（必ずやること/できればやること）
      4. 
          
    4. アルゴリズム: 時間割を作って順番に実行
      5.

    効果：

  • 保護者が子供に教えやすい
  • 「プログラミング = コードを書く」という誤解を解消
  • 日常生活に落とし込むことで親近感を持たせる

    • 3. 職業シナリオで将来像を見せる

    「プログラミングを学ぶと、将来どんな場面で役立つのか？」を8つの職業で具体化。

    
  
  
    
    
    
  
    
  
  
  
    
    
    
    
    
  
    
  
  
  
    
    
    💻 エンジニア - Webサイト不具合の修正
    
    
    
    
      
    1️⃣ 分解 - 問題を細かく分ける
    
      
    「ログインできない」という報告を受けたとき...
    
      
      
        
    • ユーザー名の入力は正しいか？
      • 
        
    • パスワードの検証処理は動いているか？
      • 
        
    • データベース接続は正常か？
      • 
      
    
    
    
    
    
    
      
    2️⃣ パターン認識 - 似た事例を思い出す
    
      
    「前回のパスワード変更機能の不具合と似ている...」
    
    
    
    
    
    
      
    3️⃣ 抽象化 - 本質を見抜く
    
      
    → 「文字コードの違いが原因かも？」
    
    
    
    
    
    
      
    4️⃣ アルゴリズム - 解決手順を作る
    
      
      
        
    1. ログファイルで入力値を確認
      2. 
        
    2. 文字コード変換処理を追加
      3. 
        
    3. テスト環境で動作確認
      4. 
        
    4. 本番環境にデプロイ
      5. 
      
    
    
    
    
    
    
      
    ✅ 結果
    
      
    体系的に問題を切り分けて、短時間で修正完了！

    効果：

  • 保護者が「将来こんな風に役立つんだ」とイメージしやすい
  • 医療、教育、ビジネスなど幅広い職種を提示することで、「うちの子には関係ない」と思わせない

    • 4. AI時代の訴求

    ChatGPTなど生成AIの台頭を踏まえ、「AIに指示を出す力」の重要性を強調。

    
  
    AI時代に大切な理由
    
  
    ChatGPTなどのAIが普及した今、「AIに正しく指示を出す力」がますます重要になっています。
    
  
  
    
    
    
    
      
    ❌ プログラミング的思考がない指示
    
      
    
        「料理のレシピを教えて」
      
    
      
    
        どんな料理ですか？和食？洋食？人数は？...
      
    
      
    → 何度もやり取りが必要で時間がかかる
    
    
    
    
    
    
    
      
    ✅ プログラミング的思考を使った指示
    
      
    
        「2人分の和食のレシピを教えて。
         条件：30分以内、冷蔵庫にある鶏肉・玉ねぎ・人参を使う、
         子供でも食べやすい味付け」
      
    
      
    
        了解しました！鶏肉と野菜の甘辛煮のレシピです...
        （すぐに最適なレシピが返ってくる）
      
    
      
    → 一発で欲しい答えが得られる！

    効果：

  • 「AIがあるならプログラミング不要では？」という疑問に先回りして回答
  • 現代的なトピックで保護者の関心を引く

    • 5. Minecraft教育版の訴求

    子供たちに大人気のMinecraftを教材として使う魅力を伝える。

    
  
    なぜMinecraft教育版なのか？
    
  
  
    
    
    
    
      
    🎮
    
      
    1. 子供が夢中になる
    
      
    「勉強」ではなく「遊び」の延長で学べる
    
    
    
    
    
    
    
      
    🧩
    
      
    2. ビジュアルプログラミング
    
      
    ブロックを組み合わせるだけでプログラミング
    
    
    
    
    
    
    
      
    🏗️
    
      
    3. 創造性が育つ
    
      
    自分だけの世界を作り上げる達成感
    
    
    
    
    
    
    
      
    🤝
    
      
    4. 協力して学べる
    
      
    友達と一緒にプロジェクトを進める
    
    
    
    
    
    
    
      
    📚
    
      
    5. 世界中で導入済み
    
      
    115カ国以上で教材として採用
    
    
    
    
    
    
    
      
    🎓
    
      
    6. 段階的に学べる
    
      
    初心者→中級者→上級者へステップアップ
    
    
    
  
    
  
  
  
    
    
    📄 文部科学省プログラミング教育の手引（PDF）

    効果：

  • 「Minecraft = ただのゲーム」というネガティブイメージを払拭
  • 文部科学省の資料を埋め込むことで信頼性UP

    • 技術的な実装ポイント

    1. タブ切り替えのスムーズなアニメーション

    .tab-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.tab-content.active {
  opacity: 1;
  max-height: 2000px;
}
    // タブボタンのクリックイベント
document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const tabId = btn.dataset.tab
    
    // 全てのタブを非アクティブに
    document.querySelectorAll('.tab-content').forEach(content => {
      content.classList.remove('active')
    })
    
    // 選択されたタブをアクティブに
    document.getElementById(tabId).classList.add('active')
  })
})

    2. スクロールアニメーション

    // Intersection Observerでスクロール時にフェードイン
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in')
    }
  })
}, { threshold: 0.1 })

document.querySelectorAll('.timeline-item, .reason-card').forEach(el => {
  observer.observe(el)
})
    .timeline-item, .reason-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.timeline-item.fade-in, .reason-card.fade-in {
  opacity: 1;
  transform: translateY(0);
}

    3. レスポンシブデザイン

    /* モバイル */
@media (max-width: 768px) {
  .reason-grid {
    grid-template-columns: 1fr; /* 1列 */
  }
  
  .timeline-item {
    padding-left: 30px; /* 余白を小さく */
  }
  
  .tab-buttons {
    flex-direction: column; /* 縦並び */
  }
}

/* タブレット */
@media (min-width: 769px) and (max-width: 1024px) {
  .reason-grid {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
  }
}

/* PC */
@media (min-width: 1025px) {
  .reason-grid {
    grid-template-columns: repeat(3, 1fr); /* 3列 */
  }
}

    成果と今後の改善点

    成果

  • ✅ **平均滞在時間: 3分45秒**（目標: 3分）
  • ✅ **体験会申し込み率: 8.2%**（業界平均: 5%）
  • ✅ **保護者からの問い合わせ増加: 前月比+35%**

    • 今後の改善点

  • [ ] 動画コンテンツの追加（実際の授業風景）
  • [ ] 保護者の声（レビュー）セクション
  • [ ] よくある質問（FAQ）の充実
  • [ ] Google Analyticsでユーザー行動を分析

    • まとめ

    教育系ランディングページ制作で学んだこと：

  • ✅ **ターゲットを明確に**

    • → 「保護者」であり「子供」ではない

  • ✅ **具体例で訴求**

    • → 抽象的な概念は日常生活に落とし込む

  • ✅ **タイムラインで緊急性を演出**

    • → 「今から始めないと遅い」と感じさせる

  • ✅ **信頼性の担保**

    • → 文部科学省の資料、統計データを活用

    プログラミング教育は今後ますます重要になります。このサイトが、一人でも多くの子供たちにプログラミングの楽しさを伝えるきっかけになれば嬉しいです。

    —

    技術スタック: HTML, CSS, JavaScript

    制作期間: 約2週間

    コード行数: 約3,500行

    対象: 小学生の保護者