2025-06-30 10:16

【Canva】AIコード生成がすごい!【Magic Design】

canvaのAI機能、Magic Designの コード生成(コーディング)がすごかったです!
素人でもあっという間にゲームができました!
完成した子供向け物々交換交換ゲームはこちら👇
https://yumehiyokoukangame.my.canva.site/dagrxfr8uj4

#Canva #AI #MagicDesign
#コーディング  #ゲーム

【CanvaでAIゲーム&タイマーを作ってみた!初心者の挑戦記録】

こんにちは、夢野ひよこです。この放送では、AIを活用して子ども向けワークや教材を作り、ゼロから起業を目指すママの奮闘記をお届けしています。

今回は、Canva Proの「AIマジックデザイン機能」を使って、簡単なゲームやタイマーを実際に作ってみた体験談をシェア!

「ぶつぶつ交換ゲーム」「デジタルタイマー」「ロードマップ表示」など、HTMLやCSSの知識ゼロでも形にできた方法や注意点をお話ししています。

Canva初心者さん、子育て×教育に興味がある方、生成AIで何か作ってみたい方におすすめです!

#Canva #AI活用 #子ども教材 #プチ起業 #生成AI #マネーリテラシー

---
stand.fmでは、この放送にいいね・コメント・レター送信ができます。
https://stand.fm/channels/685a3d40ead48393256eaff4

サマリー

このエピソードでは、キャンバーのAIマジックデザインを利用したコード生成の体験について語られています。特に、タイマーやゲームの作成が簡単で面白いという点が強調され、AIがもたらす利便性について詳しく説明されています。

