AIと話しながらアプリ開発!中高生向け「バイブコーディング体験」講座がスタート

教育・学習

AIと対話しながら学ぶ“バイブコーディング体験”講座

Canva AIで、アプリをつくる。

10代向けのデジタル人材育成サービス「TechHigher」を運営する株式会社エクシードは、中高生向けのデザイン初級講座に、Canva AIを使った新しい教材を追加しました。この教材により、プログラミングの経験がなくても、AIに言葉で指示(プロンプト)を出すだけで、アプリ開発を体験できるようになります。

Canva AIとは

Canva AIは、デザインツールCanvaに組み込まれたAI(人工知能)によるデザイン支援機能です。キーワードや文章を入力するだけで、以下のような様々なものを作り出すことができます。

  • 画像やスライド、動画の制作

  • 文章の生成

  • プログラミングコードの生成

今回の新しい教材では、特にAIによるコーディング機能を中心に活用します。

新教材のポイント:AIとの“コミュニケーション術”を学ぶ

この新しい教材では、AIとの「コミュニケーション」を通じてアプリを作り上げる経験を大切にしています。動画教材では、生徒がAIに指示を出す際に、以下の3つの点を意識する方法を学びます。

  • 目的をはっきり伝える: 「何を作るのか」「誰向けか」「どんな雰囲気か」を最初に明確にします。

  • 指示は具体的にする: 曖昧な言葉ではなく、「色・時間・用途」など、はっきりと数で示せるように記述します。

  • 出力を見て“調整”する: AIは一度で完璧な答えを出さないため、生成された結果を見て細かい部分を修正するよう指示します。

この学習プロセスを通じて、生徒はAIと一緒にものを作り出すための「指示力」「観察力」「調整力」を自然と身につけます。

実際の制作ワーク:「キッチンタイマー」

講座の中では、生徒がAIに伝えるプロンプト(指示文)の例を使いながら、キッチンタイマーをデザイン・開発する体験を行います。

ステップ1:プロンプト入力

カウントダウンタイマーのテンプレートを使って、キッチンタイマーを作成します。必要な時間範囲や見た目のスタイル、使う場面などを設定する指示を入力します。

Canva AIのインターフェース画面。ユーザーが現代的なカウントダウンタイマーを作成するためのプロンプトを入力しており、チャット履歴には過去のAIデザイン依頼が表示されています。

ステップ2:AIがコードを生成

Canva AIが、150行以上のHTML/CSS/JavaScriptコードを自動で生成します。

Canva AIのインターフェースで、ユーザーがAIアシスタントとカウントダウンタイマーのデザインについて対話している画面です。秒の表示が文字化けしていた問題が修正され、コードスニペットと完成時のCSS/JS設定も表示されています。

ステップ3:ビジュアルとコードを切り替えながら調整

生成されたアプリのデザインやコードを見ながら、以下のような調整を行います。

  • 過去の状態と比較して、変更点を確認します。

  • 「秒の文字化け修正」といった細かい修正をAIに指示します。

  • 色やフォント、ボタンの位置などの追加調整を行います。

AIアシスタントを使ってカウントダウンタイマーのUIをデザインしている画面です。左側にはAIとのチャットでレイアウト調整の指示が交わされており、右側には「キッチンタイマー」と表示されたオレンジ色のタイマーUIが表示されています。

ステップ4:完成作品の紹介

講座では、AIとの対話によって生まれた様々なバリエーションの作品を紹介します。例えば、オレンジ色のキッチンタイマーデザインや、子ども向けのキッチンタイマーデザインなどです。同じ指示文を入力しても、生成結果が全く同じになるとは限らないため、生徒自身が主導権を持って作品を完成させていく学習の仕組みになっています。

オレンジ色のグラデーション背景に表示されたデジタルキッチンタイマーのUI

この新教材で育つ能力

今回の「Canva AI コーディング」講座を通して、受講生は以下の能力を身につけます。

  • AIに自分の意図を正確に伝える「表現力」

  • AIへの指示(プロンプト)を設計する力(具体的に考え、分解し、順序立てる力)

  • AIが作ったものを見て、改善点を指示する「批評力」

  • デザインとコードがどのように関係しているかの理解

  • AIと一緒に作品を作り上げる「成功体験」

従来の「操作方法を学ぶデザイン初級」では得られなかった、現代社会に合ったクリエイティブな能力を育成します。

「総仕上げ教材」としての位置づけ

この単元は、デザイン初級講座の最終章として位置づけられています。これまでに学んだデザインの基礎スキル(レイアウト、配色、フォントなど)を、「AIに正しく説明して形にする力」へと結びつける役割を担います。

Canva AIでアプリを作る単発講座を静岡・袋井で開催

この新しい教材を実際に体験できる90分間のワークショップが開催されます。プログラミング未経験者にも分かりやすい内容で、学生から大人まで、生成AIを使ったものづくりに挑戦したい方が幅広く参加できます。

Canva AI教材に関するお問い合わせ

今回のCanva AIでアプリを作る「Canva AIでバイブコーディング」の動画教材は、TechHigherのデザイン初級コースの一部として、ライセンス提携校に提供されています。

ライセンス提携に興味がある方は、説明会に参加できます。

  • 2026年1月20日 (火)10:00~12:00

  • 2026年2月4日 (水)14:00~16:00

タイトルとURLをコピーしました