AIと対話しながら学ぶ「バイブコーディング体験」講座が中高生向けに登場
近年、AI技術の進化は目覚ましく、私たちの生活や仕事のあり方を大きく変えつつあります。特に、プログラミングやデザインといったクリエイティブな分野においても、AIは強力なパートナーとなりつつあります。このような時代背景の中、10代向けデジタル人材育成サービス「TechHigher」を運営する株式会社エクシードは、中高生向け「デザイン初級講座」にCanva AIを活用した新しい教材を追加しました。
この新教材「Canva AIでアプリをつくるバイブコーディング体験」は、プログラミングの経験がない中高生でも、AIとの対話を通じて気軽にアプリ開発を体験できる画期的な内容となっています。生成AI時代の新しい学習方法として注目されるこの講座は、どのような学びを提供し、どのような能力を育むのでしょうか。詳しく見ていきましょう。
Canva AIとは？デザインからコード生成までを支援する強力なAIツール
Canva AIとは、オンラインデザインツール「Canva」に搭載されているAI（人工知能）によるデザイン支援機能の総称です。キーワードや文章を入力するだけで、さまざまなクリエイティブな作業を自動でサポートしてくれるのが大きな特徴です。
Canva AIの主な機能としては、以下のようなものが挙げられます。
-
画像・スライド・動画制作: テキストからイメージを生成したり、プレゼンテーションのスライドや動画コンテンツを自動で作成したりできます。
-
文章生成: アイデア出しや文章の推敲、要約など、テキストコンテンツの作成を支援します。
-
コーディング: 今回の教材で中心的に活用される機能で、自然言語で指示を出すだけで、HTML、CSS、JavaScriptなどのコードを生成し、ウェブアプリケーションやシンプルなツールを作成できます。
これらの機能により、デザインやプログラミングの専門知識がなくても、AIの力を借りて自分のアイデアを形にすることが可能になります。特にAIコーディング機能は、言葉で指示するだけでコードが生成されるため、プログラミング学習のハードルを大きく下げるものとして期待されています。
新教材「バイブコーディング体験」の概要：AIとの“コミュニケーション”でアプリを創る
今回追加された新教材は、「AIと対話しながら学ぶ“バイブコーディング体験”講座」と名付けられています。この講座の最大のポイントは、単にAIの操作方法を学ぶだけでなく、AIとの“コミュニケーション”を通じてアプリを作り上げる経験を重視している点です。AIは万能ではなく、的確な指示と調整がなければ意図通りの結果は得られません。この講座では、まさにその「AIとの会話術」を実践的に学ぶことができます。
学ぶのは「AIとの会話術」：3つのポイント
動画教材では、生徒がAIに対して効果的な指示を書くための3つの重要なポイントを学びます。これらは、生成AIを使いこなす上で不可欠なスキルであり、現代社会において非常に価値のある能力と言えるでしょう。
- 目的をはっきり伝える: AIに何かを依頼する際、まず「何を作りたいのか」「誰が使うのか」「どのような雰囲気のデザインにしたいのか」といった目的を明確に伝えることが重要です。漠然とした指示では、AIも最適なアウトプットを生成できません。
- 指示は具体的にする: 目的が明確になったら、次は具体的な指示が必要です。「色」「時間」「用途」など、定量的に記述できる要素は具体的に指定します。例えば、「青っぽい色」ではなく「#3498dbのような明るい青色」といった具体的な表現が求められます。
- 出力を見て“調整”する: AIは一度で完璧な答えを出すとは限りません。生成された結果を注意深く観察し、改善点や修正すべき箇所を見つけ出し、さらに具体的な指示でAIに調整を依頼するプロセスが不可欠です。この「観察力」と「調整力」が、AIを使いこなす上で非常に重要となります。
この3つのプロセスを通じて、生徒はAIと協力して創造的な作業を行うための「指示力」「観察力」「調整力」を自然と身につけることができます。これは、これからの時代に求められる「AIとの共創スキル」の基礎を築くことにつながります。
実際の制作ワーク：「キッチンタイマー」アプリ開発を体験
講座内では、生徒がAIに伝えるプロンプト例を使いながら、具体的なアプリ開発の体験を行います。その題材となるのが「キッチンタイマー」です。身近なツールであるキッチンタイマーを開発することで、AIによるアプリ開発のプロセスをより具体的に理解できます。
ステップ1：プロンプト入力
最初のステップは、AIへのプロンプト（指示文）入力です。生徒は、カウントダウンタイマーのテンプレートを利用し、キッチンタイマーを作成するための指示を入力します。この際、必要な時間範囲（例：1分から60分）、用途（例：料理用）、視覚効果（例：シンプルなデザイン、大きな文字）などを具体的に設定します。
上記画像のように、AIに対して「現代的なデザインを取り入れた魅力的なカウントダウンタイマーを作成します。例として、ミニマルな15分間の瞑想タイマーから始めます。タイマーには、振動するアニメーションと控えめな音のアラートを含めます。太字のタイポグラフィと、落ち着いた青から紫へのグラデーション背景を使用してください。」といった具体的なプロンプトを入力します。さらに、必要な時間範囲、ビジュアルスタイルの設定、希望するタイマー機能、使用用途などを詳細に指示していきます。この段階で、生徒は「目的をはっきり伝える」「指示は具体的にする」というスキルを実践的に学びます。
ステップ2：AIがコードを生成
プロンプトが入力されると、Canva AIはそれに基づいて、HTML、CSS、JavaScriptといったウェブ開発に必要なコードを自動で生成します。このキッチンタイマーの例では、150行以上のコードが一瞬で生成されます。プログラミングの知識がなくても、AIが複雑なコードを生成してくれるため、生徒は「コードを書く」という作業の代わりに「AIに指示する」という新しい形で開発に参加できます。
上記画像は、AIがコードを生成し、タイマーのUIが表示されている様子です。AIとのチャットで「キッチンタイマー、時間、開始・リセットの項目は、円の内側に配置し、時間設定は被らないように最下部にお願いします。」といったレイアウト調整の指示を出すことで、AIがそれに応じた修正を行い、デザインが変化していく過程を体験できます。これにより、生徒はAIがどのようにコードを生成し、指示によってどのように変化するかを視覚的に理解することができます。
ステップ3：ビジュアルとコードを切り替えながら調整
AIが生成したコードやデザインは、必ずしも完璧ではありません。このステップでは、生徒は生成されたビジュアルを確認しながら、必要に応じてAIに修正指示を出します。
例えば、上記画像のように、「秒の文字化け修正」といった具体的なバグ修正指示や、色、フォント、ボタンの位置といったデザインの細かな調整指示を行います。Canva AIのインターフェースでは、バージョン切り替え機能を使って過去の状態と比較したり、生成されたコードを確認したりすることも可能です。この「出力を見て“調整”する」というプロセスを通じて、生徒はAIの生成物を批評し、改善するための具体的な指示を出す能力を養います。これは、単にAIを使うだけでなく、AIを“使いこなす”ために非常に重要なスキルです。
ステップ4：完成作品の紹介
講座の最後には、AIとの対話によって生まれた多様な完成作品が紹介されます。例えば、「オレンジのキッチンタイマーデザイン」や「子ども用のキッチンタイマーデザイン」など、同じ指示文を入力しても、AIの解釈や調整の過程によって異なるバリエーションの作品が生まれることを示します。
上記画像は、完成したキッチンタイマーアプリの一例です。生徒自身が主導権を持ってAIと対話し、作品を仕上げていく学習構造になっているため、単なる操作方法の習得にとどまらず、創造的な達成感を味わうことができます。この成功体験は、今後の学習意欲やデジタル分野への興味を大きく高めることでしょう。
この新教材によって育つ能力：生成AI時代のクリエイティブ・リテラシー
今回の「Canva AI コーディング」講座は、従来のプログラミング学習やデザイン学習では得られなかった、生成AI時代に特化した新しい能力を育むことを目指しています。受講生が身につける主な能力は以下の通りです。
-
AIに意図を伝える“表現力”: 自分のアイデアや要望をAIが理解できる形で言語化する能力です。これは、プロンプトエンジニアリングの基礎となるスキルであり、AIを活用するあらゆる場面で役立ちます。
-
プロンプト設計力（具体化・分解・順序付け）: 複雑なタスクをAIが処理しやすいように、具体的な要素に分解し、適切な順序で指示を出す能力です。これにより、AIの性能を最大限に引き出すことができます。
-
生成物を見て改善点を指示する“批評力”: AIが生成した結果を客観的に評価し、改善すべき点を見つけて具体的なフィードバックをAIに与える能力です。これは、AIの出力を鵜呑みにせず、より質の高い成果物を作り出すために不可欠です。
-
デザインとコードの関係性の理解: ビジュアルデザインがどのようにコードによって実現されているかを理解することで、デザインと技術の両面から物事を捉える視点が養われます。
-
AIと共に作品を作る“成功体験”: AIを単なるツールとしてではなく、共創のパートナーとして活用し、実際に作品を完成させることで得られる達成感は、生徒の自己肯定感を高め、さらなる学習意欲につながります。
これらの能力は、これからの社会でデジタル人材として活躍するために不可欠な「クリエイティブ・リテラシー」の中核をなすものです。AIの進化に伴い、単なる知識や技術の習得だけでなく、AIと協働し、AIを使いこなす能力がますます重要になってきます。
「総仕上げ教材」としての位置づけ：基礎スキルをAI活用力へ昇華
本単元は、TechHigherのデザイン初級講座の最終章として位置づけられています。これまでに生徒が学んできたレイアウト、配色、フォント、構図といったデザインの基礎スキルを、「AIに説明して形にする力」へと統合する役割を担っています。
例えば、色彩の理論を学んだ生徒は、その知識を活かしてAIに「温かみのあるオレンジ色を基調としたデザインにしてください」と指示できるようになります。また、レイアウトの原則を理解していれば、「要素は中央に配置し、余白を広めにとることで、すっきりとした印象にしてください」といった具体的な指示を出すことができるでしょう。
このように、基礎知識をただ学ぶだけでなく、それをAIに正しく伝える能力へと昇華させることで、生徒はより実践的なスキルを身につけることができます。これは、学んだ知識を現実世界の問題解決に応用する「探究学習」や、科学、技術、工学、芸術、数学を横断的に学ぶ「STEAM教育」の理念とも合致するものです。
Canva AIでアプリを作る単発講座を静岡・袋井で開催
この新しい教材の魅力をより多くの人に体験してもらうため、株式会社エクシードは静岡県袋井市で、新教材の講座を実際に体験できる90分のワークショップを開催します。プログラミング未経験者でも分かりやすいステップで構成されており、学生から大人まで、生成AIを使ったものづくりに挑戦したい方に幅広く参加を呼びかけています。
生成AIに興味はあるけれど、何から始めて良いか分からないと感じている方にとって、このワークショップは生成AIを活用したクリエイティブな体験の第一歩となるでしょう。
Canva AI教材に関するお問い合わせ：ライセンス提携校向け説明会
今回のCanva AIでアプリを作る「Canva AIでバイブコーディング」の動画教材は、TechHigherのデザイン初級コースの一部として、ライセンス提携校に提供されています。
学校や教育機関で、この革新的なAI教育プログラムの導入に興味がある場合は、ライセンス提携に関する説明会に参加することが推奨されています。説明会では、教材の内容や導入メリット、サポート体制などについて詳しく聞くことができます。
-
説明会開催日時:
-
2026年1月20日 (火) 10:00～12:00
-
2026年2月4日 (水) 14:00～16:00
-
デジタル人材育成の最前線で、AIを活用した新しい教育プログラムを検討している教育関係者にとって、この説明会は貴重な情報収集の機会となるでしょう。
まとめ：生成AI時代を生き抜くための「共創スキル」を身につける
株式会社エクシードが提供する「Canva AIバイブコーディング体験」講座は、中高生が生成AI時代に求められる「指示力」「観察力」「調整力」といった共創スキルを実践的に学ぶための画期的な機会を提供します。
プログラミングの専門知識がなくても、AIとの対話を通じてアプリ開発を体験できるこの講座は、デジタル技術への興味を引き出し、将来のキャリア選択にも良い影響を与えることが期待されます。単なるツールの操作方法を学ぶだけでなく、AIをパートナーとして活用し、自分のアイデアを形にする喜びを知ることは、これからの社会で活躍するための大きな糧となるでしょう。
AI技術の進化は止まることなく、今後ますます多くの分野でAIとの協働が求められるようになります。このような時代において、Canva AIを活用した「バイブコーディング体験」講座は、次世代を担う若者たちが、AIと共に未来を創造していくための重要な一歩となるに違いありません。AIとのコミュニケーション能力を磨き、新しいものづくりに挑戦したい中高生にとって、この講座はきっと刺激的で価値ある学びの場となるでしょう。
