2026年4月19日
自由研究のテーマに迷っていませんか？
夏休みの自由研究にプログラミングでWebサイトを作ってみませんか？中学生でもパソコンひとつで簡単に始められます。この記事では、テーマ選びから提出用レポートのまとめ方まで、すべての手順をやさしく解説します。
プログラミングの経験がなくても大丈夫です。パソコンとブラウザがあれば、今日から始められます。特別なソフトを買う必要もありません。
この記事を読むと、次のことがわかります。
- 自由研究にプログラミングが選ばれる理由
- テーマの決め方と具体例
- Webサイトの制作手順（5ステップ）
- レポートのまとめ方と提出のコツ
- 完成したサイトをインターネットに公開する方法
自由研究にプログラミングが選ばれる3つの理由
① 情報の授業と直結している
2022年度から高校で「情報Ⅰ」が必修になりました。中学校の技術科でもプログラミングを扱います。自由研究でWebサイトを作れば、授業の予習にもなります。
② 先生からの評価が高い
「自分でWebサイトを作りました」という自由研究は、模造紙やノートにまとめるだけの研究とは一味違います。実際に動く成果物があるので、先生にも伝わりやすいです。
③ 完成品をインターネットに公開できる
作ったWebサイトは GitHub Pages（ギットハブ ページズ） という無料サービスで公開できます。URLを共有すれば、友達や家族にもスマホで見てもらえます。
💡 中学生がプログラミングを始める方法で基礎を確認できます。
テーマの決め方と具体例
「何のWebサイトを作ればいいの？」と迷ったら、次の3つの方向から考えてみましょう。
🎮 好きなものを紹介するサイト
好きなゲーム・音楽・スポーツ・動物などを紹介するサイトです。自分が詳しいテーマなら、内容に困りません。
- 好きなゲームの攻略情報まとめ
- 推しのアーティスト紹介ページ
- 飼っているペットの成長記録
🏘️ 地域の調べ学習サイト
自分の住んでいる地域について調べた内容をまとめるサイトです。社会科の学習にもつながります。
- 地元のおすすめスポット紹介
- 地域の歴史や文化をまとめたページ
- 商店街のお店マップ
🌍 SDGs・社会問題をまとめたサイト
SDGs（エスディージーズ）とは、世界が2030年までに達成を目指す17の目標のことです。環境問題やフードロスなど、気になるテーマを調べてまとめましょう。
- フードロスの現状と対策
- 海洋プラスチック問題
- 再生可能エネルギーの種類
💡 テーマ選びのコツ：「自分が興味を持てるテーマ」を選ぶのがいちばん大切です。興味があれば調べるのも楽しくなり、内容も充実します。
🔗 あわせてプログラミングを学ぶメリット5選もチェックしてみましょう。
Webサイトの制作手順（5ステップ）
テーマが決まったら、次の5ステップでWebサイトを作りましょう。
ステップ1：内容を紙に書き出す
いきなりコードを書き始めるのではなく、まずノートや紙に「どんなページにするか」を書き出します。
- ページのタイトル
- 載せたい情報（文章・画像・リスト・表）
- ページの構成（見出しの順番）
ステップ2：HTMLで骨格を作る
HTML（エイチティーエムエル）は、Webページの内容と構造を作る言語です。見出し・段落・画像・リンクなどをタグで書きます。HTMLの書き方はHTMLとは？初心者向けにわかりやすく解説で学べます。
ステップ3：CSSで見た目を整える
CSS（シーエスエス）は、Webページの見た目をデザインする言語です。文字の色・背景色・余白・レイアウトなどを指定します。CSSの基本はCSSとは？初心者向けにわかりやすく解説で学べます。
ステップ4：ブラウザで確認・修正する
HTMLファイルをブラウザで開いて、表示を確認します。思い通りになっていない部分があれば、コードを修正して保存し、ブラウザを更新（F5キー）しましょう。
ステップ5：GitHub Pagesで公開する
完成したサイトをGitHub Pagesで公開しましょう。無料でインターネットに公開でき、URLを先生に提出できます。
💡 所要時間の目安：このサイトのHTMLコース（6レッスン）とCSSコース（6レッスン）を終えれば、ステップ2〜3の知識が身につきます。1レッスン15〜30分なので、3〜4日あれば十分です。
📖 詳しくはプログラミングで将来どんな仕事ができる？で解説しています。
レポートのまとめ方（提出用テンプレート）
自由研究として提出するには、Webサイトだけでなくレポートも必要です。以下のテンプレートに沿って書くと、まとまりのあるレポートになります。
| 項目 | 書く内容 | 例 |
|---|---|---|
| 研究の目的 | なぜこのテーマを選んだか | 地元の魅力を多くの人に知ってもらいたいと思ったから |
| 使った技術 | どんな言語・ツールを使ったか | HTML・CSS・VS Code・GitHub Pages |
| 制作の手順 | どんな順番で作ったか | ①内容を書き出す → ②HTMLで骨格を作る → ③CSSでデザイン → ④公開 |
| 工夫した点 | デザインや内容で工夫したこと | スマホでも見やすいように文字サイズを大きくした |
| 感想・学んだこと | やってみて感じたこと | エラーが出ても原因を調べて直す力がついた |
| 完成品のURL | 公開したサイトのアドレス | https://【ユーザー名】.github.io/【リポジトリ名】/ |
💡 提出のコツ：レポートにQRコードを貼ると、先生がスマホですぐにサイトを確認できます。QRコードは「QRコード 作成 無料」で検索すると作れるサイトが見つかります。
作品をポートフォリオとして残そう
自由研究で作ったWebサイトは、そのままポートフォリオ（作品集）として残せます。ポートフォリオは、推薦入試や将来の就職活動で「自分はこんなことができます」とアピールする材料になります。
ポートフォリオの作り方はポートフォリオの作り方で詳しく解説しています。
夏休みのプログラミング学習に役立つ記事
この記事と合わせて読むと、夏休みの学習がさらに充実します。
- 夏休みにプログラミングを始めよう！中高生向け完全ガイド — 学習の全体像とスケジュール
- 夏休みにHTMLを独学する方法【1週間で基礎マスター】 — HTMLを1週間で学ぶ具体的な計画
- プログラミングで夏休みの宿題を効率化しよう — 宿題に使える便利ツールの作り方
- 夏休みにJavaScriptでゲームを作ろう！初心者向けステップガイド — 自由研究の発展として、ゲーム制作にも挑戦
まとめ
- ✅ プログラミングの自由研究は、情報の授業にも直結し先生の評価も高い
- ✅ テーマは「好きなもの紹介」「地域の調べ学習」「SDGs」などから選ぶ
- ✅ 制作は「内容を書き出す → HTML → CSS → 確認 → 公開」の5ステップ
- ✅ レポートは「目的・技術・手順・工夫・感想・URL」の6項目でまとめる
- ✅ GitHub Pagesで無料公開し、QRコードで先生に提出できる
- ✅ 作品はポートフォリオとして将来にも活かせる
自由研究のWebサイトを作るには、まずHTMLの基本を学ぶところから始めましょう。このサイトのHTMLコースなら、ブラウザだけで今すぐ始められます。