チャレンジコース - Web制作

最終更新日: 2025-12-23

このページはチャレンジコースのカリキュラム詳細です。

カリキュラム概要

Web制作カリキュラムでは、フロントエンドからバックエンドまで、生成AIを活用しながらWebサイト・Webアプリを制作します。

キャッチフレーズ

「フロントからバックエンドまで。AIと一緒にWebを創ろう」

学べること

フロントエンド

HTML/CSS
Webページの構造（HTML）
スタイリング（CSS）
レスポンシブデザイン
JavaScript
JavaScriptの基本構文
DOM操作
イベント処理
動的なサイト制作

バックエンド

Pythonプログラミングの基礎
変数、データ型、制御構造
関数とモジュール
ファイル操作
Webフレームワーク
Flask/Djangoを使ったWebアプリ開発
ルーティングとテンプレート
フォーム処理
データベース
SQLの基礎
データの保存と取得
CRUD操作

生成AI活用

ChatGPT/Claudeを使ったコード生成
効果的なプロンプトの書き方
コード生成とカスタマイズ
生成されたコードの理解
AIを活用したデバッグ・設計支援
エラーの原因特定
解決策の提案
コードレビュー
プロンプトエンジニアリングの基礎
プロンプトの構造
効果的な指示の出し方
AIとの協働開発

使用ツール・教材

ツール

ツール	用途	備考
VSCode	コードエディタ	無料
トイプロ	Python/Web学習	契約済み
生成AI	コード生成・デバッグ	ChatGPT/Claude

教材

トイプロ: Python/Web開発の基礎学習
生成AI: コード生成、デバッグ支援、設計相談

授業の進め方（1回の流れ）

基本思想

教材学習は教室内で完結（自宅学習を前提としない）
教室でしかできないことを重視：制作、協働、質問解決、発表
進度差は個性：各自のペースで、各自のプロジェクトを進める

1回の流れ（90分）

時間	セクション	内容
10分	タイピング	タイピング練習
30分	Python学習	Pythonプログラミングの基礎〜応用
50分	生成AI活用/IT全般	生成AIを活用したWeb開発、IT全般の学習

タイピング（10分）

タイピング練習: 正確性とスピードを向上させる
ホームポジションの習得: ブラインドタッチの基礎を身につける
プログラミングに必要な記号: 括弧、セミコロン、コロンなどの入力練習

Python学習（30分）

トイプロでPythonを学習: 各自のペースでカリキュラムを進める
Pythonの基礎から応用まで: 変数、制御構造、関数、ファイル操作
講師サポート: 詰まっている部分を優先的にサポート
生成AIも活用: 分からないことはAIにも聞いてみる

生成AI活用/IT全般（50分）

生成AIを活用したWeb開発: ChatGPT/Claudeを使ったコード生成、デバッグ
オリジナル作品の制作: 学んだことを活かしてWebサイト・アプリを作る
講師と相談しながら進める: 何を作るか、どう作るか
詰まっている点を解決: 講師・仲間・AIに質問
IT全般の学習: ネットワーク、セキュリティ、クラウドなど幅広いIT知識

進度差への対応

方針: 「進度差は問題ではなく、個性」

チャレンジコースは上級コースなので、進度差が出るのは自然です。

具体的な対策

対策	内容
個別プロジェクト	各自が「自分のプロジェクト」を持つ。全員同じことをやらない
レベル別教材	Lv.1〜5の教材を用意し、各自のレベルに合ったものを進める
相互サポート	進んでいる子が詰まっている子を助ける（教えることで学ぶ）
成果物ベースの評価	「どこまで進んだか」ではなく「何を作ったか」で評価

おすすめの学習順序とプロジェクト候補

各レベルで学んだ内容に合わせて、以下のプロジェクト候補から選んで制作します。

Lv.1: HTML & CSS - 見た目を作る楽しさを知る

#	プロジェクト	内容
1	自己紹介ページ	名前、趣味、好きなものを紹介するページ
2	推しページ	好きなゲーム・アニメ・アイドルの紹介ページ
3	レシピページ	好きな料理のレシピを紹介するページ
4	旅行記ページ	行った場所や行きたい場所を紹介するページ
5	ペット紹介ページ	飼っているペットや好きな動物の紹介ページ

Lv.2: JavaScript - サイトに動きをつける

#	プロジェクト	内容
1	じゃんけんゲーム	ボタンを押すとコンピュータと対戦できる
2	おみくじ	ボタンを押すと今日の運勢が表示される
3	カウンター	ボタンで数字を増減できる（ストップウォッチなど）
4	クイズアプリ	問題に答えると正解・不正解が表示される
5	画像スライドショー	複数の画像が自動または手動で切り替わる

Lv.3: Python基礎 - バックエンド開発の入り口

#	プロジェクト	内容
1	計算機	四則演算ができるプログラム
2	数当てゲーム	コンピュータが選んだ数字を当てるゲーム
3	じゃんけんAI	勝率を計算して表示するじゃんけん
4	単語帳	英単語を登録してテストできるプログラム
5	占いプログラム	名前や誕生日から運勢を占う

Lv.4: 生成AI活用 - AIとの協働開発

#	プロジェクト	内容
1	チャットボット	AIと会話できるWebページ
2	文章要約ツール	長い文章を短くまとめてくれるツール
3	翻訳アプリ	日本語と英語を翻訳するアプリ
4	アイデア生成ツール	テーマを入れるとアイデアを提案してくれる
5	物語生成アプリ	キーワードから物語を作ってくれるアプリ

Lv.5: Webアプリ開発 - Flask/Django + データベース

#	プロジェクト	内容
1	ToDoアプリ	タスクを追加・削除・完了できるアプリ
2	日記アプリ	日記を書いて保存・閲覧できるアプリ
3	掲示板	メッセージを投稿・閲覧できる掲示板
4	ブックマーク管理	お気に入りのURLを保存・管理できるアプリ
5	ミニSNS	投稿といいね機能があるシンプルなSNS

成果物

オリジナルWebサイト・Webアプリ
ポートフォリオの構築
毎期デモデイでの発表

評価観点

思考: 課題の分解、仮説、検証回数、構造的思考
技術: HTML/CSS、JavaScript、Python、フレームワーク、生成AI活用
態度: 主体性、粘り、協働、発表

よくある質問

Q: プログラミング経験が少なくても大丈夫ですか？ A: 中級コースを修了していれば大丈夫です。HTML/CSSの基礎から学べるようになっています。

Q: 自宅でも練習できますか？ A: はい、VSCodeなどの開発環境があれば自宅でも練習できます。ただし、自宅学習は必須ではありません。

Q: 作ったWebサイトは公開できますか？ A: はい、完成したWebサイトは公開することも可能です。講師と相談しながら進めましょう。

Q: 進度が遅くても大丈夫ですか？ A: はい、各自のペースで進めます。「どこまで進んだか」ではなく「何を作ったか」を重視します。