2時間で体験！初心者のためのAI×VSCode Web制作入門

この講座では、生成AI（ChatGPTやCline）とVSCodeを使って、
初心者の方でも簡単なWebサイトを作成できるようになることを目指します。

HTMLやCSSといったWebの基本的な仕組みを体験しながら、
AIの力を借りて「手を動かしながら理解する」ことができる内容です。

「Web制作に興味があるけれど、コードが難しそう」
「生成AIって聞くけど、どう使うのかわからない」
そんな方にぴったりの内容です。

■ 当日の流れ（120分）

1. 講義（40分）

※実際に操作していただきながら概要を説明します。
• VSCode（Visual Studio Code）のインストール方法と基本操作
• HTML / CSS / JavaScript の超入門（ざっくり理解）
• Live Server 拡張機能を使ったローカルプレビュー方法
• ChatGPTまたはClineを使ったコード生成の流れ
• 生成AIとWebサイト制作の全体像と相性の良さ

2. テーマ選び（20分）

※「どんなWebサイトを作ってみたいか？」を相談して決めます。
※ 特に思いつかなくても以下のテンプレートから選んでOKです。
① 自己紹介ページ（ポートフォリオの原型）
名前、プロフィール、趣味、連絡先ボタンを掲載します。
② お気に入り紹介ページ
好きな映画やお店などを画像付きで紹介します。
③ 簡易ランディングページ（LP風）
見出し、キャッチコピー、ボタンなどで構成される1カラムのシンプルLPです。

AIを使って作りたいテーマを自由に選びましょう。
講師がガイドするので初心者でも安心です。

3. ワーク作業（40分）
• プロンプトを入力して、実際にHTMLやCSSのコードをAIで生成
• 生成されたコードを自分で編集して、プレビューで確認
• 色やテキストの変更、レイアウトの調整などを試してみます
• 講師がマンツーマンで見ながら丁寧にサポートします

4. 質疑応答・まとめ（20分）
• 作業中に出てきた疑問やエラーをその場で解決します
• 「このあとは何を学べばいいの？」という方向けに学習ステップを案内
• 副業やポートフォリオ制作など、次の目標に応じた相談も可能です

■ この講座で得られること
• Webサイト制作の基本的な構造やツールの使い方
• VSCodeの操作・Live Serverによるプレビュー体験
• ChatGPTやClineなどの生成AIの活用方法
• HTML/CSSの基礎を楽しく体験しながら理解できる
• 自分だけの簡単なWebページが完成する
• 「作れるかも」という自信と、次の一歩へのヒント


初心者の方でも安心して学べるよう、
「わかりやすさ」「楽しさ」「実際に動く」が揃った内容を提供します。
一緒にAIの力でWeb制作の第一歩を踏み出しましょう！