お気に入りの本を紹介するサイトを作ろう!はじめてのWeb制作を公開

子どもたちが「好きな本を紹介する」という身近なテーマで、HTML/CSSの基礎を楽しく学べるカリキュラムです。
読書体験を振り返りながら、段階的にウェブサイト制作のスキルを身につけられる構成になっています。

全5回(各45分)で、本の魅力を伝えるウェブサイトが完成します。
読書教育とプログラミング教育を融合した、実践的な学習プログラムです。

カリキュラムのゴール

📚 お気に入りの本の魅力を伝える紹介サイトを作ろう!

おすすめの対象

  • 小学校中学年〜中学生
  • HTML/CSSを初めて学ぶ子どもたち
  • 読書が好きで、本の魅力を伝えたい子
  • ウェブサイト制作に興味がある児童・生徒
  • プログラミングと国語を組み合わせた学習をしたい子

このカリキュラムで育てる力

  • HTMLの構造的理解とコーディング基礎
  • CSSによるデザイン・装飾能力
  • 読書体験を言語化し、魅力を伝える表現力
  • 情報を整理し、見やすくレイアウトする力
  • 批判的思考力(書評・評価スキル)
  • 創造性とデジタル表現力

レッスンごとの説明

📚 お気に入りの本紹介サイト作成カリキュラム
________________________________________
📘レッスン1|一番好きな本を紹介しよう
• HTMLの基本を学んで、お気に入りの本の基本情報を紹介するページを作成します
 1. HTMLでこんなページが作れる
 2. 実際に書いてみよう
 3. 本の魅力を伝えよう
 4. 完成させよう
________________________________________
📘レッスン2|本に合う色で装飾しよう
• CSSの基本を学び、本のイメージに合った色とデザインでページを美しく装飾します
 1. CSSで色が変わる様子を見よう
 2. 色の使い方を学ぼう
 3. 読みやすい色を選ぼう
 4. 本のテーマに合わせて装飾
________________________________________
📘レッスン3|本の表紙画像を載せよう
• 画像を挿入して、本の魅力をより伝わりやすくしましょう
 1. 画像で変わる見た目
 2. imgタグの使い方
 3. alt属性の重要性
 4. HTMLの基本構造と完成
________________________________________
📘レッスン4|レイアウトを整えて読みやすくしよう
• ボックスモデルとレイアウトを学んで、プロっぽいサイトを作ります
 1. ボックスモデルを見てみよう
 2. paddingで余白を作ろう
 3. margin & border
 4. 統一デザインで完成
________________________________________
📘レッスン5|詳しい情報と評価を表にまとめて完成
• 表組みを使って詳細情報を整理し、本紹介サイトを完成させます
 1. 表組みの基本
 2. 詳細な本情報表
 3. 美しいスタイリング
 4. 最終完成サイト
________________________________________
🎓完成・認定
• すべてのレッスンを修了すると「HTMLマスター認定」を取得できます
 - 作品のダウンロード
 - 完成証明書の発行

教育的メリット

📚 読書教育との連携

  • 読書への関心と習慣の促進
  • 批判的思考力(評価・感想)の育成
  • 文章表現力の向上
  • 多様なジャンルへの興味拡大

💻 技術スキルの習得

  • HTMLの構造的理解
  • CSSによるデザイン能力
  • 情報整理・表現スキル
  • レイアウト設計能力

🚀 発展的学習の可能性

  • 書評の詳細化
  • 読書記録の継続
  • 友達との読書情報交換
  • 図書館利用の促進

🔒 安全性の確保

  • 個人で管理するファイル
  • 学校内での発表・共有
  • プライバシー情報の最小化
  • 教育目的に特化した内容

学習システムの特徴

🎮 ゲーミフィケーション要素

  • 学習目標を達成するとポイント獲得
  • 各レッスンで最大100ポイント
  • 全レッスン完了でバッジ取得
  • 進捗状況が視覚的にわかるシステム

💡 実践的なコードエディタ

  • ブラウザ上で直接コードを書いて実行
  • リアルタイムでプレビュー表示
  • いつでもリセット・やり直しが可能
  • 作品はHTMLファイルとしてダウンロード可能

📱 どこでも学べる環境

  • PC・タブレット・スマートフォン対応
  • インターネット環境があればどこでも学習可能
  • 進捗はブラウザに自動保存

保護者・先生のみなさまへ

「お気に入りの本紹介サイト作成カリキュラム」は、読書教育とプログラミング教育を融合させた革新的な学習プログラムです。

子どもたちは自分の好きな本について深く考え、その魅力を言語化し、ウェブサイトという形で表現することで、21世紀型スキルを自然に身につけていきます。

単なる技術習得にとどまらず、読書体験を深め、表現力を高め、情報を整理して発信する力を総合的に育成します。

活用のアイデア

  • プログラミングクラブでの導入教材に
  • 国語と情報科の教科横断的な学習に
  • 読書感想文の発展的な表現活動に
  • 総合学習での情報発信プロジェクトに
  • 図書館と連携した読書推進活動に
  • 夏休み・冬休みの自由研究課題に
  • 学級文庫の紹介サイト作成に
  • 学校図書館の蔵書PR活動に

このカリキュラムで育む力

🎯 21世紀型スキルの総合的な育成

✓ プログラミング的思考
✓ 情報活用能力
✓ 創造性と表現力
✓ 批判的思考力
✓ コミュニケーション能力
✓ デジタルリテラシー

よくある質問(FAQ)

