ものづくり体験会

対象・参加者

• 小学校4〜6年生：建具（16名程度）
• 中学校1〜3年生：ウェブデザイン（6名程度）
• 保護者も参加可

スケジュール

講師

配布物

• トートバッグ＋缶バッジ
• パンフレット・チラシ・ステッカー（愛知県より持参）

概要

建具は小学生向け、ウェブデザインは中学生向けの職人体験を実施。それぞれの内容を通じてものづくりへの興味や技能について学ぶイベントです。

ウェブデザイン体験

今日は「ウェブサイトがどうやって作られているのか」を学び、実際に自分でウェブサイトやアプリを作ってみましょう！

質問・感想を送ろう

体験中に気になったことや感想があれば、いつでもSlidoから送ってください。匿名で投稿できるので、気軽にどうぞ！

今日使うツール

以下の3つのツールを使います。

ウェブサイトの仕組みを知ろう

みなさんが普段見ているウェブサイトは、HTML、CSS、JavaScriptという3つの言語で作られています。

• HTML — ウェブサイトの「骨組み」。文章や画像などの内容を書く
• CSS — ウェブサイトの「見た目」。色やレイアウトを決める
• JavaScript — ウェブサイトの「動き」。ボタンを押したときの反応など

下のスライドで詳しく解説しています。

→ 参考記事を読む

ウェブサイトの中身を覗いてみよう

実は、どんなウェブサイトでも「中身」を見ることができます。ブラウザのDevTools（開発者ツール）を使うと、そのウェブサイトがどんなコードで作られているかがわかります。

キーボードで F12 キーを押すか、右クリック →「検証」で開けます。いろんなウェブサイトの中身を覗いてみましょう！

実際のコードを見てみましょう。下のリンクからCodePenを開くと、HTML・CSS・JavaScriptのコードとその結果を同時に確認できます。

右クリック →「検証」でDevToolsを開けます

DevToolsの画面。左にウェブサイト、右にHTMLとCSSのコードが表示されます

AIを使ってウェブサイトを作ってみよう

いよいよ実践です！ClaudeというAIを使って、自分だけのウェブサイトやアプリを作ってみましょう。

「こんなウェブサイトを作って」「こんなゲームが欲しい」など、日本語でお願いするだけでコードを書いてくれます。

Claudeに日本語でお願いを入力します。例：「〇〇のウェブサイトを作ってください」

Claudeがウェブサイトを作ってくれました！右側にプレビューが表示されます

• 最初は簡単なウェブサイトから始めてみましょう
• 慣れてきたらゲームやアプリも自由に作ってOK！
• わからないことがあれば、いつでも質問してください

以前、高校生への講演で参加者がAIを使って作ったアプリの例はこちら：

作ったアプリを提出しよう

作ったウェブサイトやアプリができたら、ぜひ提出してください！みんなの作品を後で見られるようにします。

提出の手順：

1. コードをコピーする — Claudeが作ってくれたHTMLコード全体を選択してコピー（Ctrl+C または Cmd+C）
2. フォームを開く — 下のボタンをクリック
3. ニックネームを入力 — 好きな名前でOK（本名でなくて大丈夫）
4. HTMLを貼り付ける — コピーしたコードを貼り付け（Ctrl+V または Cmd+V）
5. 送信！

※ 複数作品を作った場合は、何度でも提出してOKです！

参加者の作品一覧

みんなが作った作品はこちらから見られます！