オンライン教室レポート図解

バドミントン講義資料

AIとHTMLの迷宮大冒険!
オンライン教室レポートを徹底解剖!

バドミントン技術向上委員会がお届けする、笑いと学びの記録

🚀プロローグ:AI未体験ゾーンへ、テルくん発進!

今回のオンライン教室は、巷で話題の「AI」がテーマ。特に注目は、AI初体験という我らがテルくん!「AIの準備はOK?」の問いに、「初めてです!」とフレッシュな返答。この一言が、波乱に満ちた(そして笑いに満ちた)一夜の幕開けを告げたのでした。

AI初体験のテルくん AIのアイコンの前で少し戸惑いつつもワクワクしている人物のイラスト。 AI? ドキドキ… 初挑戦!
AIとのファーストコンタクトに胸躍るテルくん!

ポイント: 新しい技術への挑戦は、いつだってワクワクするもの!テルくんの純粋な好奇心が、教室に新鮮な風を吹き込みました。

🎯ミッション:ルール講座をAIアートでスタイリッシュに!

この日の壮大なミッションは、既存のバドミントンルール講座のHTMLページを「魔改造」すること。具体的には、掲載されているイラストをAIで新たに生成し、差し替えるというもの。目標は、ラケットやサービスのイラストなど数点をAIで作成し、ページを完成させることでした。…そう、あくまで「でした」。

ルール講座魔改造ミッション HTMLファイルのアイコンにAIが魔法をかけているイラスト。 <HTML> 魔改造開始!
AIの力で、ルール講座ページが生まれ変わる…はずだった!

中島さんからの「これやったら?」という軽い提案が、まさかあんな結末を迎えるとは…。この時点では、誰も予想だにしていませんでした。

🎨AIお絵描き劇場:奇跡の一枚から迷作まで?!

AI初心者のテルくんはまず見学。ここからは、メンバーたちとAIによる、時に珍妙で、時に素晴らしいイラスト生成の奮闘記です!

ヨッシー画伯と謎の国際派AI

トップバッターはヨッシー画伯。Chat GPT(無料版)を駆使するも、なぜか生成されるイラストは高確率で外国人風に。「特に指示してないんだけど…」と本人も首をかしげるミステリー。それでも試行錯誤の末、競技規則を元にかなりイイ感じのラケットイラストをゲット!ただ、なぜか「ストリングエリア」だけ英語表記。AI、奥深し!

外国人風イラストとラケット 外国人風の顔アイコンと、一部英語表記のラケットイラスト。 Why foreign? String Area Good Racket!
ヨッシー画伯のAIは国際派?でもラケットは上出来!

テルくん作「萌えシャトル」爆誕!

「何か作りたいものは?」の問いに、テルくんは「シャトルのイラスト!」とiPhoneで挑戦。すると、「バドミントンシャトルのイラストを生成してください」というシンプルな指示で、めちゃくちゃ可愛いシャトルが出現!一同驚愕!時には素直な指示がAIの心を掴むのかも?

可愛いシャトル キラキラしたエフェクト付きの可愛いシャトルイラスト。 カワイイ!
テルくんのシンプル指示が生んだ、奇跡の「萌えシャトル」!

広報担当、衝撃の「二刀流ラケット」

負けじと広報担当もGeminiで挑戦!競技規則第4条をコピペして「イラストにして!」とオーダー。すると…まさかのグリップが2本ある「二股ラケット」が爆誕!AIの解釈、斜め上すぎ!慌てて「グリップ1本に!」と修正し、なんとか普通のラケットに。AIへの指示は具体的かつ粘り強く、ですね。

二股ラケット グリップが2本ある奇妙なラケットのイラスト。 なぜ?!
AIが生み出した衝撃の「二刀流」ラケット!

AIアニメ、夢のまた夢?

「アニメーションも作れるらしい」との情報に、淡い期待を抱いて挑戦。Geminiに「ラケットを使ったアニメーション作って」とお願いした結果…超シンプルなパタパタ動くラケットが完成。まあ、動いただけマシ…なのか?「限界を超えてわかりやすく」とは程遠い、AIのポテンシャル(と限界)を垣間見ました。

AIアニメーションの試み フィルムストリップ風の背景に、単純に動くラケットのイメージ。 AIアニメ…?🤔
AIアニメーションへの挑戦。結果は…ご想像にお任せします。

🚧最終関門:HTMLコードのジャングル探検

イラストが(なんとか)揃い、いよいよHTMLファイルへの埋め込み作業。WordPressに画像をアップしURLをコピー…ここまでは順調。しかし、既存コードから画像部分(SVG記述だった模様)を見つけ出し、置き換える作業が最大の難関に!AI(Gemini)に助けを求めるも、専門用語の嵐。「SVGで始まるブロックが…」と言われても、まさに五里霧中。ヨッシー作の画像サイズが2.37MBと巨大だった疑惑も浮上し、現場はてんやわんやでした。

HTML編集の困難 複雑なHTMLコードと、困惑する人物、巨大な画像ファイルのイラスト。 🤯 HTMLムズカシイ… <div><span>...</svg> <img src="???"> 2.37MB
HTMLの深淵と巨大画像ファイルに立ち向かうメンバーたち。

教訓: 見た目がシンプルな作業でも、裏側は複雑怪奇。特にコード編集は、事前の知識と準備が超重要だと痛感しました。

🏁エピローグ:激闘の果てと未来への課題

そして無情のタイムアップ!結果は…「失敗しました」。最後の望みを託したAIによるコード書き換えも、レイアウト崩壊で万事休す。なんともグダグダな幕切れとなりました。AIイラスト作成は楽しいものの、Webページへの組み込みは別次元のスキルが必要だと痛感。特にSVG画像の差し替えは、もっと学習が必要ですね。

次回の課題 電球(アイデア・学び)と、宿題のノートのイラスト。 学びアリ! 次回への宿題… HTML, SVG, CSS…
失敗は成功のもと!多くの学びと次回への課題が見つかりました。

「限界を超えてわかりやすく」のつもりが、「限界を超えてグダグダ」してしまいましたが、これもまた一興!ヨッシーにはコード修正の再チャレンジをお願いし、広報担当もHTMLと仲良くなることを誓ったのでした。今回も学びと笑いの多いオンライン教室、次回こそは…!