Q
どのくらいの年齢を対象にしていますか?
A
小学校中学年〜中学生を主な対象としています。HTML/CSSの基礎から学ぶため、初めての方でも安心して取り組めます。
Q
HTMLやCSSの知識がない子でも大丈夫ですか?
A
はい、まったく問題ありません。レッスン1から基礎的な内容を丁寧に学んでいく構成になっています。
Q
学校の授業で使用してもいいですか?
A
はい、教育目的であれば自由にご活用いただけます。プログラミング教育、国語、総合学習など、様々な場面でお使いください。
Q
1回のレッスンはどのくらいの時間ですか?
A
各レッスンは45分を想定していますが、子どもたちのペースに合わせて調整していただけます。
Q
家庭学習でも使えますか?
A
はい、インターネット環境があれば、いつでもどこでも学習できます。保護者の方と一緒に取り組むことで、より楽しく学べます。
Q
完成したサイトを保存することはできますか?
A
はい、各レッスンで作成した作品はHTMLファイルとしてダウンロードできます。完成証明書も発行されます。
Q
途中で別の本に変更できますか?
A
はい、いつでも紹介する本を変更して、新しいサイトを作ることができます。複数の本を紹介するサイトも作れます。
Q
完成したサイトを公開することはできますか?
A
本カリキュラムは教育目的で個人ファイルとして管理することを想定しています。学校内での発表や共有は可能です。インターネット上への公開については、個人情報保護の観点から保護者や学校の判断に従ってください。

制作・監修

  • 制作・監修:一般社団法人 全国ICT教育推進協会(PICO)
  • カリキュラム設計:PICO教材制作チーム
  • プラットフォーム名:はじめてのWeb制作

学習を始めよう

まとめ

「お気に入りの本紹介サイト作成カリキュラム」は、読書とプログラミングという2つの学びを有機的に結びつけた実践的な教材です。

子どもたちは好きな本について深く考え、その魅力を言語化し、ウェブサイトという形で表現することで、表現力・技術力・情報活用能力を総合的に身につけていきます。

ゲーミフィケーション要素を取り入れた楽しい学習システムで、モチベーションを維持しながら、確実にスキルアップできます。

読書とプログラミングの融合で、新しい学びの世界を開きましょう!

むぎこ

むぎこ

子どもたちが楽しくICTを学べる場をつくるために活動しています。「すべての子どもに、楽しく学べる未来を」 そんな思いで活動しています。

LINEで友だち追加

PICOの教材・クイズ・検定情報を、LINE公式アカウントでお届けします。
新着公開や更新のお知らせを受け取れます。

LINEで学習をスタート
最近の記事
おすすめ記事
  1. 教育現場で使えるAIツール19選【2025年版】用途別完全ガイドを公開

  2. 色のバリアフリー設計ガイド を公開!| WCAG準拠のアクセシブルな色使い実践マニュアル

  3. コピペで使える!CSSサンプル集35選を公開しました | 初心者向けボタン・カード・アニメーション

  4. お気に入りの本を紹介するサイトを作ろう!はじめてのWeb制作を公開

  5. ひとことICTカード|デジタルマナー編 を子ども向けにやさしく紹介

  6. 小学生向けICT入門教材|ICTを学ぼう入門編(ジュニアテキスト)

  7. 保護者/教育者向け ICT教育検定|子ども指導3級 対策アプリ

  8. ひとことICTカード|SNSマナー編 を子ども向けにやさしく紹介

  9. Raspberry Pi®(ラズベリーパイ®)とは?何ができるの?

  10. 教育現場の共通言語づくりに|教育DX用語辞典を公開しました

  11. Scratchを学ぼう入門講座01|はじめてのScratch(ジュニア向けテキスト)

  12. Wordクイズで学ぶ!スキルアップクイズシリーズ|初級・中級・上級まで無料でスキルアップ

  13. Excelクイズで学ぶ!スキルアップクイズシリーズ|初級・中級・上級まで無料でスキルアップ

  14. ScratchとScratchJrの違いって?子どもの年齢に合わせたプログラミング教育のはじめ方

  15. PICOという団体で“しくみ”をつくる理由。

  16. ICT教育の必要性ってなんだろう?

  1. 小学生向けICT入門教材|ICTを学ぼう入門編(ジュニアテキスト)

  2. ScratchとScratchJrの違いって?子どもの年齢に合わせたプログラミング教育のはじめ方

  3. Wordクイズで学ぶ!スキルアップクイズシリーズ|初級・中級・上級まで無料でスキルアップ

  4. 色のバリアフリー設計ガイド を公開!| WCAG準拠のアクセシブルな色使い実践マニュアル

  5. 保護者/教育者向け ICT教育検定|子ども指導3級 対策アプリ

  6. お気に入りの本を紹介するサイトを作ろう!はじめてのWeb制作を公開

  7. ICT教育の必要性ってなんだろう?

  8. ひとことICTカード|デジタルマナー編 を子ども向けにやさしく紹介

  9. 教育現場で使えるAIツール19選【2025年版】用途別完全ガイドを公開

  10. Raspberry Pi®(ラズベリーパイ®)とは?何ができるの?

  11. ひとことICTカード|SNSマナー編 を子ども向けにやさしく紹介

  12. PICOという団体で“しくみ”をつくる理由。

  13. Excelクイズで学ぶ!スキルアップクイズシリーズ|初級・中級・上級まで無料でスキルアップ

  14. コピペで使える!CSSサンプル集35選を公開しました | 初心者向けボタン・カード・アニメーション

  15. 教育現場の共通言語づくりに|教育DX用語辞典を公開しました

  16. Scratchを学ぼう入門講座01|はじめてのScratch(ジュニア向けテキスト)

活動レポート

ページ上部へ戻る