スキルアップ wpmaster 2025年12月26日 0 コメント

Canva AIを活用した新教材「バイブコーディング体験」講座、中高生向けデザイン初級講座に追加

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

「TechHigher」の詳細はこちら: https://www.techhigher.club/

Canva AIとは

Canva AIは、デザインツールCanvaに搭載されているAI（人工知能）によるデザイン支援機能です。キーワードや文章を入力するだけで、以下の多様なアウトプットを自動で生成できる点が特徴です。本教材では、特にAIコーディング機能を中心に活用します。

画像・スライド・動画制作
文章生成
コーディング

追加された新教材の概要

今回追加された単元では、AIとの「コミュニケーション」を通じてアプリを作り上げる経験を重視しています。動画教材では、生徒がAIに対して以下の3点を意識して指示を書く方法を学習します。

目的をはっきり伝える: 「何を作るのか」「誰向けか」「どんな雰囲気か」を最初に明確にする。
指示は具体的にする: 曖昧な言葉ではなく、「色・時間・用途」など定量的に記述する。
出力を見て“調整”する: AIは一度で完璧な答えを出さないため、生成された結果を見て細部を修正する。

このプロセスを通じて、生徒はAIと協力して作品を生み出すための「指示力・観察力・調整力」を自然に身につけることが期待されます。

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

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

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

カウントダウンタイマーのテンプレートを使用し、キッチンタイマーを作成します。必要な時間範囲、用途、視覚効果を設定するようAIに指示します。

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

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

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

生成されたデザインやコードに対して、以下のような調整を行います。

バージョンを切り替えて過去の状態と比較する。
「秒の文字化け修正」など、細部の修正を指示する。
色・フォント・ボタン位置などの追加調整を行う。

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

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