講師：石長 史康（フミ） 元福岡市役所グローバルスタートアップ推進担当。元国連人間居住計画。自治会DXの第一人者で、福岡県糸島市伊都の杜自治会長。 📝 今回の内容 HTMLって何？から始める実践的なツール作成講座。初心者でもAIエージェント「Edie（エディ）」と対話するだけで、レトロ風電卓と研修用タイマーが完成。プログラミング経験ゼロでも、自然な会話でWebツールを作れる時代の学び方を体験します。HTML、CSS、JavaScriptの基本概念から、作ったツールの保存・共有方法まで、すぐに使える実践知をお届けします。 🎯 動画トピック 📖 HTMLの基本を理解する ・HTMLとは何か：Webページの「設計図」という本質 ・HyperText Markup Languageの意味と役割 ・タグ、要素、属性の基本概念 ・HTML5の基本構造（DOCTYPE、head、body） ・文字コード設定とモバイル対応の重要性 🎨 HTML・CSS・JavaScriptの三位一体 ・HTMLは「骨組み」、CSSは「デザイン」、JavaScriptは「機能」 ・家の建築に例えた分かりやすい説明 ・3つの技術を組み合わせて作る実用ツール ・1つのHTMLファイルに全て統合する方法 🤖 AIとの対話で開発する ・「Edie（エディ）」との自然な対話で学ぶHTMLの仕組み ・専門用語を使わず、「電卓作って」「タイマー作って」だけで開発 ・AIへのフィードバック方法：「数字の並び確認して」で自動修正 ・コード生成完了の見極め方（左下の停止ボタンに注意） 🧮 実践①：レトロ風電卓の作成 ・四則計算（+、−、×、÷）機能の実装 ・レトロなビジュアルデザインの指定 ・ボタンクリック時の音響効果 ・数字配置のエラー修正プロセス ・完成までの対話の流れ ⏱️ 実践②：研修用タイマーの作成 ・分と秒を個別設定できる入力欄 ・クイック設定ボタン（5分、10分、20分） ・スタート/ストップ/リセット機能 ・時間終了時の音響効果（チャイム、ベルなど選択可能） ・「時間です。お疲れ様でした」音声メッセージ ・実際の動作テストと確認 💾 ツールの保存と活用方法 ・右下のダウンロードボタンで.htmlファイル取得 ・ファイル名の変更とフォルダ整理 ・ダブルクリックだけで起動（インターネット不要） ・メールやチャットで他の人に共有 ・受け取った人もブラウザで即使用可能 🔑 今回のキーメッセージ 「HTMLは、Webページの『骨組み』を作る設計図」 → CSS（デザイン）とJavaScript（機能）を組み合わせることで、私たちが普段見ている魅力的なWebページが完成する 「AIとの対話は、詳細すぎる説明は不要」 → 「数字の並びおかしいよ」「違和感あるよ」といった自然な言葉で伝えれば、AIが問題を理解して修正してくれる 「作ったHTMLツールは、1ファイルで完結」 → ダウンロードして保存すれば、いつでもどこでも使える。特別なソフトのインストールも不要 「プログラミング初心者でも、AIがあれば実用ツールが作れる時代」 → 完璧を目指さず、まずは手を動かして楽しみながら作ることが上達の近道 ご不明点や質問はコメント欄までどうぞ！ ┈┈┈┈┈┈┈┈┈┈ 『セナリ学院』とは？🏫✨ ┈┈┈┈┈┈┈┈┈┈ SNS総フォロワー数4.1万人 平野友康が校長を務める 生成AIに特化したオンラインスクールです。 講師の得意分野はデザイナー、開発分野、業務改善、まちづくりなど幅広く、 多角的なアドバイスが可能です！ 今だけ14日間無料体験キャンペーン中！ 下記HPより詳細をご確認ください。 セナリ学院HP: https://www.teleport.jp/scenari/ お問合せ: https://teleport.jp/scenari/contact.html ┈┈┈┈┈┈┈┈┈┈ ◆公式SNS Instagram: https://www.instagram.com/scenari.teleport/ X(旧Twitter): https://x.com/scenari_AI Facebook: https://www.facebook.com/people/%E3%82%BB%E3%83%8A%E3%83%AA%E5%AD%A6%E9%99%A2-Teleport/61576632806665/ note: https://note.com/scenari_teleport #セナリ学院　#プロンプト　#生成AI #chatgpt #openAI #claude #claudecode #クロード #クロードコード #gemini #nanobanana #ジェミニ #ナノバナナ #perplexity #パープレキシティ #生成AI使い方 #Chatgpt使い方 #claude使い方 #gemini使い方 #業務日常 #業務効率化 #aiツール #aivideo #生成ai活用 #ai活用術 #フリーランス #webライター #AI駆動 #個人開発 #エンジニア未経験 #オンラインスクール #テレポート株式会社 #フリーランスエンジニア