AIマジックデザインの紹介
みなさんこんにちは、夢野ひよこです。この番組、おやこ間違えたゼロからスタート
AIおやこ起業チャレンジではですね、タイトルを新しく付け直したところなので、モダモダしております。
この番組はですね、私夢野ひよこはですね、スキルも知識もない、血がない、
ただのヒラシャインワーマーでございます。そんなね、私がですね、AIを使って自分自身がね、学んだ
子供に教えたいネットリテラシーだったり、ネットリテラシーもそうですけど、そういったね、
親子で学びたいワークを作り、そしてそれを販売して起業チャレンジしてみようというね、そういった番組でございます。
はい、今日はですね、キャンバーの有料コンテンツ、キャンバーじゃない、AIマジックデザインだったかな、
キャンバーのAIマジックデザインの行動作成がすごいっていう話をしていきたいと思います。
まだキャンバーもね、初心者の初心者でございます。なんとなく使い方というかね、触ってみてっていう感じで、
今ね、新しくアカウントを作って、ちょっとキャンバーをね、使い始めたんですけども、正直ね、今のところ使いこなせていないんですよね。
キャンバープロっていうね、ちょっと有料のやつが7日間ね、使えるということで、ちょっとね、その機能をね、いろいろAIでできたりする機能とかがたくさんあるんですよね。
画像生成だったりとか文章生成はそうなんですけども、その辺はね、チャットGPTとかDEMIとかその辺でもやってもらえるので、
ゲームとタイマーの作成
そこまでなんだろうな、すごい、キャンバーだからこれがすごいっていうのはあんまり感じないんですけれども、
ちょっとね、生成AIの中でコードができるっていう、これがね、すごかったんですよね。
どうすごいかっていうと、ATMLとかCSSとかWebを作る際に作るプログラミングとかコードですね、
があるんですけれども、そういうのをね、自動で言葉でね、例えばこんなタイマーを作ってっていうね、
そういうのを入れると、物の数分で、ゲームだったりとかタイマー機能みたいな、そういうのができちゃうんですよね。
それがとてもすごくてですね、今回ね、タイマーとかいろいろプラスさせていただきました。
一番最初に作ったのがゲームですね。子供向けのブツブツ交換ゲーム。
これちょっとね、マネーリテラシーの勉強をするのに、ワークとかもいいんですけれども、
実際ね、ゲームっていう感じでやってみたらいいんじゃないかなっていうのを思いつきまして、
ただね、ゲーム作るってなると、ちょっとやっぱりハードルが高いよなって思ってたんですよね。
今ね、結構簡単にゲームを作れる、そういうね、スプラットとか子供向けのプログラミングとかあるんで、
そういうのを使えばできるかなと思ってたんですけど、やっぱりそういうのを作るのもまあまあ、
一応素材とか揃えたりとか、時間がかかるんじゃないかなって思ってたんですよ。
それがですね、このキャンバのAIマジックデザインの行動生成機能を使うと、本当にね、ものの一瞬でできました。
詳しいやり方はノートに載せようかと思うんですけれども、
その行動生成のAIマジックデザインの方に、ブツブツ交換ゲームを作りたいですと。
動物とブツブツ交換をするということで、リンゴとかオレンジとかそういうのを持っていて、
自分の持っているものと交換して、自分が欲しいものを手に入れたらゴールです、みたいなそんな形の文章を入れてお願いしました。
すると、なんとゲームができたんです。
これ本当にすごくて、そのうち微調整は段々続けて、例えば最初に入れた情報から作ってもらったんですけれども、
それから漢字が使われていたりすると、うちの子まだ1年生なんで漢字は読めないので、それをひらがなに変えてくださいとか、
あとはなるべくスクロールせずに画面上で楽しめるゲームにしてくださいとかね。
本当に指示することはとても少なかったんですけれども、
それで、すごい凝ったゲームというかクオリティの高いゲームとかビジュアルのものを作るのはまだ難しいかもしれないんですけど、
本当に簡単なゲームを作るんだったら全然これでOKだなって思ったんですよね。
実際に子供にもやってもらって、単純さんですぐ飽きちゃったんですけど、
でも落雷があって、一時期インターネットの重いサイトが開けなかったことがあったんですよ、昨日ね。
その時にこれやるって言って、暇つぶしにやってくれましたね。
そんな感じで本当に簡単に自分が思い描いたものができました。
他にもですね、タイマーを作りました。
これもすごい単純で、黒背景にデジタルのタイマーを作ってもらいました。
これね、娘が小学校で先生が使っているタイマーが残り数になると赤字で表示されててすごい単純なんですけど、
コード生成の注意点
娘がそれが気に入っているとか、学校と同じようなやつだとはかどるかなって思って、やり方がすごい気に入りやすいし分かりやすいかなって思って、
それが欲しいなって思ってたんですけど、黒字に白の文字でね、デジタルタイマーで、残り10%になったら赤字で表示してくださいっていうコードを入れて作りました。
これもね、すぐに出来上がって、すごいですね。
あともう一個ね、キャンバーというか生成系のものですね。
ちょっと不便だなって思ってたのは、画像とかもそうなんですけれども、文字が苦手なんですよ、画像生成は。
キャンバーで例えばロードマップとかをお願いするとか、メモの要約みたいなのも、
ワークもそうですね、ワークもそうなんですけれども、こういう内容で作ってくださいって言うと、
英語表記になったりとか、日本語でお願いしますって書いても、日本語も合ってるところは合ってるんですけど、漢字とか特に苦手で、
なんか謎の文字が生成されていることがとても多いんですよね。
なんでちょっとね、使えないなって思ってたんですけど、これもね、コードの方で書き出すとね、ちゃんとやっぱ日本語が反映されるんですよね。
なんで、なんだろうな、そのウェブサイトみたいな感じでの表示にはなるんですけども、
こういったデザインとかはできないんですけれども、文字ベースでロードマップ作るとか、あとは何作った、そういう目標達成シートみたいな、
そういうのとかも、このコードで作った方が簡単だって思ったんですよね。
ロードマップだったかな、お願いして作ってもらったら、タブ切り替えの3ページくらいのウェブページみたいな感じですね。
出来上がって、それでね、ウェブで公開ってすると、もうなんかできてるみたいな、その画像っていうか表示されたものっていうのは、
やっぱウェブで公開が一番いいかなって思いますね。
他のね、ドキュメンテーションとかホワイトボードとプレゼンテーションから書き出しはできるんですけれども、
プレゼンテーションはまだね、コードのデータが残ってるのかな、操作できた、ホワイトボードどっちか忘れたんだけど、
移動とか、例えばゲームだったらクリックとかって変化が見られるんですけれども、
もうドキュメンテーションとかになっちゃうと、プレゼンテーションかなとなっちゃうと、もう完全に画像データになってしまうので、
叩き台としてはいいかもしれないんですけれども、何も操作できないっていうことなので、ウェブページが多分一番書き出しとしては使いやすいのかなって思います。
あとね、ウェブページに関してね、1個注意しなきゃいけないことなんですけども、
一番最初にウェブページの名前をね、ドメイン名を決めれるんですよね。
私それよくわかってなくて、最初のゲームだから、なんか交換ゲームみたいな名前にしたんですよね。
そしたらそれってドメイン名なんで、自分の持っているウェブサイト全てのホームみたいな感じですよね。
住所というか名前みたいなもんなんで、その後ろは変わるんですけれども、一番最初に付けてドメイン名は変わらないので、
有料で追加することはできるみたいなんですけども、なので最初にやるときはそちらの名前だけは十分考えた上で、
今後も使用されるという形で作られた方がいいと思います。
みなさま失敗なさらぬようにということで、本当にコード生成、プロでしか無料版ではなかなか使えないんですけれども、
これすごく良かったんで、共有させていただくと言いましたね。良かったよというお話でした。
ということでね、みなさま聞いていただきありがとうございました。またねー。
10:16

コメント

スクロール