2025年6月10日オンライン教室レポート:『自分を破壊し、AIと創造する』Webサイト改修ライブコーディングで見た本気の変革
DATE: 2025年6月10日
1. Opening: 「自分を破壊する」覚悟から始まる変革
この日のオンライン教室は、参加者のayako suzukiさんの力強い決意表明から始まりました。「私も自分を破壊することにしました」。過去の自分のプレーや姿勢を振り返り、周りに迷惑をかけていたことを深く反省。今までのやり方では変われないと悟り、新たな一歩を踏み出すことを宣言したのです。
その覚悟は、単なる精神論ではありません。具体的な行動計画、そして「アウトプットを完成させる」という強い意志に裏打ちされていました。この日のテーマは、以前から取り組んでいたウェブサイトの資料を完成させること。その言葉には、過去との決別と、未来への強いコミットメントが感じられました。
【ayako suzuki】 (00:00:00)
私も自分を破壊することにしました。…なんかすごい吹っ切れて…森さんばっかり酷評されてたから、私そんなに悪くなかったのかなと思って見たらめちゃくちゃ迷惑かけてた。
【ayako suzuki】 (00:04:06)
えっと思ってちょっともうこれは今までのやり方でなんか直しててもダメだなって急に思って…AIに見てもらってちょっと私のこの怒りを自分に対する怒りをあの全面に出した文章にしてくださいって…すごい言葉を書いてくれて、それ読んでたらすっごいはまってきてる。こういう、こういうテンションだ。ぴったりって思って。
自分自身への怒りをエネルギーに変え、AIの力も借りながら自己変革に挑む。その姿は、バドミントンの上達だけでなく、あらゆる成長に通じる普遍的なプロセスを体現しているようでした。
今日のKey takeaway
真の変革は「自己破壊」から始まる。 過去のやり方を手放し、自分への怒りさえもエネルギーに変える覚悟が、停滞を打破し、新たな成長ステージへの扉を開く。具体的なアウトプット目標が、そのプロセスを加速させる。
2. Live Coding with AI: Webサイト改修、試行錯誤の全記録
この日の具体的なタスクは、ウェブサイト上のイラストを差し替えること。ayako suzukiさんはAI(チャットGPT)を相棒に、リアルタイムでコード修正に挑みました。これは、まさに現代の学習スタイルを象徴する光景でした。
第1幕: イラスト差し替えの挑戦
最初の課題は、既存のシャトルとラケットの画像を、ヨッシーさん作成の味のあるイラストに差し替えること。しかし、対象のコードを見つけ出し、正しく書き換える作業は一筋縄ではいきません。
【ayako suzuki】 (00:08:05)
これを完成させちゃいたくて…ここのええっと、これとシャトルの絵とラケットの絵を入れ替えて終わろうかなと思って。…そのイラストの絵のやつを探さなきゃいけなくて、そのコードを置き換えなきゃいけないんですよ。
【ayako suzuki】 (00:26:28)
(コードを置き換えて)あ、できたんですけど、すげえちっちゃくなっちゃった。
AIに質問し、コードを特定し、ファイルを保存し、書き換える。試行錯誤の末、見事にイラストは差し替えられましたが、今度は表示サイズが小さすぎるという新たな問題が発生。しかし、彼女は諦めません。「これをサイズを調整したいですってお願いしてみます」と、すかさずAIに次の質問を投げかけます。
第2幕: AIとの対話による微調整
AIから「1.7倍にしてみては?」という提案を受け、コードを修正。すると、画像は適切な大きさに。さらに、別のサービス紹介のイラストも差し替えますが、今度は画像が巨大化!これもAIと対話しながら「40%」という数値を導き出し、見事にレイアウトを整えていきました。
【ayako suzuki】 (00:34:39)
1.7倍のコードを教えてもらったので1.7倍にしてみます。…(反映後)おお。だいぶ。
【ayako suzuki】 (00:41:10)
うわ、すっげえでかくなっちゃった。…やばい。やばい。巨大化。…(修正後)高さいましたね。
一つ課題をクリアすれば、また次の課題が生まれる。このプロセス全体が、AIを単なるツールとしてではなく「思考のパートナー」として活用する、新しい学びの形を示していました。
3. Mystery: なぜレイアウトの数値は”50″で縮んだのか?
作業も大詰め。最後に、イラストと説明文の間のスペースを調整しようとした時、不思議な現象が起こりました。スペースを広げるために数値を「8」から「20」へと大きくすると、狙い通りに間隔は広がりました。しかし、「50」というさらに大きな数値を入れたところ、なぜか間隔は逆に縮まってしまったのです。
【ayako suzuki】 (00:48:08)
(数値を50にして)あら、縮まれましたね。なんで縮まったんだろう?変だな。
【ayako suzuki】 (00:52:33)
感覚をさらに広くしたい場合なんかこれって32とか言われたんですけど何進法とかあるんですかね。…なんか2進法とかなんかわかんないですけど。
ayako suzukiさんは「二進法?」と推測。これは、Web開発でよく使われるTailwind CSSの設計思想に関連する鋭い指摘でした。Tailwindでは、レイアウトの一貫性を保つため、`4`, `8`, `16`, `32`, `64`といった「4の倍数」を基本とするデザインシステムが採用されています。`50`のような定義外の数値を入れたことで、予期せぬ挙動を引き起こしたと考えられます。
この「ミステリー」は、単にコードをコピー&ペーストするだけでは得られない深い学びの機会となりました。言われた通りにやるだけでなく、「なぜそうなるのか?」と疑問を持ち、その背景にある法則を探求することの重要性を示唆しています。
4. Takeaways: コーチング的5つの学び
今回のライブコーディングセッションは、技術的なスキルの習得以上に、成長へのマインドセットに関する多くのヒントに満ちていました。重要なポイントを5つに凝縮して振り返ります。
自己破壊から始まる真の成長
過去のやり方やプライドにしがみついていては、大きな変化は望めない。「自分を破壊する」ほどの覚悟を持って過去を断ち切り、新しい自分になることを決意することが、変革の出発点となる。
AIは思考を拡張するパートナー
AIは答えを教えてくれるだけの存在ではない。質問し、提案を受け、試行錯誤する対話のプロセスを通じて、一人では辿り着けない解決策や新たな発見をもたらしてくれる思考のパートナーだ。
エラーと試行錯誤こそ最良の教材
画像が小さくなったり、巨大化したり、レイアウトが崩れたり。一見すると失敗に見えるこれらの現象こそが、学びを深める絶好の機会。うまくいかないことから目を逸らさず、原因を探求することが力になる。
アウトプットへの執着が学習を加速させる
「とにかくこれを完成させる」という具体的なアウトプット目標が、学習プロセス全体に意味と方向性を与える。中途半端にせず、最後までやり遂げる執着が、知識の定着とスキルの向上を促す。
「なぜ?」の探求が本質的な理解を生む
「なぜ50で縮んだ?」という疑問は、単なるバグ修正を超え、CSSフレームワークの設計思想という本質的な理解に繋がった。表層的な操作だけでなく、その裏にある原理原則を探求する姿勢が、応用力を育む。
【hidetomo mori】 (00:04:06)
すごいエネルギーを感じました。
【ayako suzuki】 (00:05:18)
本当にいつものやり方でやってたら絶対治んないなってなんか不幸思ってそうなんで。
5. Action: アウトプット習慣チェックリスト
学びは行動に移してこそ意味があります。インプットした知識をアウトプットし、自分のものにするための具体的なアクションリストです。毎日一つでもチェックを入れられるよう、挑戦してみましょう!
アウトプット習慣チェックリスト
6. Closing: 今日の学びを明日の一歩へ
「自分を破壊する」という覚悟から始まった、AIとのライブコーディング。それは単なるウェブサイトの修正作業ではなく、一人の人間が過去の自分と決別し、新しい学び方と向き合い、未来を創造していくドキュメンタリーでした。
エラーを恐れず、AIと対話し、試行錯誤を繰り返す。その一つ一つのクリック、一つ一つのコマンド入力が、ayako suzukiさんを新しいステージへと押し上げていくようでした。そして、見事にウェブサイトの改修は完了しました。
【hidetomo mori】 (00:55:02)
だいぶバランスが良くなってきた。あ、バランスはいいと思います。うん。はい。お疲れ様でした。
【ayako suzuki】 (00:58:50)
はい、ありがとうございました。…あの、報告します。
この記事を読んだあなたも、ぜひ自分の課題にAIをパートナーとして活用してみてください。完璧な答えを求めるのではなく、対話と試行錯誤のプロセスそのものを楽しむこと。その小さな一歩が、あなた自身の「自己破壊」と「創造」の物語の始まりになるはずです。