プログラミングスクールの講師が Google Stitch を授業に取り入れてみた

授業でAIツールを扱うことへの迷いは、最初からあった。

「AIに頼ることで、基礎を身につける機会が失われないか」「自分で考える力が育たないのではないか」——そういう懸念を持ちながらも、Google Stitch をプログラミングスクールの授業に取り入れてみた。

結果として、懸念の一部は的中し、一部は杞憂だった。その経験を正直に書く。

取り入れたきっかけ

私が担当しているのはWebデザイン・フロントエンド入門コースだ。受講生の多くは「デザインは苦手だけどコードは書けるようになりたい」という層で、UIデザインへの苦手意識が強い。

「UIを作れるようにする」ことを目標にした授業で、毎回ぶつかっていた壁があった。「どこから手をつければいいかわからない」という受講生の停滞だ。白紙の状態から何かを作り始めることへの心理的ハードルが高い。

Google Stitch を「ゼロから始めるための補助ツール」として使えないか、という発想が出発点だった。

授業への組み込み方

最初の試みは「課題のたたき台生成」として使ってもらうことだった。

「今日の課題:ログイン画面を作ってください」という課題に対し、まず Google Stitch でたたき台を生成し、その後コードを確認して自分で修正・改良する、というフローだ。「ゼロから書く」のではなく「生成されたコードを読んで改良する」という入口を作った。

このアプローチは、受講生の「最初の一歩」への抵抗感を下げるという意味で有効だった。特に自信のない受講生が「とりあえず動き始める」きっかけになった。

受講生の反応は二極化した

Google Stitch を使ってもらった結果、受講生の反応は大きく二つに分かれた。

一方は「すごい!これで課題が一気に楽になる」という歓迎派。もう一方は「AIに頼ってしまって、自分では何もわかっていない気がする」という戸惑い派だ。

この戸惑い派の反応は、講師として真剣に受け止めた。「楽にできる」ことと「学べている」ことは別物で、生成に頼り過ぎることで「なぜそのコードになっているか」の理解が進まないリスクは現実にあった。

「使った後に必ず説明させる」ルールを作った

この問題への対処として、「Google Stitch で生成したコードを、自分の言葉で説明できるまで修正を続ける」というルールを設けた。

コードをそのまま提出するのではなく、「なぜこの配色にしたか」「なぜこのレイアウトを選んだか」「この部分を自分でどう変えたか」をセットで提出してもらう。生成物を「答え」ではなく「素材」として扱わせることで、理解を確認する仕組みを入れた。

このルールを入れてから、「コードが読めているかどうか」の差が提出物に明確に出るようになった。

「プロンプトを書く」こと自体が学習になった

予想外の効果があった。「どんなUIを作りたいか」をプロンプトで言語化する作業が、受講生のデザインへの解像度を上げていたのだ。

「シンプルなログイン画面」と書くだけでは漠然としすぎる。「白背景、中央揃えのカード、角丸8px、入力フォーム2つ、ログインボタンは青」と具体化するためには、UIの要素を把握している必要がある。プロンプトを書くこと自体が、デザインを言語化する練習になっていた。

懸念が的中した部分、杞憂だった部分

「AIに頼ることで基礎が育たない」という懸念は、使い方次第で的中もする。特に「生成して満足、コードを読まない」という受講生には、確かに基礎の習得が遅れる傾向が見られた。

一方、「自分で考える力が失われる」という懸念は、適切なルールがあれば杞憂だった。むしろ「これが正解に近い形」を早く見せることで、改良点を考える機会が増えた受講生もいた。

ツール自体に問題があるのではなく、「どう使わせるか」という設計次第で学習効果が変わる——これが半期の授業を通じた結論だ。

よくある質問

Q1. AIツールを授業に取り入れることへの保護者・受講生からの反発はありましたか?

一部の受講生から「AIを使うのは本当に学んでいることになるのか」という疑問が出ました。それに対して「AIは道具であり、使い方を学ぶことが現代のスキルだ」という説明と、「理解なく使うことと、理解して使うことは別物」というルールの説明で、大半は納得してもらえました。

Q2. Google Stitch をどの授業段階から導入しましたか?

HTML/CSSの基礎を学んだ後(コース開始から4〜5週目)から導入しました。「コードが何をしているか」の最低限の理解がある状態で使うことで、生成されたコードを読む意味が生まれます。最初から使うと「ブラックボックスとして使う」状態になりやすいと判断しました。

Q3. 受講生のコードを書く力に、導入前後で差は出ましたか?

「生成コードを読んで改良する」フローを徹底した受講生は、コードへの理解が深まる速度が上がりました。良質なサンプルコードを読む機会が増えたことが理由の一つだと考えています。一方で使い方が表面的だった受講生には大きな差は出ませんでした。

Q4. 「プロンプトを書く」授業を別途設けましたか?

短いセッション(30分程度)を1回設けました。「良いプロンプトと悪いプロンプト」の比較や、具体化の練習を行いました。このセッションが後の課題でのプロンプト品質に明確に影響しました。

Q5. 今後もカリキュラムに継続して組み込む予定ですか?

はい。「生成→読む→改良→説明する」というフローを定着させることで、AIを使いながらも基礎を鍛えられる授業設計が可能だと確認できました。次のコースでは導入のタイミングとルール設計をさらに改善する予定です。

Q6. 他の講師にも Google Stitch の活用を勧めますか?

「ツールを使うことが目的にならない」設計ができるなら、勧めます。「楽になる」ことと「学べる」ことを切り離さない工夫が必要で、その設計を省くと本末転倒になるリスクがあります。ツール自体より、どう組み込むかの設計の方が重要です。

まとめ

Google Stitch をプログラミングスクールの授業に取り入れた経験をまとめると——

  • 「最初の一歩」への心理的ハードルを下げる効果は実証できた
  • 受講生の反応は二極化——歓迎派と「自分で学べているか」の戸惑い派
  • 「生成後に自分の言葉で説明させる」ルールが理解の担保に有効だった
  • プロンプトを書くこと自体がデザイン言語化の練習になった
  • 学習効果はツールではなく「設計」で決まる

AIが教室に入ってきたとき、問われるのは「ツールを使うか使わないか」ではなく「どう使わせるか」だ。その問いへの答えは、まだ探し続けている。

最新記事
  • カテゴリー
  • 月別
  • Twitter

    ココナラでデザインを依頼する

    7000本の授業が見放題!社会人向けオンライン学習動画【Schoo(スクー)】

    Webデザイン業界特化のレバテック

    定額制で質問し放題【Web食いオンラインスクール】

    関連記事

    最新記事NEW

    CONTACTCONTACT CONTACTCONTACT

    お問い合わせ

    ご意見やお仕事のご依頼などは以下よりご連絡ください。

    情報入力

    内容確認

    完了

      お名前必須

      フリガナ必須

      メールアドレス必須

      お問い合わせ内容